Для добавления продуктов в корзину в корзину в корзину в корзину будет параболическая анимация, сообщая пользователю, что операция успешна и расположение корзины. Аналогичные эффекты необходимы в бизнесе. Запишите меморандум процесса реализации и запустите демонстрацию.
Сначала я не думал об использовании функции параболы для этого, и я забыл, что была такая функция. Я думал, что парабола, по сути, имеет скорость справа и вверх направлениям (насколько демонстрация выше), скорость справа является равномерной, скорость вверх уменьшается, а затем увеличивается обратное направление. Левая и верхняя значения элемента меняется со временем, а траектория движения элемента - парабола. Эта идея не универсальна, и реализация относительно сложна, поэтому я сдался.
Позже я ссылался на реализацию параболической функции Чжана Синксу и улучшение причала дурака, и внезапно осознал это.
Я снова посмотрю на эту идею. Параболическая функция y = a*x*x + b*x + c, где A не равна 0, A, B и C являются постоянными. x и y являются координатами параболы, проходящей через; A определяет направление открытия параболы, с открытием A> 0 вверх и открытием <0 вниз. Очевидно, что отверстие параболы Tmall вниз, а также определяет размер отверстия. Чем меньше значение, тем больше отверстия, тем плавнее парабола и наоборот. Следовательно, значение A может быть настроено, что эквивалентно знанию двух координат (начальная точка и конечная точка, то есть элемент левой и верхней значения). Найдя два неизвестных числа, вы можете научиться использовать математику средней школы, двоичные квадратичные уравнения.
y1 = a*x1*x1 + b*x1 + c
y2 = a*x2*x2 + b*x2 + c
A известно, что замена двух известных координат [x1, y1] [x2, y2] может привести к значениям B и C, и присутствует соответствующая связь между x и y.
Независимо от того, является ли отверстие параболы вверх или вниз, скорость движения элемента в горизонтальном направлении остается неизменной, то есть левое значение изменяется с постоянной скоростью. Вы можете установить время перемещения параболы t. Скорость элемента в горизонтальном направлении равен SpeedX = (x2 - x1)/t. Установите таймер, который выполняется каждые 30 мс. Левое значение после каждого раз, когда выполняется таймер, является текущим x = speedx * Таймер был выполнен. Замените функцию y = a*x*x + b*x + c, чтобы получить верхнее значение. Поскольку весь этот расчет основан на переводе координаты начальной точки на начало координат (конечная точка также переводится соответствующим образом), когда, наконец, устанавливает значение левого/верхнего движущегося элемента, необходимо добавить начальное значение левого/верхнего элемента отправной точки. Для получения подробной информации, пожалуйста, проверьте демо -код в F12.
Основной код:
/** * JS Parabola Animation * @param {[object]} origin [start element] * @param {[object]} grape [alement inement] * @param {[object]} element [element to move] * @param {[number]} a parabola Radian] * @param {number]} [animation execurit Выполнение Parabola завершено] */ var parabola = function (config) {var b = 0, интервал = 15, timer = null, x1, y1, x2, y2, ougnex, Originy, diffx, diffy; this.config = config || {}; // Start Point this.origin = $ (this.config.origin) || null; // конечная точка this.target = $ (this.config.target) || null; // элемент движения this.element = $ (this.config.element) || null; // curve radian this.a = this.config.a || 0,004; // Время движения (ms) this.time = this.config.time || 1000; this.init = function () {x1 = this.origin.offset (). y1 = this.origin.offset (). Top; x2 = this.target.offset (). y2 = this.target.offset (). Top; Originx = x1; Originy = y1; diffx = x2-x1; diffy = y2-y1, speedx = diffx/this.time; // Известно, что в соответствии с функцией параболы y = a*x*x + b*x + c, начальная точка параболы переводится в координатное происхождение [0, 0], и конечная точка переводится соответственно. Затем парабола проходит через начало [0, 0] и получает C = 0; // После перевода конечной точки она получается: y2 -y1 = a*(x2 - x1)*(x2 - x1) + b*(x2 - x1) // i.e. diffy = a*diffx*diffx + b*diffx; // Значение постоянной B можно найти B = (diffy - this.a*diffx*diffx)/diffx; this.element.css ({left: x1, top: y1}) вернуть это; } // Определить метод анимации this.movestyle = function () {var movestle = 'position', testdiv = document.createElement ('div'); if ('Placeholder' в testDiv) {['' ',' ms ',' moz ',' webkit ']. foreach (function (pre) {var transform = pre + (pre?' t ':' t ') +' ransform '; if (transform in testdiv.style) {movestyle = transform;}}} return Movestyle; } this.move = function () {var start = new date (). getTime (), movestyle = this.movestyle (), _this = this; timer = setInterval (function () {if (new Date (). getTime () - start> _This.Time) {clearInterval (timer); _This.Element.css ({left: x2, top: y2}) typeof _this.config.callback == 'function' && _this.config.callement. } x = speedx*(new Date (). getTime () - Start); Window.RequestAnimationFrame (_This.Element [0] .style [Movestle] = 'transtate ('+x+'px,'+y+'px)'); } this.init (); }Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.