Polymer

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是一个包含两个Animations的AnimationGroup。

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

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

AnimationSequence 是否有 public 属性以便动画可以重叠以使动画看起来更流畅？

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 动画错开 AnimationSequence

Polymer - Web Animations stagger AnimationSequence

web-animations