Веселые веб-анимационные эффекты с KUTE.js

Моя цель в этой статье — представить KUTE.js , бесплатный и многофункциональный движок JavaScript-анимации с открытым исходным кодом от thednp и dalisoft.

Это вторая статья в серии Beyond CSS: библиотеки динамической анимации DOM . Если вы хотите узнать больше о том, как лучше всего использовать анимацию в Интернете, или когда вы можете подумать об использовании библиотеки анимации JavaScript вместо анимации только с CSS, первая статья в этой серии, Анимация DOM с помощью Anime.js , содержит некоторые полезные советы и ресурсы.

Что вы можете сделать с KUTE.js?

KUTE.js делает доступным ядро ​​анимации и множество плагинов для анимации определенных видов свойств. Эта модульная архитектура помогает поддерживать производительность библиотеки и высокую гибкость.

Что можно анимировать с помощью ядра KUTE.js

Просто используя основной движок , вы можете анимировать:

• Свойство непрозрачности
• Все свойства двумерного преобразования, кроме matrix , двухосного skew и двухосного scale
• Все свойства трехмерного преобразования, кроме matrix3d и rotate3d
• Следующие свойства блочной модели: width , height , top и left
• Свойства color и backgroundColor
• Прокрутка анимации как на объекте window и на любом прокручиваемом элементе DOM

Что можно анимировать с помощью CSS-плагина KUTE.js

С помощью плагина CSS количество возможностей для анимации увеличивается. Вот что вы можете сделать:

• Анимировать все свойства borderWidth модели, такие как margin , padding , borderWidth и т. Д.
• borderRadius свойство borderRadius
• Свойства анимации текста, такие как fontSize , lineHeight , letterSpacing , wordSpacing и т. Д.
• Свойства анимации цвета, такие как borderColor и outlineColor
• Анимируйте свойство clip , теперь оно устарело в CSS.
• Анимируйте свойство backgroundPosition .

Что можно оживить с помощью плагина KUTE.js SVG

SVG (Scalable Vector Graphics) иллюстрации и значки находятся по всему Интернету. Это не случайно. SVG-графика выглядит великолепно независимо от разрешения экрана, поскольку она написана на языке разметки, делает ее более доступной и при правильной оптимизации может иметь небольшой размер файла.

Одна удивительная вещь, которую вы можете сделать с SVG-графикой, это анимировать ее различные части, и KUTE.js предлагает отличный плагин, который позволяет вам создавать сложные анимации без особых усилий.

В частности, SVG-плагин KUTE.js позволяет вам:

• Morph SVG пути
• Анимировать атрибут штриха SVG
• Animate SVG преобразуется надежным кросс-браузерным способом

Что можно анимировать с помощью плагина атрибутов KUTE.js

С помощью плагина Attributes KUTE.js позволяет вам анимировать любой числовой атрибут представления с единицей измерения или без нее, например, px, em и т. Д. Этот плагин в сочетании с плагином SVG делает возможным создание некоторых интересных анимаций.

Что можно анимировать с помощью текстового плагина KUTE.js

Расширение KUTE.js с помощью плагина Text позволит вам анимировать текстовые элементы двумя способами:

• Увеличение и уменьшение строкового представления числа
• Написание строки символом за раз.

Посетите специальную страницу на сайте KUTE.js для получения полной информации о его возможностях:

Использование KUTE.js

Пришло время поэкспериментировать с KUTE.js.

Включение KUTE.js в ваш проект

Вы можете скачать KUTE.js с помощью кнопки «Скачать» на веб-сайте проекта , со страницы KUTE.js на GitHub или даже по ссылке CDN .

 KUTE.to( element, {propertyName:propertyValue} ).start(); 

 KUTE.fromTo( element, {fromPropertyName:fromPropertyValue}, {toPropertyName: toPropertyValue} ).start(); 

 tween.playing; tween.paused; 

 KUTE.to('.icon-star-dark', {opacity: 0}).start(); 

 KUTE.fromTo( '.icon-star-dark', //selector {opacity: 1}, //start value {opacity: 0} //end value ).start(); 

 KUTE.fromTo( element, { fromPropertyName1:fromPropertyValue1, fromPropertyName2:fromPropertyValue2, fromPropertyName3:fromPropertyValue3 }, { toPropertyName1: toPropertyValue1, toPropertyName2: toPropertyValue2, toPropertyName3: toPropertyValue3 } ).start(); 

 KUTE.fromTo('.icon-star-dark', { scale: 1.5, //start value 1 rotate: 360, //start value 2 opacity: 1 //start value 3 }, { scale: 0.3, //end value 1 rotate: 0, //end value 2 opacity: 0 //end value 3 }).start(); 

 KUTE.fromTo('.icon-star-dark', { //from properties ... }, { //to properties ... }, { //options transformOrigin: '30% 50%', duration: 500, easing: 'easeInElastic' }).start(); 

 //define the tween object var sparklingStars = KUTE.allFromTo(stars, { opacity: 0.1, //start value 1 scale: 0.1 //start value 2 }, { opacity: 1, //end value 1 scale: 1.2 //end value 2 }, { //options offset: 200, repeat: 4, yoyo: true }); //start the animation sparklingStars.start(); 

 tween1.chain(tween2, tween3); 

 var sparklingStars = KUTE.allFromTo('.icon', { //rest of the code here }); var disappearingBall = KUTE.fromTo('.ball', { //rest of the code here }); var greetingText = KUTE.fromTo('.greeting', { //rest of the code here }); //chaining takes place here sparklingStars.chain(disappearingBall, greetingText).start(); 

 var tween = KUTE.to(element, {attr: {property: value}}); 

 var morphingBall = KUTE.fromTo('#ball', { path: '#ball', attr: { fill: 'rgba(21, 19, 121, 1)' }, opacity: 0.5 }, { path: '#heartpath', attr: { fill: '#7c0e18' }, opacity: 1 }, { easing: 'easingElasticIn', morphIndex: 12, duration: 3000 }); 

 var greetingText = KUTE.to('.greeting', { opacity: 1, scale: 1, text: 'Happy 2017 Folks!' //more properties }, { easing: 'easingBounceIn', //more options });