【JavaScript】序列动画

根据MDN网站学习记录笔记

---

一、项目目标

从Github上下载四个开源文件，其中主要针对js部分进行设计

将一个动画应用到三个图像上，一个接一个。当第一个结束时，动画第二个图像，当第二个结束时，动画第三个图像。

---

二、项目流程

动画已经在“main.js”中定义：旋转图像并缩小它，直到它消失。

const aliceTumbling = [
  {
    transform: 'rotate(0) scale(1)' },
  {
    transform: 'rotate(360deg) scale(0)' }
];

const aliceTiming = {
   
  duration: 2000,
  iterations: 1,
  fill: 'forwards'
}

const alice1 = document.querySelector("#alice1");
const alice2 = document.querySelector("#alice2");
const alice3 = document.querySelector("#alice3");

2.1 使第一个图像变成动画

添加一个对alice1.animate()的调用

alice1.animate(aliceTumbling, aliceTiming);

2.2 使所有图像变成动画

element.animate()并不返回Promise：它返回的Animation对象带有一个是Promise的finished属性；下面用三种方法来实现功能：

1. 存在回调地狱问题的promise版本

// promise version of the callback hell: one by ones
Animation.finished只读属性允许您返回动画的完成状态
alice1.animate(aliceTumbling,aliceTiming).finished
  .then(
    function(){
   
      const alice2Animation = alice2.animate(aliceTumbling