web animation API 锋利的css动画控制器 (更新中)

什么是web animation api 以及为什么要使用web animation api?

web animation API 是web页面中控制DOM元素动画效果的javascript原生API。

  1. 它能够逐个关键帧控制动画效果,
  2. 具有Timeline 机制‌能通过javascript来实现动画的暂停,播放,回溯等功能
  3. 能够通过javascript的事件监听动画的播放与完成,对动画的控制具有极高的细粒度。
  4. 另外它共用css animation的渲染引擎,所以具有极高的性能。

如何使用

基本使用方式

最直观的使用方式是

javascript 复制代码
const myAnimation = document.getElementById('id').animate(AnimationEffect,Options)

直接调用某个dom元素的animate函数,其中

  1. AnimationEffect 即keyframes object,等同于在css中使用 @keyframes
  2. Options里面是当前effect的配置项,常用配置项主要有:duration 动画播放时长, delay 时间延迟多久开始播, easing: 动画缓解曲线, iterations 播放次数
css 复制代码
#alice {
  animation: aliceTumbling infinite 3s linear;
}

@keyframes aliceTumbling {
  0% {
    color: #000;
    transform: rotate(0) translate3D(-50%, -50%, 0);
  }
  30% {
    color: #431236;
  }
  100% {
    color: #000;
    transform: rotate(360deg) translate3D(-50%, -50%, 0);
  }
}

以上css我们可以使用如下js进行覆盖

javascript 复制代码
const myAnimation = document.getElementById("alice").animate(
  [
    { transform: "rotate(0) translate3D(-50%, -50%, 0)", color: "#000" },
    { color: "#431236", offset: 0.3 },
    { transform: "rotate(360deg) translate3D(-50%, -50%, 0)", color: "#000" },
  ],
  {
    duration: 3000,
    iterations: Infinity,
  },
);

myAnimation.pause()

如果是通过上述方式实现(即 element.animate(...)) 会立马执行animation若想随后执行需要调用pause: myAnimation.pause() 然后在需要调用的时机执行: myAnimation.play()

Group Animation

待续

最佳实践

待续

相关推荐
伍哥的传说2 小时前
Radash.js 现代化JavaScript实用工具库详解 – 轻量级Lodash替代方案
开发语言·javascript·ecmascript·tree-shaking·radash.js·debounce·throttle
程序视点3 小时前
IObit Uninstaller Pro专业卸载,免激活版本,卸载清理注册表,彻底告别软件残留
前端·windows·后端
前端程序媛-Tian3 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
iamlujingtao3 小时前
js多边形算法:获取多边形中心点,且必定在多边形内部
javascript·算法
嘉琪0013 小时前
实现视频实时马赛克
linux·前端·javascript
烛阴4 小时前
Smoothstep
前端·webgl
若梦plus4 小时前
Eslint中微内核&插件化思想的应用
前端·eslint
爱分享的程序员4 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉4 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro
若梦plus4 小时前
Webpack中微内核&插件化思想的应用
前端·webpack