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的scale属性是具有x和y属性的Point，因此不是：

                                    <DataGridTemplateColumn.CellTemplate>
                                        <DataTemplate>
                                            <ComboBox x:Name="vendorCombo"  ItemsSource="{Binding DataContext.VendorMasterSource, RelativeSource={RelativeSource AncestorType=Page}}"                                                     
                                                SelectedValue="{Binding VendorNo,UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" 
                                                SelectedValuePath="VENDOR_MASTER_ID"  
                                                        behaviour:ComboBoxSeletionChangedBehaviour.ComboBoxSeletionChangedCommand=
                                                  "{Binding DataContext.SelectionChangedCommand, RelativeSource={RelativeSource AncestorType=Page}}" TextSearch.TextPath="NAME"   IsTextSearchEnabled="True" IsEditable="True" >
                                                <ComboBox.ItemTemplate>
                                                    <DataTemplate>
                                                        <StackPanel Orientation="Horizontal">
                                                            <TextBlock Text="{Binding Path=NUMBER}"/>
                                                            <TextBlock Text=" - "/>
                                                            <TextBlock Text="{Binding Path=NAME}"/>
                                                        </StackPanel>
                                                    </DataTemplate>
                                                </ComboBox.ItemTemplate>
                                            </ComboBox>
                                        </DataTemplate>
                                    </DataGridTemplateColumn.CellTemplate>
                                </DataGridTemplateColumn>

你需要这样做：

ball.scaleX = ball.scaleY = 1;

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

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

使用TweenMax在PixiJS中缩放

1 个答案: