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
    • 补间值类型
      • 数值型
      • 单位转换
      • 相对值 JS
      • 颜色
      • 颜色函数 WAAPI
      • CSS 变量 WAAPI
      • 基于函数
    • 补间参数
      • to
      • from
      • 延迟
      • 持续时间
      • ease
      • composition JS
      • modifier JS
    • 关键帧
      • 补间值
      • 补间参数 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()
    • 属性
  • 可动画
    • 设置
      • 单位
      • 持续时间
      • ease
      • modifier
    • 方法
      • 获取器
      • 设置器
      • revert()
    • 属性
  • 可拖拽
    • 轴参数
      • x
      • y
      • 吸附
      • modifier
      • 映射到
    • 设置
      • 触发器
      • 容器
      • 容器内边距
      • 容器摩擦
      • 释放容器摩擦
      • 释放质量
      • 释放刚度
      • 释放阻尼
      • 速度乘数
      • 最小速度
      • 最大速度
      • 释放缓动
      • 拖拽速度
      • 滚动阈值
      • 滚动速度
      • 光标
    • 回调
      • onGrab
      • onDrag
      • onUpdate
      • onRelease
      • onSnap
      • onSettle
      • onResize
      • onAfterResize
    • 方法
      • disable()
      • enable()
      • setX()
      • setY()
      • animateInView()
      • scrollInView()
      • stop()
      • reset()
      • revert()
      • refresh()
    • 属性
  • 滚动
    • 设置
      • 容器
      • 目标
      • 调试
      • 轴
      • 重复
    • 阈值
      • 数值
      • 位置速记
      • 相对位置值
      • 最小值最大值
    • 同步模式
      • 方法名称
      • 播放进度
      • 平滑滚动
      • 缓动滚动
    • 回调
      • onEnter
      • onEnterForward
      • onEnterBackward
      • onLeave
      • onLeaveForward
      • onLeaveBackward
      • onUpdate
      • onSyncComplete
    • 方法
      • link()
      • refresh()
      • revert()
    • 属性
  • 作用域
    • 添加构造函数
    • 注册方法函数
    • 参数
      • 根
      • 默认值
      • 媒体查询
    • 方法
      • add()
      • addOnce()
      • keepTime()
      • revert()
      • refresh()
    • 属性
  • 交错
    • 时间交错
    • 值交错
    • 时间轴交错
    • 值类型
      • 数值型
      • 范围
    • 参数
      • 开始
      • from
      • 反向
      • ease
      • 网格
      • 轴
      • modifier
      • 使用
      • 总计
  • SVG
    • morphTo()
    • createDrawable()
    • createMotionPath()
  • 文本
    • split()
      • 设置
        • 行
        • 单词
        • 字符
        • 调试
        • 包含空格
        • 可访问性
      • 拆分参数
        • 类
        • 包裹
        • 克隆
      • HTML 模板
      • 方法
        • addEffect()
        • revert()
        • refresh()
      • 属性
  • 实用工具
    • $()
    • get()
    • set()
    • remove()
    • cleanInlineStyles()
    • keepTime()
    • 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()
    • 属性
    • 引擎默认值

SVG

SVG 形变、线条绘制和运动路径动画辅助工具函数的集合。

所有 SVG 实用函数都可在 svg 对象上使用。

import { svg } from 'animejs';
本节内容
  • morphTo()
  • createDrawable()
  • createMotionPath()
上一页 下一页
  • 交错总计
  • morphTo()

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