2013/5/12
54_tween动画
1动画（Animation）
Android提供了2种动画：
1> Tween动画，通过对 View 的内容进行一系列的图形变换 (包括平移、缩放、旋转、改变透明度)来实现动画效果。
动画效果的定义可以采用XML来做也可以采用编码来做。Tween动画有4种类型：
动画的类型 Xml定义动画使用的配置节点 编码定义动画使用的类
渐变透明度动画效果 <alpha/> AlphaAnimation
渐变尺寸缩放动画效果 <scale/> ScaleAnimation
画面转换位置移动动画效果 <translate/> TranslateAnimation
画面旋转动画效果 <rotate/> RotateAnimation
-------------------------------------------------------------------------------------------
2> Frame动画，即顺序播放事先做好的图像，跟电影类似。开发步骤：
（1）把准备好的图片放进项目res/ drawable下。
（2）在项目的res目录下创建文件夹anim，然后在anim文件夹下面定义动画XML文件，文件名称可以自定义。
当然也可以采用编码方式定义动画效果（使用AnimationDrawable类）。
（3）为View控件绑定动画效果。调用代表动画的AnimationDrawable的start()方法开始动画。
--------------------------------------------------
2.本例要实现对ImageView对象进行渐变尺寸缩放动画效果
1> 在项目的res目录下创建文件夹anim，然后在anim文件夹下面定义动画XML文件,文件名称可以自定义，如：scale.xml，内容如下：
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromXScale="0.0"
android:toXScale="5"
android:fromYScale="0.0"
android:toYScale="5"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="false"
android:duration="5000"
/>
</set>
动画的进度使用interpolator控制，android提供了几个Interpolator 子类，实现了不同的速度曲线，如LinearInterpolator实现了匀速效果、Accelerateinterpolator实现了加速效果、DecelerateInterpolator实现了减速效果等。还可以定义自己的Interpolator子类，实现抛物线、自由落体等物理效果。
fromXScale（浮点型） 属性为动画起始时X坐标上的缩放尺寸
fromYScale（浮点型） 属性为动画起始时Y坐标上的缩放尺寸
toXScale（浮点型） 属性为动画结束时X坐标上的缩放尺寸
toYScale（浮点型） 属性为动画结束时Y坐标上的缩放尺寸
说明: 以上四种属性值
0.0表示收缩到没有
1.0表示正常无缩放
值小于1.0表示收缩
值大于1.0表示放大
pivotX（浮点型） 属性为动画相对于物件的X坐标的开始位置
pivotY（浮点型） 属性为动画相对于物件的Y坐标的开始位置
说明:
以上两个属性值 从0%-100%中取值
50%为物件的X或Y方向坐标上的中点位置
duration（长整型）属性为动画持续时间 。说明: 时间以毫秒为单位
fillAfter（布尔型）属性当设置为true，该动画转化在动画结束后被应用
2> 在layout文件添加<ImageView>节点：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon"
android:id="@+id/imageView"
/>
</LinearLayout>
说明：除了可以对<ImageView>实现动画效果，其实也可以对其他View实现动画效果，如：<TextView>
3>在Activity里对ImageView使用前面定义好的动画效果：
public class AnimationActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView imageView = (ImageView)this.findViewById(R.id.imageView);
//加载动画XML文件,生成动画指令
Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale);
//开始执行动画
imageView.startAnimation(animation);
}
}
备注：上面采用的是xml文件定义动画效果，作为代替，也可以采用编码方式实现。下面采用编码方式实现上述例子同样的效果：
public class AnimationActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView imageView = (ImageView)this.findViewById(R.id.imageView);
ScaleAnimation animation = new ScaleAnimation(0.0f, 5f, 0.0f, 5f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation.setDuration(5000); //设置持续时间5秒
imageView.startAnimation(animation);
}
}
===================== Frame动画例子 ===============================
（1）把准备好的图片放进项目res/ drawable下。
图片有：girl_1.gif, girl_2.gif, girl_3.gif
（2）在项目的res目录下创建文件夹anim，然后在anim文件夹下面定义动画XML文件，文件名称可以自定义,如：frame.xml。
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item android:drawable="@drawable/girl_1" android:duration="200" />
<item android:drawable="@drawable/girl_2" android:duration="200" />
<item android:drawable="@drawable/girl_3" android:duration="200" />
</animation-list>
上面的XML就定义了一个Frame动画，其包含3帧动画，3帧动画中分别应用了drawable中的3张图片：girl_1.gif, girl_2.gif, girl_3.gif，
每帧动画持续200毫秒。android:oneshot属性如果为true，表示动画只播放一次停止在最后一帧上，如果设置为false表示动画循环播放。
（3）为View控件绑定动画效果，调用代表动画的AnimationDrawable的start()方法开始动画。
public class FrameActivity extends Activity {
private AnimationDrawable animationDrawable;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView imageView = (ImageView)this.findViewById(R.id.imageView);
imageView.setBackgroundResource(R.anim.frame);
animationDrawable = (AnimationDrawable) imageView.getBackground();
}
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {//按下
animationDrawable.start();
return true;
}
return super.onTouchEvent(event);
}
}
有一点需要强调的是：启动Frame动画的代码animationDrawable.start();不能应用在OnCreate()方法中，
因为在OnCreate()中 AnimationDrawable还没有完全的与ImageView绑定。在OnCreate()中启动动画，只能看到第一张图片。这里在拖曳事件中实现的。
--------------------------------------------------------------------------------------------------------------------------------
1.file:///G:/android/android-sdk-windows/docs/guide/topics/resources/animation-resource.html#Tween
实现动画效果，可以参考，sdk文档
----------------------------------
2.新建android项目：tween
a. 首先在/tween/res/anim目录下，建立动画效果xml文件：
/tween/res/anim/alpha.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<alpha
android:fromAlpha="1.0"
android:toAlpha="0"
android:duration="5000"
/>
<!--
渐变透明度动画效果
android:fromAlpha="1.0"用于设定动画刚开始的时候透明度的值 ，1.0表示不透明，也就是全显示。
android:duration="5000"由看到到看不到持续的时间。为毫秒值。
android:toAlpha="0"用于设定动画结束的时候透明度的值，这里0为看不到
-->
</set>
-----------------------------------------------------------------------
b./tween/res/anim/credream.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<!--
在这里混合使用了，
渐变透明度动画效果 <alpha/> AlphaAnimation
渐变尺寸缩放动画效果 <scale/> ScaleAnimation
画面转换位置移动动画效果 <translate/> TranslateAnimation
画面旋转动画效果 <rotate/> RotateAnimation
这几种动画效果
-->
<alpha
android:fromAlpha="1.0"
android:toAlpha="0"
android:duration="5000"
/>
<rotate
android:fromDegrees="0"
android:toDegrees="180"
android:pivotX="50%"
android:pivotY="50%"
android:duration="5000"
/>
<translate
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="50"
android:toYDelta="50"
android:duration="5000"
/>
<scale
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="5.0"
android:toYScale="5.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="5000"
/>
</set>
-----------------------------------------------------------
c./tween/res/anim/rotate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<!-- 画面旋转动画效果
android:fromDegrees="0"动画刚刚开始的时候为0度
android:toDegrees="180"结束的时候为180度
android:pivotX="50%"
android:pivotY="50%"
以物体的x，y轴的50%为中心点
android:duration="5000"动画持续时间5秒
-->
<rotate
android:fromDegrees="0"
android:toDegrees="180"
android:pivotX="50%"
android:pivotY="50%"
android:duration="5000"
/>
</set>
----------------------------------------------------------
d./tween/res/anim/scale.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<!-- 渐变尺寸缩放动画效果
android:fromXScale="1.0"
android:fromYScale="1.0"
动画刚刚开始的时候，x，和y轴的缩放比例:这里为1.0是没有改变的意思
android:toXScale="5.0"
android:toYScale="5.0"
动画结束的时候在x，和y轴后的放大比例：一般以这个控件的中心点，为中心放大5.0倍
android:pivotX="50%"
android:pivotY="50%"
这里就是指定x，和y轴的50%为中心点
android:duration="5000"
动画持续时间5秒
-->
<scale
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="5.0"
android:toYScale="5.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="5000"
/>
</set>
-------------------------------------------------------
e./tween/res/anim/translate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<!-- 画面转换位置移动动画效果
设置动画刚开始的时候坐标，这里以0，代表物体当前的位置，也就是物体没有移动
android:duration="5000"动画的持续时间是5秒中
android:toXDelta="100"这里是x坐标移动100个像素
android:toYDelta="100"这里是y坐标移动100个像素
-->
<translate
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="100"
android:toYDelta="100"
android:duration="5000"
/>
</set>
-----------------------------------------------------------
f.第二步在activity中使用动画效果。
/tween/src/com/credream/tween/TweenActivity.java
package com.credream.tween;
import android.app.Activity;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.RotateAnimation;
import android.widget.ImageView;
public class TweenActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
/* Animation animation = new RotateAnimation(0, 360,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation.setDuration(5000);*/
// 1.创建动画效果对象，只要把上下文对象和R.anim.alpha动画效果对象的xml文件传入就可以生成动画效果对象
// Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha);// 渐变透明度动画效果
// Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha);//使用alpha.xml生成动画效果对象
// Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate);// 画面转换位置移动动画效果
// Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale);//渐变尺寸缩放动画效果
// Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate);//画面旋转动画效果
Animation animation = AnimationUtils.loadAnimation(this, R.anim.credream);//混合动画效果
//---------------这里使用编码的方式实现动画的旋转效果
/* Animation animation=new RotateAnimation(0, 360,Animation.RELATIVE_TO_SELF,0.5f,
Animation.RELATIVE_TO_SELF,0.5f);
0：指定开始的角度, 360：指定结束的角度,Animation.RELATIVE_TO_SELF：这里指以它自身x轴作为参考点
* ,0.5f：指的是以x轴的中心为参考点,
Animation.RELATIVE_TO_SELF：这里是y轴的中心点为参考点，0.5f)
//
animation.setDuration(5000);// 指定动画持续的时间
*/ // ----------------------------------------------
// 这个是设置，当动画结束后，这个图片就停留在动画结束时候的位置
animation.setFillAfter(true);
// 2. 找到这个ImageView对象
ImageView imageView = (ImageView) this.findViewById(R.id.imageView);
// 3.开始动画，为这个控件应用上这个动画效果对象
imageView.startAnimation(animation);
}
}
------------------------------------------------------------------