Архивы с меткой: line

Анимация рисования линии

Опубликовано автором
1
icon Lion-break

В последнее время набирают популярность анимационные эффекты рисования линий с чистого листа. Магические картинки анимации игровой консоли или дядьки в кресле копируются с сайта на сайт. Конечно это круто выглядит и наверняка у вас появилось желание сделать, что нибудь подобное для своего сайта. Для этого есть несколько плагинов реализации эффекта анимации линий. Но, я не буду перечислять их, объяснять как они работают, как плагины можно “заточить” под себя. При желании всё это можно найти.
Задача данной статьи иная – понять, как реализуется эффект анимации, отчего зависит направление, последовательность и продолжительность рисования линий.
Почему один файл SVG можно заставить отрисовываться, а другой нет.
Далее будет логично заняться более интересными вещами – последовательной и параллельной анимацией нескольких фрагментов изображения, реализацией плавного преобразования одной векторной картинки в другую.
Продолжить чтение →

Анимация линии SVG часть 3

Опубликовано автором
Ответить
4. Анимация линии посредством изменения её прозрачности.

Основная идея этого примера анимации заключается в том, что на фоне будут появляться линии одна за другой за счёт увеличения яркости. То есть уменьшения прозрачности линии – attributeName=”stroke-opacity” from=”0″ to=”1″

30-35 строка – отрисовка кнопки “Start”
40-46 Отрисовка 4-х линий, которые будут появляться
50-58 анимация первой линии
60-65 анимация второй линии
67-72 анимация третьей линии
74-80 анимация четвертой линии
83-90 изменение цвета прямоугольника
Продолжить чтение →

Анимация линии SVG часть 2

Опубликовано автором
Ответить
3. Анимация линии посредством изменения её координат.

В этой части статьи будем эксперементировать с анимацией координат точек линии.
Команда на отрисовку линии: <line x1=”100″ y1=”170″ x2=”100″ y2=”30″/>

Для наглядности будем изменять только одну конечную координату линии “y2”, изменяя её значение с 30px до 170px.
Запуск анимации осуществляется кнопкой “Start”. Защитой от повторного запуска во время анимации служит команда – restart=”whenNotActive”
Анимация продолжается два цикла – repeatCount=”2″
Продолжить чтение →

Анимация линии SVG

Опубликовано автором
Ответить

Хочу начать с самого простого и надежного вида анимации, которая корректно отображается почти во всех браузерах, даже в IE6 🙂
это – “animateTransform attributeName=”transform” type=”rotate” – поворот объекта на заданный угол вокруг точки.

Первое число в параметре from=”0 100 100″ to=”360 100 100″ в команде “rotate” это градусы, на который будет повернут объект. Положительное значение повернёт объект по часовой стрелке, отрицательное – против часовой стрелки. Вторые и третьи числа это координаты точки, относительно которой будет произведен поворот.


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