Android动画之Tween动画实现

Android 平台提供了两类动画。 一类是Tween动画，就是对场景里的对象不断的进行图像变化来产生动画效果（旋转、平移、放缩和渐变）。

第二类就是 Frame动画，即顺序的播放事先做好的图像，与gif图片原理类似。

下面就讲一下Tweene Animations。

 主要类：

 Animation  动画

AlphaAnimation 渐变透明度

RotateAnimation 画面旋转

ScaleAnimation 渐变尺寸缩放

TranslateAnimation 位置移动

AnimationSet  动画集

一、等待动画实现

在我们应用程序当中，经常会使用到等待动画，那么首先我们就来实现这个

1.1首先，当然是布局啦

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:background="#fff"    >    <RelativeLayout        android:layout_width="180dp"        android:layout_height="180dp"        android:layout_centerInParent="true"        android:background="@drawable/loading_bg" >        <LinearLayout            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:gravity="center"            android:orientation="vertical" >            <ProgressBar        android:id="@+id/progressBar1"        style="?android:attr/progressBarStyleLarge"        android:layout_width="wrap_content"        android:layout_height="wrap_content"                android:layout_gravity="center_horizontal"         />        <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="正在登录"       android:layout_marginTop="10dp"        android:textColor="#fff"        android:textSize="20sp"        />        </LinearLayout>    </RelativeLayout></RelativeLayout>

1.2其次，就是实现啦

MainActivity.java

public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//延迟一段时间后跳转到另一个界面new Handler().postDelayed(new Runnable(){@Overridepublic void run(){Intent intent = new Intent(MainActivity.this,SecondActivity.class);startActivity(intent);MainActivity.this.finish();Toast.makeText(getApplicationContext(), "跳转成功", Toast.LENGTH_SHORT).show();}}, 2000);}}

1.3实现效果如图

二、开门动画实现

2.1首先，当然是布局啦

second.xml

<?xml version="1.0" encoding="UTF-8"?>    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:background="#000"         >                <ImageView            android:id="@+id/imageLeft"            android:scaleType="fitXY"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_alignParentLeft="true"            android:src="@drawable/w_left" />        <ImageView            android:id="@+id/imageRight"            android:visibility="visible"            android:scaleType="fitXY"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_alignParentRight="true"                        android:src="@drawable/w_right" />        <TextView             android:id="@+id/anim_text"        android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:gravity="center"         android:layout_alignParentTop="true"            android:layout_marginTop="35dp"        android:text=" \n \nthis is a test!\n \n "                 android:textSize="22sp"        android:textColor="#fff"         />    </RelativeLayout>

2.2其次，就是实现啦

SecondActivity.java

public class SecondActivity extends Activity {private ImageView mLeft;private ImageView mRight;private TextView mText;@Overrideprotected void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);setContentView(R.layout.second);mLeft = (ImageView)findViewById(R.id.imageLeft);        mRight = (ImageView)findViewById(R.id.imageRight);        mText = (TextView)findViewById(R.id.anim_text);                //往左移动        AnimationSet anim = new AnimationSet(true);TranslateAnimation mytranslateanim = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,-1f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f);mytranslateanim.setDuration(2000);anim.setStartOffset(800);anim.addAnimation(mytranslateanim);anim.setFillAfter(true);mLeft.startAnimation(anim);//往右移动AnimationSet anim1 = new AnimationSet(true);TranslateAnimation mytranslateanim1 = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,+1f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f);mytranslateanim1.setDuration(1500);anim1.addAnimation(mytranslateanim1);anim1.setStartOffset(800);anim1.setFillAfter(true);mRight.startAnimation(anim1);//文字变换AnimationSet anim2 = new AnimationSet(true);ScaleAnimation myscaleanim = new ScaleAnimation(1f,3f,1f,3f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);myscaleanim.setDuration(1000);AlphaAnimation myalphaanim = new AlphaAnimation(1,0.0001f);myalphaanim.setDuration(1500);anim2.addAnimation(myscaleanim);anim2.addAnimation(myalphaanim);anim2.setFillAfter(true);mText.startAnimation(anim2);//持续一段时间后跳转new Handler().postDelayed(new Runnable(){@Overridepublic void run(){Intent intent = new Intent(SecondActivity.this,ThirdActivity.class);startActivity(intent);SecondActivity.this.finish();}}, 2000);}}

2.3实现效果如图

   

三、透明旋转缩放移动动画实现及其混合实现

3.1首先，当然是布局啦

third.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:background="#000" >        <TextView         android:id="@+id/tv1"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:text="透明动画测试AlphaAnimation"        android:textColor="#f00"        android:textSize="20sp"/>        <View         android:layout_width="fill_parent"        android:layout_height="10dip"        android:background="?android:attr/listDivider"/>        <TextView         android:id="@+id/tv2"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:text="旋转动画测试RotateAnimation"        android:textColor="#0f0"        android:textSize="20sp"/>        <View         android:layout_width="fill_parent"        android:layout_height="10dip"        android:background="?android:attr/listDivider"/>        <TextView         android:id="@+id/tv3"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:text="缩放动画测试ScaleAnimation"        android:textColor="#00f"        android:textSize="20sp"/>        <View         android:layout_width="fill_parent"        android:layout_height="10dip"        android:background="?android:attr/listDivider"/>        <TextView         android:id="@+id/tv4"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:text="移动动画测试TranslateAnimation"        android:textColor="#ff0"        android:textSize="20sp"/>        <View         android:layout_width="fill_parent"        android:layout_height="10dip"        android:background="?android:attr/listDivider"/>        <TextView         android:id="@+id/tv5"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:text="多个动画同时生效测试AnimationSet"        android:textColor="#f0f"        android:textSize="20sp"/>    </LinearLayout>

3.2其次，就是实现啦

ThirdActivity.java

public class ThirdActivity extends Activity{private TextView mTextView1 = null;private TextView mTextView2 = null;private TextView mTextView3 = null;private TextView mTextView4 = null;private TextView mTextView5 = null;@Overrideprotected void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);setContentView(R.layout.third);//透明动画测试 AlphaAnimationmTextView1 = (TextView)findViewById(R.id.tv1);//初始化 其中AlphaAnimation类第一个参数fromAlpha表示动画起始时的透明度,第二个参数toAlpha表示动画结束时的透明度Animation alphaAnimation = new AlphaAnimation(0.1f, 1.0f);//设置动画时间 setDuration用来设置动画持续时间alphaAnimation.setDuration(5000);mTextView1.startAnimation(alphaAnimation);/*其中AlphaAnimation类第一个参数fromAlpha表示动画起始时的透明度， 第二个参数toAlpha表示动画结束时的透明度。 setDuration用来设置动画持续时间。*///旋转动画测试 RotateAnimationmTextView2 = (TextView)findViewById(R.id.tv2);Animation rotateAnimation = new RotateAnimation(0f, 360f);rotateAnimation.setDuration(5000);mTextView2.startAnimation(rotateAnimation);/*其中RotateAnimation类第一个参数fromDegrees表示动画起始时的角度， 第二个参数toDegrees表示动画结束时的角度。 另外还可以设置伸缩模式pivotXType、pivotYType， 伸缩动画相对于x,y 坐标的开始位置pivotXValue、pivotYValue等。*///缩放动画测试 ScaleAnimationmTextView3 = (TextView)findViewById(R.id.tv3);//初始化Animation scaleAnimation = new ScaleAnimation(0.1f, 1.0f,0.1f,1.0f);//设置动画时间scaleAnimation.setDuration(5000);mTextView3.startAnimation(scaleAnimation);/*第一个参数fromX ,第二个参数toX:分别是动画起始、结束时X坐标上的伸缩尺寸。第三个参数fromY ,第四个参数toY:分别是动画起始、结束时Y坐标上的伸缩尺寸。另外还可以设置伸缩模式pivotXType、pivotYType， 伸缩动画相对于x,y 坐标的开始位置pivotXValue、pivotYValue等。*///移动动画测试 TranslateAnimationmTextView4 = (TextView)findViewById(R.id.tv4);//初始化Animation translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);//设置动画时间translateAnimation.setDuration(5000);mTextView4.startAnimation(translateAnimation);/*第一个参数fromXDelta ,第二个参数toXDelta:分别是动画起始、结束时X坐标。第三个参数fromYDelta ,第四个参数toYDelta:分别是动画起始、结束时Y坐标。*///多个动画同时生效 AnimationSetmTextView5 = (TextView)findViewById(R.id.tv5);//初始化 Alpha动画Animation alphaAnimation5 = new AlphaAnimation(0.1f, 1.0f);//初始化 Rotate动画Animation rotateAnimation5 = new RotateAnimation(0f, 360f);//初始化 Scale动画Animation scaleAnimation5 = new ScaleAnimation(0.1f, 1.0f,0.1f,1.0f);//初始化 Translate动画Animation translateAnimation5 = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);//动画集AnimationSet set = new AnimationSet(true);set.addAnimation(alphaAnimation5);set.addAnimation(rotateAnimation5);set.addAnimation(scaleAnimation5);set.addAnimation(translateAnimation5);//设置动画时间 (作用到每个动画)set.setDuration(5000);mTextView5.startAnimation(set);new Handler().postDelayed(new Runnable(){@Overridepublic void run(){Intent intent = new Intent(ThirdActivity.this,FourActivity.class);startActivity(intent);ThirdActivity.this.finish();}}, 6000);}}

3.3实现效果如图

 

四、重写View实现动画效果

4.1首先，重写View

TweenAnim.java

public class TweenAnim extends View {//Alpha动画 - 渐变透明度private Animation alphaAnimation = null;//Sacle动画 - 渐变尺寸缩放private Animation scaleAnimation = null;//Translate动画 - 位置移动private Animation translateAnimation = null;//Rotate动画 - 画面旋转private Animation rotateAnimation = null;public TweenAnim(Context context) {super(context);//初始化 Alpha动画alphaAnimation = new AlphaAnimation(0.1f, 1.0f);//初始化 Rotate动画rotateAnimation = new RotateAnimation(0f, 360f);//初始化 Scale动画scaleAnimation = new ScaleAnimation(0.1f, 1.0f,0.1f,1.0f);//初始化 Translate动画translateAnimation = new TranslateAnimation(0.1f, 300.0f,0.1f,300.0f);//动画集AnimationSet set = new AnimationSet(true);set.addAnimation(alphaAnimation);set.addAnimation(rotateAnimation);set.addAnimation(scaleAnimation);set.addAnimation(translateAnimation);//设置动画时间 (作用到每个动画)set.setDuration(5000);this.startAnimation(set);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);Log.e("Tween", "onDraw");//加载一个图片canvas.drawBitmap(((BitmapDrawable)getResources().getDrawable(R.drawable.background1)).getBitmap(), 0, 0, null);}@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {Log.e("Tween", "onKeyDown");return true;}@Overridepublic boolean onKeyUp(int keyCode, KeyEvent event) {Log.e("Tween", "onKeyDown");switch (keyCode) {case KeyEvent.KEYCODE_DPAD_UP:Log.e("Tween", "onKeyDown - KEYCODE_DPAD_UP");break;case KeyEvent.KEYCODE_DPAD_DOWN:Log.e("Tween", "onKeyDown - KEYCODE_DPAD_DOWN");break;case KeyEvent.KEYCODE_DPAD_LEFT:Log.e("Tween", "onKeyDown - KEYCODE_DPAD_LEFT");break;case KeyEvent.KEYCODE_DPAD_RIGHT:Log.e("Tween", "onKeyDown - KEYCODE_DPAD_RIGHT");break;case KeyEvent.KEYCODE_DPAD_CENTER:break;default:break;}return true;}}

在Activity中调用该类时，需要注意一定setFocusable(true)， 否则焦点在Activity上的话，onKeyUp方法是不会生效的。

4.2其次，就是实现啦

FourActivity.java

public class FourActivity extends Activity{@Overrideprotected void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);TweenAnim anim = new TweenAnim(FourActivity.this);anim.setFocusable(true);setContentView(anim);new Handler().postDelayed(new Runnable(){@Overridepublic void run(){Intent intent = new Intent(FourActivity.this,FiveActivity.class);startActivity(intent);FourActivity.this.finish();}}, 6000);}}

4.3实现效果如图

五、利用XML实现动画效果

5.1布局文件

透明度alpha_anim.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"><alphaandroid:fromAlpha="0.1"android:toAlpha="1.0"android:duration="2000"/></set>

alpha动画参数XML节点
功能说明
alpha透明度动画fromAlpha动画起始时透明度
0.0表示完全透明
1.0表示完全不透明
以上值取0.0-1.0之间的float数据类型的数字
toAlpha动画结束时透明度

旋转rotate_anim.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"><rotateandroid:interpolator="@android:anim/accelerate_decelerate_interpolator"android:fromDegrees="0"android:toDegrees="360"android:pivotX="50%"android:pivotY="50%"android:duration="2000"/></set>

rotate动画参数XML节点
功能说明
rotate
旋转动画fromDegrees
动画起始时物件的角度
当角度为负数——表示逆时针旋转
当角度为正数——表示顺时针旋转
(负数from——to正数:顺时针旋转)
(负数from——to负数:逆时针旋转)
(正数from——to正数:顺时针旋转)
(正数from——to负数:逆时针旋转)
toDegrees
属性为动画结束时物件旋转的角度 可以大于360度
pivotX
pivotY
为动画相对于物件的X、Y坐标的开始位
以上两个属性值 从0%-100%中取值
50%为物件的X或Y方向坐标上的中点位置

缩放scale_anim.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"><scaleandroid:interpolator="@android:anim/accelerate_decelerate_interpolator"android:fromXScale="0.0"android:toXScale="1.0"android:fromYScale="0.0"android:toYScale="1.0"android:pivotX="50%"android:pivotY="50%"android:fillAfter="false"android:duration="2000"/></set>

scale动画参数XML节点
功能说明
scale
缩放动画
fromXScale[float]
fromYScale[float]
动画起始时，X、Y坐标上的伸缩尺寸
0.0表示收缩到没有
1.0表示正常无伸缩
值小于1.0表示收缩
值大于1.0表示放大
toXScale [float]
toYScale[float]
动画结束时，X、Y坐标上的伸缩尺寸
pivotX[float]
pivotY[float]
动画相对于物件的X、Y坐标的开始位置
从0%-100%中取值，50%为物件的X或Y方向坐标上的中点位置

移动translate_anim.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"><translateandroid:fromXDelta="10"android:toXDelta="300"android:fromYDelta="10"android:toYDelta="300"/></set>

translate动画参数XML节点
功能说明
translate
移动动画fromXDelta
toXDelta
动画、结束起始时 X坐标上的位置
fromYDelta
toYDelta
动画、结束起始时 Y坐标上的位置

Tween Animation共同的节点属性

属性[类型]功能备注Duration[long]属性为动画持续时间时间以毫秒为单位fillAfter [boolean]当设置为true ，该动画转化在动画结束后被应用fillBefore[boolean]当设置为true ，该动画转化在动画开始前被应用

interpolator

指定一个动画的插入器有一些常见的插入器
accelerate_decelerate_interpolator
加速-减速 动画插入器
accelerate_interpolator
加速-动画插入器
decelerate_interpolator
减速- 动画插入器
其他的属于特定的动画效果repeatCount[int]动画的重复次数
RepeatMode[int]定义重复的行为1：重新开始  2：plays backwardstartOffset[long]动画之间的时间间隔，从上次动画停多少时间开始执行下个动画zAdjustment[int]定义动画的Z Order的改变0：保持Z Order不变
1：保持在最上层
-1：保持在最下层

5.2其次，就是重写View啦

TweenAnim2.java

public class TweenAnim2 extends View {//Alpha动画 - 渐变透明度private Animation alphaAnimation = null;//Sacle动画 - 渐变尺寸缩放private Animation scaleAnimation = null;//Translate动画 - 位置移动private Animation translateAnimation = null;//Rotate动画 - 画面旋转private Animation rotateAnimation = null;public TweenAnim2(Context context) {super(context);//初始化 Alpha动画alphaAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.alpha_anim);//初始化 Rotate动画rotateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.rotate_anim);//初始化 Scale动画scaleAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.scale_anim);//初始化 Translate动画translateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.translate_anim);//动画集AnimationSet set = new AnimationSet(true);set.addAnimation(alphaAnimation);set.addAnimation(rotateAnimation);set.addAnimation(scaleAnimation);set.addAnimation(translateAnimation);//设置动画时间 (作用到每个动画)set.setDuration(5000);this.startAnimation(set);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);Log.e("Tween", "onDraw");//加载一个图片canvas.drawBitmap(((BitmapDrawable)getResources().getDrawable(R.drawable.background2)).getBitmap(), 0, 0, null);}@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {Log.e("Tween", "onKeyDown");return true;}@Overridepublic boolean onKeyUp(int keyCode, KeyEvent event) {Log.e("Tween", "onKeyDown");switch (keyCode) {case KeyEvent.KEYCODE_DPAD_UP:Log.e("Tween", "onKeyDown - KEYCODE_DPAD_UP");break;case KeyEvent.KEYCODE_DPAD_DOWN:Log.e("Tween", "onKeyDown - KEYCODE_DPAD_DOWN");this.startAnimation(rotateAnimation);break;case KeyEvent.KEYCODE_DPAD_LEFT:Log.e("Tween", "onKeyDown - KEYCODE_DPAD_LEFT");break;case KeyEvent.KEYCODE_DPAD_RIGHT:Log.e("Tween", "onKeyDown - KEYCODE_DPAD_RIGHT");break;case KeyEvent.KEYCODE_DPAD_CENTER:Log.e("Tween", "onKeyDown - KEYCODE_DPAD_CENTER");break;default:break;}return true;}}

5.3然后，就是实现啦

FiveActivity.java

public class FiveActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);TweenAnim2 anim = new TweenAnim2(FiveActivity.this);anim.setFocusable(true);setContentView(anim);}}

5.4实现效果如图

  

做了一天的成果，希望对大家有所帮助，谢谢！

源码下载