Anime.js | JavaScript Animation Engine

文档
缓动
Nodejs.cn

入门
定时器
- 播放设置
  - delay
  - duration
  - loop
  - loopDelay
  - alternate
  - reversed
  - autoplay
  - frameRate
  - playbackRate
- 回调
  - onBegin
  - onComplete
  - onUpdate
  - onLoop
  - onPause
  - then()
- 方法
  - play()
  - reverse()
  - pause()
  - restart()
  - alternate()
  - resume()
  - complete()
  - reset()
  - cancel()
  - revert()
  - seek()
  - stretch()
- 属性
动画
- 目标
- 可动画属性
- 补间值类型
- 补间参数
  - to
  - from
  - delay
  - duration
  - ease
  - compositionJS
  - modifierJS
- 关键帧
- 播放设置
  - delay
  - duration
  - loop
  - loopDelayJS
  - alternate
  - reversed
  - autoplay
  - frameRateJS
  - playbackRate
  - playbackEaseJS
  - persistWAAPI
- 回调
  - onBeginJS
  - onComplete
  - onBeforeUpdateJS
  - onUpdateJS
  - onRenderJS
  - onLoopJS
  - onPauseJS
  - then()
- 方法
  - play()
  - reverse()
  - pause()
  - restart()
  - alternate()
  - resume()
  - complete()
  - cancel()
  - revert()
  - reset()JS
  - seek()
  - stretch()JS
  - refresh()JS
- 属性
时间线
- 添加计时器
- 添加动画
- 同步 WAAPI 动画
- 同步时间线
- 调用函数
- 时间位置
- 播放设置
  - defaults
  - delay
  - loop
  - loopDelay
  - alternate
  - reversed
  - autoplay
  - frameRate
  - playbackRate
  - playbackEase
- 回调
  - onBegin
  - onComplete
  - onBeforeUpdate
  - onUpdate
  - onRender
  - onLoop
  - onPause
  - then()
- 方法
  - add()
  - set()
  - sync()
  - label()
  - remove()
  - call()
  - init()
  - play()
  - reset()
  - reverse()
  - pause()
  - restart()
  - alternate()
  - resume()
  - complete()
  - cancel()
  - revert()
  - seek()
  - stretch()
  - refresh()
- 属性
可动画化
- 设置
  - unit
  - duration
  - ease
  - modifier
- 方法
- 属性
可拖动
- 坐标轴参数
  - x
  - y
  - snap
  - modifier
  - mapTo
- 设置
- 回调
  - onGrab
  - onDrag
  - onUpdate
  - onRelease
  - onSnap
  - onSettle
  - onResize
  - onAfterResize
- 方法
  - disable()
  - enable()
  - setX()
  - setY()
  - animateInView()
  - scrollInView()
  - stop()
  - reset()
  - revert()
  - refresh()
- 属性
布局NEW
- 使用
- 设置
  - children
  - delay
  - duration
  - ease
  - properties
- 状态
  - enterFrom
  - leaveTo
  - swapAt
- 方法
  - record()
  - animate()
  - update()
  - revert()
- 布局ID
- 回调
- 属性
- 常见问题
范围
- 添加构造函数
- 注册方法函数
- 参数
- 方法
  - add()
  - addOnce()
  - keepTime()
  - revert()
  - refresh()
- 属性
事件
- onScroll
  - 设置
    - container
    - target
    - debug
    - axis
    - repeat
  - 阈值
  - 同步模式
  - 回调
  - 方法
  - 属性
SVG
文本
- splitText
  - 设置
    - lines
    - words
    - chars
    - debug
    - includeSpaces
    - accessible
  - 拆分参数
    - class
    - wrap
    - clone
  - HTML 模板
  - 方法
  - 属性
实用工具
- stagger()
  - 时间错开
  - 数值惊人
  - 时间线错开
  - 值类型
    - 数字的
    - 范围
  - 参数
    - start
    - from
    - reversed
    - ease
    - grid
    - axis
    - modifier
    - use
    - total
- $()
- get()
- set()
- cleanInlineStyles()
- remove()
- sync()
- keepTime()
- random()
- createSeededRandom()
- randomPick()
- shuffle()
- round()
- clamp()
- snap()
- wrap()
- mapRange()
- lerp()
- damp()
- roundPad()
- padStart()
- padEnd()
- degToRad()
- radToDeg()
- 可链式使用的工具
缓动
- 内置缓动
- 立方贝塞尔
- 线性
- 步进
- 不规则
- 弹簧
WAAPI
引擎
- 参数
- 方法
- 属性
- 引擎默认设置

入门

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

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

在本节

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

上一页 下一页

文档
安装

Anime.js 中文网 - 粤ICP备13048890号 - Nodejs.cn 旗下网站