Anime.js - 在循环中的两个方向应用相同的不透明度过渡

Question

我正在使用 Anime.js 沿着 SVG 路径来回移动正方形。当正方形沿路径双向移动时，其不透明度需要从 1 过渡到 0。 我只能让它在正向从 1 过渡到 0，在反向从 0 过渡到 1。这是简单动画的默认设置：

 anime({
   targets: ".square",
   translateX: path("x"),
   translateY: path("y"),
   rotate: path("angle"),
   opacity: [1, 0],
   loop: true,
   direction: 'alternate',
   easing: 'linear'
})

所以我尝试使用时间线：

anime.timeline({
  loop: true,
  duration: duration,
  })
  .add({
    targets: ".square",
    translateX: path("x"),
    translateY: path("y"),
    rotate: path("angle"),
    opacity: [1, 0],
    loop: true,
    direction: 'normal',
    easing: 'linear'        
  }).add({
    targets: ".square",
    translateX: path("x"),
    translateY: path("y"),
    rotate: path("angle"),
    opacity: [1, 0],
    loop: true,
    direction: 'reverse',
    easing: 'linear',  
    duration: duration,
  });
} 

...但这不起作用，因为方向参数只能在时间轴对象本身上设置。

我对 Anime.js 没有太多经验，并且在文档中找不到任何内容。有人能帮忙解决这个问题吗？预先感谢！

https://codepen.io/Ohoph/pen/mdYNYrR

Answer 1

只需使用

opacity: 0

道具：

window.onload = function () {
  const path = anime.path("#line");
  anime({
    targets: "#square",
    translateX: path("x"),
    translateY: path("y"),
    duration: 3000,
    opacity: 0,
    easing: "linear",
    direction: "alternate",
    loop: true
  });
};

.square {
  position: relative;
  left: 0;
  width: 30px;
  height: 30px;
  background: green;
  z-index: 2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<svg viewBox="0 0 100 100">
  <path id="line" d="M 0,5 L 50,5" stroke="blue" stroke-width="1"></path>
  <rect id="square" width="4" height="4" fill="red" />
</svg>