1

我试图AnimationSequence用一个负延迟来错开我，但是endDelay当我在 AnimationSequence 上使用它时，该属性什么也不做：

var el = this.shadowRoot.querySelectorAll('.nav-item');

var animations = [];
for (var i = 0; i < el.length; i++) {
    animations.push(el[i].animationGroupIn);
}

this.animationSequence = new AnimationSequence(animations, {endDelay: -100});
document.timeline.play(this.animationGroup);

el[i].animationGroupIn是一个包含两个动画的 AnimationGroup。

endDelay通过修改 Web Animations-next 源（web-animations-js/src/animation-constructor.js - 第 17-19 行），我确实设法让它错开负数：

function groupChildDuration(node) {
    return node._timing.delay + node.activeDuration + node._timing.endDelay - 100;
};

AnimationSequence 是否有公共属性，因此可以重叠动画以使动画看起来更流畅？

4

1 回答 1

0

由于AnimationSequence会一个接一个地动画项目，我认为它不适合这种交错动画。

如何只使用 aAnimationGroup一起启动动画，但以正确的顺序对每个动画进行短暂的增量延迟？

我创建了一个如下的小演示，但不确定它是否正是您正在寻找的效果。

function animationGroupIn(item, i) {
    var animation1 = new Animation(item, [{ opacity: '0' }, { opacity: '1' }], { duration: 800, fill: 'both', delay: 200 * i });
    var animation2 = new Animation(item, [{ transform: 'translateX(24px)' }, { transform: 'translateX(0)' }], { duration: 800, fill: 'both', easing: 'ease-out', delay: 200 * i });

    return new AnimationGroup([animation1, animation2]);
};

var el = document.querySelectorAll('.nav-item');

var animations = [];
for (var i = 0; i < el.length; i++) {
    animations.push(animationGroupIn(el[i], i));
}

var animationGroup = new AnimationGroup(animations);
document.timeline.play(this.animationGroup);
<link rel="import" href="http://www.polymer-project.org/components/core-animation/core-animation.html"> 

    <div class="nav-item">One</div>
    <div class="nav-item">Two</div>
    <div class="nav-item">Three</div>
    <div class="nav-item">Four</div>
    <div class="nav-item">Five</div>

于 2015-02-18T03:22:12.113 回答