提问者:小点点

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


所以我在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 ,
  });

我想要做的是让它在第一次扫描后停止循环(最基本的是显示行的移动,然后文本出现,之后我想让它在我的站点上保持静止)。最基本的方法,我可以使它做得很好,只是,把延迟的价值,无限,但这似乎不是正确的,有任何其他选择更“学术”。


共1个答案

匿名用户

null

anime.timeline ({loop: false}) 

并删除中的

应该是这样的:

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