Генератор keyTimes


Генератор keyTimes позволяет визуально настроить разные темпы анимации на разных участках пути анимируемого объекта.
У генератора изменяются два атрибута: по оси “Х” – keyTimes, по оси “Y” – values
Перетаскивая красную контрольную точку строго по горизонтали, мы тем самым меняем значение keyTimes для данного отрезка пути, указанного в соответствующем атрибуте values.
Количество значений keytimes и values должно совпадать.
Значения keyTimes указываются в долях от единицы, каждое значение разделено точкой с запятой. keyTimes=” 0;0.25;0.5;0.75;1″
В итоге суммарная единица keyTimes равна общей продолжительности анимации.
Пример использования keyTimes генератора

Выберем график анимации, как на картинке ниже

график keyTimes

По графику видно, что первые две трети пути идёт приращение скорости, а на остальной части пути – падение скорости.
Чтобы это было наглядно, в примере ниже для для бордового прямоугольника использовал значение keyTimes для придания неравномерности движения. Синий прямоугольник движется в соответствии с атрибутами по умолчанию. То есть скорость анимации для него зависит только от соотношения длины пути и времени.


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

Ещё один пример с использование keyTimes.
Смайлик, который подмигивает одним глазом при клике.

⇚ Генератор keysplines
Следующая ⇛  Безье второго порядка

Добавление SVG MIME Types image/svg+xml

Указание MIME-типа image/svg+xml необходимо в HTML при передаче данных с помощью файлов *.svg и вставки на страницу различных объектов SVG.

  • Для WordPress можно установить плагин, который всё сделает за вас.
  • Если плагин не помог или не хочется использовать плагины, то можно добавить MIME type в ручную:
1. Добавляете в файл functions.php

Откройте ваш functions.php и добавьте следующий код:

Вы должны заменить wpcontent_ своим собственным пространством имен. Эта функция просто добавляет SVG и SVGZ (сжатый SVG) к разрешенным типам загружаемых файлов в WordPress и подключается к функции WordPress upload_mimes().

2. Добавление SVG Mime Types в .htaccess

Откройте ваш корневой файл .htaccess и добавьте следующее после строки: #End WordPress.

Сохраните файл, и все готово! Теперь вы можете сохранять SVG из Illustrator или Inkscape и использовать их на своем сайте WordPress.

Файл .htaccess обычно расположен в корне диска “C:” Если на вашем ПК его нет, то можно его создать самому:
Вот содержание этого файла по умолчанию:


Диагностика и отладка приложений ⇛

Генератор keysplines


Атрибут keySplines определяет набор контрольных точек Безье, связанных со списком keyTimes, определяя кубическую функцию Безье, управляющую временным интервалом.
От формы кривой Безье зависит неравномерность движения внутри временного интервала. Один и тот же путь может быть пройден с разными скоростями в начале, середине или в конце пути.
Перетаскивайте мышкой красные контрольные точки и наблюдайте в правом окне график скорости.
Далее копируйте цифры в атрибут keySplines 0.06 0.925 0.205 0.88

В первом примере движение бордового шарика начинается очень быстро и медленно заканчивается

grafic












Во втором примере движение бордового шарика начинается очень медленно и быстро заканчивается

wisely-slow

Сравните движение бордового шарика с движением синего шарика движущегося с линейной скоростью.










⇚ Безье второго порядка
Следующая ⇛  Генератор keyTimes

Диагностика и отладка приложений SVG

В статье рассматриваются наиболее типичные причины неработоспособности приложений SVG.
На практике очень часто случается, что приложение SVG должно работать, фрагменты кода, как и в других работающих приложениях точно такие же, но любые попытки найти ошибку, заставить работать новое приложение не приносят результата.
Хочу поделиться некоторыми практическими приемами по диагностике и отладке приложений SVG.
Продолжить чтение

Анимация семейства улиток

Анимация семейства улиток

Для создания анимации необходимо нарисовать или найти подходящий файл SVG с главным персонажем анимации – улиткой.
Будет по возможности сделана комплексная анимация: тела улитки, анимация усиков, глаз и рта улитки. Улиток будет несколько: мама улитка и детеныши. Всё семейство будет двигаться по листику травы слева направо.

Продолжить чтение

Генератор эллипсов



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


Автор: Peter Collingridge

Update В формуле из генератора эллипсов необходимо заменить circle на ellipse

Примеры анимации эллипсов

Начальная фигура, которую будем анимировать


Изменение атрибута эллипсаrx

Изменение атрибута эллипсаry

Другие примеры анимации здесь

⇚ Генератор окружностей
Следующая ⇛  Кубическая кривая Безье