Question

我一直试图通过点击来启动动画，我通过TimelineMax创建了动画。我无法理解为什么但它会一直触发这个动画的第一个实例，有5个.blackout-panel它会自动为第一个.blackout-panel播放动画，但我不知道为什么 - 我想要点击即可控制完整动画。

var showBarsTL = new TimelineMax({ paused: true, onComplete: killAnimation });

$('.portfolio-panel').on("click", function () {
    showBarsTL.play()
});

showBarsTL.add (TweenMax.staggerTo(".blackout-panel", 0, {y:100+ '%', onStart: "", onStartParams:["{self}"], ease: Power1.easeInOut}, 0.1275, 0));
showBarsTL.add (TweenMax.from(".blackout-panel", 0, {css:{top:"auto", bottom:"0"}}));
showBarsTL.add (TweenMax.staggerTo(".blackout-panel", 0, {css:{height:"0", bottom:"0", top:"auto"}, delay: 0.1275, ease: Power1.easeInOut}, 0.1275));

function killAnimation() {
    showBarsTL.clear();
}

我创建了一个codePen来演示：http://codepen.io/Tekkie/pen/XpBOYV/?editors=1010

任何指导都将不胜感激。我的killAnimation功能似乎也没有被解雇。

编辑：1 - 我通过延迟解决了暂停问题。我的新JS如下：

var $blackoutPanels = $('.blackout-panel');
var showBarsTL = new TimelineMax({ paused: true });

showBarsTL
.add (TweenMax.staggerTo($blackoutPanels, **0.1275**, {y:100+ '%', onStart: "", onStartParams:["{self}"], ease: Power1.easeInOut}, 0.1275, 0))
.add (TweenMax.from($blackoutPanels, 0, {css:{top:"auto", bottom:"0"}}))
.add (TweenMax.staggerTo($blackoutPanels, 0, {css:{height:"0", bottom:"0", top:"auto"}, delay: 0.1275, ease: Power1.easeInOut}, 0.1275));

$('.portfolio-panel').on("click", function () {
    showBarsTL.play();
});

编辑：2 - 我使用以下JS解决了所有问题：

    var $blackoutPanels = $('.blackout-panel');
    var showBarsTL = new TimelineMax({
        paused: true
    });

    showBarsTL
        .add(TweenMax.staggerFrom($blackoutPanels, 0, {
            yPercent: -100,
            top: -100 + "%",
            onStartParams: ["{self}"],
            ease: Power0.easeInOut
        }, 0, 0))
        .add(TweenMax.staggerTo($blackoutPanels, 0.3, {
            yPercent: 0,
            top: 0,
            onStartParams: ["{self}"],
            ease: Power1.easeInOut
        }, 0.125, 0))
        .add(TweenMax.to($blackoutPanels, 3, {
            yPercent: +100,
            top: +100 + "%",
            onStartParams: ["{self}"],
            delay: 0.3,
            ease: SlowMo.ease.config(0.4, 1, false)
        }, 0.3, 0))
        .add(TweenMax.to($blackoutPanels, 0, {
            yPercent: -100,
            top: -100 + "%",
            delay: 0.375
        }));

    $('.portfolio-panel').on("click", function() {
        showBarsTL.restart(false, false);
    });

Answer 1

尝试像这样设置暂停：

var showBarsTL = new TimelineMax({onComplete: killAnimation }).paused(true);

并在您的函数中：

$('.portfolio-panel').on("click", function () {
showBarsTL.paused(false);
});

GreenSock TimelineMax提前开始

1 个答案: