Мы начали эту серию с изучения того, как анимировать HTML-элементы с помощью mojs. Во втором уроке мы перешли к анимации встроенных форм SVG с помощью модуля Shape . Третий учебник охватил больше способов анимации форм SVG с использованием модулей ShapeSwirl и ShapeSwirl .
Теперь мы узнаем, как анимировать различные формы SVG в формировании пакета с помощью модуля Burst . Этот учебник будет зависеть от концепций, которые мы рассмотрели в предыдущих трех учебниках. Если вы еще не прочитали их, я бы посоветовал вам сначала просмотреть их.
Создание основных всплесков анимации
Первое, что нам нужно сделать, прежде чем мы сможем создать какую-либо пакетную анимацию, — создать экземпляр объекта Burst . После этого мы можем просто указать значения различных свойств, чтобы контролировать, как воспроизводится анимация. Имена многих свойств в модуле Burst совпадают со свойствами в модуле Shape . Однако эти свойства выполняют очень разные задачи в этом случае.
Свойства left и right определяют начальное положение взрыва вместо частиц внутри него. Точно так же свойства x и y определяют смещение всего всплеска вместо отдельных частиц.
Радиус круга, образованного всеми частицами разрыва, определяется свойством radius . Это очень отличается от свойства radius отдельных фигур, которое определяет размер этих фигур. В случае взрыва радиус определяет, насколько дальше будут отдельные фигуры в нем.
Количество фигур или частиц в одном пакете можно указать с помощью свойства count . По умолчанию в каждом пакете будет пять частиц, которые вы создаете. Все эти частицы равномерно распределены по окружности взрыва. Например, если есть четыре частицы, они будут расположены под углом 90 градусов друг к другу. Если есть три частицы, они будут размещены под углом 120 градусов.
Если вы не хотите, чтобы частицы всплеска покрывали все 360 градусов, вы можете указать часть, которая должна быть покрыта, используя свойство degree . Любое значение выше 0 действительно для этого свойства. Указанное количество градусов будет равномерно распределено между всеми частицами. Если значение градуса превышает 360, формы могут перекрываться.
Угол, заданный с помощью свойства angle определяет угол всего пакета. В этом случае отдельные частицы вращаются не вокруг своего собственного центра, а вокруг центра всплеска. Это похоже на то, как Земля вращается вокруг Солнца, что отличается от вращения Земли вокруг своей оси.
Свойство scale масштабирует значение всех физических свойств пакета и, в свою очередь, отдельных фигур. Как и другие свойства всплеска, все формы в нем будут масштабироваться одновременно. Установка scale всплеска на 3 увеличит радиус всего всплеска, а также размер отдельных фигур на 3.
В следующем фрагменте кода мы создаем пять различных пакетов, используя свойства, которые мы только что обсудили.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
var burstA = new mojs.Burst({
count: 20
});
var burstB = new mojs.Burst({
angle: {
0: 360
},
scale: {
1: 2
},
radius: 10
});
var burstC = new mojs.Burst({
angle: {
0: 360
},
scale: {
1: 2
},
radius: {
10: 100
}
});
var burstD = new mojs.Burst({
degree: 180,
radiusX: 10,
angle: -90,
scale: {
1: 2
},
radius: {
10: 100
}
});
var burstE = new mojs.Burst({
count: 20,
degree: 3600
});
|
Вы можете видеть, что burstA и burstE отличаются только количеством градусов, которые они должны покрыть. Поскольку частицы в burstA должны покрывать 360 градусов (значение по умолчанию), они располагаются на 360/20 = 18 градусов друг от друга. С другой стороны, частицы в burstE расположены на расстоянии 3600/20 = 180 градусов. Начиная с нуля, первая частица находится под углом 0 градусов, а следующая — под углом 180 градусов.
Третья частица затем помещается под углом 360 градусов, что в основном равно 0 градусам. Затем четвертая частица помещается под углом 540 градусов, но в основном она равна 180 градусам. Другими словами, все частицы с нечетным номером расположены под углом 0 градусов, а все частицы с четным числом — под углом 180 градусов. В конце вы видите только две частицы, потому что все остальные пересекаются с первыми двумя.
Важно помнить, что вы не можете напрямую контролировать продолжительность, задержку или функцию замедления всплесков анимации. Модуль определяет все эти значения автоматически, основываясь на значениях анимированных значений различных дочерних элементов.
Манипулирование отдельными частицами взрыва
До сих пор в этом уроке для всех частиц в пакете применялась одинаковая анимация. Их угол, масштаб, радиус и положение изменяются на одно и то же значение. Более того, мы не смогли контролировать продолжительность и задержку ни отдельных частиц, ни всплеска в целом. Модуль mojs Burst не имеет набора свойств, которые могут напрямую изменять все эти значения. Однако мы можем указать значение анимации для отдельных частиц, что, в свою очередь, влияет на анимацию всплеска.
Все частицы в анимации всплеска считаются дочерними по отношению к исходному объекту всплеска. Поэтому mojs позволяет нам управлять анимацией отдельных всплесков частиц, используя свойство children , которое принимает объект в качестве значения. Вы можете использовать все свойства ShapeSwirl кроме x и y внутри ShapeSwirl объекта. Это имеет смысл, потому что отдельные частицы в анимации всплеска должны появляться в определенных положениях, и, позволяя нам случайным образом изменять положение отдельных частиц, изменится конфигурация.
Любые значения дочерних свойств, которые вы не укажете, будут установлены в значения по умолчанию, предоставленные модулем ShapeSwirl . В следующем примере мы анимируем 20 различных строк нашей всплесковой анимации. На этот раз свойство angle было установлено для отдельных частиц вместо объекта « Burst так что вокруг всего центра вращаются только линии, а не весь объект. Как мы узнали из предыдущего урока , все объекты ShapeSwirl по умолчанию уменьшаются с 1 до 0. Вот почему длины линий изменяются с 40 до 0 в анимации.
|
01
02
03
04
05
06
07
08
09
10
11
|
var burstA = new mojs.Burst({
count: 20,
children: {
shape: ‘line’,
stroke: ‘black’,
radius: 20,
angle: {
0: 180
}
}
});
|
Как я упоминал ранее, мы можем анимировать все свойства ShapeSwirl внутри пакетной анимации. Каждый дочерний элемент в анимации может иметь свой собственный набор свойств. Если указано только одно значение, оно будет применено ко всем дочерним частицам. Если значения представлены в виде массива, они будут применяться последовательно, по одной частице за раз.
Вот код JavaScript для создания пяти различных серийных анимаций с использованием всех концепций, которые мы изучили до сих пор.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
var burstA = new mojs.Burst({
count: 20,
angle: {
0: 180
},
radius: {
0: 100
},
children: {
shape: «polygon»,
stroke: «black»,
radius: 20,
angle: {
0: 360
},
duration: 4000
}
});
var burstB = new mojs.Burst({
count: 20,
angle: {
0: 180
},
radius: {
0: 100
},
children: {
shape: «polygon»,
fill: [«yellow», «cyan», «orange»],
stroke: «black»,
radius: 20,
scale: {
1: 2
},
duration: 2000
},
isShowEnd: false
});
var burstC = new mojs.Burst({
count: 20,
angle: {
0: -180
},
radius: {
0: 100
},
children: {
shape: «circle»,
fill: [«red», «black», «blue»],
radius: {
10: «stagger(5, 1)»
}
}
});
var burstD = new mojs.Burst({
count: 6,
radius: {
0: 100
},
children: {
shape: «circle»,
fill: [«red», «yellow», «blue»],
scale: {
1: «rand(1, 10)»
}
},
isShowEnd: false
});
var burstE = new mojs.Burst({
count: 6,
radius: {
0: 100
},
children: {
shape: «circle»,
fill: [«red», «yellow», «blue»],
stroke: «black»,
scale: {
1: «rand(1, 10)»
}
}
}).then({
angle: {
0: 360
},
radius: {
100: 0
},
scale: {
1: 0
}
});
|
В первой анимации серии angle примененный непосредственно к объекту серии, поворачивает всю группу вокруг центра объекта серии. Тем не менее, angle примененный внутри свойства children, вращает все треугольники вокруг их собственных центров. Мы также замедлили пакетную анимацию, изменив продолжительность анимации для всех детей до 4000 мс.
Во второй серии анимации цвет всех треугольников берется из массива, переданного свойству fill . Мы указали только три цвета заливки, но общее количество треугольников равно 20. В таких случаях mojs продолжает циклически проходить через элементы массива и снова и снова заполняет треугольники одними и теми же тремя цветами.
В четвертой анимации мы используем строки rand , о которых мы узнали в предыдущем уроке , чтобы случайным образом выбрать значение масштаба для всех дочерних частиц. Мы также устанавливаем значение свойства isShowEnd в false , чтобы скрыть частицы в конце анимации.
В пятой анимации мы используем метод then() из учебника модуля Shape, чтобы воспроизвести другую последовательность анимации после ее завершения.
Последние мысли
Целью этой серии было познакомить вас с основами библиотеки анимации mojs . Каждый урок посвящен отдельному модулю и тому, как вы можете использовать свойства этого модуля для создания основных анимаций.
В этом последнем уроке использовались концепции из предыдущих уроков для создания немного более сложных анимаций. Mojs — очень мощная библиотека анимации, и конечные результаты, которые вы получите, зависят от того, насколько креативно вы сможете получить все свойства, поэтому продолжайте экспериментировать.
Если есть что-то, что вы хотели бы, чтобы я разъяснил в этом уроке, пожалуйста, дайте мне знать в комментариях.