为什么循环属性不适用于我的第二个动画？答案

【问题标题】：Why is the loop property not working on my second animation?为什么循环属性不适用于我的第二个动画？
【发布时间】：2021-07-06 23:38:10
【问题描述】：

我正在使用动画 JS 库，我在一个 div 中添加了两个动画，第二个动画在第一个动画完成后开始。但问题是我只想让第二个动画继续循环，我在第二个动画上将属性“循环”设置为“真”，但它仍然不会循环，除了“循环”之外，每个属性都可以正常工作属性，我怎样才能一遍又一遍地制作第二个动画循环？

HTML 代码：

<body>

    <div></div>
    
</body>

CSS 代码：

div{
    height: 100px;
    width: 100px;
    background-color: rgb(161, 6, 6);
}

JavaScript 代码：

"use strict";

let square = document.querySelector("div")

anime.timeline()
    .add({
        targets: square,
        backgroundColor: "#3dbf7a",
        duration: 2000,
    })
    .add({
        targets: square,
        translateX: [0,100],
        translateY: [0,100],
        duration: 1000,
        loop: true,
    })

【问题讨论】：

translateX: [0,100] 似乎不受支持的语法。试试translateX: 100 和translateY: 100
github.com/juliangarnier/anime/issues/522 这是库中存在的问题。

标签： javascript html css anime.js

【解决方案1】：

如 cmets 中所述，这是库中的 an existing issue。在这个解决方法中，我需要将 anim.restart() 调用放在 setTimeout 中，以确保 javascript 在新的事件循环中执行。

let square = document.querySelector("div");

anime.timeline()
  .add({
    targets: square,
    backgroundColor: "#3dbf7a",
    duration: 2000,
  }).add({
    targets: square,
    translateX: [0, 100],
    translateY: [0, 100],
    duration: 1000,
    changeComplete: (anim) => {
      setTimeout(() => {
        anim.restart()
      })
    }
  });

div {
  height: 100px;
  width: 100px;
  background-color: rgb(161, 6, 6);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<div></div>

jsFiddle

【讨论】：