动漫js动画问题

Question

我正在尝试使用 anime.js 为 SVG 图标制作动画。

这是我的代码：

const cartIcon = '.cart-icon';

const cartIconAnimation = anime({
  targets: `${cartIcon} path`,
  
  strokeDashoffset: {
    value: [anime.setDashoffset, 0],
    easing: 'easeInOutSine',
    duration: 1500,
    direction: 'alternate',
  },
  
  fill: {
    value: '#000',
    easing: 'linear',
    duration: 400,
    delay: 1500,
  },
  
  complete: function() {
    
   anime({
      targets: `${cartIcon} .arrow`,
      translateY: [-30, 0],
      duration: 700,
      easing: 'easeOutElastic',
      direction: 'alternate',
      loop: true
    });
    
  }
  
});

const cartReplay = document.querySelector('.cart-icon').nextElementSibling;

cartReplay.addEventListener('click', cartIconAnimation.restart);

.icon {
  width: 100px;
  height: 100px;
  margin-top: 20px;
 }
 
 svg {
  width: 100%;
  height: 100%;
  overflow: visible;
 }
 
 button {
 margin-top: 20px;
 }

<script src="https://cdn.jsdelivr.net/npm/animejs@3.1.0/lib/anime.min.js"></script>
<div class="cart-icon icon">
        <svg height="426pt" viewBox="-6 0 426 426.82755" width="426pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <path class="arrow" fill="#fff" stroke="#000" stroke-width="3" d="m207.859375 80.316406 35 30c.007813.007813.023437.015625.035156.023438.289063.246094.597657.464844.925781.660156.042969.027344.085938.054688.128907.078125.320312.179687.648437.335937.992187.464844l.160156.058593c.339844.121094.6875.210938 1.042969.277344l.15625.023438c.738281.128906 1.488281.128906 2.226563 0l.15625-.023438c.355468-.066406.703125-.15625 1.042968-.277344l.160157-.058593c.339843-.128907.671875-.285157.988281-.464844.046875-.023437.089844-.050781.132812-.078125.328126-.195312.636719-.414062.925782-.660156.011718-.007813.023437-.015625.035156-.023438l35-30c2.9375-2.519531 3.277344-6.9375.757812-9.871094-2.515624-2.9375-6.933593-3.277343-9.867187-.757812l-23.445313 20.09375v-82.78125c0-3.867188-3.132812-7-7-7-3.867187 0-7 3.132812-7 7v82.78125l-23.445312-20.09375c-2.933594-2.519531-7.351562-2.179688-9.871094.757812-2.515625 2.933594-2.175781 7.351563.761719 9.871094zm0 0" />
          <path class="cart" fill="#fff" stroke="#000" stroke-width="3" d="m407.414062 133.679688h-312l-3.277343-24.574219c-.007813-.054688-.015625-.109375-.023438-.167969-3.195312-20.703125-21.050781-35.957031-42-35.871094h-42.699219c-3.867187 0-7 3.132813-7 7 0 3.863282 3.132813 7 7 7h42.699219c14.019531-.058594 25.980469 10.128906 28.160157 23.980469l33.792968 253.425781c.007813.054688.015625.113282.023438.167969 3.195312 20.703125 21.050781 35.957031 42 35.875h5.875c2.578125 15.195313 15.742187 26.3125 31.152344 26.3125 15.414062 0 28.578124-11.117187 31.15625-26.3125h58.46875c2.707031 15.863281 16.902343 27.160156 32.96875 26.242187 16.070312-.921874 28.878906-13.765624 29.757812-29.835937s-10.457031-30.234375-26.328125-32.898437c-15.871094-2.667969-31.210937 7.015624-35.632813 22.492187h-60c-3.871093-13.574219-16.273437-22.933594-30.386718-22.933594-14.117188 0-26.519532 9.359375-30.390625 22.933594h-6.640625c-14.019532.058594-25.984375-10.128906-28.164063-23.980469l-10.183593-76.382812h218.40625c18.117187-.007813 34.242187-11.484375 40.179687-28.597656l39.703125-114.578126c.742188-2.140624.402344-4.507812-.910156-6.355468s-3.441406-2.945313-5.707032-2.941406zm-95.523437 243.90625c9.726563 0 17.613281 7.882812 17.613281 17.609374 0 9.726563-7.886718 17.613282-17.613281 17.613282s-17.609375-7.886719-17.609375-17.613282c.011719-9.722656 7.890625-17.597656 17.609375-17.609374zm-120.777344 0c9.726563 0 17.609375 7.882812 17.613281 17.609374 0 9.726563-7.886718 17.613282-17.613281 17.613282-9.726562 0-17.609375-7.886719-17.609375-17.613282.011719-9.722656 7.886719-17.597656 17.609375-17.609374zm169.988281-124.621094c-3.984374 11.480468-14.800781 19.179687-26.953124 19.183594h-220.273438l-16.601562-124.46875h300.300781zm0 0" />
          </svg>
</div>          

<button class="icon-block__replay" type="button"> Replay </button>

当动画加载时 - 一切都很完美。但是当我点击 'restart' 按钮时，有两个问题：

1) 图标的箭头部分必须在线条和填充动画完成后才开始动画，但它在动画开始时与 line/fill 动画一起开始；

2) 当填充动画完成时，箭头会奇怪地移动到顶部，我不知道如何修复它

非常感谢您的帮助！谢谢！

Answer 1

问题是您没有暂停 bounce 动画，该动画在笔划动画结束时开始。

将弹跳动画分配给一个变量，以便稍后在用户单击时暂停它。

// Declare the variable here to provide it with the right scope.
let bounceAnimation;

const cartIconAnimation = anime({
  // some options...

  complete: function() {
    bounceAnimation = anime({
      // your bounce options...
    });
  }
});

那么你可以这样修改事件监听：

cartReplay.addEventListener('click', function() {
  bounceAnimation.pause()
  cartIconAnimation.restart()
});

试试下面的代码片段。

const cartIcon = '.cart-icon';
let bounceAnimation;

const cartIconAnimation = anime({
  targets: `${cartIcon} path`,
  
  strokeDashoffset: {
    value: [anime.setDashoffset, 0],
    easing: 'easeInOutSine',
    duration: 1500,
    direction: 'alternate',
  },
  
  fill: {
    value: '#000',
    easing: 'linear',
    duration: 400,
    delay: 1500,
  },
  
  complete: function() {
    
   bounceAnimation = anime({
      targets: `${cartIcon} .arrow`,
      translateY: [-30, 0],
      duration: 700,
      easing: 'easeOutElastic',
      direction: 'alternate',
      loop: true
    });
    
  }
  
});

const cartReplay = document.querySelector('.cart-icon').nextElementSibling;

cartReplay.addEventListener('click', function() {
  bounceAnimation.pause()
  cartIconAnimation.restart()
});

.icon {
  width: 100px;
  height: 100px;
  margin-top: 20px;
 }
 
 svg {
  width: 100%;
  height: 100%;
  overflow: visible;
 }
 
 button {
 margin-top: 20px;
 }

<script src="https://cdn.jsdelivr.net/npm/animejs@3.1.0/lib/anime.min.js"></script>
<div class="cart-icon icon">
        <svg height="426pt" viewBox="-6 0 426 426.82755" width="426pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <path class="arrow" fill="#fff" stroke="#000" stroke-width="3" d="m207.859375 80.316406 35 30c.007813.007813.023437.015625.035156.023438.289063.246094.597657.464844.925781.660156.042969.027344.085938.054688.128907.078125.320312.179687.648437.335937.992187.464844l.160156.058593c.339844.121094.6875.210938 1.042969.277344l.15625.023438c.738281.128906 1.488281.128906 2.226563 0l.15625-.023438c.355468-.066406.703125-.15625 1.042968-.277344l.160157-.058593c.339843-.128907.671875-.285157.988281-.464844.046875-.023437.089844-.050781.132812-.078125.328126-.195312.636719-.414062.925782-.660156.011718-.007813.023437-.015625.035156-.023438l35-30c2.9375-2.519531 3.277344-6.9375.757812-9.871094-2.515624-2.9375-6.933593-3.277343-9.867187-.757812l-23.445313 20.09375v-82.78125c0-3.867188-3.132812-7-7-7-3.867187 0-7 3.132812-7 7v82.78125l-23.445312-20.09375c-2.933594-2.519531-7.351562-2.179688-9.871094.757812-2.515625 2.933594-2.175781 7.351563.761719 9.871094zm0 0" />
          <path class="cart" fill="#fff" stroke="#000" stroke-width="3" d="m407.414062 133.679688h-312l-3.277343-24.574219c-.007813-.054688-.015625-.109375-.023438-.167969-3.195312-20.703125-21.050781-35.957031-42-35.871094h-42.699219c-3.867187 0-7 3.132813-7 7 0 3.863282 3.132813 7 7 7h42.699219c14.019531-.058594 25.980469 10.128906 28.160157 23.980469l33.792968 253.425781c.007813.054688.015625.113282.023438.167969 3.195312 20.703125 21.050781 35.957031 42 35.875h5.875c2.578125 15.195313 15.742187 26.3125 31.152344 26.3125 15.414062 0 28.578124-11.117187 31.15625-26.3125h58.46875c2.707031 15.863281 16.902343 27.160156 32.96875 26.242187 16.070312-.921874 28.878906-13.765624 29.757812-29.835937s-10.457031-30.234375-26.328125-32.898437c-15.871094-2.667969-31.210937 7.015624-35.632813 22.492187h-60c-3.871093-13.574219-16.273437-22.933594-30.386718-22.933594-14.117188 0-26.519532 9.359375-30.390625 22.933594h-6.640625c-14.019532.058594-25.984375-10.128906-28.164063-23.980469l-10.183593-76.382812h218.40625c18.117187-.007813 34.242187-11.484375 40.179687-28.597656l39.703125-114.578126c.742188-2.140624.402344-4.507812-.910156-6.355468s-3.441406-2.945313-5.707032-2.941406zm-95.523437 243.90625c9.726563 0 17.613281 7.882812 17.613281 17.609374 0 9.726563-7.886718 17.613282-17.613281 17.613282s-17.609375-7.886719-17.609375-17.613282c.011719-9.722656 7.890625-17.597656 17.609375-17.609374zm-120.777344 0c9.726563 0 17.609375 7.882812 17.613281 17.609374 0 9.726563-7.886718 17.613282-17.613281 17.613282-9.726562 0-17.609375-7.886719-17.609375-17.613282.011719-9.722656 7.886719-17.597656 17.609375-17.609374zm169.988281-124.621094c-3.984374 11.480468-14.800781 19.179687-26.953124 19.183594h-220.273438l-16.601562-124.46875h300.300781zm0 0" />
          </svg>
</div>          

<button class="icon-block__replay" type="button"> Replay </button>

动漫js动画问题

Anime js animationg issues

javascript

anime.js