使用 TweenMax 在 PixiJS 中进行缩放答案

【问题标题】：Scale in PixiJS with TweenMax使用 TweenMax 在 PixiJS 中进行缩放
【发布时间】：2015-05-07 04:48:19
【问题描述】：

我正在尝试了解如何将 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();
}

为大家加油！

【问题讨论】：

标签： javascript gsap pixi.js

【解决方案1】：

PIXI Sprite 的 scale 属性是一个具有 x 和 y 属性的 Point，所以不是：

ball.scaleX = ball.scaleY = 1;

你需要做的：

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

当您对比例进行补间时，您需要传递 TweenLite 比例对象，而不是精灵本身，如下所示：

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

【讨论】：