Представляем Вам интересную библиотеку, которая позволяет создавать JavaScript анимацию в Cocoa-стиле.
Сценарий основывается на ES6-Proxy. Анимация блоков с помощью данного плагина – это попытка анимировать элементы декларативным способом.
Использование:
Подключаем between.js к проекту
1 |
<script src="between.js"></script> |
Задаем свойство анимации:
1 2 3 |
Between.block(1000 /* duration in ms */, Between.easing.Bounce.Out /* Easing function */, (obj) => { // Animate anything in `obj` }, obj); |
Полный перечень функций воспроизведения анимации представлен в репозитории автора.
Примеры:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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 */); |
Или давайте поменяем положение двух элементов, просто заменив позиционирование:
1 2 3 4 5 6 |
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 можно по ссылкам выше.