Between.js — создаем анимацию в стиле Cocoa Animation

Представляем Вам интересную библиотеку, которая позволяет создавать JavaScript анимацию в Cocoa-стиле.

Сценарий основывается на ES6-Proxy. Анимация блоков с помощью данного плагина – это попытка анимировать элементы декларативным способом.

Использование:

Подключаем between.js к проекту

<script src="between.js"></script>html

Задаем свойство анимации:

Between.block(1000 /* duration in ms */, Between.easing.Bounce.Out /* Easing function */, (obj) => {
// Animate anything in `obj`
}, obj);javascript

Полный перечень функций воспроизведения анимации представлен в репозитории автора.

Примеры:

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 */);javascript

Или давайте поменяем положение двух элементов, просто заменив позиционирование:

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 elementsjavascript

Скачать исходные файлы библиотеки для анимации на JavaScript можно по ссылкам выше.