Создание анимации на базе javascript с помощью библиотеки anime.js. часть 2

Property Values

Value Description
animationName Specifies the name of the keyframe you want to bind to the selector
animationDuration Specifies how many seconds or milliseconds an animation takes to complete
animationTimingFunction Specifies the speed curve of the animation
animationDelay Specifies a delay before the animation will start
animationIterationCount Specifies how many times an animation should be played
animationDirection Specifies whether or not the animation should play in reverse on alternate cycles
animationFillMode Specifies what values are applied by the animation outside the time it is executing
animationPlayState Specifies whether the animation is running or paused
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Пробуем CSS3-анимацию

В качестве бонуса мы напишем небольшую CSS3-анимацию. Сейчас с помощью CSS можно создать много такого, что раньше можно было сделать только с помощью JavaScript.


Однако в этот раз триггером для запуска анимации будет не клик, а наведение курсора на объект.

Начнём мы опять с создания квадрата. Пусть в этот раз он будет зелёный:

С hover мы уже знакомы, только добавим команду border-radius: 50%, которая превратит наш квадрат в круг:

Что делать, если мы хотим сделать переход более плавным? Добавим в описание квадрата строчку transition:

  1. all задает параметры, которые мы меняем (ширину, высоту, прозрачность…) — в этом случае мы их не ограничиваем;
  2. .5s определяет время, которое будет длиться переход (полсекунды);
  3. ease задаёт амплитуду действия;
  4. 2s означает задержку в две секунды.

ВНИМАНИЕ!

В CSS-коде время указывается в секундах!

Строку transition можно написать и в нижнем блоке — тогда параметры, написанные в той строке, будут действовать только при анимациях, за которые отвечает hover. Например, на картинке ниже квадрат секунду подождёт, а потом будет пять секунд округляться. Когда мы отведём мышку, он подождёт две секунды и за полсекунды вернётся в свою привычную квадратную форму.

Если вам хочется добавить движение, вы можете заставить квадрат вращаться командой rotate (360deg).

Вот и всё! Вы попробовали работать с библиотекой jQuery, сделали пару простых анимаций в JavaScript, написали виджет-аккордеон и уловили разницу с созданием анимации в CSS3.

Создание виджета Accordion

Теперь мы сделаем более практичную вещь — виджет Accordion (аккордеон). Вы наверняка с ним уже сталкивались, хотя, может быть, и не слышали этого названия. А оно говорящее — виджет действительно похож на аккордеон: у него есть панельки, которые при нажатии раскладываются и складываются.

Приступим к работе — начнём опять в окошке HTML. Создадим сам аккордеон, а в нём — класс panel, в котором, в свою очередь, будут два класса: panel-header и panel-body. На них мы напишем «HTML» и «helllo». Вам не обязательно писать то же самое, можете написать что угодно. Должно получиться вот так:

Сделаем несколько таких панелек. Для этого просто вставим то же самое (div class=”panel» и всё, что под ним) ещё пару раз. У вас должно получиться вот это:

Согласитесь, выглядит скудновато? Давайте добавим оформление. Для этого перейдём в окно CSS, определим там размеры нашего аккордеона (width: 450px) и отцентруем его (margin: auto). Теперь сделаем ему рамочку из чёрной линии в пиксель толщиной (border: 1px solid #222) и отступ текста в пять пикселей (padding: 5px). Конечно же, вы можете менять размеры и цвета.

Теперь скроем нижний текст (потом он будет показываться при клике):

Напоминаем, что мы всё ещё работаем в окошке CSS.


А теперь — вишенка на торте! Сделаем так, чтобы наш заголовок подчёркивался, когда мы наводим на него мышку, а курсор превращался в указатель. Поможет нам в этом селектор hover, который обозначает изменения при наведении курсора:

С оформлением мы закончили и наконец-то дошли до третьего окошка. По той же схеме, по которой мы заставляли квадрат исчезнуть, теперь заставим появиться наш текст.

Разница в том, что вместо функции hide мы в этот раз используем toggle () — она позволяет переключать состояния. Например, если бы мы использовали show, текст бы просто показывался, а так он открывается при первом клике, а при втором опять прячется.

Казалось бы, вот и всё, задача выполнена, можно заканчивать? Но всё не так просто. При клике на заголовок открывается не только текст под ним, но и тексты на остальных panel-body, потому что мы не прояснили, какой именно надо показать.

Как это исправить? Для начала немного разберёмся в отношениях наших заголовков. Они похожи на семью, где есть родители, дети и братья. В HTML-коде это хорошо видно, давайте посмотрим:

Линии красного цвета ведут от родителя к ребёнку, а оранжевые соединяют братьев.

Кликаем мы на текст «HTML», родитель (parent) которого — panel-header, а открыть нам надо panel-body — брата panel-header. Чтобы найти родителя, достаточно написать .parent, потому что родитель всегда один, зато братьев может быть много, поэтому мы не просто пишем .siblings, но и конкретизируем, какой именно (panel-body).

Теперь наш виджет открывает только текст под тем заголовком, на который мы кликали. То, что получилось, — это базовая, голая версия. Вы можете улучшать этот виджет, изменять его и, конечно же, красиво оформить.

Функции плавности

Функции плавности используются для контроля перехода начального значения свойства в конечное. Эти функции можно определить с помощью параметра , который может принимать значения как в виде строк, так и в виде пользовательских координат кривых Безье (в виде массива).

Существует 31 встроенная функция плавности. Одна из них называется , остальные 30 состоят из разных вариаций , и . Класc определяет три функции плавности: , и . Вы можете управлять ими с помощью параметра . Значение этого параметра может находиться только в диапазоне от 0 до 1000.

Использование  ускоряет изменение значения, начиная с нуля. Это значит, что изменяться оно будет сначала медленно, а в конце — быстро. Скорость изменения в начале равна нулю, а в конце — 1000.

Функция  замедляет изменение значения, начиная с максимальной скорости.

увеличивает скорость смены значений в начале и замедляет в конце. Это значит, что в середине анимации скорость будет самой высокой. Следующая вставка показывает разницу между этими функциями плавности:


See the Pen Comparison of Different Easing Functions in Anime.js by Monty (@Shokeen) on CodePen.

С помощью  можно создавать собственные функции плавности. Ниже приведён пример создания пользовательских функций плавности:

See the Pen Creating Custom Easing Functions in Anime.js by Monty (@Shokeen) on CodePen.

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsGet Iframe Elements

Анимация спрайтов

Что такое спрайт?

Заключительным основным видом анимации является анимация спрайта. Так что такое спрайт?

Спрайт — это маленькое изображение, которое вы можете быстро рисовать на экране. Обычно спрайт на деле вырезают из большого изображения, которое называется спрайт-лист или мастер-изображение. Такой лист может содержать несколько различных спрайтов, вроде разных персонажей игры. Спрайт-лист также может содержать один символ в разных положениях. В итоге это даёт вам разные кадры анимации. Это классический стиль анимации: просто пролистывать разные рисунки снова и снова.

Зачем и когда использовать спрайты?

Спрайты хороши для нескольких вещей.

  • Во-первых, спрайт это изображение, которое, вероятно, рисуется быстрее, чем векторы, особенно сложные.
  • Во-вторых, спрайты чрезвычайно удобны, когда вам нужно рисовать одну штуку снова и снова. Например, в игре Space Invaders у вас есть куча пуль на экране, которые все выглядят одинаково. Гораздо быстрее загрузить спрайт пули один раз и рисовать его снова и снова.
  • В-третьих: спрайты быстро загружаются и рисуются как часть листа. Это позволяет загрузить единый файл для всего набора спрайтов гораздо быстрее, нежели полученную кучу отдельных изображений. Спрайты, как правило, также сжимаются лучше. Наконец, используется меньше памяти для хранения одного большого изображения, чем куча более мелких.
  • В конце концов, спрайты удобны для работы с анимацией, потому что получаются из таких инструментов рисования, как Фотошоп. Код просто листает изображения и его не волнует, что на картинке. Это значит, что ваш художник может легко обновить графику и анимацию, не касаясь кода.

Рисование спрайтов

Спрайты легко нарисовать, используя функцию drawImage. Эта функция может рисовать и растягивать часть изображения путём указания разных исходных и конечных координат. К примеру, предположим, что у нас есть следующий спрайт-лист и мы просто хотим нарисовать пятый спрайт слева.

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

Анимация спрайта

Как вы можете видеть на полном спрайт-листе, на деле это разные кадры анимации одного объекта, так что теперь пролистаем разные спрайты, чтобы создать анимацию. Мы сделаем это, отслеживая текущий кадр с помощью счётчика тактов.

Каждый раз при обновлении экран мы вычисляем текущий кадр анимации глядя на счётчик тактов. Операция деления по модулю (%) на 10 означает зациклить кадр от 0 до 9 снова и снова. Затем вычисляется координата х в зависимости от количества кадров. После чего рисуется изображение и обновляется счётчик тактов. Конечно, это может происходить слишком быстро, так что вы можете делить такты по модулю на 2 или 3, чтобы анимация бежала медленнее.

Анимация каждые 10 кадров для детализации (щёлкните для запуска)

В следующей главе мы создадим простую игру, в которой демонстрируется, как использовать базовую анимацию, анимацию спрайтов, события клавиатуры и простой симулятор частиц для взрывов.

анимация Canvas

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

Property Values

Value Description Play it
linear The animation has the same speed from start to end Play it »
ease Default value. The animation has a slow start, then fast, before it ends slowly Play it »
ease-in The animation has a slow start Play it »
ease-out The animation has a slow end Play it »
ease-in-out The animation has both a slow start and a slow end Play it »
step-start Equivalent to steps(1, start)
step-end Equivalent to steps(1, end)
steps(int,start|end) Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value «start» or «end», and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value «end»
cubic-bezier(n,n,n,n) Define your own values in the cubic-bezier function Possible values are numeric values from 0 to 1
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Tip: Try the different values in the «More Examples» section below.

Alternate Syntax

(selector).animate({styles},{options})

Parameter Description
styles Required. Specifies one or more CSS properties/values to animate (See possible values above)
options Optional. Specifies additional options for the animation. Possible values:
  • duration — sets the speed of the animation
  • easing — specifies the easing function to use
  • complete — specifies a function to be executed after the animation completes
  • step — specifies a function to be executed for each step in the animation
  • progress — specifies a function to be executed after each step in the animation
  • queue — a Boolean value specifying whether or not to place the animation in the effects queue
  • specialEasing — a map of one or more CSS properties from the styles parameter, and their corresponding easing functions
  • start — specifies a function to be executed when the animation begins
  • done — specifies a function to be executed when the animation ends
  • fail — specifies a function to be executed if the animation fails to complete
  • always — specifies a function to be executed if the animation stops without completing

JS Tutorial

JS HOMEJS IntroductionJS Where ToJS OutputJS StatementsJS SyntaxJS CommentsJS VariablesJS OperatorsJS ArithmeticJS AssignmentJS Data TypesJS FunctionsJS ObjectsJS EventsJS StringsJS String MethodsJS NumbersJS Number MethodsJS ArraysJS Array MethodsJS Array SortJS Array IterationJS DatesJS Date FormatsJS Date Get MethodsJS Date Set MethodsJS MathJS RandomJS BooleansJS ComparisonsJS ConditionsJS SwitchJS Loop ForJS Loop WhileJS BreakJS Type ConversionJS BitwiseJS RegExpJS ErrorsJS ScopeJS HoistingJS Strict ModeJS this KeywordJS LetJS ConstJS Arrow FunctionJS DebuggingJS Style GuideJS Best PracticesJS MistakesJS PerformanceJS Reserved WordsJS VersionsJS Version ES5JS Version ES6JS JSON

Manual Animation

So let’s implement one simple animation using DOM object properties and JavaScript functions as follows. The following list contains different DOM methods.

  • We are using the JavaScript function getElementById() to get a DOM object and then assigning it to a global variable imgObj.

  • We have defined an initialization function init() to initialize imgObj where we have set its position and left attributes.

  • We are calling initialization function at the time of window load.


  • Finally, we are calling moveRight() function to increase the left distance by 10 pixels. You could also set it to a negative value to move it to the left side.

Example

Try the following example.

<html>   
   <head>
      <title>JavaScript Animation</title>      
      <script type = "text/javascript">
         <!--
            var imgObj = null;
            
            function init() {
               imgObj = document.getElementById('myImage');
               imgObj.style.position= 'relative'; 
               imgObj.style.left = '0px'; 
            }
            function moveRight() {
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
            }
            
            window.onload = init;
         //-->
      </script>
   </head>
   
   <body>   
      <form>
         <img id = "myImage" src = "/images/html.gif" />
         <p>Click button below to move the image to right</p>
         <input type = "button" value = "Click Me" onclick = "moveRight();" />
      </form>      
   </body>
</html>

Параметры свойств

Эти параметры позволяют контролировать длительность, задержку и плавность как единичных свойств, так и целой группы сразу. Параметры и задаются в миллисекундах. Значение по умолчанию для длительности равно 1 000 миллисекундам, что равно 1 секунде. Любая анимация, применённая к элементу, будет по умолчанию воспроизводиться в течение одной секунды. Параметр определяет промежуток времени, который должен пройти от момента запуска анимации до её начала. По умолчанию значение параметра равно нулю — элемент будет анимирован сразу после запуска анимации.

Для контроля скорости воспроизведения анимации используйте параметр . Некоторые анимации начинаются медленно, ускоряются к середине, а к концу снова замедляются. Другие начинают воспроизводиться на большой скорости, а ближе к концу замедляются. Однако во всех случаях анимация всегда выполняется в течение того времени, которое вы определили в параметре . Anime.js обладает большим количеством функций плавности, которые можно применить к элементам напрямую, используя их имена. Чтобы управлять скачками значения назад и вперёд, установите параметр с пользовательским значением.

Хакатон на Полярном круге 2.0

29 октября – 1 ноября, Салехард, беcплатно

tproger.ru

События и курсы на tproger.ru

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

Используйте параметры свойств либо независимо от других, либо в комбинациях. Для переменной применены два параметра: и . В примере выше длительность анимации равна 1 200 миллисекундам, что равно 1.2 секунды. Если бы она не была обозначена, то длилась бы 1 секунду.

See the Pen Setting Property Parameters in Anime.js by Monty (@Shokeen) on CodePen.

Одно главное ограничение свойств параметров в примере выше заключалось в том, что целевой элемент будет иметь одинаковые значения , и  для всех своих свойств.

Например, вместо перехода и изменения степени округления углов элемента одновременно, выполните переход, затем измените степень округления углов. Anime.js позволяет определять разные значения для параметров , , и . Отрывок кода снизу прояснит ситуацию:

В коде выше все свойства, которые нужно было анимировать, имеют разные значения. Для цвета фона анимации установлена длительность, равная 400 миллисекундам, в то время как для вращения  и для перехода  использовалось глобальное значение длительности, равное 1 500 миллисекундам.

Для фонового цвета анимации установлен параметр , поэтому любое изменение цвета целевого объекта начнётся только после 1 500 миллисекунд (как и было определено в коде). Свойства и используют значения по умолчанию для параметров и из-за отсутствия каких-либо локальных или глобальных значений для них.

See the Pen Setting Individual Property Parameters in Anime.js by Monty (@Shokeen) on CodePen.

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Заключение

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

После прочтения всех четырёх статей у вас должно сформироваться понимание о том, как эта библиотека работает и как её можно использовать в своих проектах.

Для дальнейшего погружения в веб-анимацию рекомендуем вам ознакомиться с другими материалами, размещёнными на нашем сайте.


С этим читают