Делаем Анимацию в After Effects на сайт

Web анимация- есть довольно много способов но, основная это css, canvas, svg. Cегодня мы сделаем svg или canvas анимацию с помощю плагина  bodymovin.

725 svg Aвтор:
Рейтинг: 0/5 - 0 голосов

Делаем Анимацию  в After Effects на сайт

Web анимация- есть довольно много способов но, основная это css, canvas, svg.

Css анимация — это преобразования фигур, движение, стилизация, с помошю css стилей.

Canvas — элемент HTML5, предназначенный для создания растрового двухмерного изображения при помощи скриптов, обычно на языке JavaScript.

Svg —  язык разметки масштабируемой векторной графики.

Но сегодня мы сделаем svg или canvas анимацию с помощю After Effects.

Далеко не секрет что  After Effects, это мощная программа для создания графических эфектов в видео. 

Но, чтобы преобразовать видео  вsvg или canvas  нужно установить дополнение bodymovin 

Инструкция по установке так же по ссылке .

И так если получилось все установить и появилось во вкладке Окно → разширения→bodymovin 

Далее по инстукции ►

1.Заходим в After Effects и делаем простую анимацию.

Типо такую.

Получился небольшой прелоадер.

2.Выгружаем json (да вся анимация содержится в json-не ).

3.Для того чтобы отобразить анимацию на сайте нужно подключить один файл 

bodymovin.min.js — скрипт преобразовует json в анимацию.


var animData = {
        wrapper: document.getElementById('anim'), // anim - id блока в котором будет анимация
        animType: 'svg',
        loop: true,
        prerender: false,
        autoplay: true,
        path: 'data.json' // путь к файлу

    };
    var anim = bodymovin.loadAnimation(animData);

Пример этой анимации на сайте 

Это простой пример. Но таким способом можно создать доволе интересные анимации.

Творите...))

Скачать исходники

3 случайных Поста

Card image cap
Woocommerce Перевод цены товара по курсу приват банка
Card image cap
Хлебные крошки worpdress от Kama_Breadcrumbs с itemprop="position"
Card image cap
CONTACT FORM 7 Уникальный номер заявки

коммент.

Контакти

Contact

info@pechenki.top

Начать чат со мной

© SiteBlog designer