Comments
23
Ту часть, где объяснение периодов для дошкольников, вообще не надо было переводить. Остальное укладывается в одну строчку: «Шарики должны двигаться под синусоиде».
Шарики должны двигаться под синусоиде, каждый со своим сдвигом по фазе!
«Палочки должны быть попендикулярны»! ©
Возможно у меня напрочь отсутствует тригонометрический вкус, но анимация на первой гифке мне кажется более приятной (естественной), чем на последней.
По моему — все одинаково плохо, фпс настолько низкий, что все неприятно дёргается. И я не понимаю, почему его нельзя было сделать больше.
Чтобы GIF-ка на КДПВ с 15 мегабайт до 50 разрослась?
За такие гифки на КДПВ надо вообще в рид онли переводить…
Она же вроде-как в HTML, надо было просто ссылку на демо дать.
ну вот розовый на первой гифке вообще в магазин ушел по своим делам, а черные вполне вместе.
Абсолютно согласен.
Графики-графики и вот… вы разницы не заметите, но она есть! (сурок в тему)
Графики-графики и вот… вы разницы не заметите, но она есть! (сурок в тему)
Мне кажется, что если рассматривать такую категорию как "приятность", то уже стОит говорить о такой штуке как easing. Ну и fps побольше, как же без него....
Вау! Математика математика за 8 класс на Хабре!
Было бы интересно посмотреть на наложенные друг на друга анимации.
Из пушки по воробьям. Для таких анимаций есть CSS c transition-timing-function.
Нельзя вот так взять и на 10 страницах с рисунками и анимацией описать вот это все. Это завуалированное оскорбление фронтендщиков, не иначе. </шутка>
Я с java-скриптами знаком очень поверхностно. В них вот такая бесконечная рекурсия — нормальное явление? Стек вызовов не разрастется до неприличия если вкладка с такой анимацией останется открытой весь день?
AFAIK коллстек очищается при вызове setTimeout. Если точнее, любые асинхронные вызовы создают свой коллстек.
Нет там никакой рекурсии. requestAnimationFrame() просто ставит функцию в очередь на выполнение на следующем кадре анимации. Здесь функция animate() в самом конце просто ставит в очередь саму себя и таким образом постоянно запускается снова. Стек вызовов не растёт, в нём всегда один вызов (функции animate()).
Спасибо, после прочтения описания этой функции все стало понятно :)
Главный фейл этих анимаций – дискретность каждого кадра, отсутствие размытия движения (motion blur). Ну и первый принцип анимации от Диснея squash & stretch не помешал бы!
Дистиллированный перфекционизм. Тратить такие усилия на столь незначительные моменты можно только когда всё остальное — идеально.
Небольшая опечатка в коде, в Svg id=«cCentre»
а в скрипте cCenter = document.getElementById('cCenter')
а в скрипте cCenter = document.getElementById('cCenter')
Only those users with full accounts are able to leave comments. Log in, please.
Применение правил тригонометрии для создания качественной анимации