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});