Suzuka

文档

入门

安装

  npm i animejs

  npm i animejs

导入

  import { animate } from 'animejs'

  import { animate } from 'animejs'

与原生 JS 一起使用

与 React 一起使用

计时器

      current time
      0

      callback fired
      0

      current time
      0

      callback fired
      0

计时器播放设置

延迟

      current time
      0

      current time
      0

持续时间

      current time
      0

      current time
      0

循环

      loops count
      0

      iteration time
      0

      loops count
      0

      iteration time
      0

循环延迟

      loops count
      0

      iteration time
      0

      loops count
      0

      iteration time
      0

交替

      loops count
      0

      iteration time
      0

      loops count
      0

      iteration time
      0

反向

      iteration time
      0

      current time
      0

      iteration time
      0

      current time
      0

自动播放

      current time
      0

      current time
      0

帧率

      fps
      60

      current time
      0

      fps
      60

      current time
      0

播放速率

      speed
      2.0

      current time
      0

      speed
      2.0

      current time
      0

计时器回调

开始时

      began
      false

      current time
      0

      began
      false

      current time
      0

完成时

      completed
      false

      current time
      0

      completed
      false

      current time
      0

更新时

      updates
      0

      current time
      0

      updates
      0

      current time
      0

循环时

      loops
      0

      iteration time
      0

      loops
      0

      iteration time
      0

暂停时

      paused
      0

      elapsed time
      0

      paused
      0

      elapsed time
      0

then()

      promise status
      pending

      current time
      0

      promise status
      pending

      current time
      0

计时器方法

play()

      iteration time
      0

      iteration time
      0

reverse()

      iteration time
      0

      iteration time
      0

pause()

      current time
      0

      current time
      0

restart()

      current time
      0

      current time
      0

alternate()

      iteration time
      0

      iteration time
      0

resume()

      iteration time
      0

      iteration time
      0

complete()

      current time
      0

      current time
      0

cancel()

      current time
      0

      current time
      0

revert()

      current time
      0

      current time
      0

seek()

      current time
      0

      current time
      0

stretch()

      duration
      2000

      current time
      0

      duration
      2000

      current time
      0

计时器属性

动画

你好世界

目标

CSS 选择器

DOM 元素

JavaScript 对象 JS

  {"x":0,"y":0}

  {"x":0,"y":0}

目标数组

  {"x":"0"}

  {"x":"0"}

可动画属性

CSS 属性

CSS 变换

JS / WAAPI

WAAPI

JS / WAAPI

WAAPI

CSS 变量 JS

JavaScript 对象属性 JS

  {"number":1337,"unit":"42%"}

  {"number":1337,"unit":"42%"}

HTML 属性 JS

SVG 属性 JS

补间值类型

数值

单位转换值

相对值 JS

颜色值

颜色函数值 WAAPI

CSS 变量 WAAPI

基于函数的值

补间参数

到

从

延迟

持续时间

缓动

all: 'inQuad'

all: eases.outQuad

x: createSpring()
rotate: 'inQuad'

all: 'inQuad'

all: eases.outQuad

x: createSpring()
rotate: 'inQuad'

组合 JS

无

替换

混合

(将鼠标悬停在方块上)

无

替换

混合

(将鼠标悬停在方块上)

修饰符 JS

utils.round(0)

v => v % 17

v => Math.cos(v) / 2

utils.round(0)

v => v % 17

v => Math.cos(v) / 2

关键帧

补间值关键帧

补间参数关键帧 JS

基于持续时间的关键帧 JS

基于百分比的关键帧 JS

动画播放设置

延迟

持续时间

持续时间: 0

持续时间: 500

持续时间: 2000

持续时间: 0

持续时间: 500

持续时间: 2000

循环

循环: 3

循环: 3, 交替: true

循环: 3, 反向: true

循环: true

循环: 3

循环: 3, 交替: true

循环: 3, 反向: true

循环: true

循环延迟 JS

交替

交替: false

交替: true

交替: true, 反向: true

交替: false

交替: true

交替: true, 反向: true

反向

反向: false

反向: true

反向: false

反向: true

自动播放

自动播放: true

自动播放: false

自动播放: true

自动播放: false

帧率 JS

    fps
    60

    fps
    60

播放速率

    speed
    1.00

    speed
    1.00

播放缓动 JS

动画回调

开始时 JS

    began
    false

    began
    false

完成时

    completed
    false

    completed
    false

更新前 JS

    updates
    0

    updates
    0

更新时 JS

    updates
    0

    updates
    0

渲染时 JS

    renders
    0

    renders
    0

循环时 JS

    loops
    0

    loops
    0

暂停时 JS

    paused
    0

    paused
    0

then()

    promise status
    pending

    promise status
    pending

动画方法

play()

reverse()

pause()

restart()

alternate()

resume()

complete()

cancel()

revert()

seek()

stretch() JS

  total duration
  0

  total duration
  0

refresh() JS

动画属性

时间轴

添加计时器

      timer 01
      0

      timer 02
      0

      timer 03
      0

      timer 01
      0

      timer 02
      0

      timer 03
      0

添加动画

同步 WAAPI 动画

同步时间轴

调用函数

      function A
      --

      function B
      --

      function C
      --

      function A
      --

      function B
      --

      function C
      --

时间位置

时间轴播放设置

默认值

延迟

    current time
    0

    current time
    0

循环

    loops
    0

    loops
    0

循环延迟

    loops
    0

    loops
    0

交替

    loops
    0

    loops
    0

反向

    current time
    0

    current time
    0

自动播放

    paused
    true

    paused
    true

帧率

    fps
    60

    fps
    60

播放速率

    speed
    2.0

    speed
    2.0

播放缓动

时间轴回调

开始时

    began
    false

    began
    false

完成时

    completed
    false

    completed
    false

更新前

    updates
    0

    updates
    0

更新时

    updates
    0

    updates
    0

渲染时

    renders
    0

    renders
    0

循环时

    loops
    0

    loops
    0

暂停时

    paused
    0

    paused
    0

then()

    promise status
    pending

    promise status
    pending

时间轴方法

add()

    value
    0

    value
    0

set()

sync()

label()

remove()

call()

      function A
      --

      function B
      --

      function C
      --

      function A
      --

      function B
      --

      function C
      --

init()

play()

reverse()

pause()

restart()

alternate()

resume()

complete()

cancel()

revert()

seek()

stretch()

    total duration
    0

    total duration
    0

refresh()

时间轴属性

可动画

移动光标

可动画设置

单位

移动光标

持续时间

移动光标

缓动

线性

弹性出

线性

弹性出

修饰符

吸附

反转

吸附

反转

可动画方法

获取器

        x
        0

        y
        0

移动光标

        x
        0

        y
        0

移动光标

设置器

移动光标

revert()

可动画属性

可拖拽

可拖拽轴参数

x

x 已启用

x 已禁用

x 已启用

x 已禁用

y

y 已启用

y 已禁用

y 已启用

y 已禁用

吸附

修饰符

映射到

可拖拽设置

触发器

容器

容器内边距

容器摩擦

释放容器摩擦

释放质量

释放刚度

释放阻尼

速度乘数

最小速度

最大速度

释放缓动

拖拽速度

滚动阈值

滚动速度

光标

可拖拽回调

抓取时

    grabs
    0

    grabs
    0

拖拽时

    drags
    0

    drags
    0

更新时

    updates
    0

    updates
    0

释放时

    releases
    0

    releases
    0

吸附时

    snaps
    0

    snaps
    0

稳定时

    stops
    0

    stops
    0

调整大小时

      resizes
      0

      resizes
      0

调整大小后

      resizes
      0

      resizes
      0

可拖拽方法

disable()

enable()

setX()

setY()

animateInView()

scrollInView()

stop()

reset()

revert()

refresh()

可拖拽属性

滚动观察器

向下滚动

          timer
          0

向下滚动

          timer
          0

滚动观察器设置

容器

向下滚动

目标

向下滚动

          timer
          0

向下滚动

          timer
          0

调试

向下滚动

向上滚动

向下滚动

向上滚动

轴

向右滚动 →

重复

向下滚动

          repeat upddates
          0

          no repeat updates
          0

向上滚动

向下滚动

          repeat upddates
          0

          no repeat updates
          0

向上滚动

滚动观察器阈值

数值

向下滚动

位置速记

向下滚动

相对位置值

向下滚动

最小值最大值

滚动观察器同步模式

方法名称

向下滚动

播放进度

向下滚动

平滑滚动

向下滚动

缓动滚动

向下滚动

滚动观察器回调

进入时

          entered
          0

          entered
          0

向前进入时

          entered
          0

          entered
          0

向后进入时

          entered
          0

          entered
          0

离开时

          exits
          0

          exits
          0

向前离开时

          exits
          0

          exits
          0

向后离开时

          exits
          0

          exits
          0

更新时

          updates
          0

          updates
          0

同步完成时

          completions
          0

          completions
          0

滚动观察器方法

link()

向下滚动

refresh()

向下滚动

revert()

向下滚动

滚动观察器属性

作用域

添加构造函数

注册方法函数

作用域参数

根

作用域外

作用域内

作用域外

作用域内

作用域外

默认值

作用域 1

作用域 2

作用域 3

作用域 1

作用域 2

作用域 3

媒体查询

作用域方法

add()

addOnce()

保持时间()

revert()

refresh()

作用域属性

交错

时间交错

延迟: 0毫秒; 持续时间: 500毫秒

延迟: 100毫秒; 持续时间: 700毫秒

延迟: 200毫秒; 持续时间: 900毫秒

延迟: 300毫秒; 持续时间: 1100毫秒

延迟: 0毫秒; 持续时间: 500毫秒

延迟: 100毫秒; 持续时间: 700毫秒

延迟: 200毫秒; 持续时间: 900毫秒

延迟: 300毫秒; 持续时间: 1100毫秒

值交错

时间轴位置错开

错开值类型

数值

x: 0rem 延迟: 0毫秒

x: 5.75rem 延迟: 100毫秒

x: 11.5rem 延迟: 200毫秒

x: 17.25rem 延迟: 300毫秒

x: 0rem 延迟: 0毫秒

x: 5.75rem 延迟: 100毫秒

x: 11.5rem 延迟: 200毫秒

x: 17.25rem 延迟: 300毫秒

范围值

错开参数

错开开始

x: 14rem, 延迟: 500毫秒

x: 15rem, 延迟: 600毫秒

x: 16rem, 延迟: 700毫秒

x: 17rem, 延迟: 700毫秒

x: 14rem, 延迟: 500毫秒

x: 15rem, 延迟: 600毫秒

x: 16rem, 延迟: 700毫秒

x: 17rem, 延迟: 700毫秒

错开自

错开反向

延迟: 300毫秒

延迟: 200毫秒

延迟: 100毫秒

延迟: 0毫秒

延迟: 300毫秒

延迟: 200毫秒

延迟: 100毫秒

延迟: 0毫秒

错开缓动

错开网格

错开网格轴

错开修饰符

错开使用

data-index="2"

data-index="0"

data-index="3"

data-index="1"

data-index="2"

data-index="0"

data-index="3"

data-index="1"

错开总数

data-index="0"

data-index="1"

data-index="0"

data-index="1"

SVG

morphTo()

createDrawable()

createMotionPath()

文本

split()

一体化文本分割器
文本分割器

文本分割器设置

行

按行分割文本。
按行分割。

单词

按单词分割文本。
按单词分割。

字符

按字符分割文本。
按字符分割。

调试

按字符分割文本。
按字符分割。

包含空格

按单词分割文本。
包含空格或不包含。

可访问性

按单词分割文本。
按单词分割。

拆分参数

类

自定义CSS类。

包裹

分割并包裹文本。

克隆

分割并克隆文本。

HTML 模板

自定义HTML模板。

文本分割器方法

addEffect()

悬停在单词上以动画化其颜色，然后调整文本大小。

revert()

按单词分割文本。
按单词分割。

refresh()

Lorem ipsum dolor

文本分割器属性

实用工具

$()

get()

set()

remove()

  updates
  --

  updates
  --

cleanInlineStyles()

保持样式 (默认)

清理 translateX 和 borderRadius

保持样式 (默认)

清理 translateX 和 borderRadius

保持时间()

random()

randomPick()

A

B

C

D

A

B

C

D

shuffle()

A

B

C

D

E

F

A

B

C

D

E

F

sync()

    speed
    1.00

    speed
    1.00

lerp()

输入

线性插值结果

线性插值 (15帧/秒)

输入

线性插值结果

线性插值 (15帧/秒)

round()

正常

四舍五入 (.1)

正常

四舍五入 (.1)

clamp()

正常

钳制 [.25,.75]

正常

钳制 [.25,.75]

snap()

正常

吸附 (.25)

正常

吸附 (.25)

wrap()

正常

环绕 [-.25,.25]

正常

环绕 [-.25,.25]

mapRange()

正常

映射 [0,12] [0,1]

正常

映射 [0,12] [0,1]

interpolate()

正常

插值结果 [0,12]

正常

插值结果 [0,12]

roundPad()

    0.000

    0.000

padStart()

padEnd()

degToRad()

角度

弧度

角度

弧度

radToDeg()

弧度

角度

弧度

角度

可链式工具函数

Web 动画 API

你好 WAAPI

何时使用 WAAPI

  {"x": '0rem',"rotate":"0deg"}

  {"x": '0rem',"rotate":"0deg"}

硬件加速动画

WAAPI

JS

WAAPI

JS

Web 动画 API 的改进

合理的默认值

多目标动画

默认单位

基于函数的值

单个 CSS 变换

单个属性参数

弹性与自定义缓动

与原生 WAAPI 的 API 差异

迭代次数

方向

缓动

完成

    promise status
    pending

    promise status
    pending

waapi.convertEase()

刚度: 100

刚度: 150

刚度: 200

刚度: 100

刚度: 150

刚度: 200

引擎

引擎参数

时间单位 (秒 / 毫秒)

      duration: 1
      0

      duration: 1000
      0

      duration: 1
      0

      duration: 1000
      0

速度

帧率

精度

文档隐藏时暂停

      global time
      0

      engine time
      0

      global time
      0

      engine time
      0