Комментарии 11
Чаще всего она нужна в сложных анимациях, а этот кейс в верстке довольно редкий ( на данный момент ).
Здесь наверное нужно говорить не столько о редкости в вакууме, сколько о типе сайтов — в условных магазинах сложные анимации не нужны почти никогда, а в рекламных сайтах, где все строится от оказывания впечатления на посетителя — нужны довольно часто.
И мне кажется, что вне зависимости от развития технологий, условных магазинов будет всегда больше, чем условных «вау-проектов», просто потому, что первые непосредственно нужны бизнесу, а вторые — это уже какое-то красивое дополнение. Так что скорее всего и на данный момент, и в перспективе, не очень большой процент разработчиков будут работать с чем-то таким на постоянной основе. Но иногда отдельные задачи такого рода появляются и на «обычных» сайтах, так что знания лишними не будут.
И мне кажется, что вне зависимости от развития технологий, условных магазинов будет всегда больше, чем условных «вау-проектов», просто потому, что первые непосредственно нужны бизнесу, а вторые — это уже какое-то красивое дополнение. Так что скорее всего и на данный момент, и в перспективе, не очень большой процент разработчиков будут работать с чем-то таким на постоянной основе. Но иногда отдельные задачи такого рода появляются и на «обычных» сайтах, так что знания лишними не будут.
Спасибо за проделанную работу, и отдельное спасибо за рисунки (в стиле школьной доски, я оценил). Мне не очень понятно как в реальных примерах в JS привязываться на значение t? (если там всё на setInterval, или requestAnimationFrame оно ведь +- за одинаковые промежутки времени, а в примерах, насколько я понял время не линейно )
Так же очень жаль, что пока в CSS нельзя нативно подключать тригонометрические функции, и приходиться выдумывать с препроцессорами… Ну может поправят
Так же очень жаль, что пока в CSS нельзя нативно подключать тригонометрические функции, и приходиться выдумывать с препроцессорами… Ну может поправят
не очень понятно как в реальных примерах в JS привязываться на значение t? (если там всё на setInterval, или requestAnimationFrame оно ведь +- за одинаковые промежутки времени, а в примерах, насколько я понял время не линейно )
Наверное я как-то не очень понятно выразился, когда сказал про изменение скорости в примерах с кривыми Безье, там со временем никакие манипуляции не производятся. То есть грубо говоря каждый вызов функции в setInterval или requestAnimationFrame мы немного его увеличиваем и получаем нужный результат. Графики на картинках строились именно таким образом — каждый кадр время увеличивалось условно на 0.001 и ставилась точка. При этом каждая следующая точка смещается относительно предыдущей не на определенное расстояние, а на какое получится — иногда больше, иногда меньше. Это как бы нежелательный побочный эффект такого подхода к рисованию графиков, но в случае с анимациями он дает субъективное изменение скорости движения, которое часто приходится очень к месту.
Чем сделаны графики к статье? Очень красиво! Хочу такое, хочу-хочу!!!
Графики сгенерированы самописным скриптом, «сделанным на коленке» и очень страшным. Скорее всего я его потом зарефакторю и выложу на GitHub. Ну и здесь, в конце статьи, добавлю ссылку.
ждем :)
Выложил на GitHub более-менее причесанный вариант. Можете использовать :-)
Как раз интересуюсь данной темой, а школьная программа уже давно вылетела из головы. Было очень познавательно. Спасибо!
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Математика верстальщику не нужна, или Временные функции и траектории для покадровых 2D анимаций на сайтах