gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 05:59:03 28 4
gpt4 key购买 nike

我正在使用动漫 JS 库,我向一个 div 添加了两个动画,第二个动画在第一个动画完成时开始。但问题是我只希望第二个动画继续循环,我已经在第二个动画上将属性“loop”设置为“true”,但它仍然不会循环,除了“loop”之外的每个属性都可以正常工作属性,我怎样才能让第二个动画一遍又一遍地循环?

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,
})

最佳答案

如评论中所述,这是 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

关于javascript - 为什么循环属性不适用于我的第二个动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68278464/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com