Comments 23
Ту часть, где объяснение периодов для дошкольников, вообще не надо было переводить. Остальное укладывается в одну строчку: «Шарики должны двигаться под синусоиде».
Возможно у меня напрочь отсутствует тригонометрический вкус, но анимация на первой гифке мне кажется более приятной (естественной), чем на последней.
По моему — все одинаково плохо, фпс настолько низкий, что все неприятно дёргается. И я не понимаю, почему его нельзя было сделать больше.
Абсолютно согласен.
Графики-графики и вот… вы разницы не заметите, но она есть! (сурок в тему)
Графики-графики и вот… вы разницы не заметите, но она есть! (сурок в тему)
Мне кажется, что если рассматривать такую категорию как "приятность", то уже стОит говорить о такой штуке как easing. Ну и fps побольше, как же без него....
Вау! Математика математика за 8 класс на Хабре!
Было бы интересно посмотреть на наложенные друг на друга анимации.
Из пушки по воробьям. Для таких анимаций есть CSS c transition-timing-function.
UFO just landed and posted this here
Я с java-скриптами знаком очень поверхностно. В них вот такая бесконечная рекурсия — нормальное явление? Стек вызовов не разрастется до неприличия если вкладка с такой анимацией останется открытой весь день?
AFAIK коллстек очищается при вызове setTimeout. Если точнее, любые асинхронные вызовы создают свой коллстек.
Нет там никакой рекурсии. requestAnimationFrame() просто ставит функцию в очередь на выполнение на следующем кадре анимации. Здесь функция animate() в самом конце просто ставит в очередь саму себя и таким образом постоянно запускается снова. Стек вызовов не растёт, в нём всегда один вызов (функции animate()).
Главный фейл этих анимаций – дискретность каждого кадра, отсутствие размытия движения (motion blur). Ну и первый принцип анимации от Диснея squash & stretch не помешал бы!
Дистиллированный перфекционизм. Тратить такие усилия на столь незначительные моменты можно только когда всё остальное — идеально.
Небольшая опечатка в коде, в Svg id=«cCentre»
а в скрипте cCenter = document.getElementById('cCenter')
а в скрипте cCenter = document.getElementById('cCenter')
Sign up to leave a comment.
Применение правил тригонометрии для создания качественной анимации