Animation 动画介绍和实现

来源:互联网 发布:svm算法步骤 编辑:程序博客网 时间:2024/06/05 19:46

Android 平台提供了两类动画。

  • 第一类就是 Frame动画(AnimationDrawable),

    • 帧动画。 由一张张的图片连续显示呈现出来的动画。
    • 在drawable目录下创建一个配置文件。标签是animation-list。
    • oneshot属性,如果为true,一发。 false,停不下来。
    • 使用的时候当做一个Drawable用就行了。
    • 注意
      • 如果是当src设置的,动画会自动播放
      • 如果是当background设置的,动画不会自动播放
    AnimationDrawable drawable = (AnimationDrawable)iv.getBackground();    drawable.start();
  • 二类是Tween动画(补间动画)

    • 就是对场景里的对象不断的进行图像变化来产生动画效果(旋转、平移、放缩和渐变),but只是做动画,真正的组件位置是没有发生变化的。
    • anim.setRepeatCount(Animation.INFINITE);
      //设置重复次数。如果0,带表不重复。如果为1,带表重复一次。如果为Animation.INFINITE,无限循环
    • anim.setRepeatMode(Animation.REVERSE);
      • Animation.REVERSE: 动画正反循环做
      • Animation.RESTART: 重新开始做。默认值
    • setFillAfter : 动画结束之后,停留在最后的位置。

下面就讲一下Tweene Animations。

主要类:

Animation —— 动画
AlphaAnimation —— 渐变透明度
RotateAnimation —— 画面旋转
ScaleAnimation —— 渐变尺寸缩放
TranslateAnimation —— 位置移动
AnimationSet —— 动画集

有了这些类,那么我们如何来实现动画效果呢?

以自定义View为例,该View很简单,画面上只有一个图片。 现在我们要对整个View分别实现各种Tween动画效果。

  • AlphaAnimation(渐变透明度)

    • 代码:
      <textarea cols="50" rows="15" name="code" class="java">//初始化     Animation alphaAnimation = new AlphaAnimation(0.1f, 1.0f); </textarea> 其中AlphaAnimation类第一个参数fromAlpha表示动画起始时的透明度, 第二个参数toAlpha表示动画结束时的透明度。 /*方法二:*/public void alpha(View view){    Animation anim = new AlphaAnimation(0, 1);    anim.setDuration(500);    anim.setRepeatCount(Animation.INFINITE);    anim.setRepeatMode(Animation.REVERSE);    animationView.startAnimation(anim); }
  • RotateAnimation(画面旋转)

    • 代码:
      <textarea cols="50" rows="15" name="code" class="java">    rotateAnimation.setDuration(1000);     this.startAnimation(rotateAnimation); </textarea> 其中RotateAnimation类第一个参数fromDegrees表示动画起始时的角度, 第二个参数toDegrees表示动画结束时的角度。 另外还可以设置伸缩模式pivotXType、pivotYType, 伸缩动画相对于x,y 坐标的开始位置pivotXValue、pivotYValue等。/*方法二:*/public void rotate(View view){    int width = animationView.getWidth();    int height = animationView.getHeight();    Animation anim = new RotateAnimation(0,90,width/2,height/2);    anim.setDuration(2000);    anim.setRepeatCount(Animation.INFINITE);    anim.setRepeatMode(Animation.REVERSE);    animationView.startAnimation(anim);}
  • ScaleAnimation(渐变尺寸缩放)

    • 代码:
      <textarea cols="50" rows="15" name="code" class="java">    //初始化     Animation scaleAnimation = new ScaleAnimation(0.1f, 1.0f,0.1f,1.0f);     //设置动画时间     scaleAnimation.setDuration(500);     this.startAnimation(scaleAnimation);</textarea> ScaleAnimation类中第一个参数fromX ,第二个参数toX:分别是动画起始、结束时X坐标上的伸缩尺寸。第三个参数fromY ,第四个参数toY:分别是动画起始、结束时Y坐标上的伸缩尺寸。另外还可以设置伸缩模式pivotXType、pivotYType, 伸缩动画相对于x,y 坐标的开始位置pivotXValue、pivotYValue等。/*方法二:*/public void scale(View view){    int width = animationView.getWidth();    int height = animationView.getHeight();    Animation anim = new ScaleAnimation(0.5f, 2, 1, 2,width/2, height/2);    anim.setDuration(2000);    anim.setRepeatCount(Animation.INFINITE);    anim.setRepeatMode(Animation.REVERSE);    animationView.startAnimation(anim);}
  • TranslateAnimation(位置移动)

    • 代码:

      <textarea cols="50" rows="15" name="code" class="java">            //初始化            Animation translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);             //设置动画时间                translateAnimation.setDuration(1000);            this.startAnimation(translateAnimation);    </textarea> TranslateAnimation类第一个参数fromXDelta ,第二个参数toXDelta:分别是动画起始、结束时X坐标。第三个参数fromYDelta ,第四个参数toYDelta:分别是动画起始、结束时Y坐标。

参数详细说明:

表二

XML节点 功能说明

  • alpha 渐变透明度动画效果

    <alpha    android:fromAlpha=”0.1″    android:toAlpha=”1.0″    android:duration=”3000″ />fromAlpha   属性为动画起始时透明度0.0表示完全透明1.0表示完全不透明以上值取0.0-1.0之间的float数据类型的数字toAlpha 属性为动画结束时透明度
  • scale 渐变尺寸伸缩动画效果

    <scale    android:interpolator= “@android:anim/accelerate_decelerate_interpolator”    android:fromXScale=”0.0″    android:toXScale=”1.4″    android:fromYScale=”0.0″    android:toYScale=”1.4″    android:pivotX=”50%”    android:pivotY=”50%”    android:fillAfter=”false”    android:startOffset=“700”    android:duration=”700″    android:repeatCount=”10″ />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 画面转换位置移动动画效果

    <translate    android:fromXDelta=”30″    android:toXDelta=”-80″    android:fromYDelta=”30″    android:toYDelta=”300″    android:duration=”2000″ />fromXDeltatoXDelta    为动画、结束起始时 X坐标上的位置   fromYDeltatoYDelta    为动画、结束起始时 Y坐标上的位置   
  • rotate 画面转移旋转动画效果

    <rotate                                 android:interpolator=”@android:anim/accelerate_decelerate_interpolator”    android:fromDegrees=”0″    android:toDegrees=”+350″    android:pivotX=”50%”    android:pivotY=”50%”    android:duration=”3000″ />fromDegrees 为动画起始时物件的角度 说明当角度为负数——表示逆时针旋转当角度为正数——表示顺时针旋转(负数from——to正数:顺时针旋转)(负数from——to负数:逆时针旋转)(正数from——to正数:顺时针旋转)(正数from——to负数:逆时针旋转)toDegrees   属性为动画结束时物件旋转的角度 可以大于360度pivotXpivotY  为动画相对于物件的X、Y坐标的开始位  说明:以上两个属性值 从0%-100%中取值50%为物件的X或Y方向坐标上的中点位置

以上都是单独的使用某个动画,那么如何让多个动画同时生效呢?

答案是 AnimationSet。

初看整个类名,还以为只是用来存放 Animation的一个Set, 细看才发现,该类也是继承自 Animation的。

下面我们实现一个动画,该动画会让图片移动的同时,图片透明度渐变,直接上代码:

<textarea cols="50" rows="15" name="code" class="java">     //初始化 Translate动画     translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);     //初始化 Alpha动画     alphaAnimation = new AlphaAnimation(0.1f, 1.0f);     //动画集 AnimationSet set = new AnimationSet(true);    set.addAnimation(translateAnimation);    set.addAnimation(alphaAnimation);     //设置动画时间 (作用到每个动画)     set.setDuration(1000);     this.startAnimation(set);</textarea> /*方法二:*/public void set(View view)    {        AnimationSet all = new AnimationSet(false);        AnimationSet set = new AnimationSet(false);        //透明度动画        Animation anim = new AlphaAnimation(0, 1);        anim.setDuration(500);        anim.setRepeatCount(Animation.INFINITE);        anim.setRepeatMode(Animation.REVERSE);        set.addAnimation(anim);        //缩放动画        int width = animationView.getWidth();        int height = animationView.getHeight();        anim = new ScaleAnimation(0.5f, 2, 1, 2,width/2, height/2);        anim.setDuration(2000);        anim.setRepeatCount(Animation.INFINITE);        anim.setRepeatMode(Animation.REVERSE);        set.addAnimation(anim);        //旋转动画        anim = new RotateAnimation(0,90,width/2,height/2);        anim.setDuration(2000);        anim.setRepeatCount(Animation.INFINITE);        anim.setRepeatMode(Animation.REVERSE);        set.addAnimation(anim);        //位移动画        anim = new TranslateAnimation(-100, 0, 0, 0);        anim.setDuration(2000);        anim.setRepeatCount(Animation.INFINITE);        anim.setRepeatMode(Animation.REVERSE);        set.addAnimation(anim);        set.setFillAfter(true);        TranslateAnimation trans = new TranslateAnimation(0, 0, 0 , 200);        trans.setRepeatCount(2);        trans.setRepeatMode(Animation.REVERSE);        trans.setFillBefore(true);        all.setRepeatCount(0);        all.addAnimation(trans);        all.addAnimation(set);        animationView.startAnimation(all);    }

是不是觉得很简单呢?

  • 附上整个View类的代码吧。

    <textarea cols="50" rows="15" name="code" class="java">    package com.yfz.view; import com.yfz.R;     import android.content.Context;     import android.graphics.Canvas;     import android.graphics.drawable.BitmapDrawable;     import android.util.Log;     import android.view.KeyEvent;     import android.view.View;     import android.view.animation.AlphaAnimation;     import android.view.animation.Animation;     import android.view.animation.AnimationSet;     import android.view.animation.RotateAnimation;     import android.view.animation.ScaleAnimation;     import android.view.animation.TranslateAnimation;     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);         }         @Override         protected void onDraw(Canvas canvas)         {             super.onDraw(canvas);             Log.e(&quot;Tween&quot;, &quot;onDraw&quot;);             //加载一个图片             canvas.drawBitmap(                ((BitmapDrawable)getResources().getDrawable(R.drawable.gallery_photo_5)                ).getBitmap(), 0, 0, null);        }         @Override public boolean onKeyDown(int keyCode, KeyEvent event)         {             Log.e(&quot;Tween&quot;, &quot;onKeyDown&quot);             return true;         }         @Override public boolean onKeyUp(int keyCode, KeyEvent event)         {             Log.e(&quot;Tween&quot;, &quot;onKeyDown&quot);            switch (keyCode)             {                 case KeyEvent.KEYCODE_DPAD_UP:                    Log.e(&quot;Tween&quot;, &quot;onKeyDown - KEYCODE_DPAD_UP&quot);                     alphaAnimation = new AlphaAnimation(0.1f, 1.0f);                     //设置动画时间                     alphaAnimation.setDuration(3000);                     this.startAnimation(alphaAnimation);                     break;                 case KeyEvent.KEYCODE_DPAD_DOWN:                     Log.e(&quot;Tween&quot, &quot;onKeyDown - KEYCODE_DPAD_DOWN&quot);                     rotateAnimation = new RotateAnimation(0f, 360f);                     rotateAnimation.setDuration(1000);                     this.startAnimation(rotateAnimation);                         break;                 case KeyEvent.KEYCODE_DPAD_LEFT:                     Log.e(&quot;Tween&quot, &quot;onKeyDown - KEYCODE_DPAD_LEFT&quot);                     //初始化                     scaleAnimation = new ScaleAnimation(0.1f, 1.0f,0.1f,1.0f);                     //设置动画时间                     scaleAnimation.setDuration(500);                     this.startAnimation(scaleAnimation);                        break;                 case KeyEvent.KEYCODE_DPAD_RIGHT:                     Log.e(&quot;Tween&quot;, &quot;onKeyDown - KEYCODE_DPAD_RIGHT&quot;);                     //初始化                     translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);                     //设置动画时间                     translateAnimation.setDuration(1000);                     this.startAnimation(translateAnimation);                         break;                 case KeyEvent.KEYCODE_DPAD_CENTER:                     Log.e(&quot;Tween&quot;, &quot;onKeyDown - KEYCODE_DPAD_CENTER&quot;);                    //初始化 Translate动画                     translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);                     //初始化 Alpha动画                     alphaAnimation = new AlphaAnimation(0.1f, 1.0f);                     //动画集 AnimationSet set = new AnimationSet(true);                     set.addAnimation(translateAnimation);                     set.addAnimation(alphaAnimation);                     //设置动画时间 (作用到每个动画)                     set.setDuration(1000); this.startAnimation(set);                         break;                 default:                         break;             }             return true;         }     } </textarea> 

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

  • 调用该View的代码:

    <textarea cols="50" rows="15" name="code" class="java">     TweenAnim anim = new TweenAnim(Lesson_11.this);     anim.setFocusable(true); setContentView(anim);</textarea> 



以下代码非原创,转自“幻影浪子”

通过Java代码,实现了4中不同的Tween动画,在Android中可以完全通过 XML文件来实现动画。这种方式可能更加简洁、清晰,也更利于重用。

下面我们分别对这几种动画改用xml来实现。

  • 首先是AlphaAnimation。

    • alpha_anim.xml:

      <textarea cols="50" rows="15" name="code" class="xhtml">    &lt;?xml version=&quot;1.0&quot;     encoding=&quot;    utf-8&quot;?&gt;     &lt;set xmlns:android=&quot;    http://schemas.android.com/apk/res/android&quot;&gt;     &lt;alpha android:fromAlpha=&quot;0.1&quot;     android:toAlpha=&quot;1.0&quot;     android:duration=&quot;2000&quot;     /&gt; &lt;/    set&gt; </textarea> 
  • RotateAnimation

    • rotate_anim.xml:

      <textarea cols="50" rows="15" name="code" class="xhtml">&lt;    ?xml version=&quot;1.0&quot;     encoding=&quot;utf-8&quot;?&gt;     &lt;set xmlns:android=&quot;    http://schemas.android.com/apk/res/android&quot;&gt;    &lt;rotate android:interpolator=&quot;    @android:anim/accelerate_decelerate_interpolator&quot;     android:fromDegrees=&quot;0&quot;     android:toDegrees=&quot;360&quot;     android:pivotX=&quot;50%&quot;     android:pivotY=&quot;50%&quot;     android:duration=&quot;500&quot;     /&gt; &lt;/set&gt; </textarea> 
  • ScaleAnimation

    • scale_anim.xml:

      <textarea cols="50" rows="15" name="code" class="xhtml">&lt;    ?xml version=&quot;1.0&quot;     encoding=&quot;utf-8&quot;    ?&gt; &lt;set xmlns:android=&quot;    http://schemas.android.com/apk/res/android&quot;&gt;    &lt;scale android:interpolator=&quot;    @android:anim/accelerate_decelerate_interpolator&quot;     android:fromXScale=&quot;0.0&quot;     android:toXScale=&quot;1.0&quot;     android:fromYScale=&quot;0.0&quot;     android:toYScale=&quot;1.0&quot;     android:pivotX=&quot;50%&quot;     android:pivotY=&quot;50%&quot;     android:fillAfter=&quot;false&quot;     android:duration=&quot;500&quot;     /&gt;   &lt;/set&gt;</textarea> 
  • TranslateAnimation

    • translate_anim.xml:

      <textarea cols="50" rows="15" name="code" class="xhtml">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt; &lt;set xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt; &lt;translate android:fromXDelta=&quot;10&quot; android:toXDelta=&quot;100&quot; android:fromYDelta=&quot;10&quot; android:toYDelta=&quot;100&quot; /&gt; &lt;/set&gt; </textarea>

布局文件都已经写完,那么如何来使用这些文件呢?

  • 使用AnimationUtils类。 通过该类中 loadAnimation 方法来加载这些布局文件。
    如:

    <textarea cols="50" rows="15" name="code" class="java">    rotateAnimation =     AnimationUtils.loadAnimation(    this.getContext(), R.anim.rotate_anim);</textarea>  
  • 这次View类的代码如下:

    <textarea cols="50" rows="15" name="code" class="java">package com.yfz.view; import com.yfz.R; import android.content.Context; import android.graphics.Canvas; import android.graphics.drawable.BitmapDrawable; import android.util.Log; import android.view.KeyEvent; 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; 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);     }     @Override protected void onDraw(Canvas canvas)     {         super.onDraw(canvas);         Log.e(&quot;Tween&quot;, &quot;onDraw&quot;);         //加载一个图片         canvas.drawBitmap(        ((BitmapDrawable)getResources().getDrawable(R.drawable.gallery_photo_5)        ).getBitmap(), 0, 0, null);     }     @Override     public boolean onKeyDown(int keyCode, KeyEvent event)     {         Log.e(&quot;Tween&quot;, &quot;onKeyDown&quot;);         return true;     }     @Override     public boolean onKeyUp(int keyCode, KeyEvent event)     {         Log.e(&quot;Tween&quot;, &quot;onKeyDown&quot;);         switch (keyCode)         {             case KeyEvent.KEYCODE_DPAD_UP:                 Log.e(&quot;Tween&quot;, &quot;onKeyDown - KEYCODE_DPAD_UP&quot;);                 alphaAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.alpha_anim);                 this.startAnimation(alphaAnimation);                     break;             case KeyEvent.KEYCODE_DPAD_DOWN:                 Log.e(&quot;Tween&quot;, &quot;onKeyDown - KEYCODE_DPAD_DOWN&quot;);                 rotateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.rotate_anim);                 this.startAnimation(rotateAnimation);                     break;             case KeyEvent.KEYCODE_DPAD_LEFT:                 Log.e(&quot;Tween&quot;, &quot;onKeyDown - KEYCODE_DPAD_LEFT&quot;);                 scaleAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.scale_anim);                 this.startAnimation(scaleAnimation);                     break;             case KeyEvent.KEYCODE_DPAD_RIGHT:                 Log.e(&quot;Tween&quot;, &quot;onKeyDown - KEYCODE_DPAD_RIGHT&quot;);                 translateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.translate_anim);                 this.startAnimation(translateAnimation);                     break;             case KeyEvent.KEYCODE_DPAD_CENTER:                 Log.e(&quot;Tween&quot;, &quot;onKeyDown - KEYCODE_DPAD_CENTER&quot;);                 //初始化 Translate动画                 translateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.translate_anim);                 //初始化 Alpha动画                 alphaAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.alpha_anim);                 //动画集                 AnimationSet set = new AnimationSet(true); set.addAnimation(translateAnimation);                 set.addAnimation(alphaAnimation);                 //设置动画时间 (作用到每个动画)                 set.setDuration(1000);                 this.startAnimation(set);                     break;             default: break;         }         return true;     } } </textarea> 
0 0
原创粉丝点击