初识android中的动画_移动开发

您所在的位置：程序员俱乐部 > 编程开发 > 移动开发 > 初识android中的动画

初识android中的动画

2016/11/5 5:32:15 huang502 程序员俱乐部我要评论(0)

摘要：动画效果可以大大提高界面的交互效果，因此，动画在移动开发中的应用场景较为普遍。掌握基本的动画效果在成熟的软件开发中不可或缺。除此之外，用户对于动画的接受程度远高于文字和图片，利用动画效果可以加深用户对于产品的印象。因此本文给出安卓设计中几种常见的动画效果。基础知识在介绍安卓中的动画效果之前，有必要介绍一下安卓中的图片处理机制。图片的特效包括图形的缩放、镜面、倒影、旋转、平移等。图片的特效处理方式是将原图的图形矩阵乘以一个特效矩阵，形成一个新的图形矩阵来实现的。矩阵Matrix类
标签：android

动画效果可以大大提高界面的交互效果，因此，动画在移动开发中的应用场景较为普遍。掌握基本的动画效果在成熟的软件开发中不可或缺。除此之外，用户对于动画的接受程度远高于文字和图片，利用动画效果可以加深用户对于产品的印象。因此本文给出安卓设计中几种常见的动画效果。

基础知识

在介绍安卓中的动画效果之前，有必要介绍一下安卓中的图片处理机制。图片的特效包括图形的缩放、镜面、倒影、旋转、平移等。图片的特效处理方式是将原图的图形矩阵乘以一个特效矩阵，形成一个新的图形矩阵来实现的。矩阵Matrix 类，维护了一个3*3 的矩阵去更改像素点的坐标。Android 手机的屏幕坐标系以左上角为原点，从左向右为x轴正方向，从上到下为y轴正方向。第一行表示像素点的x 坐标：x = 1*x + 0*y + 0*z，第二行表示像素点的y 坐标：y = 0*x + 1*y + 0*z，第三行表示像素点的z 坐标：z = 0*x + 0*y + 1*z。图片的特效处理正是通过更改图形矩阵的值来实现的，在android下Matrix这个类帮我们封装了矩阵的一些基本用法，所以我们可以直接使用即可。用代码编辑图片,最好处理都是图片在内存中的拷贝,不去处理原图，因此需要用Bitmap创建一个与原图大小一致，格式相同的空白位图。

对照片进行操作的基本步骤：

1. 创建一个空白的bitmap,宽高信息和原图保存一致；

2. 创建一个画板；

3. 创建一个画笔；

4. 设置matrix矩阵；

5. 对照着原图在画纸上面画出一模一样的样子出来。

下面分别给出对图片缩放、平移、旋转、镜面操作的代码。

/**
     * 图片缩放
     * 
     */
    private void zoom() {
        Bitmap srcBitmap = BitmapFactory.decodeFile("mnt/sdcard/b.jpg");
        iv_src.setImageBitmap(srcBitmap);
        Bitmap copyBitmap = Bitmap.createBitmap(srcBitmap.getWidth(), srcBitmap.getHeight(), srcBitmap.getConfig());
        Canvas canvas = new Canvas(copyBitmap);
        Paint paint = new Paint();
        paint.setColor(Color.BLACK);
        Matrix matrix = new Matrix();
        matrix.setScale(0.6f, 0.6f);
        canvas.drawBitmap(srcBitmap, matrix, paint);
        iv_dest.setImageBitmap(copyBitmap);
    }
    
    /**
     * 图片平移
     * 
     */
    public void translation(){
        Options ops = new Options();
        ops.inSampleSize = 4;   //等比放缩
        Bitmap srcBitmap = BitmapFactory.decodeFile("/mnt/sdcard/b.jpg",ops);
        iv_src.setImageBitmap(srcBitmap);
        Bitmap copyBitmap = Bitmap.createBitmap(srcBitmap.getWidth(), srcBitmap.getHeight(), srcBitmap.getConfig());
        Canvas canvas = new Canvas(copyBitmap);
        Paint paint = new Paint();
        paint.setColor(Color.BLACK);
        Matrix matrix = new Matrix();
        matrix.setTranslate(100, 100);
        canvas.drawBitmap(srcBitmap, matrix, paint);
        iv_dest.setImageBitmap(copyBitmap);
    }
    /**
     * 旋转
     * 
     */
    public void scole(){
        Bitmap srcBitmap = BitmapFactory.decodeFile("/mnt/sdcard/b.jpg");
        iv_src.setImageBitmap(srcBitmap); 
        Bitmap copyBitmap = Bitmap.createBitmap(srcBitmap.getWidth(), srcBitmap.getHeight(), srcBitmap.getConfig());
        Canvas canvas = new Canvas(copyBitmap);
        Paint paint = new Paint();
        paint.setColor(Color.BLACK);
        Matrix matrix = new Matrix();
        matrix.setRotate(180, srcBitmap.getWidth()/2, srcBitmap.getHeight()/2);//绕原点旋转
        canvas.drawBitmap(srcBitmap, matrix, paint);
        iv_dest.setImageBitmap(copyBitmap);
    }
    /**
     * 镜面特效/倒影特效
     * 原理一样，一个关于x轴旋转，一个关于y轴旋转
     */
    public void mirror(){
        Bitmap srcBitmap = BitmapFactory.decodeFile("/mnt/sdcard/b.jpg");
        iv_src.setImageBitmap(srcBitmap);
        Bitmap copyBitmap = Bitmap.createBitmap(srcBitmap.getWidth(), srcBitmap.getHeight(), srcBitmap.getConfig());
        Canvas canvas = new Canvas(copyBitmap);
        Paint paint = new Paint();
        paint.setColor(Color.BLACK);
        Matrix matrix = new Matrix();
        matrix.setScale(-1, 1);
        matrix.postTranslate(srcBitmap.getWidth(), 0);
        canvas.drawBitmap(srcBitmap, matrix, paint);
        iv_dest.setImageBitmap(copyBitmap);
    }

接下来进入进入今天的主题。安卓下的动画分为三种：帧动画、View动画（补间动画）、属性动画。下面分别介绍这三种动画。

帧动画：

帧动画是这三种动画中最为普遍的一种，指的是一帧一帧播放的动画。更直白的讲就是快速切换图片的效果。通过animation-list来实现，创建一个Drawable 序列，这些Drawable 可以按照指定的时间间隔一个一个的显示，也就是顺序播放事先做好的图像。

帧动画使用的基本步骤：

1 . 创建帧动画每帧需要的图片, 放到对应的 drawable-xxx 或drawable 目录中

2 . 在drawable 目录下，创建帧动画 xml 文件，根节点选择 animation-list。oneshot属性表示帧动画的自动执行。如果为true，表示动画只播放一次停止在最后一帧上，如果设置为false表示动画循环播放。

3. 在JAVA代码中开启动画。设置为 View 的 Background 或者 ImageView 的 src，然后获取到控件的 AnimationDrawable 对象，通过 AnimationDrawable.start() 方法启动动画

下面以火箭的发射为例演示帧动画。

xml文件中的代码：

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
   <item android:drawable="@drawable/desktop_rocket_launch_1" android:duration="200" />
   <item android:drawable="@drawable/desktop_rocket_launch_2" android:duration="200" />
</animation-list>

Java代码的实现：

        iv = new ImageView(this);
        //开启帧动画   rocket为上述xml文件
        iv.setBackgroundResource(R.drawable.rocket);
        AnimationDrawable ad = (AnimationDrawable) iv.getBackground();
        ad.start();

属性动画：

Android 3.0之后view类增加新的用来记录动画行为的属性，只能运行的Android3.0以上的系统也就是说运行在 API-11 以上的系统。属性动画会改变当前的视图所在的位置，通过动态改变控件的宽、高、坐标等属性而产生的动画效果。

通过控制控件的属性实现动画效果，属性动画比补间动画要更灵活、强大的多。需要注意的是属性动画内部其实并没有区分位移、缩放、透明、旋转等动画，其核心思想只是修改一个控件的属性，我们可以通过修改不同的属性来实现补间动画的4 种效果而已。

属性动画跟补间动画比，属性动画是真正改变了控件的属性，会改变当前的视图所在的位置，因此当控件的位置改变后只要点击到了控件“身上”就能触发onClick 事件。而补间动画则并没用改变控件的真实属性，因此不管属性动画执行后将控件移动到了哪个位置，只能通过点击该控件的原始位置才能触发onClick 事件。

通过xml 文件实现属性动画步骤：

1. 在res 下创建属性动画文件。在res 目录下创建animator 文件夹，然后创建一个objectAnimator 资源文件。资源名称自定义即可。

2. 编写属性动画文件。指定属性值。

3. 编写代码使用属性动画文件。通过AnimatorInflater加载图片资源，指定要显示动画的控件，并开启动画。

属性动画可以通过xml文件实现，但通常属性动画是通过JAVA代码实现。这里仅给出用xml文件实现淡化动画的案例，其他案例均以JAVA代码的方式实现。

JAVA代码的方式实现属性动画。

public class MainActivity extends Activity {
    private ImageView iv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv = (ImageView) findViewById(R.id.iv);
    }
    /**
     * 淡化动画
     * @param view
     */
    public void alpha(View view) {
        ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "alpha", new float[] {
                0.0f, 0.2f, 0.4f, 0.6f, 0.8f, 1.0f });
        oa.setDuration(3000);
        oa.setRepeatCount(ObjectAnimator.INFINITE);
        oa.setRepeatMode(ObjectAnimator.REVERSE);
        oa.start();
    }
    /**
     * 平移动画
     * @param view
     */
    public void trans(View view) {
        ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "translationX",
                new float[] { 10f, 20f, 30f, 40f, 60f, 80f });
        oa.setDuration(3000);
        oa.setRepeatCount(ObjectAnimator.INFINITE);
        oa.setRepeatMode(ObjectAnimator.REVERSE);
        oa.start();
    }
    /**
     * 缩放动画
     */
    public void scale(View view) {
        ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "scaleX", new float[] {
                1f, 2f, 3f, 4f, 5f, 6f });
        oa.setDuration(3000);
        oa.setRepeatCount(ObjectAnimator.INFINITE);
        oa.setRepeatMode(ObjectAnimator.REVERSE);
        oa.start();
    }

    /**
     * 旋转动画
     */
    public void rotate(View view) {
        ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "rotationY",
                new float[] { 90f, 180f, 270f, 360f });
        oa.setDuration(3000);
        oa.setRepeatCount(ObjectAnimator.INFINITE);
        oa.setRepeatMode(ObjectAnimator.REVERSE);
        oa.start();
    }

    /**
     * 水平平移 + 竖直平移
     */
    public void set(View view) {
        AnimatorSet set = new AnimatorSet();
        ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "translationX",
                new float[] { 10f, 20f, 30f, 40f, 60f, 80f });
        oa.setDuration(3000);
        ObjectAnimator oa2 = ObjectAnimator.ofFloat(iv, "translationY",
                new float[] { -10f, -20f, -30f, -40f, -60f, -80f });
        oa2.setDuration(3000);
        set.playTogether(oa, oa2);
        set.start();
    }

}

xml文件实现淡化效果：

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:propertyName="alpha"
    android:repeatCount="3"
    android:repeatMode="reverse"
    android:valueFrom="0.0"
    android:valueTo="1.0" >

</objectAnimator>

然后在java代码中实现这样一段代码：

      public void alpha(View view) {
          Animator animator = AnimatorInflater.loadAnimator(this,
                  R.animator.alpha);
          animator.setTarget(iv);
          animator.start();
      }

View动画：

渐变动画也叫补间动画。补间动画通过对View 的内容进行一系列的图形变换(包括平移、缩放、旋转、改变透明度)来实现动画效果。动画效果的定义可以采用XML 文件来做也可以采用java 代码来做。

使用XML 文件实现View动画的步骤：

1. 在res 目录下创建anim 文件夹。

2. 在anim 文件夹中创建xml文件，文件名可以自定义。

3. 编辑xml文件。定义不同的标签，表示不同的动画效果。alpha表示淡化，

4. 添加Java 逻辑代码，使用AnimationUtils 工具类加载xml 文件，获取Animation 对象，调用startAnimation 让ImageView 执行此动画。

View动画中常用属性的含义：

duration 动画时长

fromAlpha 起始透明度，1 为完全不透明，0 为完全透明

repeatCount 重复次数，INFINITE表示无限重复

toAlpha 目标透明度

repeatMode 重复模式，restart 为重新开始，reverse表示来回播放

渐变动画在代码中使用的是AlphaAnimation 类来定义，在XML 文件中使用<alpha>节点来定义。旋转动画在代码中使用的是RotateAnimation 类来定义，在XML 文件中使用<rotate>节点来定义。伸缩动画在代码中使用的是ScaleAnimation 类来定义，在XML 文件中使用<scale>节点来定义。平移动画在代码中使用的是TranslateAnimation 类来定义，在XML 文件中使用<scale>节点来定义。Android 提供了AnimationSet 动画集合用于将多种补间动画联合起来一起使用，这样就能实现更多复杂的动画效果。动画集合既可以使用AnimationSet 类来定义也可以在XML 文件中使用<set>节点来定义。任何复杂的动画均是通过简单的动画集合在一起的。

使用编码方式同样可以实现view动画，直接创建相应的动画对象，然后添加相应的属。代使用编码方式实现view动画跟用XML 文件实现View动画其实是一模一样的，无非就是在JAVA代码中设定相关的属性罢了。

使用XML 文件实现View动画的代码：

1 . 在anim文件夹下新建下列文件：

<!-- alpha_demo.xml 文件夹下 -->
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromAlpha="0.0"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    android:toAlpha="1.0" >
</alpha>

<!-- rotate_demo.xml 文件夹下 -->
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="2"
    android:repeatMode="reverse"
    android:toDegrees="360" >
</rotate>

<!-- scale_demo.xml 文件夹下 -->
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromXScale="20%"
    android:fromYScale="20%"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="2"
    android:repeatMode="reverse"
    android:toXScale="200%"
    android:toYScale="200%" >
</scale>

<!-- set_demo.xml 文件夹下   -->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >

    <rotate
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="2000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="2"
        android:repeatMode="reverse"
        android:toDegrees="360" >
    </rotate>

    <scale
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="2000"
        android:fromXScale="20%"
        android:fromYScale="20%"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="2"
        android:repeatMode="reverse"
        android:toXScale="200%"
        android:toYScale="200%" >
    </scale>

</set>

<!-- trans_demo.xml 文件夹下 -->
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:repeatCount="2"
    android:repeatMode="reverse"
    android:toXDelta="100%"
    android:toYDelta="100%" >
</translate>

2 . 在java代码中实现下列逻辑：

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class MainActivity extends Activity {
    private ImageView iv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv = (ImageView) findViewById(R.id.iv);
    }
    /**
     * 淡化动画
     * @param view
     */
     public void alpha(View view){
         Animation aa = AnimationUtils.loadAnimation(this, R.anim.alpha_demo);
         iv.startAnimation(aa);
     }

     /**
      * 平移动画
      * @param view
      */
     public void trans(View view){
         Animation ta = AnimationUtils.loadAnimation(this, R.anim.trans_demo);
         iv.startAnimation(ta);
     }
     /**
      * 缩放动画
      */
     public void scale(View view){
         Animation sa = AnimationUtils.loadAnimation(this, R.anim.scale_demo);
         iv.startAnimation(sa);
     }
     /**
      * 旋转动画
      */
     public void rotate(View view){
         Animation ra = AnimationUtils.loadAnimation(this, R.anim.rotate_demo);
         iv.startAnimation(ra);
     }
     /**
      * 旋转 + 放缩
      */
     public void set(View view){
         Animation set = AnimationUtils.loadAnimation(this, R.anim.set_demo);
         iv.startAnimation(set);
     }
}

使用java代码实现View动画的代码

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;

public class MainActivity extends Activity {
     private ImageView iv;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
         iv = (ImageView) findViewById(R.id.iv);
     }
     /**
      * 渐变动画
      * @param view
      */
     public void alpha(View view) {
         AlphaAnimation aa = new AlphaAnimation(0.0f, 1.0f);
         aa.setDuration(2000);
         aa.setRepeatCount(Animation.INFINITE);
         aa.setRepeatMode(Animation.REVERSE);
         iv.startAnimation(aa);
     }
     /**
      * 平移动画
      * @param view
      */
     public void trans(View view) {
         TranslateAnimation ta = new TranslateAnimation(
                 Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 1f,
                 Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 1f);
         ta.setDuration(2000);
         ta.setRepeatCount(Animation.INFINITE);
         ta.setRepeatMode(Animation.REVERSE);
         iv.startAnimation(ta);
     }
     /**
      * 缩放动画
      */
     public void scale(View view) {
         ScaleAnimation sa = new ScaleAnimation(0.2f, 2.0f, 0.2f, 2.0f,
                 Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
                 0.5f);
         sa.setDuration(2000);
         sa.setRepeatCount(Animation.INFINITE);
         sa.setRepeatMode(Animation.REVERSE);
         iv.startAnimation(sa);
     }

     /**
      * 旋转动画
      */
     public void rotate(View view) {
         RotateAnimation ra = new RotateAnimation(0, 360,
                 Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
                 0.5f);
         ra.setDuration(2000);
         ra.setRepeatCount(Animation.INFINITE);
         ra.setRepeatMode(Animation.REVERSE);
         iv.startAnimation(ra);
     }

     /**
      *  旋转 + 平移 + 放缩
      *  AnimationSet添加各个动画
      */
     public void set(View view) {
         AnimationSet set = new AnimationSet(false);
         RotateAnimation ra = new RotateAnimation(0, 360,
                 Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
                 0.5f);
         ra.setDuration(2000);
         ra.setRepeatCount(Animation.INFINITE);
         ra.setRepeatMode(Animation.REVERSE);
         ScaleAnimation sa = new ScaleAnimation(0.2f, 2.0f, 0.2f, 2.0f,
                 Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
                 0.5f);
         sa.setDuration(2000);
         sa.setRepeatCount(Animation.INFINITE);
         sa.setRepeatMode(Animation.REVERSE);
         TranslateAnimation ta = new TranslateAnimation(
                 Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 1f,
                 Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 1f);
         ta.setDuration(2000);
         ta.setRepeatCount(Animation.INFINITE);
         ta.setRepeatMode(Animation.REVERSE);
         set.addAnimation(ta);
         set.addAnimation(sa);
         set.addAnimation(ra);
         iv.startAnimation(set);
     }
}