Question

我试图以负延迟错开我的AnimationSequence，但当我在AnimationSequence上使用它时，endDelay属性什么都不做：

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。

通过修改Web动画 - 下一个源（web-animations-js / src / animation-constructor.js-第17-19行），我确实设法让它与负endDelay交错：

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

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

Answer 1

由于AnimationSequence将逐个动画物品，我认为它不适合这种交错动画。

如何使用AnimationGroup一起启动动画，但是按照正确的顺序给每个动画短暂的增量延迟？

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

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>

Polymer - Web Animations错开AnimationSequence

1 个答案: