Использование библиотеки анимации Javascript VS динамически создает <style> теги для ввода в заголовок

Question

Мы создаем сложное одностраничное приложение, которое позволяет пользователю создавать анимации на некоторых виджетах, например, кнопку виджета можно анимировать слева направо и измените его непрозрачность в течение x секунды. Также другой виджет может влиять на анимацию другого, делая анимацию транзакций поверх другой.

Анимация может быть определена пользователем и запущена приложением JavaScript довольно сложным образом. Анимации можно редактировать в нескольких комбинациях, а дата анимации создается с использованием подхода ООП. Анимация может быть отменена, приостановлена, сыграна.

Что касается технологии анимации мы оцениваем в настоящее время два варианта:

01 - Использование CSS Transition, создавая необходимые CSS классов динамически и инъекционные метки в заголовке страницы. Анимации будут добавлены в дом, и классы переключения будут обработаны.

02 - Использование JS-библиотеки, такой как Velocity.js или Greensock, анимация DOM соответственно с использованием JS, только с использованием встроенного стиля.

03 - API веб-анимации (и анимация CSS), мы пробовали этот подход, но мы обнаружили определенное ограничение.

Я хотел бы ваше мнение:

подхода 01:

• управляет в JS в сроке программного управления.
• Можно ли динамически изменять свойство в теге, не вызывая мерцания и не используя сложное регулярное выражение?
• Знаете ли вы о какой-либо проблеме с динамическим добавлением тегов в заголовок, например, мерцание.
• Вы обнаружили, что CSS Transition неэффективна, когда несколько анимаций работают в параллелях.
• Знаете ли вы какой-то проект, используя этот подход?
• Что касается управления анимацией, например, реверсом, остановкой, паузой.

подход 02:

• Как вы думаете, этот подход обычно более управляемым с помощью JS?
• Любые CONS на этом, который сделал бы выбор, выбрали подход 01 вместо этого?
• Как насчет управления анимацией?

Любая обратная связь очень приветствуется.

Некоторые полезные статьи я прочитал

https://davidwalsh.name/css-js-animation

Answer 1

Поскольку у вас есть сложные анимации, которые можно манипулировать в середине исполнения, сделайте это с JS, а не CSS. Какая библиотека, которую вы будете использовать, зависит от вас.

Answer 2

Проблема с использованием библиотеки JS заключается в том, что вам придется отлаживать как аппаратную анимацию, так и анимацию JS.Кроме того, вам также нужно будет изучить все причуды в этих библиотеках. За последние 3 года я нашел CSS-анимации и переходы более простыми и, следовательно, лучше из-за того, что отладка проще. Отладка важна, когда дело касается анимации в Интернете.

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

Вот два маленьких с использованием CSS найти библиотеки анимации:
https://github.com/FelixRilling/microAnimate
https://github.com/daniel-lundin/snabbt.js

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

Пример из microAnimate:

var myAdvancedAnimation = new Anim(
    document.getElementById("square"), { 
    "0%": [ 
     ["width", "200px"], 
     ["color", "transparent"] 
    ], 
    "20%": [ 
     ["width", "100px"], 
     ["color", "#fff"], 
     function() { 
     console.log("callback 2"); 
     } 
    ], 
    "100%": [ 
     ["width", "60px"], 
     ["color", "red"], 
     function() { 
     console.log("callback 3"); 
     } 
    ] 
    }, { 
    duration: 2000, 
    ticklength: 30, 
    ease: true, 
    retainEndState: true, 
    loop: false 
    } 
); 

Как вы видите, это было бы тривиально, чтобы позволить пользователю сохранить определенную анимацию, так как это только объекты и массивы, которые могут быть сохранены для пользователей LocalStorage или центральной базе данных. Это также упростило бы анимациюType A влиять на анимациюType B.