javascript - 使用 TweenMax 在 PixiJS 中缩放

Question

我正在尝试了解如何将 PixiJS 与 GSAP 库 TweeMax 结合使用。为此，我曾经使用这两个库查看一些代码到项目中，比如这个: http://www.shanemielke.com/archives/usopen-sessions/

但是，我很难理解为什么我无法扩展。当我尝试缩放时，我的球会移动到窗口 [0, 0] 的左上角。当我指定 scaleX 和 scaleY 时，什么也没有。在这两种情况下，我的动画继续没有任何错误......

这是我的代码

var renderer,
    stage;

var init = function() {

    // We create the canvas element
    stage = new PIXI.Stage(0x202020);
    renderer = new PIXI.CanvasRenderer(800, 600, null, false, true);
    document.getElementById("loader").appendChild(renderer.view);

    $(window).resize(onResize);
    onResize();

    requestAnimFrame(animate);

    drawElements();

};

var onResize = function() {
    renderer.resize(window.innerWidth, window.innerHeight);
}

var drawElements = function() {

    var ball = new PIXI.Sprite.fromImage("./img/ball.png");

    ball.position.x = (window.innerWidth / 2) - 5;
    ball.position.y = -10;

    ball.scaleX = ball.scaleY = 1;
    stage.addChild(ball);

    var t1 = new TimelineMax({onUpdate:animate, onUpdateScope:stage});
    t1.to(ball, 1.5, {y: (window.innerHeight / 2), ease:  Bounce.easeOut})
    .to(ball, 2, {scaleX: 10})
    .to(ball, 2, {alpha: 0});

}

var animate = function() {
    requestAnimFrame(animate);
    renderer.render(stage);
}

window.onload = function() {
    init();
}

干杯伙计们的帮助!

Answer 1

PIXI Sprite 的比例属性是一个具有 x 和 y 属性的点，所以不是:

ball.scaleX = ball.scaleY = 1;

你需要做的:

ball.scale.x = ball.scale.y = 1;

补间缩放时，您需要将缩放对象传递给 TweenLite，而不是 Sprite 本身，如下所示:

tween.to(ball.scale, 2, {x: 10});