原文:http://blog.csdn.net/eminia/article/details/6628628
要点:点对点动画
透明度动画
变形基础
准备动画
准备UI用来动画,本课以label和view为例。创建2个Label:
openingLabel = Titanium.UI.createLabel({
text:'Happy Festivus',
top: Math.round(Titanium.Platform.displayCaps.platformHeight * 0.30),
height: 'auto',
width:'auto',
shadowColor:'#aaa',
shadowOffset:{x:3,y:3},
color:'#900',
font:{fontSize:openingLabelFontsize},
textAlign:'center'
});
closingLabel = Titanium.UI.createLabel({
text:'The End',
height:'auto',
width:'auto',
color:'#fff',
font:{fontSize:closingLabelFontsize},
textAlign:'center',
opacity: 0
});
openingLabel 做3D矩阵形变, closingLabel做透明度变化。先做形变,创建 3D matrix:
var olt = Titanium.UI.create3DMatrix();
olt = olt.rotate(200,0,1,1);
olt = olt.scale(2);
olt = olt.translate(20,50,170);
olt.m34 = 1.0/-3000;
参考
Titanium.UI.2DMatrix &
Titanium.UI.3DMatrix API ,关于矩阵变形的知识,见
The Matrix Revolutions.
开始动画
调用openingLabel 的animate 方法
参数1:对象,包含2个属性:transform 形变和 duration,transform 就是刚刚创建的矩阵,duration以毫秒为单位。
参数2:回调函数
openingLabel.animate(
{transform: olt, duration: 1500},
function() {
//Tasks to perform after the animation has completed
}
);
执行动画,
openingLabel 会变大,旋转,最终移出屏幕。
Animation对象
低级层次的动画。用Titanium.UI.createAnimation.创建。设置closingLabel 透明度为0,下面演示放大和改变透明度。
closingLabel.animate(Titanium.UI.createAnimation({
opacity: 100,
duration: 2500,
transform: Titanium.UI.create2DMatrix({
scale: 1.5
})
}));
2.5秒后会放大1.5倍,透明度100。
视图动画
以雪花为例,雪花大小不同,样式不同。落下时受到风和相互间碰撞的影响。先创建各种形状,大小,角度。随机初始位置。要用到Animation 对象,2D 矩阵,透明度,和时长。
//Used to randomize a logo's initial left position
function getRandomLeftPostion() {
var leftVal = 0;
while (leftVal < 10) {
leftVal = Math.floor(Math.random()*Titanium.Platform.displayCaps.platformWidth);
}
return leftVal;
}
//Used to build a transform with some randomized attributes
function getRandomTransform() {
var rotateVal = Math.floor(Math.random()*100),
scalingVal = 0;
while (scalingVal < 0.1) {
scalingVal = Math.random().toFixed(1);
}
return Titanium.UI.create2DMatrix({
rotate: rotateVal,
scale: scalingVal
});
}
//Used to create a uniquish looking logo that we'll use in animations
function getImageViewToAnimate() {
//We'll alternate between two background images
bImage = (viewBackgroundImage === 'appcelerator' ? 'snowflake' : 'appcelerator');
viewBackgroundImage = bImage;
return Titanium.UI.createView({
backgroundImage:'images/' + bImage + '.png',
top: Math.floor(Math.random()*200), //start anywhere from top 0 to 200
left: getRandomLeftPostion(),
height:95,
width:83,
opacity: 0.75,
visible: false,
transform: getRandomTransform()
});
}
写完工具函数后,下面写雪花(其实就是带背景的view):
//Build up an array of viewsToAnimate (views) and add them to the current window
for(var i=0; i<30; i++) {
var viewToAnimate = getImageViewToAnimate();
viewsToAnimate[viewsToAnimate.length] = viewToAnimate;
tiWindow.add(viewToAnimate);
}
遍历雪花数组,给每一视图加动画:
viewsToAnimate[a].animate(Titanium.UI.createAnimation({
top: (Titanium.Platform.displayCaps.platformHeight - 65),
left: getRandomLeftPostion(),
opacity: 1,
curve: Ti.UI.ANIMATION_CURVE_LINEAR,
duration: 3000+(Math.random()*(6000-3000)),
repeat: 3
}));
每调用一次动画就创建一个自定义animation 对象。设置top和left值得到随机效果。注意这2个值是在animation 对象中指定的。
Top 是距离屏幕底部的随机值。这样堆叠才像雪花。本来我们是要硬编码来写宽高的,但是有
Titanium.Platform.displayCaps自动得到屏幕宽高。从左移到右移动平滑,使用
Ti.UI.ANIMATION_CURVE_LINEAR常量。
这样就做好了30个雪花,最后设置repeat属性为3,这样实际上就有90个雪花了。
注意源代码是iPhone & iPad版本。