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

13.02.2017 weatherless JavaScript » Анимация » #336

Смотреть Источник Скачать

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

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

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

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

&lt;script src="between.js"&gt;&lt;/script&gt;

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

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

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

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

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