s-kuznetsov Oct 19 2020 at 13:26

Как делать анимацию, которая нравится всем (даже пользователю)?

10 min

13K

AGIMA corporate blogHigh performance*CSS*JavaScript*Computer Animation*

Comments 8

ivan386 Oct 19 2020 at 15:27

А есть ещё SVG SIML анимации.

Например

s-kuznetsov Oct 23 2020 at 14:29

Изначально планировалось краткое упоминание SVG, про тот же snap, но такой вид анимации, все же ощутимо реже используется, чем упомянутые в статье. В основном для иконок/пиктограмм, ну и по сути не слишком сильно отличается от css анимаций.

ivan386 Oct 23 2020 at 14:38

В том то и проблема что CSS анимации оказались гораздо проще и ими не получилось заменить SIML анимации.

leon_nikitin Oct 21 2020 at 11:33

Если прелоадер запускается на клиенте (хоть каким образом), или, вообще — анимированный гиф, то его работа никак не говорит о том, что сайт завис или нет.

s-kuznetsov Oct 23 2020 at 14:42

Безусловно. Но в целом, если на экране не происходит вообще ничего, то пользователь начнет подозревать сайт в зависании уже через несколько секунд после нажатия на кнопку. А вот крутящийся лоадер существенно позже. И если у вас подгружается ощутимый объем данных, это позволит дождаться его окончания, до нажатия пользователем f5.

UFO just landed and posted this here

leon_nikitin Oct 23 2020 at 15:25

да, верно

noodles Oct 24 2020 at 22:45

А как повысить производительность?

Слышал ещё, что для свойств которые вызывают repaint /растеризацию (например color, opacity, какие-то тени, градиенты) изингами в анимациях лучше не увлекаться, а использовать линейный linear. Пользователь практически не заметит, а браузеру дышать будет легче.