Android动画主要分为三大类
- View Animation
- Drawable Animation
- Property Animation
其中Drawable Animations对大多数人来说是三者中最容易理解的,其实它就是很多书籍中提到的逐帧动画(frame-by-frame animation)。而Property Animation和View Animation是相对比较容易混淆的,下面先讲解二者的区别。
View Animation有两个缺点:(1)View Animation一般只能修改组件(View Object)的部分属性,比如:scaling(大小)和rotation(旋转),但是无法修改组件的背景颜色。(2)View Animation使某个组件产生动画效果移动一段距离后,比如从屏幕左侧移动到右侧,其实整个过程是绘制出来的效果,该组件真正的位置依然保留在左侧,只有点击左侧位置才能触发该组件。所以想真正移动某组件,需要在动画结束后添加代码实现。
Property Animation则没有以上View Animation的两个限制,Property Animation可以修改任何对象(View Object 或者 non-view Object)的任何属性,比如大小,旋转,颜色。并且,移动后的组件,位置也回跟随着改变。
Android官网推荐使用Property Animation,但是View Animation也有其优点:使用方便简单,所以当View Animation能方便快速地解决需求时,选择它也是不错的选择。
Drawable Animation (帧动画)
以上我们对Android动画有了一个整体的认识,接下来循序渐进,先介绍最容易学习的Drawable Animation。如上面所说,Drawable Animation是逐帧动画,那么使用它之前必须先定义好各个帧。我们可以通过代码定义,也可以使用xml文件定义,一般使用后者。如下:
- <animation-list xmlns:android="http://schemas.android.com/apk/res/android"
- android:oneshot="true">
- <item android:drawable="@drawable/frame_1" android:duration="200" />
- <item android:drawable="@drawable/frame_2" android:duration="200" />
- <item android:drawable="@drawable/frame_3" android:duration="200" />
- <item android:drawable="@drawable/frame_4" android:duration="200" />
- </animation-list>
其中android:oneshot=“true”表示该动画只播放一次,等于false时则循环播放。<item/>标签定义各个帧显示的图片。显示顺序依照<item/>定义顺序。下面介绍一个实际场景,即平时我们常见的加载界面,
界面布局中只有一个居中的ImageView,比较简单,布局文件就不列出了。相对重要的是,我们需要定义一个xml文件描述各个帧,如下:
DrawableAnimationDemo\res\drawable\loading.xml
- <?xml version="1.0" encoding="UTF-8"?>
- <animation-list xmlns:android="http://schemas.android.com/apk/res/android"
- android:oneshot="false">
- <item android:duration="100">
- <layer-list>
- <item android:drawable="@drawable/login_loading_00" />
- <item android:drawable="@drawable/login_loading_10" />
- </layer-list>
- </item>
- <item android:duration="100">
- <layer-list>
- <item android:drawable="@drawable/login_loading_01" />
- <item android:drawable="@drawable/login_loading_11" />
- </layer-list>
- </item>
- <item android:duration="100">
- <layer-list>
- <item android:drawable="@drawable/login_loading_02" />
- <item android:drawable="@drawable/login_loading_12" />
- </layer-list>
- </item>
- <item android:duration="100">
- <layer-list>
- <item android:drawable="@drawable/login_loading_03" />
- <item android:drawable="@drawable/login_loading_13" />
- </layer-list>
- </item>
- <item android:duration="100">
- <layer-list>
- <item android:drawable="@drawable/login_loading_04" />
- <item android:drawable="@drawable/login_loading_14" />
- </layer-list>
- </item>
- <item android:duration="100">
- <layer-list>
- <item android:drawable="@drawable/login_loading_05" />
- <item android:drawable="@drawable/login_loading_15" />
- </layer-list>
- </item>
- <item android:duration="100">
- <layer-list>
- <item android:drawable="@drawable/login_loading_06" />
- <item android:drawable="@drawable/login_loading_16" />
- </layer-list>
- </item>
- <item android:duration="100">
- <layer-list>
- <item android:drawable="@drawable/login_loading_07" />
- <item android:drawable="@drawable/login_loading_17" />
- </layer-list>
- </item>
- <item android:duration="100">
- <layer-list>
- <item android:drawable="@drawable/login_loading_08" />
- <item android:drawable="@drawable/login_loading_18" />
- </layer-list>
- </item>
- <item android:duration="100">
- <layer-list>
- <item android:drawable="@drawable/login_loading_09" />
- <item android:drawable="@drawable/login_loading_19" />
- </layer-list>
- </item>
- </animation-list>
以上xml文件与前面一个xml文件不大同,多了一个<layer-list/>标签,该标签用法很简单,<layer-list/>内包含的图片将层叠起来,在同一帧中一起显示。如下:
再看主界面的activity文件,如下:
DrawableAnimationDemo\src\com\example\drawableanimationdemo\MainActivity.java
- public class MainActivity extends Activity {
-
- private AnimationDrawable loadingAnimation;
-
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- requestWindowFeature(Window.FEATURE_NO_TITLE);
- setContentView(R.layout.activity_main);
-
- ImageView loadingImg = (ImageView) findViewById(R.id.loading);
- loadingImg.setBackgroundResource(R.drawable.loading);
- loadingAnimation = (AnimationDrawable) loadingImg.getBackground();
- }
-
-
-
-
- public boolean onTouchEvent(MotionEvent event) {
- if (event.getAction() == MotionEvent.ACTION_DOWN) {
- loadingAnimation.stop();
- return true;
- }
- return super.onTouchEvent(event);
- }
-
-
-
-
- @Override
- public void onWindowFocusChanged(boolean hasFocus) {
-
- super.onWindowFocusChanged(hasFocus);
- if (hasFocus)
- loadingAnimation.start();
- }
-
- }
效果图如下,其中图片素材取材于OSchina的开源项目。
以上代码实现的功能是:activity一启动,则动画开始,触摸屏幕时动画停止,代码比较容易理解,唯一需要注意的是,不能在onCreate()方法中调用AnimationDrawable的start()方法,因为此时AnimationDrawable还未真正加载到界面中。所以,如果想启动界面就自动运行动画,可以在OnWindowFocusChanged(boolean hasFocus)中启动动画。
View Animation (补间动画)
View Animation也是我们平时很多书籍所说的Tweened Animation(有人翻译为补间动画)。View Animation分为4大类:AlphaAnimation,RotateAnimation,ScaleAnimation,TranslateAnimation,分别对应透明度,旋转,大小,位移四种变化。
View Animation的效果由四个因素决定:1)初始状态;2)结束状态;3)持续时间;4)Interpolator。所以要定义一个View Animation,你只要定义以上四个因素,中间的过程怎么变化则有系统自动计算出来。其中前3个因素很容易理解,第四个因素Interpolator比较特别,这个单词不知道怎么翻译比较适合,很多书籍的翻译都很奇怪。Interpolator是决定动画进行过程的速度变化。比如:你将一个按钮从屏幕左侧运动到屏幕右侧。可以让它一直加速前进,或者先减速然后减速,这就是Interpolator发挥的作用,具体使用方法下面会说,先从简单的说起。
像Drawable Animation一样,定义一个View Animation可以用代码的方式,也可以用XML文件的方式。我们先来写一个最简单的例子,对一个helloworld字符串进行移动,旋转,放大,变暗,分别用代码实现和XML文件实现。先用代码实现。
首先新建工程:ViewAnimationDemo,并新建一个布局文件:animationjavacode.xml,如下:
ViewAnimationDemo\res\layout\animationjavacode.xml
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:paddingBottom="@dimen/activity_vertical_margin"
- android:paddingLeft="@dimen/activity_horizontal_margin"
- android:paddingRight="@dimen/activity_horizontal_margin"
- android:paddingTop="@dimen/activity_vertical_margin"
- tools:context=".MainActivity" >
-
- <TextView
- android:id="@+id/translation"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_marginBottom="50dp"
- android:text="我要移动" />
-
- <TextView
- android:id="@+id/rotate"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_below="@id/translation"
- android:layout_marginBottom="50dp"
- android:text="我要旋转" />
-
- <TextView
- android:id="@+id/scale"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_below="@id/rotate"
- android:layout_marginBottom="50dp"
- android:text="我要变大" />
-
- <TextView
- android:id="@+id/alpha"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_below="@id/scale"
- android:layout_marginBottom="200dp"
- android:text="我要变暗" />
-
- <Button
- android:id="@+id/fire"
- android:layout_width="match_parent"
- android:layout_height="50dp"
- android:layout_below="@id/alpha"
- android:text="运动" />
-
- </RelativeLayout>
该XML布局文件对应的Activity如下:
ViewAnimationDemo/src/com/CSDN/viewanimationdemo/AnimCodeActivity.Java
- public class AnimCodeActivity extends Activity {
-
- private TextView translation;
- private TextView rotate;
- private TextView scale;
- private TextView alpha;
-
- private Button button;
-
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- requestWindowFeature(Window.FEATURE_NO_TITLE);
- setContentView(R.layout.animationjavacode);
-
- translation = (TextView) findViewById(R.id.translation);
- rotate = (TextView) findViewById(R.id.rotate);
- scale = (TextView) findViewById(R.id.scale);
- alpha = (TextView) findViewById(R.id.alpha);
- button = (Button) findViewById(R.id.fire);
-
- button.setOnClickListener(new OnClickListener() {
-
- @Override
- public void onClick(View v) {
-
-
- TranslateAnimation tAnim = new TranslateAnimation(0, 400, 0, 0);
- RotateAnimation rAnima = new RotateAnimation(0, 70);
- ScaleAnimation sAnima = new ScaleAnimation(0, 5, 0, 5);
- AlphaAnimation aAnima = new AlphaAnimation(1.0f, 0.0f);
-
- tAnim.setDuration(2000);
- rAnima.setDuration(2000);
- sAnima.setDuration(2000);
- aAnima.setDuration(2000);
-
-
- tAnim.setInterpolator(new AccelerateDecelerateInterpolator());
-
-
- translation.startAnimation(tAnim);
- rotate.startAnimation(rAnima);
- scale.startAnimation(sAnima);
- alpha.startAnimation(aAnima);
- }
- });
-
- }
-
- }
从代码中不难看到,首先确定了动画的起始状态和结束状态,然后通过setDuration(2000)设置持续时间,如果这里不设置持续时间,将默认为30mx,基本肉眼看不到。最后我们设置了一个Interpolator,此处设置效果是动画先减速进行,然后减速。默认状态时匀速进行。没错,Interpolator的基本用法就是这么容易。以上代码效果图如下:
![](https://img-blog.csdn.net/20141026122610140?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQ0haaXJveQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
接下来讲解怎么用xml定义动画,按照android官网的介绍,定义View Animation的xml文件格式如下:
- <?xml version="1.0" encoding="utf-8"?>
- <set xmlns:android="http://schemas.android.com/apk/res/android"
- android:interpolator="@[package:]anim/interpolator_resource"
- android:shareInterpolator=["true" | "false"] >
- <alpha
- android:fromAlpha="float"
- android:toAlpha="float" />
- <scale
- android:fromXScale="float"
- android:toXScale="float"
- android:fromYScale="float"
- android:toYScale="float"
- android:pivotX="float"
- android:pivotY="float" />
- <translate
- android:fromXDelta="float"
- android:toXDelta="float"
- android:fromYDelta="float"
- android:toYDelta="float" />
- <rotate
- android:fromDegrees="float"
- android:toDegrees="float"
- android:pivotX="float"
- android:pivotY="float" />
- <set>
- ...
- </set>
- </set>
该文件只能有一个根结点,可以是<set>,<alpha>,<scale>,<translate>,<rotate>,而其中,<set>结点可以包含子节点,即可以包含<set>,<alpha>,<scale>,<translate>,<rotate>,以此类推。
以上需要讲解的两个标签属性是android:interpolator和android:shareInterpolator,前者代表你所使用的interpolator,可以是系统自带,也可以是自定义。而后者代表,是否将该Interpolator共享给子节点。其它子标签的属性很容易理解,基本看属性名字就能懂,除了其中两个,android:pivotX和android:pivotY,我们知道,pivot的意思是轴心的意思,所以这两个属性定义的是此次动画变化的轴心位置,默认是左上角,当我们把它们两者都赋值为50%,则变化轴心在中心。
接下来写一个具体的例子,如下,还是在刚才的项目中进行。一般我们把定义动画的xml文件放在res/anim目录下,首先我们新建一个anim文件夹,然后新建一个xml文件,如下:
ViewAnimationDemo/res/anim/myanim.xml
- <set xmlns:android="http://schemas.android.com/apk/res/android"
- android:shareInterpolator="false">
- <scale
- android:interpolator="@android:anim/accelerate_decelerate_interpolator"
- android:fromXScale="1.0"
- android:toXScale="1.4"
- android:fromYScale="1.0"
- android:toYScale="0.6"
- android:pivotX="50%"
- android:pivotY="50%"
- android:fillAfter="false"
- android:duration="1000" />
- <set
- android:interpolator="@android:anim/accelerate_interpolator"
- android:startOffset="1000">
- <scale
- android:fromXScale="1.4"
- android:toXScale="0.0"
- android:fromYScale="0.6"
- android:toYScale="0.0"
- android:pivotX="50%"
- android:pivotY="50%"
- android:duration="400" />
- <rotate
- android:fromDegrees="0"
- android:toDegrees="60"
- android:toYScale="0.0"
- android:pivotX="50%"
- android:pivotY="50%"
- android:duration="400" />
- </set>
- </set>
上述例子的效果图如下:
![](https://img-blog.csdn.net/20141026122740780?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQ0haaXJveQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
上面代码中,有 唯一一个根节点<set>,它有两个子节点<scale>和<set>,然后其中的子节点<set>拥有两个自己的子节点<scale>和<rotate>。讲解一下上面一些没见过的标签属性。
andoird:fillAfter:前面一个例子中,我们的动画结束后helloworld又回到了原来状态,通过设置fillAfter为true,则动画将保持结束的状态,但是,如前一篇博客《Android动画之一:Drawable Animation》所说,View Animation的动画效果是绘制出来的,并非该组件真正移动了,这个问题我们后续会继续探讨。现在只需要知道将fillAfter设置为true之后,动画将保持结束状态,这大多应用于设计连续发生的动画。
startOffset:该属性定义动画推迟多久开始,通过这个属性的设置,我们可以设计一些前后按序发生的动画,当然,除了最后一个发生的动画,其他动画得设置fillAfter为true.
interpolator:这里我们使用了系统自带的interpolator
接下来我们定义一个布局文件,该布局文件只有一张图片,一个按钮,通过点击按钮触发图片进行动画,该布局文件比较简单,这里不列出。如何在该布局文件对应的activity代码中启动动画呢,代码如下:
ViewAnimationDemo/src/com/CSDN/viewanimationdemo/AnimaXmlActivity.java
- public class AnimaXmlActivity extends Activity {
-
- private Button btn;
- private ImageView img;
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- requestWindowFeature(Window.FEATURE_NO_TITLE);
- setContentView(R.layout.activity_anima_xml);
- btn = (Button)findViewById(R.id.xml_btn);
- img = (ImageView)findViewById(R.id.xmlAnimImg);
-
- btn.setOnClickListener(new OnClickListener() {
-
- @Override
- public void onClick(View v) {
-
- Animation anim = AnimationUtils.loadAnimation(AnimaXmlActivity.this, R.anim.myanim);
- img.startAnimation(anim);
- }
- });
- }
- }
以上代码很容易理解,我们一般使用AnimationUtils读取定义在xml文件中的动画。
Property Animation (属性动画)
太多了 不复制了。