Animation 动画介绍和实现

最新推荐文章于 2022-11-25 14:52:08 发布

ideal_Utopia

最新推荐文章于 2022-11-25 14:52:08 发布

阅读量2k

点赞数

分类专栏： Animation 文章标签： android 动画

本文链接：https://blog.csdn.net/ideal_Utopia/article/details/51864792

版权

Animation 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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″ 
/>
fromXDelta
toXDelta    为动画、结束起始时 X坐标上的位置   
fromYDelta
toYDelta    为动画、结束起始时 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度
pivotX
pivotY  为动画相对于物件的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>

ideal_Utopia

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Animation 动画介绍和实现

Android 平台提供了两类动画。第一类就是 Frame动画(AnimationDrawable)，帧动画。由一张张的图片连续显示呈现出来的动画。在drawable目录下创建一个配置文件。标签是animation-list。oneshot属性，如果为true，一发。 false，停不下来。使用的时候当做一个Drawable用就行了。注意如果是当src设置的，动画会自动播放如果是当
复制链接

扫一扫