时间戳

首页 > 解决方案 > 为什么循环属性不适用于我的第二个动画？

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

问题描述

我正在使用动画 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,
    })

标签： javascripthtmlcssanime.js

解决方案

正如评论中提到的，这是图书馆中的一个现有问题。在这个解决方法中，我需要将anim.restart()调用放在 asetTimeout中，以确保 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

推荐阅读