Стендап Сьогодні
📢
Канал в Telegram @stendap_sogodni
🦣
@stendap_sogodni@shevtsov.me в Федиверсі
23.05.2023
Смуга прокрутки для анімації Greensock
Як і планував, увечері переробив анімацію на прокрутку на більш традиційну анімацію з власною смугою прокрутки, яка зазвичай буває у відео.
Власне, викинути прокрутку просто — прибрав конфігурацію та прибрав CSS, який створював довжелезний контейнер - “предмет” прокрутки. Ну та й додав саму смугу (до речі, чомусь Unicode media control symbols на айфоні перетворюються в емоджі — поки не знайшов, як це виправити.)
Щодо реалізації смуги. Її стан оновлюється в тій самій функції render(), що малює сцену. Для цього у Greensock є функція timeline.progress(), яка повертає значення від 0 до 1 - дуже зручно.
Щоб керувати анімацією, треба лише виставити той самий прогрес, що я роблю на події mousedown, mousemove, touchmove - обчислити прогрес як дріб нескладно. Для паузи теж є функції timeline.pause() та timeline.play().
З паузою й почалися складнощі. На відміну від анімації прокруткою, нову анімацію потрібно створювати в стані паузи та починати, коли карта зʼявляється на екрані. Для цього підійшов код з IntersectionObserver, який я вчора написав для автопрокрутки. Але це не все.
Анімація, що створюється в паузі, при першому старті починалася з незрозумілого сміття. Почитав документацію, дійшов висновку, що це через те, що я всюди вживаю інтерполяцію fromTo(): а саме, всі значення from застосовуються миттєво та псують початковий стан анімації. Щоб виправити це, переписав все на команду to(); вона інтерполює з поточного стану до заданого. Там де потрібні були стрибки значення — впровадив їх командою set().