Anime.js | JavaScript 动画引擎

文档
学习
示例
GitHub
赞助商

入门
计时器
- 播放设置
  - 延迟
  - 持续时间
  - 循环
  - 循环延迟
  - 交替
  - 反向
  - 自动播放
  - 帧率
  - 播放速率
- 回调
  - onBegin
  - onComplete
  - onUpdate
  - onLoop
  - onPause
  - then()
- 方法
  - play()
  - reverse()
  - pause()
  - restart()
  - alternate()
  - resume()
  - complete()
  - cancel()
  - revert()
  - seek()
  - stretch()
- 属性
动画
- 目标
- 可动画属性
- 补间值类型
- 补间参数
  - 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
- 回调
  - 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
- 方法
- 属性
可拖拽
- 轴参数
  - x
  - y
  - 吸附
  - modifier
  - 映射到
- 设置
- 回调
  - onGrab
  - onDrag
  - onUpdate
  - onRelease
  - onSnap
  - onSettle
  - onResize
  - onAfterResize
- 方法
  - disable()
  - enable()
  - setX()
  - setY()
  - animateInView()
  - scrollInView()
  - stop()
  - reset()
  - revert()
  - refresh()
- 属性
滚动
- 设置
  - 容器
  - 目标
  - 调试
  - 轴
  - 重复
- 阈值
- 同步模式
- 回调
- 方法
- 属性
作用域
- 添加构造函数
- 注册方法函数
- 参数
- 方法
  - add()
  - addOnce()
  - keepTime()
  - revert()
  - refresh()
- 属性
交错
- 时间交错
- 值交错
- 时间轴交错
- 值类型
  - 数值型
  - 范围
- 参数
  - 开始
  - from
  - 反向
  - ease
  - 网格
  - 轴
  - modifier
  - 使用
  - 总计
SVG
文本
- split()
  - 设置
    - 行
    - 单词
    - 字符
    - 调试
    - 包含空格
    - 可访问性
  - 拆分参数
    - 类
    - 包裹
    - 克隆
  - HTML 模板
  - 方法
  - 属性
实用工具
- $()
- get()
- set()
- remove()
- cleanInlineStyles()
- keepTime()
- random()
- randomPick()
- shuffle()
- sync()
- lerp()
- round()
- clamp()
- snap()
- wrap()
- mapRange()
- interpolate()
- roundPad()
- padStart()
- padEnd()
- degToRad()
- radToDeg()
- 可链式调用的实用工具
WAAPI
引擎
- 参数
- 方法
- 属性
- 引擎默认值

入门

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

如果您正在从 v3 迁移，请查看 GitHub 上的迁移指南。

本节内容

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

上一页 下一页

文档
安装

Anime.js 能够实现，全赖我们优秀的赞助商