transformX是UIComponent的属性。
projectionCenter是PerspectiveProjection的属性,间接的可以应用到全部显示对象上。
官方的介绍
transformX
设置组件转换中心的 x 坐标。
projectionCenter
表示投影中心的二维点,它是显示对象的消失点。
projectionCenter 属性是相对于默认注册点(即舞台左上角的点 (0,0))的偏移量。默认的投影转换中心位于舞台中间,这意味着当三维显示对象沿 z 轴后移时,这些对象会朝着舞台中心消失。
如何设置
- transformX要采用其所在显示对象的坐标系。
- projectionCenter要采用其父容器的坐标系。
实测
下面是transformX和transformY的设置实例,注释的代码可以实现不同的效果。另外需要说明的是:transformX和transformY可以在显示对象之外。
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="1600"
height="900"
backgroundColor="0x00FF00"
applicationComplete="windowedapplication1_applicationCompleteHandler(event)"
>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import org.libspark.betweenas3.BetweenAS3;
import org.libspark.betweenas3.tweens.ITween;
import org.libspark.betweenas3.tweens.ITweenGroup;
[Bindable]
[Embed(source="/ripplestest/Chrysanthemum.jpg")]
private var jhClass:Class;
[Bindable]
[Embed(source="/ripplestest/Desert.jpg")]
private var smClass:Class;
protected function windowedapplication1_applicationCompleteHandler(event:FlexEvent):void
{
// sm.transformX=sm.width>>1;sm.transformY=sm.height>>1;// 这行设置缩放中心在sm的中心点
// sm.transformX=0;sm.transformY=sm.height>>1;// 这行设置以x=0,y=sm.height>>1转换
sm.transformX=sm.width;sm.transformY=sm.height;// 这行设置以x=sm.width,y=sm.height转换
sm.scaleX=0.5;
sm.scaleY=0.5;
var tween1:ITween,tween2:ITween,tween3:ITween;
var tG:ITweenGroup;
tween1 = BetweenAS3.tween(
sm,
{scaleX:0.5,scaleY:0.5},
{scaleX:1,scaleY:1},
2
);
tween2= BetweenAS3.tween(
sm,
{rotationX:180},
null,
2
);
tween3= BetweenAS3.tween(
sm,
{rotationY:180},
null,
2
);
tG=BetweenAS3.serial(tween1,tween2,tween3);
tG.play();
}
]]>
</fx:Script>
<s:Group id="myGroup">
<s:Image id="jh" source="{jhClass}"/>
<s:Image id="sm" source="{smClass}" />
</s:Group>
</s:WindowedApplication>
下面是一个projectionCenter设置的实例,注释的行是不同的消失点效果。
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="1600"
height="900"
applicationComplete="windowedapplication1_applicationCompleteHandler(event)"
>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import org.libspark.betweenas3.BetweenAS3;
import org.libspark.betweenas3.tweens.ITween;
[Bindable]
[Embed(source="/ripplestest/Chrysanthemum.jpg")]
private var jhClass:Class;
[Bindable]
[Embed(source="/ripplestest/Desert.jpg")]
private var smClass:Class;
protected function windowedapplication1_applicationCompleteHandler(event:FlexEvent):void
{
var tween:ITween;
var perspective:PerspectiveProjection =
sm.transform.perspectiveProjection ? sm.transform.perspectiveProjection : new PerspectiveProjection();
// 以下设置projectionCenter,都是采用sm的父容器myGroup的坐标系
perspective.projectionCenter = new Point( 0, 0); // 1消失点在myGroup的坐标点
// perspective.projectionCenter = new Point( myGroup.width, myGroup.height);// 2消失点在myGroup的右下角
// perspective.projectionCenter = new Point( sm.x, sm.y);// 3消失点在sm的坐标点
// perspective.projectionCenter = new Point( sm.x+sm.width, sm.y+sm.height);// 4消失点在sm的右下角 和2一致
// perspective.projectionCenter = new Point( sm.x+(sm.width>>1), sm.y+(sm.height>>1));// 5消失点在sm的中心点
sm.transform.perspectiveProjection = perspective;
tween = BetweenAS3.tween(
sm,
{z:99999},
{z:-200},
10
);
tween.play();
}
]]>
</fx:Script>
<s:Group id="myGroup" >
<s:Rect width="1024" height="768" >
<s:fill>
<s:SolidColor color="#00FF00"/>
</s:fill>
</s:Rect>
<s:Image id="jh" source="{jhClass}" x="100" y="100" alpha="0.5" />
<s:Image id="sm" source="{smClass}" x="100" y="100" />
</s:Group>
</s:WindowedApplication>