Представляем Вам интересную библиотеку, которая позволяет создавать JavaScript анимацию в Cocoa-стиле.
Сценарий основывается на ES6-Proxy. Анимация блоков с помощью данного плагина – это попытка анимировать элементы декларативным способом.
Использование:
Подключаем between.js к проекту
<script src="between.js"></script>Задаем свойство анимации:
Between.block(1000 /* duration in ms */, Between.easing.Bounce.Out /* Easing function */, (obj) => {
// Animate anything in `obj`
}, obj);Полный перечень функций воспроизведения анимации представлен в репозитории автора.
Примеры:
var square = document.getElementById("my_div").style;
// The code inside the block only run once.
// Here `square` in the original one wrapped by a Proxy
Between.block(1000, Between.easing.Bounce.Out, (square /* Proxy wrapped element */) => {
/*
This block define the "end values".
Between will tween them from their initial values to the end values described here
*/
/* Set the end value for top and width. */
square.top = "0px";
square.width = "150px";
/*
Add 200 to the initial left value.
Here, it's the same than doing `square.left = "250px"`
*/
square.left += 200;
}, square /* original element */);
Или давайте поменяем положение двух элементов, просто заменив позиционирование:
Between.block(3000, Between.easing.Elastic.Out, (square_one, square_two) => {
// Swap the left of the two element using destructuring array.
[square_one.left, square_two.left] = [square_two.left, square_one.left]
}, square_one, square_two); // Give any number of elements
Скачать исходные файлы библиотеки для анимации на JavaScript можно по ссылкам выше.