SVG: анимация
В предыдущих уроках серии мы разбирались использованием векторной графики SVG в HTML. Теперь пришел черед рассмотреть анимацию SVG.
Основы
Анимация SVG выполняется с помощью элемента <animate>
:
<svg> <rect width="200" height="200" fill="slategrey"> <animate attributeName="height" from="0" to="200" dur="3s"/> </rect> </svg>
Мы добавляем элемент <animate>
внутрь элемента <svg>
, который будем анимировать. Элемент <animate>
содержит следующие атрибуты:
attributeName: здесь определяется атрибут, который будет участвовать в анимации.
from: опциональный атрибут. Определяет стартовое значение, по умолчанию используется текущее значение.
to: данный атрибут определяет направление анимации. В зависимости от заданного в атрибуте attributeName
значения результат может различаться. В приведенном примере будет изменяться высота элемента.
dur: определяется длительность анимации. Значение нужно задавать в формате Clock Value Syntax. Например, 02:33
соответствует 2 минутам и 33 секундам, а 3h
соответствует 3 часам. Для нашего примера мы определяем длительность анимации в 3 секунды.
То же самое мы проделываем с элементом <circle>
, но для него будет анимировать атрибут радиуса (r
).
<svg> <circle r="100" cx="100" cy="100" fill="slategrey"> <animate attributeName="r" from="0" to="100" dur="3s"/> </circle> </svg>
Перемещение элементов
Для перемещения SVG элементов нужно только указать координаты x
и y
:
<svg> <rect x="0" y="0" width="200" height="200" fill="slategrey"> <animate attributeName="x" from="0" to="200" dur="3s" fill="freeze"/> </rect> </svg>
В примере мы перемещаем прямоугольник с 0
до 200
за 3 секунды. Также мы добавляем атрибут fill
к элементу <animate>
. Данный атрибут определяет как анимация будет действовать после завершения. В примере значение freeze
вынуждает элемент оставаться там, где завершается анимация.
Также все действует и для элемента <circle>
, но для него будем изменять атрибуты cx
или cy
:
<svg> <circle r="100" cx="100" cy="100" fill="slategrey"> <animate attributeName="cy" from="100" to="200" dur="3s" fill="freeze"/> </circle> </svg>
Анимация нескольких атрибутов
Конечно, в элементе <animate>
мы можем задавать изменения только для одного атрибута, но самих элементов <animate>
мы можем определять несколько. Вот так, например:
<svg> <circle r="100" cx="110" cy="110" fill="slategrey" stroke="#000" stroke-width="7"> <animate attributeName="r" from="0" to="100" dur="3s"/> <animate attributeName="stroke-width" from="0" to="10" dur="7s"/> </circle> </svg>
Здесь мы анимируем для атрибута для элемента <circle>
- радиус и ширину обводки.
Задаем траекторию перемещения
В одном из предыдущих уроков серии мы рассматривали как расположить текст по заданной линии. Также можно задавать анимацию элемента по заданной траектории:
<svg> <defs> <path id="thepath" fill="none" stroke="#000000" d="M0.905,0.643c0,0,51.428,73.809,79.047,166.19s68.095,38.572,107.144-18.095 c39.047-56.667,72.381-92.382,113.333-42.381S335.5,178.5,374,200.5s82-18.5,97.5-33.5"/> </defs> <circle r="15" cx="15" cy="15" fill="slategrey"> </svg>
Траекторию лучше задавать с помощью элемента <defs>
, как показано в примере. Чтобы векторный элемент следовал по траектории нужно определить анимацию с помощью элемента <animateMotion>
и связать id
траектории с элементом <mpath>:
<animateMotion dur="3s"> <mpath xlink:href="#thepath"/> </animateMotion>
Трансформации
Мы также можем использовать трансформации scale
, translate
и rotate
для анимаций с помощью элемента <animateTransform>
:
<svg> <rect width="200" height="200" fill="slategrey"> <animateTransform attributeName="transform" type="scale" from="0" to="1" dur="3s"/> </rect> </svg>
Трансформации в SVG действуют по тому же принципу, что и в CSS3.
Заключение
С помощью описанных инструментов можно создавать различные эффекты и приложения. Например, такие, которые пока выглядят баловством, но скрывают в себе большой потенциал, особенно в условиях отступления Flash.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/GOd12sZlVjE/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Все мы сидим в сточной канаве, но некоторые при этом смотрят на звезды Уайльд Оскар - (1854-1900) - английский писатель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.