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
      • 延迟
      • 持续时间
      • 缓动
      • 组合 JS
      • 修饰符 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()
    • 属性
  • 可动画
    • 设置
      • 单位
      • 持续时间
      • 缓动
      • 修饰符
    • 方法
      • Getter
      • Setter
      • revert()
    • 属性
  • 可拖动
    • 轴参数
      • x
      • y
      • 吸附
      • 修饰符
      • mapTo
    • 设置
      • 触发器
      • 容器
      • 容器内边距
      • 容器摩擦力
      • 释放容器摩擦力
      • 释放质量
      • 释放刚度
      • 释放阻尼
      • 速度乘数
      • 最小速度
      • 最大速度
      • 释放缓动
      • 拖动速度
      • 滚动阈值
      • 滚动速度
      • 光标
    • 回调
      • onGrab
      • onDrag
      • onUpdate
      • onRelease
      • onSnap
      • onSettle
      • onResize
      • onAfterResize
    • 方法
      • disable()
      • enable()
      • setX()
      • setY()
      • animateInView()
      • scrollInView()
      • stop()
      • reset()
      • revert()
      • refresh()
    • 属性
  • ScrollObserver
    • 设置
      • 容器
      • 目标
      • 调试
      • 轴
      • 重复
    • 阈值
      • 数值
      • 位置简写
      • 相对位置值
      • 最小值 最大值
    • 同步模式
      • 方法名称
      • 播放进度
      • 平滑滚动
      • 缓动滚动
    • 回调
      • onEnter
      • onEnterForward
      • onEnterBackward
      • onLeave
      • onLeaveForward
      • onLeaveBackward
      • onUpdate
      • onSyncComplete
    • 方法
      • link()
      • refresh()
      • revert()
    • 属性
  • 作用域
    • 添加构造函数
    • 注册方法函数
    • 参数
      • 根
      • 默认值
      • 媒体查询
    • 方法
      • add()
      • revert()
      • refresh()
    • 属性
  • 交错
    • 时间交错
    • 值交错
    • 时间线交错
    • 值类型
      • 数值
      • 范围
    • 参数
      • 起始值
      • from
      • 反向
      • 缓动
      • 网格
      • 轴
      • 修饰符
  • 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
      • direction
      • easing
      • finished
    • convertEase()
  • 引擎
    • 参数
      • timeUnit
      • speed
      • fps
      • precision
      • pauseOnDocumentHidden
    • 方法
      • update()
      • pause()
      • resume()
    • 属性
    • 引擎默认值

交错

自 2.0.0 起

交错参数

stagger(
  '1rem',
  {
  ┌───────────────────┐
  │ start: 100,       │
  │ from: 2,          │
  │ reversed: false,  ├─ Stagger Parameters
  │ ease: 'outQuad',  │
  │ grid: [8, 8],     │
  └───────────────────┘
  }
);
在本节中
  • 起始值
  • from
  • reversed
  • ease
  • grid
  • axis
  • modifier
上一个 下一个
  • 交错值类型
  • 交错开始