如何让这个JS动画效果先反转再重启？

Question

这是一个演示文本，当它开始动画时，这个动画将完全消失并重新启动，但我想重新启动它首先是反向动画，然后重新启动。

var textWrapper = document.querySelector('.rks1');

textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {
  return `<span class="word">` +
    m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +
    `</span>`;
});

anime.timeline({loop: true})
  .add({
    targets: '.rks1 .letter',
    scale: [3,1],
    scaleY: [1.5,1],
    opacity: [0,1],
    translateZ: 0,
    easing: "easeOutExpo",
    duration: 400,
    delay: (el, i) => 60*i
  }).add({
    opacity: 0,
    duration: 2000,
    easing: "easeOutExpo",
    delay: 800
  });

.rks1 {
font-weight: 900;
font-size: 2.5em;
font-family: rr;
}

.rks1 .letter {
display: inline-block;
line-height: 1em;
}

.word {
white-space: nowrap;
}

.span {
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   
 <h1 class="rks1">
this is demo text that is animated when it will start animation then this completely disappear and restart.
But I want to reverse animation before it restart.
</h1>

＆amp; 我还想在这个JS中增加一个功能，比如说，html行一个一个的动画。

<h1 class="rks1"> this is demo text that is animated first then reverse animation & start next line animation
    </h1>

Just like
<h1 class="rks1">  Then Second Line </h1>
<h1 class="rks1">  Then Third Line </h1>
<h1 class="rks1">  Then Fourth Line </h1>
<h1 class="rks1">  Then Fifth Line </h1>

例如：& 更多...

Answer 1

你可以设置 direction 属性，将动画参数对象中的 'alternate' 前面开始到结尾，完成后从结尾到开始。

var textWrapper = document.querySelector('.rks1');

textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {
  return `<span class="word">` +
    m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +
    `</span>`;
});

anime.timeline({
  loop: true,
  direction: 'alternate'
})
  .add({
    targets: '.rks1 .letter',
    scale: [3,1],
    scaleY: [1.5,1],
    opacity: [0,1],
    translateZ: 0,
    easing: "easeOutExpo",
    duration: 400,
    delay: (el, i) => 60*i
  }).add({
    opacity: 0,
    duration: 2000,
    easing: "easeOutExpo",
    delay: 800
  });

.rks1 {
font-weight: 900;
font-size: 2.5em;
font-family: rr;
}

.rks1 .letter {
display: inline-block;
line-height: 1em;
}

.word {
white-space: nowrap;
}

.span {
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   
 <h1 class="rks1">
this is demo text that is animated when it will start animation then this completely disappear and restart.
But I want to reverse animation before it restart.
</h1>

或者通过反转选择你想要动画的元素，将另一个动画添加到你的时间轴上，动画反转。

var textWrapper = document.querySelector('.rks1');

textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {
  return `<span class="word">` +
    m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +
    `</span>`;
});

var targets = Array.from(document.querySelectorAll('.rks1 .letter'));

anime.timeline({
  loop: true,
})
  .add({
    targets: targets,
    scale: [3,1],
    scaleY: [1.5,1],
    opacity: [0,1],
    translateZ: 0,
    easing: "easeOutExpo",
    duration: 400,
    delay: (el, i) => 60*i
  }).add({
    targets: targets.reverse(),
    scale: [1,3],
    scaleY: [1,1.5],
    opacity: [1,0],
    translateZ: 0,
    easing: "easeOutExpo",
    duration: 100,
    delay: (el, i) => 30*i
  }).add({
    opacity: 0,
    duration: 2000,
    easing: "easeOutExpo",
    delay: 800
  });

.rks1 {
font-weight: 900;
font-size: 2.5em;
font-family: rr;
}

.rks1 .letter {
display: inline-block;
line-height: 1em;
}

.word {
white-space: nowrap;
}

.span {
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   
<h1 class="rks1">
this is demo text that is animated when it will start animation then this completely disappear and restart.
But I want to reverse animation before it restart.
</h1>