javascript原生移动云编程6 - 如何做动画效果

用javascript在码实云平台上，可以在云里编写原生的移动应用。移动应用的交互界面，添加动画效果，如果恰到好处，能够极大地提升用户体验。可以说，添加动画，是让用户尖叫的一个必要的元素。下面实例中，做了三个会动的按钮。

Class.create(Mash5.Widget, {initialize : function (config, params) {var container = Ti.UI.createView({width : Ti.UI.FILL,height : Ti.UI.FILL,backgroundColor : '#ddd'});this.setContentView(container);var button1 = Ti.UI.createView({    bottom: dipToPx(-100),    width: '160dip',    height: '40dip',    backgroundColor : '#0d4',    borderRadius: dipToPx(20),});container.add(button1);button1.add(Ti.UI.createLabel({text: '我会动',color: '#fff',font: {fontSize : '20dip'},}));var button2 = Ti.UI.createView({    top: '100dip',    width: '160dip',    height: '40dip',    backgroundColor : '#d80',    borderRadius: dipToPx(20),});container.add(button2);button2.add(Ti.UI.createLabel({text: '我更会动',color: '#fff',font: {fontSize: '20dip'},}));var button3 = Ti.UI.createView({    width: '160dip',    height: '40dip',    backgroundColor : '#80d',    borderRadius: dipToPx(20),});container.add(button3);button3.add(Ti.UI.createLabel({text: '我会动3次',color: '#fff',font: {fontSize : '20dip'},}));        // 添加动画效果var a1 = Titanium.UI.createAnimation();a1.duration = 500;a1.bottom = dipToPx(100);button1.animate(a1);        var matrix = Ti.UI.create2DMatrix();        button2.transform = matrix.translate(0, dipToPx(-300)).rotate(150);        button2.opacity = 0.3;var a2 = Titanium.UI.createAnimation();a2.duration = 1500;a2.delay = 500;a2.transform = matrix;a2.opacity = 1;button2.animate(a2);        var m3 = Ti.UI.create2DMatrix();        button3.transform = m3.translate(dipToPx(-200), dipToPx(-500)).rotate(150).scale(5, 5);        button3.opacity = 0;var a3 = Titanium.UI.createAnimation();a3.duration = 2000;a3.delay = 2000;a3.autoreverse = true;a3.repeat = 3;a3.transform = m3;a3.opacity = 1;button3.animate(a3);}})

这个实例给大家示意动画的编程方法。第一个按钮button1的动画最简单，是个针对bottom垂直平移的效果。事先用Titanium.UI.createAnimation准备好动画变量。这个变量设定好动画最终的结果数值，动画结束时会到达a1.bottom = dipToPx(100)。第二个按钮的动画效果丰富些，用了二维变换的矩阵Ti.UI.create2DMatrix。有了这个矩阵，可以方便地设定平移、旋转、缩放。通过button2.transform = matrix.translate(0, dipToPx(-300)).rotate(150)，我们先把按钮2垂直向上移动300，然后转150度，动画从这个位置开始，恢复到按钮2的原始位置结束。第三个按钮的动画则综合了平移、旋转、放大三种变换，动画里用了回播和重复。