Question

所以我在javascript中有这个动画功能

anime.timeline({loop: true})
  

.add({
    targets: '.ml5 .line',
    opacity: [0.5,1],
    scaleX: [0, 1],
    easing: "easeInOutExpo",
    duration: 1000
  }).add({
    targets: '.ml5 .line',
    duration: 1000,
    easing: "easeOutExpo",
    translateY: (_el, i) => (-0.625 + 0.625*2*i) + "em"
  })
   .add({
    targets: '.ml5 .letters-left',
    opacity: [0,1],
    translateX: ["0.5em", 0],
    easing: "easeOutExpo",
    duration: 600,
    offset: '-=300'
  }).add({
    targets: '.ml5 .letters-right',
    opacity: [0,1],
    translateX: ["-0.5em", 0],
    easing: "easeOutExpo",
    duration: 600,
    offset: '-=600'
  }).add({
    targets: '.ml5',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000 ,
  });

我想要做的是让它在第一次动画后停止循环（基本上它显示线条移动，然后出现文本，之后我希望它在我的网站上保持静态）。我可以做到的最基本的方法就是将延迟的价值链接到无穷大，但这似乎不对，还有其他更“学术”的选择吗

Answer 1

在此处设置 false 参数：

anime.timeline ({loop: false})

并删除 opacity: 0 中的 targets: '.ml5'。

应该是这样的：

anime.timeline({loop: false})
.add({
    targets: '.ml5 .line',
    opacity: [0.5,1],
    scaleX: [0, 1],
    easing: "easeInOutExpo",
    duration: 1000
  }).add({
    targets: '.ml5 .line',
    duration: 1000,
    easing: "easeOutExpo",
    translateY: (_el, i) => (-0.625 + 0.625*2*i) + "em"
  })
   .add({
    targets: '.ml5 .letters-left',
    opacity: [0,1],
    translateX: ["0.5em", 0],
    easing: "easeOutExpo",
    duration: 600,
    offset: '-=300'
  }).add({
    targets: '.ml5 .letters-right',
    opacity: [0,1],
    translateX: ["-0.5em", 0],
    easing: "easeOutExpo",
    duration: 600,
    offset: '-=600'
  }).add({
    targets: '.ml5',
    //opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000 ,
  });

一种使这个 javascript 功能更好的聪明方法

1 个答案: