Первое руководство серии было посвящено ознакомлению с библиотекой KUTE.js для начинающих . В этом уроке мы только анимировали свойство opacity и rotateZ для наших элементов. В этом руководстве вы узнаете, как анимировать остальные свойства CSS с помощью KUTE.js.
Некоторые из этих свойств потребуют от вас загрузки плагина CSS, а другие могут быть анимированы с помощью самого ядра. Оба эти сценария будут обсуждаться отдельно в руководстве.
Свойства блочной модели
Основной движок KUTE.js может анимировать только самые распространенные свойства блочной модели: width , height , top и left . Вам придется использовать плагин CSS для анимации почти всех других свойств блочной модели. Вот пример, который анимирует верхнюю позицию, ширину и высоту наших блоков из предыдущего урока:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
var animateTop = KUTE.allFromTo(
theBoxes,
{ top: 0 },
{ top: 100 },
{ offset: 100 }
);
var animateA = KUTE.fromTo(
boxA,
{ height: 100 },
{ height: 175 }
);
var animateB = KUTE.fromTo(
boxB,
{ width: 100 },
{ width: 200 }
);
|
Возможно, вы заметили, что я использовал allFromTo() для анимации свойства top всех блоков. Однако я использовал fromTo() для анимации отдельных блоков. Вы должны помнить, что ящики остаются в своем окончательном состоянии после завершения анимации.
С помощью плагина CSS вы также сможете анимировать margin , padding и borderWidth . После того, как вы включили плагин в свой проект, остальная часть процесса точно такая же.
Свойства анимации преобразования
Вы можете анимировать почти все свойства преобразования, упомянутые в спецификации, с помощью самого ядра. В этом случае нет необходимости загружать плагин CSS.
Вы можете анимировать перевод элемента в 2D пространстве, используя translate . Точно так же вы можете использовать translateX , translateY и translateZ , чтобы анимировать элементы вдоль соответствующих осей. Чтобы свойство translateZ имело какой-либо эффект, вам также необходимо установить значение для свойства parentPerspective . Вот пример:
|
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
|
var animateAll = KUTE.allFromTo(
theBoxes,
{ translateY: 0 },
{ translateY: 100 },
{ offset: 1000 }
);
var animateA = KUTE.fromTo(
boxA,
{ translateZ: 0 },
{ translateZ: 50 },
{ parentPerspective: 100, parentPerspectiveOrigin: «0% 0%» }
);
var animateB = KUTE.fromTo(
boxB,
{ translateX: 0 },
{ translateX: -200 }
);
startButton.addEventListener(
«click»,
function() {
animateAll.start();
animateA.start();
animateB.start();
},
false
);
|
Если вы нажмете кнопку « Запустить анимацию» и внимательно посмотрите на анимацию, вы увидите, что красное поле сначала переводит -200 в направлении X. После этого он перемещается в исходное положение и начинает переводить в направлении Y. Во-первых, причина для анимации translateX заключается в том, что мы добавили задержку для анимации translateY используя свойство offset .
Как и при rotateZ , вы также можете выполнять вращение вдоль определенной оси, используя свойства rotate , rotateX , rotateY и rotateZ . Поскольку rotateX и rotateY являются трехмерными вращениями, вам нужно будет использовать свойство perspective для анимации вращения, чтобы работать как положено. В следующем примере показано, как использование свойства perspective влияет на общую анимацию для этих двух свойств.
|
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
|
var animateAll = KUTE.allFromTo(
theBoxes,
{ rotate: 0 },
{ rotate: 360 },
{ offset: 1000 }
);
var animateA = KUTE.fromTo(
boxA,
{ rotateY: 0 },
{ rotateY: 180 },
{ perspective: 100 }
);
var animateB = KUTE.fromTo(
boxB,
{ rotateY: 0 },
{ rotateY: -180 }
);
startButton.addEventListener(
«click»,
function() {
animateAll.start();
animateA.start();
animateB.start();
},
false
);
|
В приведенном выше примере боксы A и B начинают свое вращение вдоль оси Y одновременно, но результирующая анимация сильно отличается из-за свойства perspective . Возможно, вы заметили, что оранжевый прямоугольник не выполняет вращение вокруг центра, который был применен к нему с помощью animateAll . Это потому, что все анимации имеют длительность 500 миллисекунд по умолчанию, и мы одновременно применяем animateAll и animateA к оранжевому animateA .
Поскольку animateA применяется после animateAll , его анимация имеет приоритет над animateAll . Вы увидите, что обычное вращение с использованием animateAll все еще применяется к оранжевому animateAll после увеличения продолжительности анимации. Другими словами, вы не можете анимировать различные свойства преобразования, используя несколько объектов анимации одновременно. Все свойства преобразования, которые вы хотите анимировать, должны быть указаны внутри одного объекта анимации. Следующий пример должен прояснить это:
|
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
|
// This will not work as expected
var translateAll = KUTE.allFromTo(
theBoxes,
{ translateY: 0 },
{ translateY: 100 },
{ offset: 1000 }
);
var rotateAll = KUTE.allFromTo(
theBoxes,
{ rotate: 0 },
{ rotate: 360 },
{ offset: 1000 }
);
startButton.addEventListener(
«click»,
function() {
translateAll.start();
rotateAll.start();
},
false
);
// This will work as expected
var rtAll = KUTE.allFromTo(
theBoxes,
{ translateY: 0, rotate: 0 },
{ translateY: 100, rotate: 360 },
{ offset: 1000 }
);
startButton.addEventListener(
«click»,
function() {
rtAll.start();
},
false
);
|
Использование плагина CSS
Как я упоминал ранее, не все свойства CSS можно анимировать, используя только основной движок KUTE.js. Вам необходимо использовать дополнительный плагин CSS для анимации таких свойств, как отступы, поля, положение фона изображений и другие свойства, связанные с границами. Поэтому, прежде чем вы попробуете какие-либо примеры в этом разделе, вы должны включить плагин в свой проект.
|
1
|
<script src=»https://cdn.jsdelivr.net/kute.js/1.6.2/kute-css.min.js»></script>
|
Как только вы borderRadius плагин, вы сможете анимировать свойство border-radius с помощью borderRadius . Вы также можете анимировать все значения угловых border-radius углов по отдельности, используя borderTopLeftRadius , borderTopRightRadius , borderTopRightRadius и borderBottomRightRadius . Вот пример, который показывает анимацию в действии.
Если вы нажмете кнопку « Запустить анимацию» , вы заметите, что верхний левый бордюрный радиус для красно-желтого поля анимирован после задержки. Это из-за свойства offset . Остальные радиусы анимируются, как только мы нажимаем на кнопку. Приведенный выше пример был создан с использованием следующего кода:
|
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
|
var animateAll = KUTE.allFromTo(
theBoxes,
{ borderTopLeftRadius:’0%’ },
{ borderTopLeftRadius:’100%’ },
{ offset: 1000 }
);
var animateA = KUTE.fromTo(
boxA,
{ borderTopRightRadius:’0%’ },
{ borderTopRightRadius:’100%’ }
);
var animateB = KUTE.fromTo(
boxB,
{ borderBottomLeftRadius:’0%’ },
{ borderBottomLeftRadius:’100%’ }
);
var animateC = KUTE.fromTo(
boxC,
{ borderBottomRightRadius:’0%’ },
{ borderBottomRightRadius:’100%’ }
);
startButton.addEventListener(
«click»,
function() {
animateAll.start();
animateA.start();
animateB.start();
animateC.start();
},
false
);
|
Мы не связывали объекты анимации вместе, поэтому на этот раз все анимации запускаются сразу. Вы также можете анимировать цвет различных границ аналогичным образом, используя borderColor , borderTopColor , borderLeftColor , borderRightColor и borderRightColor .
Последние мысли
В этом уроке мы узнали о различных свойствах CSS, которые можно анимировать с использованием и без использования плагина KUTE.js CSS. Если у вас есть какие-либо вопросы, пожалуйста, дайте мне знать в комментариях.
В следующем уроке будут рассмотрены различные анимации, которые можно создать с помощью плагина KUTE.js SVG.