android 动画之插值器

http://blog.youkuaiyun.com/sun_star1chen/article/details/12843741

首先要了解为什么需要插值器，因为在补间动画中，我们一般只定义关键帧（首帧或尾帧），然后由系统自动生成中间帧，生成中间帧的这个过程可以成为“插值”。插值器的作用是告诉动画某个属性（比如颜色的渐变）如何随时间变化 。下面是几种常见的插值器：

android 系统支持AccelerateDecelerateInterpolator 、 AccelerateInterpolator 、 AnticipateInterpolator 、AnticipateOverShootInterpolator 、 BounceInterpolator 、 CycleInterpolator 、DecelerateInerpolator 、 LinearInterpolator 、 OverShootInterpolator 共 9 种插值器（若这些插值器不能满足需求，则可以自定义插值器）。

下面写个示例看看如何在代码中定义插值器。

1、 创建好工程后，在res/layout目录下创建文件 interpolator_layout.xml ， 文件内容如下

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.   
7.     <LinearLayout  
8.         android:layout_width="match_parent"  
9.         android:layout_height="wrap_content"  
10.         android:orientation="horizontal" >  
11.   
12.         <Button  
13.             android:id="@+id/acc_dec_btn"  
14.             style="?android:attr/buttonStyleSmall"  
15.             android:layout_width="wrap_content"  
16.             android:layout_height="wrap_content"  
17.             android:text="@string/acc_dec_str" />  
18.   
19.         <Button  
20.             android:id="@+id/acc_btn"  
21.             style="?android:attr/buttonStyleSmall"  
22.             android:layout_width="wrap_content"  
23.             android:layout_height="wrap_content"  
24.             android:text="@string/acc_str" />  
25.   
26.         <Button  
27.             android:id="@+id/anti_btn"  
28.             style="?android:attr/buttonStyleSmall"  
29.             android:layout_width="wrap_content"  
30.             android:layout_height="wrap_content"  
31.             android:text="@string/anti_str" />  
32.     </LinearLayout>  
33.   
34.     <LinearLayout  
35.         android:layout_width="match_parent"  
36.         android:layout_height="wrap_content"  
37.         android:orientation="horizontal" >  
38.   
39.         <Button  
40.             android:id="@+id/anti_over_shoot_btn"  
41.             style="?android:attr/buttonStyleSmall"  
42.             android:layout_width="wrap_content"  
43.             android:layout_height="wrap_content"  
44.             android:text="@string/anti_over_shoot_str" />  
45.   
46.         <Button  
47.             android:id="@+id/bounce_btn"  
48.             style="?android:attr/buttonStyleSmall"  
49.             android:layout_width="wrap_content"  
50.             android:layout_height="wrap_content"  
51.             android:text="@string/bounce_str" />  
52.   
53.         <Button  
54.             android:id="@+id/cycle_btn"  
55.             style="?android:attr/buttonStyleSmall"  
56.             android:layout_width="wrap_content"  
57.             android:layout_height="wrap_content"  
58.             android:text="@string/cycle_str" />  
59.     </LinearLayout>  
60.   
61.     <LinearLayout  
62.         android:layout_width="match_parent"  
63.         android:layout_height="wrap_content"  
64.         android:orientation="horizontal" >  
65.   
66.         <Button  
67.             android:id="@+id/dec_btn"  
68.             style="?android:attr/buttonStyleSmall"  
69.             android:layout_width="wrap_content"  
70.             android:layout_height="wrap_content"  
71.             android:text="@string/dec_str" />  
72.   
73.         <Button  
74.             android:id="@+id/linear_btn"  
75.             style="?android:attr/buttonStyleSmall"  
76.             android:layout_width="wrap_content"  
77.             android:layout_height="wrap_content"  
78.             android:text="@string/linear_str" />  
79.   
80.         <Button  
81.             android:id="@+id/over_shoot_btn"  
82.             style="?android:attr/buttonStyleSmall"  
83.             android:layout_width="wrap_content"  
84.             android:layout_height="wrap_content"  
85.             android:text="@string/over_shoot_str" />  
86.     </LinearLayout>  
87.   
88.     <ImageView  
89.         android:id="@+id/anim_show_img"  
90.         android:layout_width="50dp"  
91.         android:layout_height="wrap_content"  
92.         android:src="@drawable/ting_frame_3"  
93.         android:adjustViewBounds="true" />  
94.   
95. </LinearLayout>  

2、准备好我们的插值器，在包下面创建文件  nterpolatorUtils.java (定义了各种插值器的类) ， 内容如下

[java]  view plain  copy

1. import android.view.animation.AccelerateDecelerateInterpolator;  
2. import android.view.animation.AccelerateInterpolator;  
3. import android.view.animation.AnticipateInterpolator;  
4. import android.view.animation.AnticipateOvershootInterpolator;  
5. import android.view.animation.BounceInterpolator;  
6. import android.view.animation.CycleInterpolator;  
7. import android.view.animation.DecelerateInterpolator;  
8. import android.view.animation.Interpolator;  
9. import android.view.animation.LinearInterpolator;  
10. import android.view.animation.OvershootInterpolator;  
11.   
12. public class InterpolatorUtils {  
13.   
14.     public final static Interpolator ACC_DEC_INERPOLATOR = new AccelerateDecelerateInterpolator();  
15.     public final static Interpolator ACC_INTERPOLATOR = new AccelerateInterpolator(  
16.             10.0f);  
17.     public final static Interpolator ANTI_INTERPOLATOR = new AnticipateInterpolator(  
18.             10.0f);  
19.     public final static Interpolator ANTI_OVER_SHOOT_INTERPOLATOR = new AnticipateOvershootInterpolator(  
20.             10.0f);  
21.     public final static Interpolator BOUNCE_INTEPOLATOR = new BounceInterpolator();  
22.     public final static Interpolator CYCLE_INTERPOLATOR = new CycleInterpolator(  
23.             5);  
24.     public final static Interpolator DEC_INTERPOLATOR = new DecelerateInterpolator(  
25.             10.0f);  
26.     public final static Interpolator LINEAR_INTERPOLATOR = new LinearInterpolator();  
27.     public final static Interpolator OVER_SHOOT_INTERPOLATOR = new OvershootInterpolator(  
28.             10.0f);  
29. }  

3、创建显示动画的activity  —— InterpolatorActivity.java ， 内容如下：

[java]  view plain  copy

1. import com.zt.xy.animation.utils.InterpolatorUtils;  
2.   
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.Animation;  
8. import android.view.animation.AnimationUtils;  
9. import android.widget.Button;  
10. import android.widget.ImageView;  
11.   
12. public class InterpolatorActivity extends Activity implements OnClickListener {  
13.     private Button mAccDec;  
14.     private Button mAcc;  
15.     private Button mAnti;  
16.     private Button mAtiOverShoot;  
17.     private Button mBounce;  
18.     private Button mCycle;  
19.     private Button mDec;  
20.     private Button mLinear;  
21.     private Button mOverShoot;  
22.   
23.     Animation mTransAnim;  
24.     private ImageView mInterpolatorImg;  
25.   
26.     @Override  
27.     public void onCreate(Bundle savedInstanceState) {  
28.         super.onCreate(savedInstanceState);  
29.         setContentView(R.layout.interpolator_layout);  
30.         init();  
31.         mTransAnim = AnimationUtils.loadAnimation(this, R.anim.translate_anim);  
32.     }  
33.   
34.     private void init() {  
35.         mAccDec = (Button) findViewById(R.id.acc_dec_btn);  
36.         mAccDec.setOnClickListener(this);  
37.   
38.         mAcc = (Button) findViewById(R.id.acc_btn);  
39.         mAcc.setOnClickListener(this);  
40.   
41.         mAnti = (Button) findViewById(R.id.anti_btn);  
42.         mAnti.setOnClickListener(this);  
43.   
44.         mAtiOverShoot = (Button) findViewById(R.id.anti_over_shoot_btn);  
45.         mAtiOverShoot.setOnClickListener(this);  
46.   
47.         mBounce = (Button) findViewById(R.id.bounce_btn);  
48.         mBounce.setOnClickListener(this);  
49.   
50.         mCycle = (Button) findViewById(R.id.cycle_btn);  
51.         mCycle.setOnClickListener(this);  
52.   
53.         mDec = (Button) findViewById(R.id.dec_btn);  
54.         mDec.setOnClickListener(this);  
55.   
56.         mLinear = (Button) findViewById(R.id.linear_btn);  
57.         mLinear.setOnClickListener(this);  
58.   
59.         mOverShoot = (Button) findViewById(R.id.over_shoot_btn);  
60.         mOverShoot.setOnClickListener(this);  
61.   
62.         mInterpolatorImg = (ImageView) findViewById(R.id.anim_show_img);  
63.     }  
64.   
65.     @Override  
66.     protected void onPause() {  
67.         super.onPause();  
68.     }  
69.   
70.     @Override  
71.     protected void onResume() {  
72.         super.onResume();  
73.     }  
74.   
75.     public void onClick(View v) {  
76.         switch (v.getId()) {  
77.         case R.id.acc_dec_btn:  
78.             mTransAnim.setInterpolator(InterpolatorUtils.ACC_DEC_INERPOLATOR);  
79.             break;  
80.         case R.id.acc_btn:  
81.             mTransAnim.setInterpolator(InterpolatorUtils.ACC_INTERPOLATOR);  
82.             break;  
83.         case R.id.anti_btn:  
84.             mTransAnim.setInterpolator(InterpolatorUtils.ANTI_INTERPOLATOR);  
85.             break;  
86.         case R.id.anti_over_shoot_btn:  
87.             mTransAnim  
88.                     .setInterpolator(InterpolatorUtils.ANTI_OVER_SHOOT_INTERPOLATOR);  
89.             break;  
90.         case R.id.bounce_btn:  
91.             mTransAnim.setInterpolator(InterpolatorUtils.BOUNCE_INTEPOLATOR);  
92.             break;  
93.         case R.id.cycle_btn:  
94.             mTransAnim.setInterpolator(InterpolatorUtils.CYCLE_INTERPOLATOR);  
95.             break;  
96.         case R.id.dec_btn:  
97.             mTransAnim.setInterpolator(InterpolatorUtils.DEC_INTERPOLATOR);  
98.             break;  
99.         case R.id.linear_btn:  
100.             mTransAnim.setInterpolator(InterpolatorUtils.LINEAR_INTERPOLATOR);  
101.             break;  
102.         case R.id.over_shoot_btn:  
103.             mTransAnim  
104.                     .setInterpolator(InterpolatorUtils.OVER_SHOOT_INTERPOLATOR);  
105.             break;  
106.         }  
107.         cancleAnim();  
108.         startAnim();  
109.   
110.     }  
111.   
112.     private void cancleAnim() {  
113.         if (mTransAnim != null) {  
114.             mTransAnim.cancel();  
115.         }  
116.     }  
117.   
118.     private void startAnim() {  
119.         if (mTransAnim != null) {  
120.             mInterpolatorImg.startAnimation(mTransAnim);  
121.         }  
122.     }  
123. }  

当然在能运行程序前先准备好一张名为anim_show_img的图片放到drawable文件夹中。

开始的时候仅仅是显示一张图片，点击不同按钮则添加不同的插值器到TranslateAnimation中，等等，貌似我们忘记定义translate_anim 动画文件了——亲，点我探探translate_anim.xml究竟。

在layout文件中使用了很多字符串，下面的字串做个参考（具体字串，朋友们自由发挥）

[html]  view plain  copy

1. <string name="acc_dec_str">accelerateDecelerate</string>  
2.     <string name="acc_str">accelerate</string>  
3.     <string name="anti_str">anticipate</string>  
4.     <string name="anti_over_shoot_str">anticipateOverShoot</string>  
5.     <string name="bounce_str">bounce</string>  
6.     <string name="cycle_str">cycle</string>  
7.     <string name="dec_str">decelerate</string>  
8.     <string name="linear_str">linear</string>  
9.     <string name="over_shoot_str">overShoot</string>  

ok，大功告成！有问题请留言，谢谢！