Какие абстракции подходят для сложных анимаций?

Поскольку статья IBM запрещает использование ее образца кода, Я рекомендую вам также прочитать статья Бена Надела, в которой FSM используется для реализации виджета раскрывающегося меню.

Бен пишет:

Я видел, как конечные автоматы могут брать большие сложные задачи и разбивать их на более мелкие, гораздо более управляемые состояния. Я даже пытался применить этот образ мышления к привязка и отключение обработчиков событий в JavaScript. Но теперь, когда я начинаю более комфортно работать с конечными автоматами и, в частности, с переходами между состояниями, я хотел попробовать применить это мышление к виджету связного пользовательского интерфейса (UI).

Вот немного урезанная версия его кода:

var inDefault = {
    description: "I am the state in which only the menu header appears.",
    setup: function() {
       dom.menu.mouseenter(inHover.gotoState);
    },    
    teardown: function() {
         dom.menu.unbind("mouseenter");
    }
};

var inHover = {
    description: "I am the state in which the user has moused-over the header of the menu, but the menu has now shown yet.",
    setup: function() {
        dom.menu.addClass("menuInHover");
        dom.menu.mouseleave(inDefault.gotoState);
        dom.header.click(
            function(event) {
                event.preventDefault();
                gotoState(inActive); 
            }
       );    
    },
    teardown: function() {
        dom.menu.removeClass("menuInHover");
        dom.menu.unbind("mouseleave");
        dom.header.unbind("click"); 
    }    
};

var inActive = {
     description: "I am the state in which the user has clicked on the menu and the menu items have been shown. At this point, menu items can be clicked for fun and profit.",

    setup: function() {
        dom.menu.addClass("menuInActive");
        dom.stage.mousedown(
            function(event) {
                var target = $(event.target);
                if (!target.closest("div.menu").length) {
                    gotoState(inDefault); 
                } 
            }
       );
       dom.header.click(
            function(event) {
                event.preventDefault();
                 gotoState(inHover);

            }
       );
       dom.items.delegate(
            "li.item",
            "click",
            function(event) {
                console.log(
                    "Clicked:",
                    $.trim($(this).text())
               );

            }
       );
    },    
    teardown: function() {
        dom.menu.removeClass("menuInActive"); 
        dom.stage.unbind("mousedown", inDefault.gotoState);
        dom.header.unbind("click"); 
        dom.items.undelegate("li.item", "click");
    }
};

Обратите внимание, что обработчики событий привязываются при входе в состояние и отключаются при выходе из этого состояния.

Самым большим преимуществом конечных автоматов при решении этой проблемы является то, что они делают состояние явным.

Хотя каждая анимация может вносить вклад в состояние охватывающей системы, ваша система никогда не может находиться в двух состояниях одновременно или вообще не находиться в состоянии, а отладка становится почти тривиальной, потому что вы всегда можете увидеть, в каком состоянии находится система (или каждая подсистема), учитывая ваше состояние, дизайн имеет смысл.

Кроме того, заставляя вас явно разрабатывать состояния, использование конечных автоматов исключает возможность того, что вы не думаете о конкретной комбинации состояния / действий. Не существует «неопределенного поведения», потому что каждый переход является явным и является частью вашей конструкции конечного автомата.

Если вы дочитали до этого места, возможно, вас заинтересует Аддитивные анимации (другое введение) . Теперь они используются по умолчанию в iOS 8 и уже несколько лет поддерживаются Кевином Даути.

Это другой подход, при котором, сохраняя состояние системы, вы позволяете нескольким (даже противоположным) анимациям быть активными одновременно. Это может дать вам сумасшедшие результаты, но это интересная концепция.

Основная идея состоит в том, чтобы не определять анимацию как нечто, идущее от абсолютного значения A к абсолютному значению B, и вместо этого определять анимацию относительно их окончательного значения (каждая анимация идет от -Delta до 0). Это позволяет вам легко комбинировать несколько анимаций, суммируя их относительные значения в каждый момент времени, и избегать всплесков, вызванных разворотами или отменами:

_{(источник: ronnqvi.st)}

Чтобы увидеть пример аддитивной анимации, не зависящий от платформы barebone-фреймворка, ознакомьтесь с модулем аддитивной анимации alexkuz (демо).

Если вы дочитали до этого места, значит, вас действительно интересует анимация! В настоящее время меня заинтриговал подход response-state-stream. Он предлагает выражать анимацию как ленивую последовательность состояний. Это открывает множество возможностей, таких как выражение бесконечных анимаций, постепенное добавление и удаление преобразований из анимаций и т. Д.

Если вы хотите прочитать одну статью об анимации, я предлагаю это Мысли об анимации пользователя Cheng Lou.