Краткое введение в четыре таланта веб-анимации

внешний интерфейс JavaScript SVG анимация
Краткое введение в четыре таланта веб-анимации

Автор этой статьи: Чжан Синьсюй
Исходное заявление: Эта статья подготовлена ​​членами команды интерфейса чтения YFE, пожалуйста, уважайте оригинальность, пожалуйста, свяжитесь с общедоступной учетной записью (id: yuewen_YFE) для авторизации и укажите автора, источник и ссылку.

Четыре таланта веб-анимации в основном относятся к следующим четырем:

  1. CSS3 анимация
  2. Web animation
  3. SVG SMIL
  4. Хардкорный рисунок, такой как Canvas

Давайте разбираться по одному.

1. Анимация CSS3

Укажите ключевые кадры в CSS для достижения эффектов анимации, таких как обычный эффект затухания:

.fadeIn {
  animation: fadeIn .2s both;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

Основное использование должно быть замечено и использовано много, не расширено, но вы можете упомянуть некоторые менее часто используемые моменты:

  1. Анимацию CSS3 можно приостановить в любое время, действительно приостановить, такую, которая вообще не движется, просто используйте это объявление CSS:

    animation-play-state: paused;

  2. CSS3 анимированныйanimation-timing-functionЗначения атрибутов в дополнение к поддержкеcubic-bezier()функциональный характер, также поддерживаетsteps()функциональный символ, вы можете добиться множества небольших и красивых покадровых анимационных эффектов. Например, эффект лайка в твиттере:

    twitter 的 Like 效果

    Объедините все изображения кадра последовательности в одно изображение, а затем отобразите соответствующее изображение кадр за кадром, часто в качестве фонового изображения, а затем управляйтеbackground-positionдобиться эффекта.

    demo

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

    抛物线运动

2. Веб-анимация

Ссылаться наWeb animation APIКороче говоря, анимационная анимация, реализованная с помощью CSS3, становится реализованной с помощью кода JS. Синтаксис следующий:

var myAnimation = element.animate(keyframes, options);

вkeyframesСоответствует CSS3@keyframesблок объявлений в ,optionsвести перепискуanimation-*атрибуты и значения атрибутов.myAnimationдля анимацииAnimationОбъект, содержащий несколько методов. Например, мы реализуем анимацию с изменением прозрачности, что можно сделать так:

element.animate([
  { opacity: 0 },
  { opacity: 1, offset: 0.4 },
  { opacity: 0 }
], {
  duration: 3000,
  delay: 0,
  fill: 'forwards',
  easing: 'steps(8, end)',
  iterations: Infinity
});

Эффект следующий:

web animation动画截图示意

API веб-анимации особенно часто используется в сценариях, где параметры анимации изменяются динамически. Тем не менее существуют некоторые проблемы с совместимостью. Вы можете попробовать следующие полифиллы:web-animations-js

3. СВГ СМИЛ

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

<svg width="320" height="320">
  <g>
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">马</text>
    <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 160 160" to="360 160 160" repeatCount="indefinite"/>
  </g>
</svg>

ЭффектВот скриншот GIF:

马儿旋转

SMIL состоит из следующих 5 типов элементов:

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

Он даже поддерживает добавление поведения щелчка для запуска выполнения анимации:

<svg id="svg" width="320" height="200">
    <circle id="circle" cx="100" cy="100" r="50"></circle>
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">马
        <animate attributeName="x" to="60" begin="circle.click" dur="3s" />
    </text>
</svg>

Если вы заинтересованы, вы можетепосетите здесь.

4. Жесткий рендеринг, такой как Canvas

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

JS 改变的元素性质

Для реализации анимационных эффектов с помощью низкоуровневых методов JS требуются следующие знания:

  1. JS некоторые базовые навыки

    Сложные эффекты движения часто требуют большего количества обходов цикла и обработки данных.

  2. Знаком с API в смежных технических областях

    Как нарисовать круг, как изменить положение и т.д.

  3. Знать некоторые алгоритмы анимации

    Как можно перемещаться от А до Б с помощьюTween.js.

  4. Освойте общие функции кривой

    Суть графики — математика, а сущность движения — математика. Вот статья оТригонометрические функцииХорошая статья.

  5. Узнайте о некоторых фреймворках верхнего уровня

    Snap.svg, гринсок, спрайты. 3D-поле: threeJS, pixi и т. д.

Для получения дополнительной информации, пожалуйста, обратите внимание на публичный аккаунт фронтенд-команды China Literature Group:

Категории