Anime.js | JavaScript 动画引擎

文档
示例
GitHub
赞助

入门指南
定时器
- 播放设置
  - 延迟
  - 持续时间
  - 循环
  - 循环延迟
  - 交替
  - 反向
  - 自动播放
  - 帧率
  - 播放速率
- 回调
  - 开始时
  - 完成时
  - 更新时
  - 循环时
  - 暂停时
  - then()
- 方法
  - play()
  - reverse()
  - pause()
  - restart()
  - alternate()
  - resume()
  - complete()
  - cancel()
  - revert()
  - seek()
  - stretch()
- 属性
动画
- 目标
- 可动画属性
- Tween 值类型
- Tween 参数
  - to
  - from
  - 延迟
  - 持续时间
  - ease
  - composition JS
  - modifier JS
- 关键帧
- 播放设置
  - 延迟
  - 持续时间
  - 循环
  - 循环延迟 JS
  - 交替
  - 反向
  - 自动播放
  - 帧率 JS
  - 播放速率
  - playbackEase JS
- 回调
- 方法
  - play()
  - reverse()
  - pause()
  - restart()
  - alternate()
  - resume()
  - complete()
  - cancel()
  - revert()
  - seek()
  - stretch() JS
  - refresh() JS
- 属性
时间线
- 添加定时器
- 添加动画
- 同步 WAAPI 动画
- 同步时间线
- 调用函数
- 时间位置
- 播放设置
  - 默认值
  - 延迟
  - 循环
  - 循环延迟
  - 交替
  - 反向
  - 自动播放
  - 帧率
  - 播放速率
  - playbackEase
- 回调
  - 开始时
  - 完成时
  - 更新前
  - 更新时
  - 渲染时
  - 循环时
  - 暂停时
  - 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
- 设置
- 回调
- 方法
  - disable()
  - enable()
  - setX()
  - setY()
  - animateInView()
  - scrollInView()
  - stop()
  - reset()
  - revert()
  - refresh()
- 属性
滚动观察器
- 设置
  - 容器
  - 目标
  - debug
  - 轴
  - 重复
- 阈值
- 同步模式
- 回调
- 方法
- 属性
作用域
- 添加构造函数
- 注册方法函数
- 参数
- 方法
  - add()
  - revert()
  - refresh()
- 属性
错峰
- 时间错峰
- 值错峰
- 时间线错峰
- 值类型
  - 数值
  - 范围
- 参数
  - 起始值
  - from
  - 反向
  - ease
  - 网格
  - 轴
  - modifier
SVG
实用工具
- $()
- get()
- set()
- remove()
- cleanInlineStyles()
- random()
- randomPick()
- shuffle()
- sync()
- lerp()
- round()
- clamp()
- snap()
- wrap()
- mapRange()
- interpolate()
- roundPad()
- padStart()
- padEnd()
- degToRad()
- radToDeg()
- 链式实用工具
WAAPI
引擎
- 参数
  - timeUnit
  - 速度
  - fps
  - 精度
  - 文档隐藏时暂停
- 方法
- 属性
- 引擎默认值

入门指南

本节介绍如何在您的项目中下载、安装和导入 Anime.js。

本节内容

安装
导入
与原生 JS 一起使用
与 React 一起使用

上一篇 下一篇

文档
安装