使用 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、左等）设置动画，但没有任何反应 - 屏幕上没有任何移动。

我可以 this.hands.find('.card').hide() 并使用 jQuery 更改 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 中有一些逻辑可以在某些情况下调整行为以使其更直观。

我看到几个选项：

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

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

如果您仍然遇到问题，请不要犹豫，在 http://greensock.com/forums/ 的 GSAP 专用论坛中 post，如果您包含代码笔或 jsfiddle 简化的测试用例，将会非常有帮助这样我们就可以修补并快速查看发生了什么以及更改如何影响结果。

补间快乐！

使用 GSAP 动画化 SVG 元素

Animating SVG elements with GSAP

javascript

animation

svg

dom

gsap