Странная вырезка при завершении анимации anime.js - PullRequest
Новая
       28

Странная вырезка при завершении анимации anime.js

0 голосов
/ 28 сентября 2019

Я работаю над цепочкой анимаций, и когда все это заканчивается, кажется, что происходит какое-то странное привидение.В течение доли секунды мои элементы отображаются в исходном состоянии с меньшей непрозрачностью. 

anime({
  targets: '#big-lock',
  strokeDashoffset: [0, 5],
  easing: 'easeInOutSine',
  duration: 350,
  delay: 250,
  easing: 'easeInSine'
});

anime({
  targets: '#lock-line',
  strokeDashoffset: [0, 3],
  translateY: [{
      value: '-2px',
      duration: 550,
      easing: 'easeOutExpo'
    },
    {
      value: '2px',
      duration: 550,
      easing: 'easeOutExpo'
    },
    {
      value: '-2px',
      duration: 550,
      easing: 'easeOutExpo'
    },
  ],
});

anime({
  targets: '#inner-circle',
  translateY: [{
      value: '-1px',
      duration: 250,
      easing: 'easeOutExpo'
    },
    {
      value: '1px',
      duration: 250,
      easing: 'easeOutExpo'
    },
    {
      value: '-1px',
      duration: 250,
      easing: 'easeOutExpo'
    },
    {
      value: 0,
      duration: 250,
      easing: 'easeOutExpo'
    },
  ],
}).finished.then(() => {
  anime({
    targets: '.plugins-not-installed-text',
    translateY: [{
      value: '10px',
      duration: 750
    }]
  });
  anime({
    targets: '#lock-wrapper',
    translateY: [{
      value: '-10px',
      duration: 750
    }]
  });
  anime({
    targets: '#plugins-not-installed-screen',
    opacity: 0
  }).finished.then(() => {
    $('#plugins-not-installed-screen').remove();
  });
});
#plugins-not-installed-screen {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}

#plugins-not-installed-screen .upper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 2;
  padding: 24px 48px;
  background-image: url('../Images/component.png');
  background-repeat: repeat;
}

.demo-install-content .demo-components {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.plugins-not-installed-text {
  font-size: 15px;
  text-align: center;
}

#lock {
  display: block;
  width: 50px;
  height: 65px;
}

#plugins-not-installed-screen #lock {}

#plugins-not-installed-screen #big-lock {
  stroke-dasharray: 61 62;
  stroke-dashoffset: 5;
  /* go to 5 */
}

#plugins-not-installed-screen #lock-line {
  stroke-dasharray: 31 33;
  stroke-dashoffset: 0;
  /* go to 3 */
}
<script src="https://cdn.jsdelivr.net/npm/animejs@3.1.0/lib/anime.min.js"></script>
<div id="plugins-not-installed-screen" class="">
  <div class="upper">
    <div id="lock-wrapper">
      <svg version="1.1" id="lock" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 25 35" style="enable-background:new 0 0 25 35;" xml:space="preserve">
                                <style type="text/css">
                                    #big-lock{fill:none;stroke:#686868;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
                                    #inner-circle{fill:none;stroke:#686868;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
                                    #lock-line{fill:none;stroke:#686868;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
                                </style>
                                <path id="big-lock" d="M4.4,13.5c-1.2,0.8-2,2.1-2,3.6v4c0,2.8,1.1,5.4,3.1,7.4c1.9,1.9,4.5,2.9,7.2,2.9
                                    c0.1,0,0.2,0,0.3,0c5.5-0.1,10-4.9,10-10.5v-3.8c0.1-1.8-0.9-3.3-2.4-4l-6.5-2.7c-0.8-0.3-1.8-0.4-2.6,0L10.1,11"/>
                                <circle id="inner-circle" cx="12.7" cy="21.9" r="2.9"/>
                                <path id="lock-line" d="M7.1,15.1V9.9c0-3.1,2.5-5.6,5.6-5.6h0c3.1,0,5.6,2.5,5.6,5.6v8"/>
                            </svg>
    </div>
    <h5 class="plugins-not-installed-text">Plugins not installed.</h5>
  </div>
</div>

Я попытался обойти CSS, посмотреть, есть ли что-то, чего мне не хватает, или CSS делает саму анимацию сбрасываемой из-за настроек по умолчаниюзначения, но ... ничего.

Что может быть не так?

1 Ответ

0 голосов
/ 28 сентября 2019

Это происходит потому, что анимация по умолчанию ease настроена на странную кривую.Когда вы комбинируете это с непрозрачностью, происходит своего рода «переходные значения», так что из-за ослабления он на секунду возвращается к более низкой непрозрачности.

Просто установите easing на linear.

...