Математика верстальщику не нужна, или Временные функции и траектории для покадровых 2D анимаций на сайтах

[Totor0]

Чаще всего она нужна в сложных анимациях, а этот кейс в верстке довольно редкий ( на данный момент ).

[sfi0zy]

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

И мне кажется, что вне зависимости от развития технологий, условных магазинов будет всегда больше, чем условных «вау-проектов», просто потому, что первые непосредственно нужны бизнесу, а вторые — это уже какое-то красивое дополнение. Так что скорее всего и на данный момент, и в перспективе, не очень большой процент разработчиков будут работать с чем-то таким на постоянной основе. Но иногда отдельные задачи такого рода появляются и на «обычных» сайтах, так что знания лишними не будут.

[Totor0]

с рекламными сайтами тоже не часто, обычно укладываются в рамки библиотек по типу Animate.css или GreenSock. Действительно сложные анимации я видел только в нескольких gamedev проектах которые хотели работать принципиально без канвы. Ну и на проектах для css awards.

[BlackStar1991]

Спасибо за проделанную работу, и отдельное спасибо за рисунки (в стиле школьной доски, я оценил). Мне не очень понятно как в реальных примерах в JS привязываться на значение t? (если там всё на setInterval, или requestAnimationFrame оно ведь +- за одинаковые промежутки времени, а в примерах, насколько я понял время не линейно )
Так же очень жаль, что пока в CSS нельзя нативно подключать тригонометрические функции, и приходиться выдумывать с препроцессорами… Ну может поправят

[sfi0zy]

не очень понятно как в реальных примерах в JS привязываться на значение t? (если там всё на setInterval, или requestAnimationFrame оно ведь +- за одинаковые промежутки времени, а в примерах, насколько я понял время не линейно )

Наверное я как-то не очень понятно выразился, когда сказал про изменение скорости в примерах с кривыми Безье, там со временем никакие манипуляции не производятся. То есть грубо говоря каждый вызов функции в setInterval или requestAnimationFrame мы немного его увеличиваем и получаем нужный результат. Графики на картинках строились именно таким образом — каждый кадр время увеличивалось условно на 0.001 и ставилась точка. При этом каждая следующая точка смещается относительно предыдущей не на определенное расстояние, а на какое получится — иногда больше, иногда меньше. Это как бы нежелательный побочный эффект такого подхода к рисованию графиков, но в случае с анимациями он дает субъективное изменение скорости движения, которое часто приходится очень к месту.

[jt3k]

Мне кажется чтобы стало понятно, нужно убрать две трети воды

[codecop]

Чем сделаны графики к статье? Очень красиво! Хочу такое, хочу-хочу!!!

[sfi0zy]

Графики сгенерированы самописным скриптом, «сделанным на коленке» и очень страшным. Скорее всего я его потом зарефакторю и выложу на GitHub. Ну и здесь, в конце статьи, добавлю ссылку.

[Totor0]

ждем :)

[sfi0zy]

Выложил на GitHub более-менее причесанный вариант. Можете использовать :-)

[emgyrz]

Как раз интересуюсь данной темой, а школьная программа уже давно вылетела из головы. Было очень познавательно. Спасибо!