Как я могу добавить импульс / инерцию для перетаскивания с помощью CSS-преобразования?
Я пытаюсь добавить эффект импульса / инерции к перетаскиванию увеличенного изображения (как в этом примере или точно так же, как это делает iOs), и мне тяжело с этим.
Некоторое время я боролся с этим и нашел несколько полезных ресурсов (таких как этот), но большинство решений включают jQuery, и я бы предпочел придерживаться простого javascript, без каких-либо интегрированных сред.
Я работаю над кодом изображения HTML5 / CSS3 со всеми стандартными функциями: масштабирование двойным касанием, масштабирование с помощью пинча, перетаскивание, панорамирование и т. Д., И все это делается с помощью преобразования преобразования CSS3 в сочетании с масштабированием. Ex.
transform: translate(100px, 100px);
transition: 100ms;
Я посмотрел на то, как это делают другие, и он включает в себя последовательную анимацию свойств left/right с уменьшением продолжительности / расстояния, чтобы создать своего рода эффект упрощения.
Я попытался воссоздать его, используя переводы, используя своего рода рекурсивную функцию (вы можете увидеть скрипку здесь (работает с браузерами webkit), пожалуйста, не обращайте внимания на стиль кодирования, это не было лучшей практикой, просто демонстрация). В этом случае анимация не все плавно, последовательные переводы не соединяются.
У меня есть несколько базовое понимание этого принципа, и я взглянул на некоторые алгоритмы, доступные в Интернете, но я просто не могу понять, как я могу добиться этого, используя переводы CSS.
Первая часть перетаскивания, выполненная с помощью перемещения мыши / касания, перемещает изображение курсором / пальцем, но непрерывный перевод после окончания не является... непрерывным, он похож на отдельную анимацию после первой и не похож на естественную эффект импульса / инерции.
2 ответа
Один метод использует animation-timing-function:Я считаю, что в настоящее время требуются префиксы поставщиков. У вас есть выбор использования ease-in, ease-out, ease-in-out, или же cubic-bezier, Последний использует визуализацию функции в 2D-пространстве; проще настроить его с помощью генератора. Мой личный фаворит - Ceaser.
В конце концов мне удалось найти что-то полезное, это все еще в стадии разработки, но результаты выглядят многообещающими.
Отправной точкой стал этот пост, сделанный Арией Хидаят, в частности его " Кинетический свиток", а также пост, сделанный Джо Хьюиттом. Кроме того, эта старая версия его кода казалась более легкой для понимания и понимания основной концепции, хотя самая последняя должна быть лучше.
В основном, вместо того, чтобы соединять различные переводы с ненулевой длительностью и синхронизировать их синхронизацию и ускорение, этот метод использует большое количество переводов с нулевой продолжительностью, которые вызываются очень часто.