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

待续

最佳实践

待续

相关推荐
心.c几秒前
React基础
前端·javascript·react.js
江城开朗的豌豆11 分钟前
Vue新手必看!1分钟快速创建项目的魔法命令
前端·javascript·vue.js
黑客笔记25 分钟前
Bugku-CTF-web
大数据·前端·深度学习·web安全
恋猫de小郭1 小时前
Compose Hot Reload 为什么只支持桌面 JVM,它和 Live Edit 又有什么区别?
android·前端·flutter
10年前端老司机2 小时前
Vue3项目中使用vue-draggable-plus实现拖拽需求简直不要太丝滑
前端·javascript·vue.js
&白帝&7 小时前
前端实现截图的几种方法
前端
动能小子ohhh7 小时前
html实现登录与注册功能案例(不写死且只使用js)
开发语言·前端·javascript·python·html
小小小小宇8 小时前
大文件断点续传笔记
前端
Jimmy8 小时前
理解 React Context API: 实用指南
前端·javascript·react.js
保持学习ing8 小时前
SpringBoot电脑商城项目--显示勾选+确认订单页收货地址
java·前端·spring boot·后端·交互·jquery