В предыдущем уроке мы использовали mojs для анимации различных элементов HTML на веб-странице. Мы использовали библиотеку в основном для анимации элементов div которые выглядели как квадраты или круги. Однако вы можете использовать модуль Html для анимации всех видов элементов, таких как изображения или заголовки. Если вы на самом деле намереваетесь анимировать базовые фигуры с помощью mojs, вам, вероятно, следует использовать модуль Shape из библиотеки.
Модуль Shape позволяет создавать базовые фигуры в DOM с использованием SVG. Все, что вам нужно сделать, это указать тип фигуры, которую вы хотите создать, а все остальное позаботятся моджи. Этот модуль также позволяет анимировать различные формы, которые вы создаете.
В этом уроке мы расскажем об основах модуля Shape и о том, как вы можете использовать его для создания различных форм и их анимации.
Создание фигур в Мойс
Вам нужно создать экземпляр объекта Shape mojs для создания различных фигур. Этот объект будет принимать различные параметры, которые можно использовать для управления цветом, размером, углом и т. Д. Созданных вами фигур.
По умолчанию любая созданная вами фигура будет использовать тело документа в качестве родителя. Вы можете указать любой другой элемент в качестве его родителя, используя свойство parent . Вы также можете назначить класс любой фигуре, которую вы создаете, с помощью свойства className . Библиотека не будет назначать класс по умолчанию, если вы пропустите это свойство.
В Mojs встроено восемь различных фигур, так что вы можете создавать их напрямую, устанавливая значение для свойства shape . Вы можете установить его значение в circle для создания окружностей, rect для создания прямоугольников и polygon для создания многоугольников. Вы также можете рисовать прямые линии, устанавливая значение shape в виде lines . Библиотека нарисует две перпендикулярные линии, если значение shape является cross и несколько параллельных линий, если shape equal . Аналогично, зигзагообразные линии могут быть созданы путем установки значения свойства в zigzag .
Объект shape также имеет свойство points которое имеет разные значения для разных фигур. Он определяет общее количество сторон в polygon и общее количество параллельных линий equal формы. Свойство points также можно использовать для установки количества изгибов в zigzag линии.
Как я упоминал ранее, mojs создает все эти фигуры, используя SVG. Это означает, что объект Shape также будет иметь некоторые специфические свойства SVG для управления внешним видом этих фигур. Вы можете установить цвет заливки формы mojs, используя свойство fill . Если цвет не указан, библиотека будет использовать deeppink цвет, чтобы заполнить форму. Точно так же вы можете указать цвет обводки для фигуры, используя свойство stroke . Когда цвет обводки не указан, mojs сохраняет обводку прозрачной. Вы можете контролировать прозрачность заливки и обводки для фигуры, используя свойства fillOpacity и strokeOpacity . Они могут иметь любое значение от 0 до 1.
Mojs позволяет вам контролировать другие свойства формы, связанные с обводкой. Например, вы можете указать шаблон штрихов и разрывов в траектории обводки, используя свойство strokeDasharray . Это свойство принимает как строки, так и числа в качестве допустимых значений. Его значение по умолчанию равно нулю, что означает, что обводка будет сплошной линией. Ширина обводки может быть указана с strokeWidth свойства strokeWidth . Все штрихи по умолчанию будут шириной 2 пикселя. Форма различных линий в их конечных точках может быть задана с strokeLinecap свойства strokeLinecap . Допустимые значения для strokeLinecap : butt , round и square .
Любая созданная вами фигура по умолчанию помещается в центр ее родительского элемента. Это потому, что left и right свойства для формы установлены на 50% каждое. Вы можете изменить значения этих свойств, чтобы разместить элементы в разных местах. Другой способ управления положением фигуры — с помощью свойств x и y . Они определяют, насколько форма должна быть смещена в горизонтальном и вертикальном направлении соответственно.
Вы можете указать радиус фигуры, используя свойство radius . Это значение используется для определения размера конкретной фигуры. Вы также можете использовать radiusX и radiusY чтобы указать размер фигуры в определенном направлении. Другой способ управления размером фигуры — с помощью свойства scale . По умолчанию значение scale равно 1, но вы можете установить его на любое другое понравившееся вам число. Вы также можете масштабировать фигуру в определенном направлении, используя свойства scaleX и scaleY .
Источником всех этих преобразований фигуры является ее центр по умолчанию. Например, если вы поворачиваете любую фигуру, указав значение для свойства angle , фигура будет вращаться вокруг своего центра. Если вы хотите повернуть фигуру вокруг какой-либо другой точки, вы можете указать ее, используя свойство origin . Это свойство принимает строку в качестве значения. Установка его в '0% 0%' будет вращать, масштабировать или перемещать форму вокруг ее верхнего левого угла. Точно так же установка его на « '50% 0%' будет вращать, масштабировать или перемещать форму вокруг центра ее верхнего края.
Вы можете использовать все эти свойства, которые мы только что обсуждали, для создания большого разнообразия форм. Вот несколько примеров:
|
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
|
var circleA = new mojs.Shape({
parent: «.container»,
shape: «circle»,
left: 0,
fill: «orange»,
stroke: «black»,
strokeWidth: 5,
isShowStart: true
});
var circleB = new mojs.Shape({
parent: «.container»,
shape: «circle»,
left: 175,
fill: «orange»,
stroke: «red»,
radiusX: 80,
strokeWidth: 25,
strokeDasharray: 2,
isShowStart: true
});
var rectA = new mojs.Shape({
parent: «.container»,
shape: «rect»,
left: 350,
fill: «red»,
stroke: «black»,
strokeWidth: 5,
isShowStart: true
});
var rectB = new mojs.Shape({
parent: «.container»,
shape: «rect»,
left: 500,
fill: «blue»,
stroke: «blue»,
radiusX: 40,
radiusY: 100,
strokeWidth: 25,
strokeDasharray: 20,
isShowStart: true
});
var polyA = new mojs.Shape({
parent: «.container»,
shape: «polygon»,
top: 300,
left: 0,
fill: «yellow»,
stroke: «black»,
strokeWidth: 10,
points: 8,
isShowStart: true
});
var polyB = new mojs.Shape({
parent: «.container»,
shape: «polygon»,
top: 350,
left: 175,
radiusX: 100,
radiusY: 100,
fill: «violet»,
stroke: «black»,
strokeWidth: 6,
strokeDasharray: «15, 10, 5, 10»,
strokeLinecap: «round»,
points: 3,
isShowStart: true
});
var lineA = new mojs.Shape({
parent: «.container»,
shape: «cross»,
top: 350,
left: 375,
stroke: «red»,
strokeWidth: 40,
isShowStart: true
});
var zigzagA = new mojs.Shape({
parent: «.container»,
shape: «zigzag»,
top: 500,
left: 50,
fill: «transparent»,
stroke: «black»,
strokeWidth: 4,
radiusX: 100,
points: 10,
isShowStart: true
});
var zigzagB = new mojs.Shape({
parent: «.container»,
shape: «zigzag»,
top: 500,
left: 350,
fill: «blue»,
stroke: «transparent»,
radiusX: 100,
points: 50,
isShowStart: true
});
|
Формы, созданные с помощью приведенного выше кода, показаны в демонстрационной версии CodePen ниже:
Анимированные фигуры в Мойс
Вы можете анимировать практически все свойства фигуры, которые мы обсуждали в предыдущем разделе. Например, вы можете анимировать количество точек в многоугольнике, указав разные начальные и конечные значения. Вы также можете анимировать происхождение формы от « '50% 50%' до любого другого значения, например « '75% 75%' . Другие свойства, такие как angle и scale ведут себя так же, как и в модуле Html .
Продолжительность, задержка и скорость различных анимаций могут контролироваться с использованием свойств duration , delay и speed соответственно. Свойство repeat также работает как в модуле Html . Вы можете установить его на 0, если хотите воспроизводить анимацию только один раз. Точно так же вы можете установить его на 3, чтобы воспроизвести анимацию 4 раза. Все значения замедления, которые были действительны для модуля Html , также действительны для модуля Shape .
Единственное различие между возможностями анимации этих двух модулей состоит в том, что вы не можете указать параметры анимации отдельно для свойств в модуле Shape . Все свойства, которые вы анимируете, будут иметь одинаковую продолжительность, задержку, повторения и т. Д.
Вот пример, где мы анимируем положение x, масштаб и угол круга:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
var circleA = new mojs.Shape({
parent: «.container»,
shape: «circle»,
left: 175,
fill: «red»,
stroke: «black»,
strokeWidth: 100,
strokeDasharray: 18,
isShowStart: true,
x: {
0: 300
},
angle: {
0: 360
},
scale: {
0.5: 1.5
},
duration: 1000,
repeat: 10,
isYoyo: true,
easing: «quad.in»
});
|
Одним из способов управления воспроизведением различных анимаций является использование метода .then() для указания нового набора свойств, которые нужно анимировать после полного завершения первой последовательности анимации. Вы можете дать всем свойствам анимации новые начальные и конечные значения внутри .then() . Вот пример:
|
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
|
var polyA = new mojs.Shape({
parent: «.container»,
shape: «polygon»,
fill: «red»,
stroke: «black»,
isShowStart: true,
points: 4,
left: 100,
x: {
0: 500
},
strokeWidth: {
5: 2
},
duration: 2000,
easing: ‘elastic.in’
}).then({
strokeWidth: 5,
points: {
4: 3
},
angle: {
0: 720
},
scale: {
1: 2
},
fill: {
‘red’: ‘yellow’
},
duration: 1000,
delay: 200,
easing: ‘elastic.out’
});
|
Последние мысли
В этом уроке мы узнали, как создавать различные фигуры с помощью mojs и как анимировать свойства этих фигур.
Модуль Shape имеет все возможности анимации модуля Html . Единственное отличие состоит в том, что свойства не могут быть анимированы индивидуально. Их можно анимировать только как группу. Вы также можете управлять воспроизведением анимации, используя различные методы для воспроизведения, приостановки, остановки и возобновления анимации в любой точке. Я подробно описал эти методы в первом уроке серии.
Если у вас есть какие-либо вопросы, связанные с этим учебником, не стесняйтесь оставлять комментарии. В следующем уроке вы узнаете о ShapeSwirl и ShapeSwirl в mojs.