ступенчатая скорость с собственной функцией - PullRequest
Новая
       9

ступенчатая скорость с собственной функцией

0 голосов
/ 22 февраля 2019

Я переключился с anime.js на speed.js и попытался определить простую анимацию с отложенной непрозрачностью.Для этого я использую шатаясь.Но если я добавлю функцию задержки задержки, у меня не будет отложенной анимации.каждый элемент появляется, но не оживляется и задерживается.В первом я попробовал то, что использовал для анимации с anime.js, а второй прямо из github, выпуска .

. Вот также мой jsbin: https://jsbin.com/firetuh/edit?html,css,js,output

var greenElem = $('.pointGreen');
var yellowElem = $('.pointYellow');
var redElem = $('.pointRed');


setInterval(function() {
  greenElem
    .velocity({
      fill: '#5cb83f',
      opacity: 1
    }, { stagger: 
        function(elem, index) {
            return index * 500
        }
    });

  yellowElem
    .velocity({
      fill: '#feb65c',
      opacity: 1
    }, { stagger: 
        function(elementIndex, element) {
            return 1000 * (0.85 - Math.exp(-elementIndex/10));
       }
    });

  redElem
    .velocity({
      fill: '#d43f3a',
      opacity: 1
    }, { stagger: 500 });
});

1 Ответ

0 голосов
/ 22 февраля 2019

Похоже, это может быть либо преднамеренный недосмотр, либо ошибка со скоростью.Из кода похоже, что stagger работает только в том случае, если первое переданное значение является заранее заданным эффектом, таким как fadeIn или transition.slideLeftIn - не похоже, что оно поддерживается для других типов анимации.Теоретически, вы можете достичь этого самостоятельно с помощью чего-то вроде 

yellowElem
    .each(function(index, element) { 
        $(element).velocity({
            fill: '#feb65c',
            opacity: 1
        },{ 
           delay: index * 500 
        });
    });

Кроме того, вы захотите изменить setInterval на setTimeout

...