Как делается анимация на сайте?

Question

[Алексей Гончаров]

Как делается анимация на сайте? И какие способы вообще бывают для того, чтобы сделать анимацию на странице? Нужно применять js, canvas, svg? Каким образом?

Я хочу на свой сайт добавить такую анимацию, чтобы вылетала печенька из правого края до середины сайта и остановилась (при этом крутясь пока вылетает).

Как мне это сделать? Какой способ для этого лучше всего подойдет?

Comments

[Алексей Абрамов]

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

[Алексей Гончаров]

Алексей, это точно подойдет для моей задачи? Мне нужно чтобы было такое с картинкой она вылетала с правого края крутясь. Но это должно происходить по нажатию кнопки onclick

[Алексей Абрамов]

Алексей Гончаров, если непосредственно через клик, то можно использовать метод animate у jquery https://basicweb.ru/jquery/jquery_effect_animate.php

Answer 1

[Дима]

Все достаточно просто. Если нужна анимация по клику, то через JS вешайте на кнопку событие, в котором создаете или делаете видимым (display block) элемент с анимацией. Сам элемент может быть обычной картинкой или svg. На этот элемент прописываете анимацию через CSS. Там очень много возможностей, сделать можно что угодно, вот грубый пример

Comments

[Алексей Гончаров]

Просто я задаюсь вопросом, потому что после того как печеньки вылетят с правого края мне нужно управлять ими вот так. Когда они вылетят с правого края я буду нажимать на кнопку которая будет убирать половинку печеньки по очереди у каждой. Для этого тоже подойдет css чтобы убирать половинку печеньки уже которая вылетела?

[Дима]

Алексей Гончаров, если речь идет о кликах, то только через JS получится это сделать. Просто меняете свойства элемента через CSS. Например, можно сделать элемент из двух div-ов в которых фоном будет выступать svg-картинка и при клике скрывать один из них. Это первое что приходит мне на ум :) Можно работать напрямую с SVG или сделать полностью через JS + Canvas, но придётся больше разбираться, лично мне :) Может вам JS понятнее.

[Алексей Гончаров]

Дима, а возможно это сделать на react? Для чего тогда он создан?

[Алексей Гончаров]

Дима, только через js это как? То есть менять css стили элемента через onclick?

[Kovalsky]

Алексей Гончаров, "а возможно это сделать на react?" - конечно. Реакт это просто фреймворк, он вас никак не ограничивает технически,

"Для чего тогда он создан?" - для ускорения и упрощения процесса создания интерфейсов в spa приложениях. Анимация отношение к интерфейсу имеет только декоративное, поэтому реакт вам мало поможет с ней. Но тк у реакта огромное комьюнити, то велик шанс что нужный вам функционал уже реализован в виде плагина, поищите

[Алексей Гончаров]

Kovalsky, что значит интефрейс? Разве анимация не входит в интерфейс?

[Kovalsky]

Алексей Гончаров, "Анимация отношение к интерфейсу имеет только декоративное". Реакт вам не поможет создать анимацию, реакт вам поможет удобно организовать ресурсы для вашей анимации, а потом поможет эту анимацию удобно использовать и переиспользовать в любом компоненте приложения. Хотя вообще в ангуляре например есть средства для работы с анимацией, может и в реакте есть

[Алексей Гончаров]

Kovalsky, то есть реакт не за что вообще не отвечает. Это просто вещь которая упрощает код и работу? На реакт можно сделать все что угодно интерфейс сайта, просто упрощенно?

[Kovalsky]

Алексей Гончаров, ну да, любая библиотека упрощает код и работу). Конечно есть исключения, но в целом фреймворки типа реакта, ангуляра и вью нужны именно для этого - они очень упрощают и ускоряют разработку интерфейсов. И они модульные, то есть например для анимации вылетающей печеньки вы можете взять любую анимационную библиотеку, вставить её в свое приложение и радоваться тому что печенька бодро вылетает и крутится,

[Алексей Гончаров]

Kovalsky, а что бы вы сами мне посоветовали использовать мне в моей задумке с печеньями? Мне лучше использовать анимационную библиотеку? Или сделать просто на css?

[Kovalsky]

Алексей Гончаров, вообще задача слишком мелкая чтобы думать о ней больше минуты, даже то что о ней сказано столько слов это уже сильно чересчур. Уже можно было все варианты реализовать по несколько раз) Выбор инструмента зависит от требований и условий. Хотите взять библиотеку - берите. Хотите на css - делайте на css. Задача крошечная, думаю если вам что-то не понравится в выбранном вами способе реализации, то вы сможете быстро переделать другим способом. Например animate.css или anime.js или специальные для реакта, и это только первые попавшиеся в гугле, а так тысячи их

[Алексей Гончаров]

Kovalsky, XD, ясно. Просто я не понимал и впервые делаю анимации. А какая задача считается крупной если эта мелкая?

[Kovalsky]

Алексей Гончаров, нууу, это очень пространный вопрос. Написать species-in-pieces.com это крупная задача. Даже сделать любую фигурку с a.singlediv.com это достаточно работы,