javascript - 使用 GSAP 对 SVG 元素进行动画处理

Question

我的任务是为浏览器游戏创建一个交互式 SVG 信息图，其中包含几张幻灯片，总共有 5 个步骤。当您单击上一个/下一个按钮或特定步骤时，整个 svg 应该自动动画到正确的步骤。

就代码而言，这就是我所拥有的:

function Slide() {

    // Cache all top-level svg elements for later use
    this.el = $('svg#betfair-slider');
    this.hands = this.el.find('#hands_8_');
    this.cardsDesk = this.el.find('g#center-cards');
    this.textContainer = $('.step-text');

    // Use a shared timeline across all slides, so there are no overlapping tweens
    this.tween = new TimelineLite();
}

function Slide2 () {

    // Inherit from the main slide
    Slide.call(this);

    // each slide has its own supporting explanatory text
    this.html = [
        '<h3>Preflop</h3>',
        '<p>Amet sit lorem ipsum dolar</p>'
    ].join('');

    // the main openslide method
    this.openSlide = function() {
        // find the cards that need to be animated for this specific slide
        var cards = this.hands.find('.card');
        // fade out each card
        this.tween.staggerTo(cards, 0.2, { opacity: 0 }, 0.2);
        // Render supporting text
        this.textContainer.html(this.html);
    };

}

以下是我想要获得的卡片:

我可以使用 this.hands.find('.card'); jquery 方法获取它们(我可以在控制台中看到它们)，但我无法为它们设置动画。我尝试过对不同的属性(不透明度、x、y、左等)进行动画处理，但没有任何反应 - 屏幕上没有任何移动。

我可以使用 jQuery 执行 this.hands.find('.card').hide() 并更改 css，但为什么 TimelineLite 在这里不起作用？我也尝试过这种方法:

var cards = this.hands.find('.card');
for (var i = cards.length - 1; i >= 0; i -= 1) {
    var card = cards[i];
    this.tween.to(card, 0.2, { opacity: 0 });
}

但仍然没有成功...有趣的是，当我在补间上附加 onComplete 回调时，它们被触发，但屏幕上绝对没有任何移动。您可以查看所有内容here .

感谢您提前提供的帮助，欢迎提出任何建议。

Answer 1

我认为您可能误解了时间表的工作原理(或者也许我误解了您的意图)。与所有补间一样，时间线默认立即开始播放。因此，如果您使用一个时间轴并根据用户交互将所有补间插入其中(意味着创建它和填充它之间的时间流逝......并填充它更多......)，它的播放头将已经有先进的。我敢打赌这会导致您的补间几乎立即跳转到最终状态。这不是一个错误 - 这是事情应该如何工作的，尽管 GSAP 中有一些逻辑可以在某些情况下调整行为以使其更加直观。

我看到几个选项:

1. 只需使用 TweenMax 而不是 TimelineLite。如 TweenMax.staggerTo(...) 和 TweenMax.to(...)。
2. 或者只是为每个用户交互创建一个 TimelineLite(而不是为全局所有补间创建一个)。这样您就可以立即填充它，并且它会按照您的预期播放。

如果您确实愿意，可以使用一个全局时间轴，但如果您要在每次用户交互中插入补间而不是一次全部插入，则可能只需要管理其播放头。

如果您仍然遇到问题，请随时在 GSAP 专用论坛 http://greensock.com/forums/ 上发帖。如果您包含一个 codepen 或 jsfiddle 简化的测试用例，那将会非常有帮助，这样我们就可以修补并非常快速地了解发生了什么以及更改如何影响结果。

补间快乐!