Android Animation 高手必读 之一 Tweened Animations 代码实现

于 2012-04-25 19:44:09 发布
阅读量924 收藏 3
点赞数
分类专栏： Android 文章标签： animation android layout button url encoding
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xiaomao5200/article/details/7505768
版权

Android提供了两种动画的机制，可以通过SurfaceView来一帧一帧的绘制，同样也可以通过Animation机制。

Animations分类

Animations分为两种机制：Tweened Animations和Frame-by-FrameAnimations。

Tweened类似于flash，通过旋转、移动、缩放等实现动画效果，而Frame-by-FrameAnimations是类似于电影，通过改变每一帧的显示来实现动画效果。

其实Animation就是先写好对象要发生的动作，比如说平移，变形等。然后你需要哪个View或者View的子类，来完成这些预定义好的动作，只要给他们添加，就可以了。这部分的内容还是蛮多的，但是相对简单，本节只介绍Tweened Animations。

Tweened Animations

如图1所示，Tweened Animations有如下四种方式实现动画，对于每一种方式，Android都提供了一个类来实现。[url=]AlphaAnimation[/url], [url=]AnimationSet[/url], [url=]RotateAnimation[/url], [url=]ScaleAnimation[/url], [url=]TranslateAnimation[/url] 。

111.jpg

2011-9-30 12:35:17 上传
下载附件 (6.66 KB)

图1 Tweened Animations四种方式实现动画

对于每一种，笔者都会给出例子来详细解释。出于由简到难的考虑，首先介绍Alpha。

Alpha

alpha这个词详细如果有过opengl 开发经验的朋友一定不会陌生，没错，他就是设置透明度的。让我们先看一组图标，这样你就会加深对alpha的认识。如图2所示，实现了透明度变化的图标和按钮的效果。


222.jpg

2011-9-30 12:35:13 上传
下载附件 (17.33 KB)

图2 颜色渐变demo

如果要实现view的透明度变化，就要去实现alpha 的Animation。具体方法分为如下4部分：

q      实例化AnimationSet对象

q      实例化Animation对象

q      设置Animation对象属性

q      为View添加AnimationSet

这里要强调的就是Animation的构造方法如下：

AlphaAnimation aa = new AlphaAnimation(1, 0);//2.创建需要的animation

相对来说，alpha的构造方法最为简单。其第一个参数是出示时的透明度，0为完全透明，1为不透明。第二个参数为动画结束时的透明度。

aa.setDuration(2000);//设置动画的时间

通过上面这句可以设置动画播放的时间。

具体代码我会在最后给出。

Scale

scale为缩放，在了解Scale之前我们先看看其运行效果。如图3所示。


333.jpg

2011-9-30 12:35:14 上传
下载附件 (30.44 KB)

图3 scale demo

以上是Scale最简单的构造方法：

ScaleAnimation aa = new ScaleAnimation(1, 2, 1, 2);//2.创建需要的animation,这种构造方法是以自身为pivot

q      第1个参数为初始时x的大小，其中1为自身长度，同一2为自身长度的2倍，下同

q      第2个参数为结束动画时x的大小

q      第3个参数为初始时y的大小

q      第4个参数为结束动画时y的大小

如果你以为你已经学会了Scale，那我只能说你是浅尝辄止。下面介绍其另一个构造方法，该方法更加灵活。

ScaleAnimation aa = new ScaleAnimation(0, 1, 0, 1, Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);

q      其四个参数同上，不解释

q      第五个参数是设置枢轴，可以是以自身，亦可以使用父view的，甚至可以谁用绝对数值。这里之后会解释。如果不明白可先忽略。

q      第六个参数是设置x枢轴的坐标。

q      接下来的两个参数同上，是设置y坐标的。

也许这里读者肯定不会明白枢轴的意思，那么我就用上面的方法来构造Animation并运行看看效果。请看图4.


444.jpg

2011-9-30 12:35:15 上传
下载附件 (47.83 KB)

图4 scale Demo2

如图所示，View控件在自身大小变化的同时，位置也在改变。后面的几个参数是设置其初始位置。如果以父view为参考，值为0.5f的话，那么就是当前父View的中间。

读者可能会问到，怎么不是屏幕的中心位置，我认为他是根据布局文件来决定位置的，当前的布局文件为LinearLayout，其设置为向下一次添加内容，如果设置y坐标为0.5f，则Android会认为你是要在当前布局接下来添加内容的位置的y轴中间。

Transfer

如果明白了枢轴的概念，那么Transfer平移就很简单了，如图5所示，为平移的例子。


555.jpg
2011-9-30 12:35:16 上传
下载附件 (32.76 KB)

图5 平移 demo

以上平移的实例化方法如下：

TranslateAnimation aa = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 1, Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 1);

读者结合api，相信理解这个方法应该还是比较容易的，这里就不在赘述，如果有问题，可以给留言。

Rotate

旋转，这个也是比较容易，看演示，如图6所示。


666.jpg

2011-9-30 12:35:16 上传
下载附件 (35.43 KB)

图6 旋转demo

其构造方法如下：

RotateAnimation aa = new RotateAnimation(0, 270, Animation.RELATIVE_TO_PARENT, 0.2f, Animation.RELATIVE_TO_PARENT, 0.2f);

综合

Animation不但可以单独使用，还可以设置多个Animation然后添加到AnimationSet中。在对View调用，在例子中我给出了一个综合的例子，读者自行查看，检测自己是否已经明白这块知识。

代码

本节参考AnimationDemo1例子。

限于本人水平有限，如有不足之处，请多多指正。

Java代码
  1. <?xml version="1.0" encoding="utf-8"?>

  3. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  4.                 android:layout_width="fill_parent"
  5.                 android:layout_height="wrap_content"
  6.         >
  7.         <LinearLayout
  8.             android:orientation="vertical"
  9.             android:layout_width="fill_parent"
  10.             android:layout_height="fill_parent"
  11.             >
  12.                 <Button
  13.                         android:text="alpha"
  14.                         android:id="@+id/Button01"
  15.                         android:layout_width="wrap_content"
  16.                         android:layout_height="wrap_content">
  17.                        
  18.                 </Button>
  19.                 <ImageView
  20.                         android:id="@+id/iv1"
  21.                         android:layout_width="wrap_content"
  22.                         android:layout_height="wrap_content"
  23.                         android:src = "@drawable/icon"
  24.                 >
  25.                 </ImageView>
  26.                
  27.                 <Button
  28.                         android:text="scale"
  29.                         android:id="@+id/Button02"
  30.                         android:layout_width="wrap_content"
  31.                         android:layout_height="wrap_content">
  32.                        
  33.                 </Button>
  34.                 <ImageView
  35.                         android:id="@+id/iv2"
  36.                         android:layout_width="wrap_content"
  37.                         android:layout_height="wrap_content"
  38.                         android:src = "@drawable/icon"
  39.                 >
  40.                 </ImageView>
  41.                
  42.                 <Button
  43.                         android:text="rotate"
  44.                         android:id="@+id/Button03"
  45.                         android:layout_width="wrap_content"
  46.                         android:layout_height="wrap_content">
  47.                        
  48.                 </Button>
  49.                 <ImageView
  50.                         android:id="@+id/iv3"
  51.                         android:layout_width="wrap_content"
  52.                         android:layout_height="wrap_content"
  53.                         android:src = "@drawable/icon"
  54.                 >
  55.                 </ImageView>
  56.                
  57.                 <Button
  58.                         android:text="transf"
  59.                         android:id="@+id/Button04"
  60.                         android:layout_width="wrap_content"
  61.                         android:layout_height="wrap_content">
  62.                        
  63.                 </Button>
  64.                 <ImageView
  65.                         android:id="@+id/iv4"
  66.                         android:layout_width="wrap_content"
  67.                         android:layout_height="wrap_content"
  68.                         android:src = "@drawable/icon"
  69.                 >
  70.                 </ImageView>
  71.                
  72.                 <Button
  73.                         android:text="complex"
  74.                         android:id="@+id/Button05"
  75.                         android:layout_width="wrap_content"
  76.                         android:layout_height="wrap_content">
  77.                        
  78.                 </Button>
  79.                 <ImageView
  80.                         android:id="@+id/iv5"
  81.                         android:layout_width="wrap_content"
  82.                         android:layout_height="wrap_content"
  83.                         android:src = "@drawable/icon"
  84.                 >
  85.                 </ImageView>
  86.         </LinearLayout>                                                                       
  87. </ScrollView>
复制代码


Java代码
  1. package cn.edu.heut.zcl;

  3. import android.app.Activity;
  4. import android.os.Bundle;
  5. import android.view.View;
  6. import android.view.View.OnClickListener;
  7. import android.view.animation.AlphaAnimation;
  8. import android.view.animation.Animation;
  9. import android.view.animation.AnimationSet;
  10. import android.view.animation.RotateAnimation;
  11. import android.view.animation.ScaleAnimation;
  12. import android.view.animation.TranslateAnimation;
  13. import android.widget.Button;
  14. import android.widget.ImageButton;
  15. import android.widget.ImageView;

  17. public class DemoActivity extends Activity implements OnClickListener{
  18.     /** Called when the activity is first created. */
  19.         Button alphaBut ;
  20.         Button scaleBut ;
  21.         Button rotateBut ;
  22.         Button transfBut ;
  23.         Button complexBut ;
  24.        
  25.         ImageView iv1;
  26.         ImageView iv2;
  27.         ImageView iv3;
  28.         ImageView iv4;
  29.         ImageView iv5;
  30.        
  31.         AnimationSet as ;
  32.     @Override
  33.     public void onCreate(Bundle savedInstanceState) {
  34.         super.onCreate(savedInstanceState);
  35.         setContentView(R.layout.main);
  36.         alphaBut = (Button)findViewById(R.id.Button01);
  37.         scaleBut = (Button)findViewById(R.id.Button02);
  38.         rotateBut = (Button)findViewById(R.id.Button03);
  39.         transfBut = (Button)findViewById(R.id.Button04);
  40.         complexBut = (Button)findViewById(R.id.Button05);
  41.         
  42.         alphaBut.setOnClickListener(this);
  43.         scaleBut.setOnClickListener(this);
  44.         rotateBut.setOnClickListener(this);
  45.         transfBut.setOnClickListener(this);
  46.         complexBut.setOnClickListener(this);
  47.         
  48.         iv1 = (ImageView)findViewById(R.id.iv1);
  49.         iv2 = (ImageView)findViewById(R.id.iv2);
  50.         iv3 = (ImageView)findViewById(R.id.iv3);
  51.         iv4 = (ImageView)findViewById(R.id.iv4);
  52.         iv5 = (ImageView)findViewById(R.id.iv5);
  53.       
  54.     }
  55.         @Override
  56.         public void onClick(View v) {
  57.                 Button b = (Button)v;
  58.                 switch(b.getId()){
  59.                 case R.id.Button01://alpha
  60.                         alphaAnimation();
  61.                         break;
  62.                 case R.id.Button02://scale
  63.                         scaleAnimation();
  64.                         break;
  65.                 case R.id.Button03://rotate
  66.                         rotateAnimation();
  67.                         break;
  68.                 case R.id.Button04 ://transf
  69.                         transfAnimation();
  70.                         break;
  71.                 case R.id.Button05 ://complex
  72.                         complexAnimation();
  73.                         break;
  74.                 }
  75.                
  76.         }
  77.         /**
  78.          * 综合例子
  79.          */
  80.         private void complexAnimation() {
  81.                 as = new AnimationSet(true);//1.实例化AnimationSet
  82.                
  83.                 TranslateAnimation ta = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 0);
  84.                 ta.setDuration(5000);//设置动画的时间
  85.                
  86.                 AlphaAnimation aa = new AlphaAnimation(1, 0.3f);//2.创建需要的animation
  87.                 aa.setDuration(3000);
  88.                
  89.                 as.addAnimation(ta);//3.将animation加入AnimationSet
  90.                 as.addAnimation(aa);//3.将animation加入AnimationSet
  91.                
  92.                
  93.                 as.setFillAfter(true);//最终停止
  94.                
  95.                 complexBut.startAnimation(as);//4.开始动画
  96.                 iv5.startAnimation(as);//开始动画
  97.         }
  98.         /**
  99.          * 平移
  100.          */
  101.         private void transfAnimation() {
  102.                 as = new AnimationSet(true);//1.实例化AnimationSet
  103.                 TranslateAnimation aa = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 1, Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 1);
  104.                 aa.setDuration(5000);//设置动画的时间
  105.                 as.addAnimation(aa);//3.将animation加入AnimationSet
  106.                 transfBut.startAnimation(as);//4.开始动画
  107.                 iv4.startAnimation(as);//开始动画
  108.         }
  109.         /**
  110.          * 旋转
  111.          */
  112.         private void rotateAnimation() {
  113.                 as = new AnimationSet(true);//1.实例化AnimationSet
  114.                 RotateAnimation aa = new RotateAnimation(0, 270, Animation.RELATIVE_TO_PARENT, 0.2f, Animation.RELATIVE_TO_PARENT, 0.2f);
  115.                 aa.setDuration(5000);//设置动画的时间
  116.                 as.addAnimation(aa);//3.将animation加入AnimationSet
  117.                 rotateBut.startAnimation(as);//4.开始动画
  118.                 iv3.startAnimation(as);//开始动画
  119.         }
  120.         /**
  121.          * 变化大小
  122.          */
  123.         private void scaleAnimation() {
  124.                 as = new AnimationSet(true);//1.实例化AnimationSet
  125. //                ScaleAnimation aa = new ScaleAnimation(1, 2, 1, 2);//2.创建需要的animation,这种构造方法是以自身为pivot
  126.                 ScaleAnimation aa = new ScaleAnimation(0, 1, 0, 1, Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);
  127.                 aa.setDuration(7000);//设置动画的时间
  128.                 as.addAnimation(aa);//3.将animation加入AnimationSet
  129.                 scaleBut.startAnimation(as);//4.开始动画
  130.                 iv2.startAnimation(as);//开始动画
  131.         }
  132.         /**
  133.          * 透明度渐变
  134.          */
  135.         private void alphaAnimation(){
  136.                 as = new AnimationSet(true);//1.实例化AnimationSet
  137.                 AlphaAnimation aa = new AlphaAnimation(1, 0);//2.创建需要的animation
  138.                 aa.setDuration(2000);//设置动画的时间
  139.                 as.addAnimation(aa);//3.将animation加入AnimationSet
  140.                 alphaBut.startAnimation(as);//4.开始动画
  141.                 iv1.startAnimation(as);//开始动画
  142.         }
  143.    
  144. }
复制代码

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值