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
    • 补间值类型
      • 数值
      • 单位转换
      • 相对 JS
      • 颜色
      • 颜色函数 WAAPI
      • CSS 变量 WAAPI
      • 基于函数
    • 补间参数
      • 到
      • 从
      • 延迟
      • 持续时间
      • 缓动
      • 合成 JS
      • 修饰符 JS
    • 关键帧
      • 补间值
      • 补间参数 JS
      • 基于持续时间 JS
      • 基于百分比 JS
    • 播放设置
      • 延迟
      • 持续时间
      • 循环
      • 循环延迟 JS
      • 交替
      • 反向
      • 自动播放
      • 帧率 JS
      • 播放速率
      • 播放缓动 JS
    • 回调
      • onBegin JS
      • onComplete
      • 更新前 JS
      • onUpdate JS
      • 渲染时 JS
      • onLoop JS
      • onPause JS
      • then()
    • 方法
      • play()
      • reverse()
      • pause()
      • restart()
      • alternate()
      • resume()
      • complete()
      • cancel()
      • revert()
      • seek()
      • stretch() JS
      • refresh() JS
    • 属性
  • 时间线
    • 添加定时器
    • 添加动画
    • 同步 WAAPI 动画
    • 同步时间线
    • 调用函数
    • 时间位置
    • 播放设置
      • 默认值
      • 延迟
      • 循环
      • 循环延迟
      • 交替
      • 反向
      • 自动播放
      • 帧率
      • 播放速率
      • 播放缓动
    • 回调
      • onBegin
      • onComplete
      • 更新前
      • onUpdate
      • 渲染时
      • onLoop
      • onPause
      • then()
    • 方法
      • add()
      • set()
      • sync()
      • label()
      • remove()
      • call()
      • init()
      • play()
      • reverse()
      • pause()
      • restart()
      • alternate()
      • resume()
      • complete()
      • cancel()
      • revert()
      • seek()
      • stretch()
      • refresh()
    • 属性
  • 可动画
    • 设置
      • 单位
      • 持续时间
      • 缓动
      • 修饰符
    • 方法
      • Getter
      • Setter
      • revert()
    • 属性
  • 可拖拽
    • 轴参数
      • x
      • y
      • 吸附
      • 修饰符
      • 映射到
    • 设置
      • 触发器
      • 容器
      • 容器内边距
      • 容器摩擦力
      • 释放容器摩擦力
      • 释放质量
      • 释放刚度
      • 释放阻尼
      • 速度乘数
      • 最小速度
      • 最大速度
      • 释放缓动
      • 拖拽速度
      • 滚动阈值
      • 滚动速度
      • 光标
    • 回调
      • 抓取时
      • 拖拽时
      • onUpdate
      • 释放时
      • 吸附时
      • 稳定时
      • 调整大小时
      • 调整大小后
    • 方法
      • disable()
      • enable()
      • setX()
      • setY()
      • animateInView()
      • scrollInView()
      • stop()
      • reset()
      • revert()
      • refresh()
    • 属性
  • 滚动观察器
    • 设置
      • 容器
      • 目标
      • 调试
      • 轴
      • 重复
    • 阈值
      • 数值
      • 位置简写
      • 相对位置值
      • 最小值 最大值
    • 同步模式
      • 方法名称
      • 播放进度
      • 平滑滚动
      • 缓动滚动
    • 回调
      • 进入时
      • 向前进入时
      • 向后进入时
      • 离开时
      • 向前离开时
      • 向后离开时
      • onUpdate
      • 同步完成时
    • 方法
      • link()
      • refresh()
      • revert()
    • 属性
  • 作用域
    • 添加构造函数
    • 注册方法函数
    • 参数
      • 根
      • 默认值
      • 媒体查询
    • 方法
      • add()
      • revert()
      • refresh()
    • 属性
  • 错峰
    • 时间错峰
    • 值错峰
    • 时间线错峰
    • 值类型
      • 数值
      • 范围
    • 参数
      • 起始值
      • 从
      • 反向
      • 缓动
      • 网格
      • 轴
      • 修饰符
  • 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 差异
      • 迭代次数
      • 方向
      • 缓动
      • 已完成
    • convertEase()
  • 引擎
    • 参数
      • 时间单位
      • 速度
      • 帧率
      • 精度
      • 文档隐藏时暂停
    • 方法
      • update()
      • pause()
      • resume()
    • 属性
    • 引擎默认值

文档

本文档的编写离不开我的赞助商的帮助

Anime.js 的开发和维护得益于我的赞助商的慷慨支持。如果您正在使用 Anime.js,每月捐助将非常有价值。

白金赞助商

本节内容
  • 开始上手
  • 定时器
  • 动画
  • 时间线
  • 可动画
  • 可拖拽
  • 滚动观察器
  • 作用域
  • 错峰
  • SVG
  • 工具
  • WAAPI
  • 引擎
下一步
  • 开始上手