WEB Анимации. Какие методы — лучшие?

Question

[Максим Башкардинов]

Доброго времени суток.
Нужна ваша помощь. Как создавать подобные анимации??

Пример

https://playhearthstone.com/ru-ru/expansions-adven...

Как можно добавлять сложнейшие анимации, которые на CSS+JS не написать? Допустим, с фоном почти все понятно, но если речь идет о блоках, текстах и тд.
Если вопрос совсем глупый, извините) Я лишь начинаю своё обучение

Comments

[Hyubert]

О какой конкретно анимации Вы спрашываете?

[Сергей Соколов]

какая именно анимация вызвала вопрос? На страничке по ссылке есть и встроенное видео с YouTube и видео с сайта и примитивная анимация отдельных элементов.

[Максим Башкардинов]

Сергей Соколов, Hyubert, конкретно на этом сайте - фоновая. Так же интересно, как сделать, например: вырисовывание текста по каждому символу, анимация огня на кнопке, дым и тд

[Hyubert]

Максим Башкардинов, фон - это зацикленное видео

[Hyubert]

Так же интересно, как сделать, например: вырисовывание текста по каждому символу, анимация огня на кнопке, дым и тд

не нахожу такое....

[Максим Башкардинов]

Hyubert, ну это реально? Единственный способ, который я вижу - рисовать/искать гифку и соединять с блоком, но, как мне кажется - плохой подход

[Hyubert]

Максим Башкардинов, возможно все, если потратить достаточно времени.
Те эффекты которые вы хотите повторить нативно очень трудоемкие.... Да и порог входа высок, не сравниться с js.
Это все возможно с WebGL.

Answer 1

[Алекс Глебов]

Веб анимация делается на aos animation, canvas, gsap, webgl, tween.js, velocity.js, three.js, snap.svg, pixi.js, glsl, d3.js, anime.js

Ну а если не получилось, можно и видео вставить.

Comments

[bozuriciyu]

aos animation

интересно как этот кусок говна затесался в список?

[Алекс Глебов]

bozuriciyu, да нормально смотрится sp-ic.ru
А вы с чего начинали?

Answer 2

[Сергей Соколов]

Как можно добавлять сложнейшие анимации, которые на CSS+JS не написать?

В браузере могут отображаться анимации таких видов:

• видео
  
• анимированный gif, чаще всего зацикленный
  
• canvas - посредством JavaScript
  
• WebGL
  
• svg - посредством JavaScript
  
• анимированные средствами CSS и JavaScript элементы, в т.ч. svg
  

Первые два варианта - "растровые". Теоретически можно отрисовать всё угодно, с точностью до пикселя. Готовить анимацию любыми инструментами для анимации. Выводить в видео или gif.

В canvas скорее будет анимация «спрайтовая». Ограниченное число маленьких картинок двигаются.

SVG – векторная графика. Там, скорее, будут элементы с чёткими контурами двигаться/поворачиваться. Но вовсе не обязательно только это.

Answer 3

[Dmytro Korolkov]

Если анимация требуется посложнее, например персонажная или морфинг, то можно воспользоваться After Effects + Lottie плагин (ранее назывался bodymovin).

Answer 4

[SerzN1]

возможно имеется ввиду это видео

1 - "сложное" в вебе связано с 3D и шейдерами example

2 - возможно некоторые решения позволяющие проигрывать анимашки из других программ. как правило без вашего вмешательства в код самой анимации - все что вам нужно знать сказать кому-то где это сделать и знать куда это потом вставить и еще как оптимизировать при необходимости link

Answer 5

[shoutman]

проще вставлять наверное видеоставки