你的位置:首页 > 操作系统

[操作系统]初识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 目录下,创建帧动画

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

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

         

<??><animation-list ="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为上述    iv.setBackgroundResource(R.drawable.rocket);    AnimationDrawable ad = (AnimationDrawable) iv.getBackground();    ad.start();

 

 

     属性动画:

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

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

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

     通过

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

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

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

     属性动画可以通过

     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();  }}

 

      

<??><objectAnimator ="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 的内容进行一系列的图形变换(包括平移、缩放、旋转、改变透明度)来实现动画效果。动画效果的定义可以采用

      使用

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

         2.  在anim 文件夹中创建

         3.  编辑

         4.  添加Java 逻辑代码,使用AnimationUtils 工具类加载

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

          duration 动画时长

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

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

          toAlpha 目标透明度

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

     渐变动画在代码中使用的是AlphaAnimation 类来定义,在

     使用编码方式同样可以实现view动画,直接创建相应的动画对象,然后添加相应的属。代使用编码方式实现view动画跟用

     使用

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

<!-- alpha_demo.--><??><alpha ="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.--><??><rotate ="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.--><??><scale ="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.--><??><set ="http://schemas.android.com/apk/res/android"  android:fillAfter="true" >  <rotate    ="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    ="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.--><??><translate ="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);   }}

       

        自此Android下的三种动画全部讲解完毕。