Раньше вся анимация на сайтах была в основном создана на Flash. С появлением технологии HTML5 стало возможным создавать анимацию без использования Flash. А ведь анимация всегда привлекала и привлекает внимание посетителей. Но писать с нуля на HTML5 смогут не все, потому что это не очень легко для человека, который не разбирается в этом. Поэтому в данном уроке я хочу рассмотреть специальный сервис, который позволяет создавать анимацию на HTML5. В этом сервисе сможет разобраться абсолютно каждый!

Я хочу рассказать о таком сервисе, как HTML5Maker .

HTML5Maker — это онлайн-сервис, который позволяет создавать интерактивный анимированный контент(слайд-шоу, баннеры и т.д.) на HTML5.

Давайте приступим к изучению этого сервиса.

Анимация HTML5

Введение и регистрация

Данный сервис можно использовать без регистрации. Для этого нужно нажать на кнопку «Create animation» сразу, как зайдете на сайт:

Тут есть два пути: войти через Facebook или Google PLus, или зарегистрироваться. Ссылка(там еще будет текст «Don’t have an Account? Register Now!») регистрации находится под большой кнопкой «Sign in»

Затем появится страница с вводом email и пароля. Заполняете эти два поля и кликаете на кнопку с текстом «Create free account», которая находится ниже.

После чего на почту придет сообщение, в котором будет ссылка. По этой ссылку необходимо будет пройти для активации вашего аккаунта.

Знакомство с интерфейсом

Думаю с регистрацией и входом у вас проблем не возникнет. И сейчас переходим непосредственно к среде в которой мы будем разрабатывать нашу анимацию.

Первое, что вы увидите, это рабочая область. Выглядит она следующим образом:

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

Добавление слайдов

Если вы до этого пользовались программой Microsoft PowerPoint, то для вас работать со слайдами будет очень легко, потому что здесь всё очень похоже. Но и для тех, кто видит это впервые, я думаю, не составит труда разобраться.

Для добавления нового слайда необходимо нажать на кнопку «Add a New Slide»:

Добавление изображений

Для того чтобы добавить изображение на слайд, необходимо нажать на кнопку «Add image»:

После чего появится всплывающее окно с выбором готовых изображений:

Также в этом окне можно нажать на кнопку «Upload image» и загрузить своё собственное изображение. Кроме своего изображения, как я уже говорил, вам предлагается уже набор подобранных и сгруппированных изображений. После того, как вы определились с изображением необходимо нажать на кнопку «Add» и изображение будет добавлено на слайд:

После добавления изображения на слайд, оно выделяется и становятся доступны функции для работы с изображением. На изображении ниже я отметил каждую функцию цифрой:

Давайте по порядку рассмотрим эти кнопки:

1. При нажатии на эту кнопку изображение скопируется и скопированное вставится со смещением чуть ниже и вправо.
2. Данную кнопку необходимо зажать и можно вращать изображение.
3. Эта кнопка удаляет изображение.
4. Кнопка отвечает за изменение размера изображения по ширине.
5. Эта кнопка отвечает за изменение размера изображения пропорционально по высоте и ширине.
6. Кнопка отвечает за изменение размера изображения по высоте.

Итак, это основные функции, которые можно применить к изображению. Но есть и еще. Они становятся доступными при выделении изображения и находятся в правой колонке:

Начнем рассматривать сверху вниз.

Первым идет блок «Adjust image» , в котором есть 4 кнопки: «Replace», «Modify», «Original» и «Fit to Canvas». Что же делает каждое из этих свойств?

• Кнопка «Replace» — при нажатии на эту кнопку появляется всплывающее окно, в котором вас просят выбрать новое изображение, которым вы хотите заменить настоящее.
• Кнопка «Modify» — при нажатии на данную кнопку открывается окно, в котором доступны различные эффекты для изображения, можно добавить текст на изображение, добавить рамку, а также обрезать, повернуть, сделать размытым, отразить по вертикали или горизонтали и изменить контрастность.
• Кнопка «Original» — возвращает начальные настройки изображения.
• Кнопка «Fit to Canvas» — при нажатии изображение принимает максимальную высоту и ширину с учетом что оно должно поместиться в размер слайда.

Следующим идет блок «Arrange Selected Text» , и в нем две кнопки: «Bring to Front», «Send to Back». Кнопка «Bring to Front» отвечает за то, чтобы выдвинуть изображение на передний план, а вторая кнопка «Send to Back» отвечает за позиционирование изображения на задний план.

Далее идут три блока «Change position»(изменение позиции изображения), «Change size»(изменение размера) и «Change rotation»(поворот в градусах), которые можно изменять с помощью кнопок и перетаскивая изображения удерживая левую кнопку мыши.

И последний блок под названием «Opacity» — изменяя его значение, перетаскивая ползунок, вы изменяете прозрачность изображения.

Последний момент, который хочу рассказать — это эффект при появлении и исчезновении изображения. Эта панель находится внизу в центральной части рабочей области:

В левом верхнем выпадающем списке, где есть надпись «Appear:», вы выбираете эффект как будет изображение появляться. А в левый нижний выпадающий, у которого есть надпись «Disappear:», список отвечает за эффект с которым изображением исчезает.

Добавление текста

Текст добавляется нажатием на кнопку «Add text» в левом верхнем углу центральной области.

После чего справа появляются функции(изменение шрифта, размера, цвета, фона, стиля, отступов) для работы с текстом. Их я описывать не буду, потому что во всех текстовых редакторах они очень похожи. Думаю вы разберетесь в них, а если нет — пишите в комментариях, будем разбираться вместе 🙂 .

Основные настройки анимации, предпросмотр и публикация проекта

Для того чтобы активировать эти настройки вам необходимо нажать либо на кнопку «Settings» в левом верхнем углу центральной области, либо кликнуть по пустому месту, где нет слайда.

В результате вы увидите следующие настройки вашего проекта в правой колонке:

Здесь можно изменить размер слайдов, установить фоновый цвет, а также добавить кнопки, для управления слайд-шоу. Чтобы добавить кнопки управления слайд-шоу необходимо нажать на кнопку «Animation controls» и здесь вы увидите всплывающее окно с выбором всевозможным кнопок, таймлайнов и так далее.

The purpose for designing a website is to entertain a user of that website. Designer designs the web site using various elements that catches the eyes of the viewers. It is not an easy task to design the website beautifully. It takes a lot of time and effort to design beautiful website. Many elements are considered while designing a website. Among those elements, canvas is also one of them. Therefore, the topic of discussion here is Awesome HTML5 Canvas Examples with Source Code.

Canvas is a graphical element that we can use in our website. The use of canvas is generally done to add up the graphics element in the website. The graphical element means, that can be some kind of effect or animations that we can use in games, movies or anywhere.

Use of canvas brings a lot change in the looks of the website. Canvas catches the eyes of the viewer and no matter how many elements are there in the website, the user’s eye firstly goes to the canvas because they are simply awesome and beautiful. Various ways are there to make a canvas. They can be made using various shapes, texts or colors.

Here we have the list of some best examples of canvas that we can find on the internet for free and we can even use them in our website to make our website look awesome. Therefore, the Awesome HTML5 Canvas Examples along with their codes are as follow.

Code and Demo

Code and Demo

Code and Demo

Code and Demo

Code and Demo

Code and Demo

View Code and Demo

View Code and Demo

Kushagra Agarwal’s HTML5 Canvas Particles Web Matrix

Code and Demo

Code and Demo

Code and Demo

Demo and Download

Download and Demo

ARENA5 – HTML5 game by Kevin Roast

Demo and Download

Demo and Code

Code and Demo

Demo and Code

Conclusion
Hence, from the above examples, we may have known about what canvas actually is and how can they be used in the website to make the website look beautiful. It is not an easy task to add such canvas in our website. It takes a lot of time to design them. More than designing, it takes a lot of time to imagine the canvas and only highly creative persons are capable of that. Considering that thing, we have added the examples along with their code so that one can simply use them in their website.

Therefore, this is what we can understand about the canvas and how they are used in the website to give a dynamic look to the website.

Анимация

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

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

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

Простая анимация

Сделать анимацию из элемента на холсте HTML5 достаточно просто. Для этого устанавливается таймер, который постоянно вызывает элемент, обычно 30 или 40 раз в секунду. При каждом вызове код полностью обновляет содержимое всего холста. Если код написан правильно, постоянно сменяющиеся кадры сольются в плавную, реалистичную анимацию.

JavaScript предоставляет два способа для управления этим повторяющимся обновлением содержимого холста:

Эта функция дает указание браузеру подождать несколько миллисекунд, а потом исполнить фрагмент кода, в данном случае код для обновления содержимого холста. По окончании исполнения кода функция setTimeout() выполняется опять, вновь вызывая код обновления холста, и так до тех пор, пока анимацию не нужно завершить.

Эта функция дает указание браузеру исполнять фрагмент кода через регулярный интервал времени, например каждые 20 мс. Эффект от этой функции, по большому счету, такой же, как и от функции setTimeout(), но функцию setInterval() нужно вызывать только один раз. Чтобы остановить повторяющийся вызов кода браузером, исполняется функция clearInterval() .

Если код рисования быстрый и эффективный, обе функции дают одинаковый эффект. В противном случае функция setInterval() даст лучший результат, выполняя обновление точно в требуемое время, но, возможно, за счет производительности. При худшем стечении обстоятельств, когда исполнение кода рисования занимает несколько больше времени, чем установленный интервал, браузер будет напрягаться, чтобы поспевать, код рисования будет исполняться постоянно и страница может на мгновение зависать.

При вызове функции setTimeout() передаются два параметра: название функции, которою нужно выполнить, и период времени ожидания перед исполнением этой функции. Время ожидания указывается в миллисекундах (т.е. тысячных секунды), таким образом, 20 мс (обычная задержка при анимации) равняется 0,02 с. Далее показан пример такого кода анимации с использованием функции setTimeout():

Var canvas; var context; window.onload = function() { // Определение контекста рисования canvas = document.getElementById("drawingCanvas"); context = canvas.getContext("2d"); // Обновляем холст через 0.02 секунды setTimeout("drawFrame()", 20); }

Этот вызов функции setTimeout() является ключевой частью любой задачи анимации. Допустим, что мы хотим создать анимацию квадрата, падающего сверху вниз страницы. Для этого нам нужно отслеживать позицию квадрата, используя две глобальные переменные. После нам надо просто изменять позицию при каждом исполнении функции drawFrame(), а потом перерисовывать квадрат в новой позиции:

// Устанавливаем начальную позицию квадрата var squarePosition_x = 10; var squarePosition_y = 0; function drawFrame() { // Очистить холст context.clearRect(0, 0, canvas.width, canvas.height); // Вызываем метод beginPath(), чтобы убедиться, // что мы не рисуем часть уже нарисованного содержимого холста context.beginPath(); // Рисуем квадрат размером 10x10 пикселов в текущей позиции context.rect(squarePosition_x, squarePosition_y, 10, 10); context.lineStyle = "#109bfc"; context.lineWidth = 1; context.stroke(); // Перемещаем квадрат вниз на 1 пиксел (где он будет // прорисован в следующем кадре) squarePosition_y += 1; // Рисуем следующий кадр через 20 миллисекунд setTimeout("drawFrame()", 20); }

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

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

Анимация нескольких объектов

Теперь, когда мы освоили основы анимации и рисования интерактивной графики на холсте, настало время сделать следующий шаг и совместить эти навыки. Сделаем мы это на примере программы анимации падающих "мячиков", как показано на рисунке ниже:

Эта программа анимации позволяет добавлять в холст неограниченное количество мячиков. Программа предоставляет опцию выбора размера мячика (радиус по умолчанию - 15 пикселов) и соединения мячиков линиями, как показано справа на рисунке. Каждый добавленный в холст мячик двигается независимо от других, падая с ускорением, пока не столкнется с нижним краем холста, потом отскакивает от него и начинает двигаться в другом направлении.

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

Добавьте базовую разметку для примера:

Для управления всеми этими шариками мы воспользуемся пользовательским объектом. В данном случае нам нужно отслеживать массив объектов Ball и кроме позиции (представляемой свойствами x и y) для каждого мячика нужно еще отслеживать и скорость (представляемую свойствами dx и dy):

// Тип данных, представляющий отдельный мячик function Ball(x, y, dx, dy, radius) { this.x = x; this.y = y; this.dx = dx; this.dy = dy; this.radius = radius; this.strokeColor = "black"; this.fillColor = "red"; } // Массив, содержащий информацию обо всех мячиках на холсте var balls = ;

В математике выражение dx обозначает скорость изменения абсциссы, а dy - скорость изменения ординаты. Поэтому по мере падения мячика значение x для каждого кадра увеличивается на величину dx, а значение y - на величину dy.

При нажатии кнопки "Добавить мячик" простой код создает новый объект Ball и сохраняет его в массиве balls:

Function addBall() { // Устанавливаем размер мячика var radius = parseFloat(document.getElementById("ballSize").value); // Создаем новый мячик var ball = new Ball(50,50,1,1,radius); // Сохраняем его в массиве balls.push(ball); }

Кроме очистки холста, кнопка "Очистить холст" также очищает массив balls:

Function clearBalls() { // Удаляем все мячики balls = ; }

Но ни функция addBall(), ни функция clearBalls() в действительности не только ничего не рисуют, но даже не вызывают функцию для рисования. Вместо этого код страницы устроен таким образом, чтобы вызывать функцию drawFrame(), которая прорисовывает холст каждые 20 мс:

Window.onload = function() { // Определение контекста рисования canvas = document.getElementById("drawingCanvas"); context = canvas.getContext("2d"); // Обновляем холст через 0.02 секунды setTimeout("drawFrame()", 20); }

Функция drawFrame() является ключевой частью этого примера. Она не только рисует мячики на холсте, но также и вычисляет их текущую позицию и скорость. В функции drawFrame() выполняется несколько разных вычислений, чтобы более реалистично эмулировать движение мячиков, например, ускорение мячиков при падении и замедление, когда они отскакивают от препятствий. Полный код функции выглядит так:

Function drawFrame() { // Очистить холст context.clearRect(0, 0, canvas.width, canvas.height); // Вызываем метод beginPath(), чтобы убедиться, // что мы не рисуем часть уже нарисованного содержимого холста context.beginPath(); // Перебираем все мячики for(var i=0; i canvas.width) || (ball.x - ball.radius < 0)) { ball.dx = -ball.dx; } // Если мячик упал вниз, отбиваем его, но слегка уменьшаем скорость if ((ball.y + ball.radius > canvas.height) || (ball.y - ball.radius < 0)) { ball.dy = -ball.dy*0.96; } // Проверяем, хочет ли пользователь соединительные линии if (!document.getElementById("connectedBalls").checked) { context.beginPath(); context.fillStyle = ball.fillColor; } else { context.fillStyle = "white"; } // Рисуем мячик context.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2); context.lineWidth = 1; context.fill(); context.stroke(); } // Рисуем следующий кадр через 20 миллисекунд setTimeout("drawFrame()", 20); }

Хотя весь этот объем кода может вызывать легкий страх, общий подход остался прежним. Код исполняет следующие операции:

Очищает холст.

Перебирает в цикле мячики в массиве.

Корректирует позицию и скорость каждого мячика.

Рисует каждый мячик на холсте.

Устанавливает время ожидания (функция setTimeout) для вызова метода drawFrame() опять 20 мс.

Сложным здесь является шаг 3, в котором корректируются позиция и скорость мячиков. Уровень сложности этого кода может быть таким, каким этот код пожелает разработчик, в зависимости от эффектов, которые он пытается реализовать. Особенно трудно поддается моделированию плавное, природное движение, требующее более сложных математических вычислений.

Наконец, теперь, когда мы можем отслеживать каждый мячик, добавить интерактивность не составляет труда. По сути, можно использовать практически тот же код, который применялся для определения щелчков по кругу в программе рисования кругов из предыдущей статьи. Но только в данном случае мы хотим делать что-то другое с мячиком, по которому щелкнули, например ускорить или изменить направление его движения:

Window.onload = function() { ... canvas.onmousedown = canvasClick; ... } function canvasClick(e) { // Координаты щелчка мышью var clickX = e.pageX - canvas.offsetLeft; var clickY = e.pageY - canvas.offsetTop; for(var i in balls) { var ball = balls[i]; // Проверка попадания if ((clickX > (ball.x-ball.radius)) && (clickX (ball.y-ball.radius)) && (clickY

Довольно впечатляющую версию этого примера, можно исследовать на странице HTML5 Canvas Google Bouncing Balls . Здесь наведение курсора мыши на мячики разбрасывает их в разные стороны (как именно, зависит от того, каким образом наводится на них курсор), а если отвести курсор, мячики собираются в слово "Google".

Производительность анимации

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

В современных браузерах применяются такие средства повышения производительности, как аппаратное ускорение, при котором определенный объем обработки графики передается видеокарте компьютера, вместо применения центрального процессора для выполнения всех задач. И хотя JavaScript - не самый быстрый из языков программирования, на нем вполне можно создавать сложные высокоскоростные анимации, включая аркадные игры в режиме реального времени, не используя ничего, кроме кода сценариев и холста.

Но производительность холста может быть проблемой в случае маломощных мобильных устройств, таких как iPhone или устройства с операционной системой Android. Результаты тестов показывают, что анимация, которая может выполняться на настольном компьютере со скоростью 60 кадр/с (кадров в секунду), будет исполняться на среднем смартфоне рывками, с максимальной скоростью 10 кадр/с.

Поэтому, если вы хотите создавать приложения для мобильных устройств, прежде чем углубляться в разработку, обязательно протестируйте их производительность для таких устройств и будьте готовы пожертвовать некоторыми второстепенными украшениями анимационной программы, чтобы ее основная функция работала без проблем.

Анимация на холсте для ленивых

Мне действительно нужно выполнять все вычисления самому?

Самый значительный недостаток анимации на холсте состоит в необходимости выполнять все вычисления самому разработчику. Например, если нужно, чтобы изображение двигалось от одной стороны холста к другой, разработчику надо рассчитать координаты каждого кадра, а потом нарисовать его в соответствующей позиции.

А если требуется анимировать одновременно несколько предметов разными способами, объем и сложность необходимых для этого вычислений могут очень быстро выйти из под контроля. Поэтому намного легче жизнь разработчиков, использующих подключаемый модуль, такой как Flash или Silverlight . Обе технологии имеют встроенную систему анимации, которая позволяет разработчикам давать команды наподобие "переместить эту фигуру из этой точки в ту за 45 секунд" или, еще лучше, "переместить эту фигуру от верхнего края окна к нижнему, применяя эффект ускорения, вследствие которого фигура слегка отскакивает, достигнув нижнего края".

Нет сомнений, что однажды кто-то изобретет высокоуровневую систему анимации, которую можно будет наложить поверх холста. В идеальном случае такая система анимации позволит разработчику реализовывать желаемые эффекты, не требуя написания многочисленных страниц кода для математических вычислений. Вероятнее всего, что такой высокоуровневой системой анимации будет не усовершенствование основной спецификации HTML, а библиотека JavaScript. Но на данном этапе слишком рано говорить, какие средства разработки будут наиболее эффективными, с наименьшим количеством ошибок и с наивысшим уровнем поддержки.

HTML is most popular language amongst developer community which has been empowering content on the world wide web since the inception of the web itself. It has been the language which has created some stunningly awesome websites. Over the past two years, HTML5 has rightfully gained much recognition and popularity within the portals of cyberspace and improving the methods of its predecessor [ HTML ].

There are many reason behind HTML5 popularity such as modern browser support (like Firefox 6, Google Chrome, IE9 etc.), structure specific tags, visual elements like rounded corners are now built in, drag and drop interactive, new video, audio and canvas elements, as well as the integration of scalable vector graphics (SVG), and animations.

Creating fantastic HTML5 animations for your websites certainly make your websites visually stunning and creative. But creating such animations is bit arduous and time consuming task, for saving your time and efforts here at CodeGeekz we have collected 20 Best HTML5 Animation Tools . Following HTML5 Animation Tools will help you to learn and create HTML5 animations for your websites in order to make them eye catching and beautiful.

Enjoy!!

Animatron is an online, simple tool that lets you create stunning HTML5 animations and interactive content right in your browser. It lets you collaborate with other users, import artwork, create custom shapes, draw directly within the tool, and much more. Use the intuitive Animatron Editor to design and publish movies, banners, and infographics that play everywhere, from desktop browsers to mobile devices. No coding necessary – what you see is what you get!

2. HTML5 Maker

HTML5 Maker is an online animation service/tool for creating animated, interactive content using HTML, HTML5, CSS and JavaScript. It’s very easy to use and at the same time it can help you achieving extremely good results. It allows producing cross-browser animated content such as javascript and html5 animation, Slideshows, Presentations and Sliders.

TweenJS is a simple tweening library for use in Javascript. It was developed to integrate well with the EaselJS library, but is not dependent on or specific to it. It supports tweening of both numeric object properties & CSS style properties. The API is simple but very powerful, making it easy to create complex tweens by chaining commands.

4. Motion Composer

The perfect tool for the prosumer and professionals, MotionComposer bridges the gap between enthusiast and professional web designer, giving everyone the ability to create their own HTML5 or Flash® animations easily.

5. Adobe Edge Animate

Creating interactive, animated web content just got a whole lot easier with the launch ofAdobe Edge Animate. Edge Animate is easy to use, with precise control over motion graphics and HTML elements with a video-editor-like timeline interface. The content created works reliably on mobile devices running Android or iOS, as well as in modern desktop browsers. Fallback states are supported for older browsers. Edge Animate is available with a free Creative Cloud membership.

Mixeek is a free software tool for designing and executingweb animations and interactive animated web applications. It is purely based on JavaScript, CSS3 andHTML5. It’s been developed to bring lightweight, easy to use alternative to well known paid animation software tools.

7. Tumult Hype

Tumult Hype’s keyframe-based animation system brings your content to life. Click “Record” and Tumult Hype watches your every move, automatically creating keyframes as needed. Or, if you’d prefer to be more hands-on, manually add, remove, and re-arrange keyframes to fine-tune your content. It is easy to create natural curves by clicking and dragging on an element’s motion path to add bézier control points.

With Purple, you will create beautiful HTML5 animations with ease. Purple animations can be viewed on mobile devices and on your Desktop. Import assets directly from graphics applications like Adobe® Photoshop® or Pixelmator and start creating at once! Preview animations made with Purple directly on the iPad device and make your apps, magazines, games and websites even more exiting.

9. GSAP

GSAP is a suite of tools for scripted, high-performance HTML5 animations that work in all major browsers. No other library delivers such advanced sequencing, API efficiency, and tight control. Stop wrestling with cumbersome CSS animations, stuttery jQuery.animate() calls, or a system that limits your creativity. Use animation to tell a story in a rich way rather than settling for a few fades and slides.

Mugeda is a powerful browser based Html5 animation tool that comes with all sorts of features such as analytics, templates etc. It’s toolkit will help you create content friendly with ads, approach cross platform optimization and play with the latest JavaScript technologies.

Radi is a complete visual design application targeting web with 100% standard and human-readable HTML + JavaScript code. It has built-in tools for creating/editing graphics (they can be imported too) and generating animations with canvas output that work in all modern browsers including mobile. There are ready-to-use filters + effects and you can always add your own code to create more customized stuff. Radi has a very short learning curve as it is like a mixture of well-known image editing and animation tools but with the friendliness of web technologies.

12. Google Web Designer

Google has released a new tool, named Google Web Designer, for creating interactive HTML5 sites and ads. It is a modern WYSIWYG where you don’t need to dive into the code but use the features to get the output and the tools are mostly design-oriented. However, the code generated is always there and it can be edited or tweaked and the result is displayed automatically. The tool comes with ready-to-use settings for designing Google-powered ads (DocubleClick, AdMob) that will work on any device.
There are built-in components like 360 or carousel galleries, YouTube video embedding and more. A timeline exists for animations and anything can be drawn with a pen tool (not limited to shapes).

13. BLYSK

One of the best and powerful tool for creating HTML5 animations. Just like Adobe Edge and Tumult Hype, it is based on a timeline making your job much easier.

Hippo Animator is a powerful yet easy to learn editor. It’s simple to create great looking animation quickly. Hippo Animator exports a single scalable HTML page and a folder of images. You only need one line of code to add the animation to your own web pages. It’s as simple as we can make it. The HTML animation is cross browser, search friendly and doesn’t require any browser plugins.

15. Sencha Space

Sencha Space is an advanced platform for securely deploying mobile apps and delivering a consistent, elegant, mobile user experience to end-users. Users can launch any mobile web app, or HTML5 app in a secure, managed environment.

NodeFire is a responsive focused HTML5 animator for your website. Emulate desktop, tablet, and mobile devices while in design mode. Create one animation that automatically responds to fit any environment. Harness unparalleled animation and interaction features. All powered by NodeFire’s lightning fast, no dependencies, 18K (Gzip) script library.

17. Modernizer

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites. It lets you target specific browser functionality in your stylesheet by adding classes to your element. What?s easy is you don?t need to actually write any Javascript code to use this.

Motion Canvas is a complete HTML5 Canvas animation system, Motion Canvas enables designers to create vivid drawings. It gives designers the power of shapes, bezier curves (pen tool) and text rendering to create interactive masterpieces. Creating animations within Motion Canvas is easy. It provides an intuitive, industry-standard key-frame animation system.

19. Kinetic JS

KineticJS is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.

KoolMoves is a Flash, Html5, and AVI authoring tool for creating text and image effects, games, navigation buttons, slide shows, media players, animated characters, and entire web sites. KoolMoves provides AS1 and AS3 action scripting capability and exports as Flash SWF, Html5, AVI, SVG, and frames for animated gifs. You can select from a large library of effects and components, import vector clipart, attach audio, fill shapes with color gradients or images, and add actions to buttons and frames.

Данная статья являетсвя продолжением статьи "Рисование встроеннымисредствами HTML5", в которой шла речь о новом элементе ‹canvas› , а также способах работы с ним. Мы уже познакомились с тем, как с помощью javascript можно описать контекст и изобразить на холсте графические примитивы (линия, прямоугольник, дуга, кривые), с помощью которых можно построить сложные изображения. В данной статье мы рассмотрим методы и способы создания простейших анимационных эффектов для создаваемых изображений на холсте.

Каждая анимация ‹canvas› состоит из набора простейших кадров. Для того, чтобы отобразить на холсте один кадр необходимо:

1. Очистить холст. Это можно сделать, например, с помощью метода clearRect() .
2. Если вы хотите, чтобы исходное состояние холста всегда сохранялось, даже если вы изменяете параметры цвета и т.д., то необходимо сохранить состояние холста.
3. Нарисовать объекты анимации, фактически этот этап и есть создание кадра.
4. Если вы сохраняли сотсояние холста, то необходимо его загрузить, прежде чем начинать создание нового кадра.

Анимация движения

Рассмотрим пример. Создадим простейшую анимацию движения - двигающийся горизонтально прямоугольник. Создадим функцию animation() , которая рекурсивно вызывая саму себя создаст кадры движения прямоугольника.

В рамках функции animation() осуществляется следующая последовательность действий:

1. Очистка холста.
2. Отрисовка закрашенного квадрата.
3. Изменение координаты левого верхнего угла квадрата по - горизонтали, для "смещения" квадрата на следующем шаге.
4. В случае, если наш квадрат дойдет до края холста, то начальное значение координаты x вернется к нулю.
5. Рекурсивный вызов animation() , посредством метода setTimeout .

Создадим функцию CreateImage() для демонстрации этой анимации:

Function CreateImage() { var cnvs = document.getElementById("canvas1"); var ctxt = cnvs.getContext("2d"); var x = 0; function animation() { ctxt.clearRect(0,0,150,150); ctxt.fillRect(x,50,50,50); x = x + 0.2; if (x › 100) { x = 0; } setTimeout(animation, 10) } animation(); }

Результат:

Анимация без очистки экрана

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

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

Function CreateImage() { var cnvs = document.getElementById("canvas"); var ctxt = cnvs.getContext("2d"); var x = 1; function animation2() { ctxt.fillStyle="blue"; ctxt.fillRect(x*10, (Math.sin(x))*50+75, 2.5, 2.5); ctxt.fillStyle="red"; ctxt.fillRect(x*10, (Math.cos(x))*50+75, 2.5, 2.5); x = x + 0.01; if (x › 60) { x = 1; ctxt2.clearRect(0,0,640,150); } setTimeout(animation, 10); } animation(); }

Результат представлен ниже:

Анимация спрайтов

Для создания сложных анимаций, а также игр и других веб-приложений на основе HTML5 необходимо создавть анимации с помощью спрайтов. Спрайт - это файл изображения, хранящий в себе набор промежуточных кадров. То есть на одном изображении помещается вся раскадровка анимации или состояний объекта.

Элемент ‹canvas› , как уже было рассказано в предыдущей статье поддерживает работу с внешними изображениями, которые можно вставлять на холст. Таким образом, можно вставить спрайт-изображение и закрывая ненужную часть создать иллюзию непрерывной анимации.

В качестве источника анимации будем использовать следующий спрайт:

Для вывода кадров спрайта будем использовать метод контекста

DrawImage(img,sx,sy,swidth,sheight,x,y,width,height);

Его параметры:

• img - определяет используемое изображение или видео
• sx - начальная координата х вырезания (необязательный параметр)
• sy - начальная координата y вырезания (необязательный параметр)
• swidth - ширина вырезаемого изображения (необязательный параметр)
• sheight - высота вырезаемого изображения (необязательный параметр)
• x - координата размещаемого изображения на canvas
• y - координата размещаемого изображения на canvas
• width - ширина используемого изображения (растянуть или уменьшить изображение, необязательный параметр)
• height - высота используемого изображения (растянуть или уменьшить изображение, необязательный параметр)

Создадим функцию для "оживления" этого спрайта:

Это только небольшая демонстрация возможностей HTML5 Canvas. Эта технология имеет широкий спектр применения: от создания деловой графики до полноразмерных и масштабных браузерных игр.