时间戳

首页 > 解决方案 > 有没有办法让这个动画从它停止的地方重新开始？（动漫.js）

javascript - 有没有办法让这个动画从它停止的地方重新开始？（动漫.js）

问题描述

我试图让下面的 onclick 函数在每次我们点击正方形时执行它离开的地方。例如，第一次单击时，绿色方块移动到左下角。下次单击时，它应该旋转到右上角，依此类推。有什么办法可以做到这一点吗？

（目前，点击后会从头开始）

var rotate = anime({
  targets: '.box',
  rotate: '0.5turn',
  autoplay: false

})


document.querySelector('#box').onclick = rotate.play
.box {
  height: 400px;
  width: 400px;
  border: 5px solid black;
  margin: 20px auto;
  display: flex;
  flex-wrap: wrap;
  /* overflow: hidden; */
}

.item1,
.item2,
.item3,
.item4 {
  width: 200px;
  height: 200px;
}

.item1 {
  background-color: cadetblue;
}

.item2 {
  background-color: chartreuse;
}

.item3 {
  background-color: cornflowerblue;
}

.item4 {
  background-color: crimson;
}
<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div id="box" class="box">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
    <div class="item4"></div>

  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous"></script>
  <script src="script.js"></script>
</body>

</html>

标签： javascriptanimationanime.js

解决方案

推荐阅读