anime.js logo v4 Anime.js | JavaScript 动画引擎

  • 文档
  • 示例
  • GitHub
  • 赞助
  • 入门指南
    • 安装
    • 导入
    • 与原生 JS 一起使用
    • 与 React 一起使用
  • 定时器
    • 播放设置
      • 延迟
      • 持续时间
      • 循环
      • 循环延迟
      • 交替
      • 反向
      • 自动播放
      • 帧率
      • 播放速率
    • 回调
      • onBegin
      • onComplete
      • onUpdate
      • onLoop
      • onPause
      • then()
    • 方法
      • play()
      • reverse()
      • pause()
      • restart()
      • alternate()
      • resume()
      • complete()
      • cancel()
      • revert()
      • seek()
      • stretch()
    • 属性
  • 动画
    • 目标
      • CSS 选择器
      • DOM 元素
      • JavaScript 对象 JS
      • 目标数组
    • 可动画属性
      • CSS 属性
      • CSS 变换
      • CSS 变量 JS
      • JS 对象属性 JS
      • HTML 属性 JS
      • SVG 属性 JS
    • Tween 值类型
      • 数值
      • 单位转换
      • 相对 JS
      • 颜色
      • 颜色函数 WAAPI
      • CSS 变量 WAAPI
      • 基于函数
    • Tween 参数
      • to
      • from
      • 延迟
      • 持续时间
      • ease
      • composition JS
      • modifier JS
    • 关键帧
      • Tween 值
      • Tween 参数 JS
      • 基于持续时间 JS
      • 基于百分比 JS
    • 播放设置
      • 延迟
      • 持续时间
      • 循环
      • 循环延迟 JS
      • 交替
      • 反向
      • 自动播放
      • 帧率 JS
      • 播放速率
      • playbackEase JS
    • 回调
      • onBegin JS
      • onComplete
      • onBeforeUpdate JS
      • onUpdate JS
      • onRender JS
      • onLoop JS
      • onPause JS
      • then()
    • 方法
      • play()
      • reverse()
      • pause()
      • restart()
      • alternate()
      • resume()
      • complete()
      • cancel()
      • revert()
      • seek()
      • stretch() JS
      • refresh() JS
    • 属性
  • 时间线
    • 添加定时器
    • 添加动画
    • 同步 WAAPI 动画
    • 同步时间线
    • 调用函数
    • 时间位置
    • 播放设置
      • 默认值
      • 延迟
      • 循环
      • 循环延迟
      • 交替
      • 反向
      • 自动播放
      • 帧率
      • 播放速率
      • playbackEase
    • 回调
      • onBegin
      • onComplete
      • onBeforeUpdate
      • onUpdate
      • onRender
      • onLoop
      • onPause
      • then()
    • 方法
      • add()
      • set()
      • sync()
      • label()
      • remove()
      • call()
      • init()
      • play()
      • reverse()
      • pause()
      • restart()
      • alternate()
      • resume()
      • complete()
      • cancel()
      • revert()
      • seek()
      • stretch()
      • refresh()
    • 属性
  • 可动画对象
    • 设置
      • 单位
      • 持续时间
      • ease
      • modifier
    • 方法
      • Getter
      • Setter
      • revert()
    • 属性
  • 可拖拽
    • 轴参数
      • x
      • y
      • snap
      • modifier
      • mapTo
    • 设置
      • 触发器
      • 容器
      • 容器内边距
      • 容器摩擦力
      • 释放容器摩擦力
      • 释放质量
      • 释放刚度
      • 释放阻尼
      • 速度乘数
      • 最小速度
      • 最大速度
      • 释放缓动
      • 拖拽速度
      • 滚动阈值
      • 滚动速度
      • 光标
    • 回调
      • onGrab
      • onDrag
      • onUpdate
      • onRelease
      • onSnap
      • onSettle
      • onResize
      • onAfterResize
    • 方法
      • disable()
      • enable()
      • setX()
      • setY()
      • animateInView()
      • scrollInView()
      • stop()
      • reset()
      • revert()
      • refresh()
    • 属性
  • 滚动观察器
    • 设置
      • 容器
      • 目标
      • debug
      • 轴
      • 重复
    • 阈值
      • 数值
      • 位置简写
      • 相对位置值
      • 最小值 最大值
    • 同步模式
      • 方法名
      • 播放进度
      • 平滑滚动
      • 缓动滚动
    • 回调
      • onEnter
      • onEnterForward
      • onEnterBackward
      • onLeave
      • onLeaveForward
      • onLeaveBackward
      • onUpdate
      • onSyncComplete
    • 方法
      • link()
      • refresh()
      • revert()
    • 属性
  • 作用域
    • 添加构造函数
    • 注册方法函数
    • 参数
      • 根
      • 默认值
      • mediaQueries
    • 方法
      • add()
      • revert()
      • refresh()
    • 属性
  • 交错
    • 时间交错
    • 值交错
    • 时间线交错
    • 值类型
      • 数值
      • 范围
    • 参数
      • 起始值
      • from
      • 反向
      • ease
      • 网格
      • 轴
      • modifier
  • SVG
    • morphTo()
    • createDrawable()
    • createMotionPath()
  • 实用工具
    • $()
    • get()
    • set()
    • remove()
    • cleanInlineStyles()
    • random()
    • randomPick()
    • shuffle()
    • sync()
    • lerp()
    • round()
    • clamp()
    • snap()
    • wrap()
    • mapRange()
    • interpolate()
    • roundPad()
    • padStart()
    • padEnd()
    • degToRad()
    • radToDeg()
    • 链式实用工具
  • WAAPI
    • 何时使用
    • 硬件加速
    • WAAPI 的改进
      • 合理的默认值
      • 多目标动画
      • 默认单位
      • 基于函数的值
      • 单独变换
      • 单独属性参数
      • 弹簧和自定义缓动
    • API 差异
      • iterations
      • 方向
      • easing
      • finished
    • convertEase()
  • 引擎
    • 参数
      • timeUnit
      • 速度
      • fps
      • 精度
      • pauseOnDocumentHidden
    • 方法
      • update()
      • pause()
      • resume()
    • 属性
    • 引擎默认值

定时器

自 4.0.0 版本起

定时器方法

提供对定时器的时序、行为和进度的控制。
定时器方法在 Timer 实例对象上可用。

const timer = createTimer(parameters);
      ┌──────────┐
timer.│pause()   │
timer.│play()    ├─ Methods
timer.│restart() │
      └──────────┘
在本节中
  • play()
  • reverse()
  • pause()
  • restart()
  • alternate()
  • resume()
  • complete()
  • cancel()
  • revert()
  • seek()
  • stretch()
上一个 下一个
  • 定时器回调
  • play()