anime.js logo v4 Anime.js | JavaScript 动画引擎

  • 文档
  • 学习
  • 示例
  • GitHub
  • 赞助商
  • 入门
    • 安装
    • 导入
    • 与原生 JS 一起使用
    • 与 React 一起使用
  • 计时器
    • 播放设置
      • 延迟
      • 持续时间
      • 循环
      • 循环延迟
      • 交替
      • 反向
      • 自动播放
      • 帧率
      • 播放速率
    • 回调
      • 开始时
      • 完成时
      • 更新时
      • 循环时
      • 暂停时
      • then()
    • 方法
      • 播放()
      • 反转()
      • 暂停()
      • 重新开始()
      • 交替()
      • 恢复()
      • 完成()
      • 取消()
      • 还原()
      • 定位()
      • 拉伸()
    • 属性
  • 动画
    • 目标
      • 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
    • 回调
      • 开始时 JS
      • 完成时
      • 更新前 JS
      • 更新时 JS
      • 渲染时 JS
      • 循环时 JS
      • 暂停时 JS
      • then()
    • 方法
      • 播放()
      • 反转()
      • 暂停()
      • 重新开始()
      • 交替()
      • 恢复()
      • 完成()
      • 取消()
      • 还原()
      • 定位()
      • 拉伸() JS
      • 刷新() JS
    • 属性
  • 时间轴
    • 添加计时器
    • 添加动画
    • 同步 WAAPI 动画
    • 同步时间轴
    • 调用函数
    • 时间位置
    • 播放设置
      • 默认值
      • 延迟
      • 循环
      • 循环延迟
      • 交替
      • 反向
      • 自动播放
      • 帧率
      • 播放速率
      • 播放缓动
    • 回调
      • 开始时
      • 完成时
      • 更新前
      • 更新时
      • 渲染时
      • 循环时
      • 暂停时
      • then()
    • 方法
      • 添加()
      • 设置()
      • 同步()
      • 标记()
      • 移除()
      • 调用()
      • 初始化()
      • 播放()
      • 反转()
      • 暂停()
      • 重新开始()
      • 交替()
      • 恢复()
      • 完成()
      • 取消()
      • 还原()
      • 定位()
      • 拉伸()
      • 刷新()
    • 属性
  • 可动画
    • 设置
      • 单位
      • 持续时间
      • 缓动
      • 修饰符
    • 方法
      • 获取器
      • 设置器
      • 还原()
    • 属性
  • 可拖拽
    • 轴参数
      • x
      • y
      • 吸附
      • 修饰符
      • 映射到
    • 设置
      • 触发器
      • 容器
      • 容器内边距
      • 容器摩擦
      • 释放容器摩擦
      • 释放质量
      • 释放刚度
      • 释放阻尼
      • 速度乘数
      • 最小速度
      • 最大速度
      • 释放缓动
      • 拖拽速度
      • 滚动阈值
      • 滚动速度
      • 光标
    • 回调
      • 抓取时
      • 拖拽时
      • 更新时
      • 释放时
      • 吸附时
      • 稳定时
      • 调整大小时
      • 调整大小后
    • 方法
      • 禁用()
      • 启用()
      • 设置X()
      • 设置Y()
      • 视口内动画()
      • 滚动到视口内()
      • 停止()
      • 重置()
      • 还原()
      • 刷新()
    • 属性
  • 滚动
    • 设置
      • 容器
      • 目标
      • 调试
      • 轴
      • 重复
    • 阈值
      • 数值
      • 位置速记
      • 相对位置值
      • 最小值最大值
    • 同步模式
      • 方法名称
      • 播放进度
      • 平滑滚动
      • 缓动滚动
    • 回调
      • 进入时
      • 前向进入时
      • 后向进入时
      • 离开时
      • 前向离开时
      • 后向离开时
      • 更新时
      • 同步完成时
    • 方法
      • 链接()
      • 刷新()
      • 还原()
    • 属性
  • 作用域
    • 添加构造函数
    • 注册方法函数
    • 参数
      • 根
      • 默认值
      • 媒体查询
    • 方法
      • 添加()
      • 添加一次()
      • 保持时间()
      • 还原()
      • 刷新()
    • 属性
  • 交错
    • 时间交错
    • 值交错
    • 时间轴交错
    • 值类型
      • 数值型
      • 范围
    • 参数
      • 开始
      • 从
      • 反向
      • 缓动
      • 网格
      • 轴
      • 修饰符
      • 使用
      • 总计
  • SVG
    • 变形到()
    • 创建可绘制对象()
    • 创建运动路径()
  • 文本
    • 分割()
      • 设置
        • 行
        • 单词
        • 字符
        • 调试
        • 包含空格
        • 可访问性
      • 拆分参数
        • 类
        • 包裹
        • 克隆
      • HTML 模板
      • 方法
        • 添加效果()
        • 还原()
        • 刷新()
      • 属性
  • 实用工具
    • $()
    • 获取()
    • 设置()
    • 移除()
    • 清理内联样式()
    • 保持时间()
    • 随机()
    • 随机选取()
    • 打乱()
    • 同步()
    • 线性插值()
    • 取整()
    • 限制()
    • 吸附()
    • 环绕()
    • 映射范围()
    • 插值()
    • 四舍五入填充()
    • 头部填充()
    • 尾部填充()
    • 角度转弧度()
    • 弧度转角度()
    • 可链式调用的实用工具
  • WAAPI
    • 何时使用
    • 硬件加速
    • WAAPI 的改进
      • 合理的默认值
      • 多目标动画
      • 默认单位
      • 基于函数的值
      • 独立变换
      • 独立属性参数
      • 弹性与自定义缓动
    • API 差异
      • 迭代次数
      • 方向
      • 缓动
      • 已完成
    • 转换缓动()
  • 引擎
    • 参数
      • 时间单位
      • 速度
      • 帧率
      • 精度
      • 文档隐藏时暂停
    • 方法
      • 更新()
      • 暂停()
      • 恢复()
    • 属性
    • 引擎默认值

交错

自 2.0.0 版本起

错开参数

stagger(
  '1rem',
  {
  ┌───────────────────┐
  │ start: 100,       │
  │ from: 2,          │
  │ reversed: false,  ├─ Stagger Parameters
  │ ease: 'outQuad',  │
  │ grid: [8, 8],     │
  └───────────────────┘
  }
);
本节内容
  • 开始
  • 从
  • 已反转
  • 缓动
  • 网格
  • 轴
  • 修饰符
  • 使用
  • 总计
上一页 下一页
  • 范围值
  • 交错开始

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