ViewAnimation和DrawableAnimation

最新推荐文章于 2021-05-05 14:21:32 发布

转载最新推荐文章于 2021-05-05 14:21:32 发布 · 301 阅读

Android 同时被 2 个专栏收录

65 篇文章

订阅专栏

Android 动画

4 篇文章

订阅专栏

本文详细介绍了Android平台上的UI动画实现方式，包括Tween Animations和Frame Animations两种主要类型。通过实例展示了如何使用Java代码及XML配置文件来实现旋转、缩放、淡入淡出和移动等动画效果。

一、Animations介绍
Animations是一个实现android UI界面动画效果的API，Animations提供了一系列的动画效果，可以进行旋转、缩放、淡入淡出等，这些效果可以应用在绝大多数的控件中。

二、Animations分为两大类：
1.Tween Animations：该类Animations提供了旋转、移动、伸展和淡出等效果。Alpha——淡入淡出，Scale——缩放效果，Rotate——旋转，Translate——移动效果。

2.Frame Animations：这一类Animations可以创建一个Drawable序列，这些Drawable可以按照指定的时间间歇一个一个的显示。

三、使用Tween Animations的步骤：
1.创建一个AnimationSet对象（Animation子类）；
2.增加需要创建相应的Animation对象；
3.按照项目的需求，为Animation对象设置相应的数据；
4.将Animatin对象添加到AnimationSet对象当中；
5.使用控件对象开始执行AnimationSet。

Animation的四个子类： AlphaAnimation、TranslateAnimation、ScaleAnimation、RotateAnimation

具体实现

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        
         <Button
            android:id="@+id/rotateButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="旋转" />

         <Button
            android:id="@+id/scaleButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="缩放" />

         <Button
            android:id="@+id/alphaButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="淡入淡出" />

         <Button
            android:id="@+id/translateButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="移动" />

    </LinearLayout>

     <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

         <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@drawable/an" />

    </LinearLayout>

 </LinearLayout>

java代码

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
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;
import android.widget.Button;
import android.widget.ImageView;

public class Animation1Activity extends Activity {

    private Button rotateButton = null;
    private Button scaleButton = null;
    private Button alphaButton = null;
    private Button translateButton = null;
    private ImageView image = null;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    
        rotateButton = (Button)findViewById(R.id.rotateButton);
        scaleButton = (Button)findViewById(R.id.scaleButton);
        alphaButton = (Button)findViewById(R.id.alphaButton);
        translateButton = (Button)findViewById(R.id.translateButton);
        image = (ImageView)findViewById(R.id.image);

        rotateButton.setOnClickListener(new RotateButtonListener());
        scaleButton.setOnClickListener(new ScaleButtonListener());
        alphaButton.setOnClickListener(new AlphaButtonListener());
        translateButton.setOnClickListener(new TranslateButtonListener());
    }

    class AlphaButtonListener implements OnClickListener{

       public void onClick(View v) {

           //创建一个AnimationSet对象，参数为Boolean型，
           //true表示使用Animation的interpolator，false则是使用自己的
           AnimationSet animationSet = new AnimationSet(true);

           //创建一个AlphaAnimation对象，参数从完全的透明度，到完全的不透明
           AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);

           //设置动画执行的时间
           alphaAnimation.setDuration(500);

           //将alphaAnimation对象添加到AnimationSet当中
           animationSet.addAnimation(alphaAnimation);

           //使用ImageView的startAnimation方法执行动画
           image.startAnimation(animationSet);
       }
    }

    class RotateButtonListener implementsOnClickListener{

       public void onClick(View v) {

           AnimationSet animationSet = new AnimationSet(true);

           //参数1：从哪个旋转角度开始
           //参数2：转到什么角度
           //后4个参数用于设置围绕着旋转的圆的圆心在哪里
           //参数3：确定x轴坐标的类型，有ABSOLUT绝对坐标、RELATIVE_TO_SELF相对于自身坐标、RELATIVE_TO_PARENT相对于父控件的坐标
           //参数4：x轴的值，0.5f表明是以自身这个控件的一半长度为x轴
           //参数5：确定y轴坐标的类型
           //参数6：y轴的值，0.5f表明是以自身这个控件的一半长度为x轴

           RotateAnimation rotateAnimation = new RotateAnimation(0, 360,
                  Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
           rotateAnimation.setDuration(1000);
           animationSet.addAnimation(rotateAnimation);
           image.startAnimation(animationSet);
       }
    }

    class ScaleButtonListener implementsOnClickListener{

       public void onClick(View v) {

           AnimationSet animationSet = new AnimationSet(true);
           
           //参数1：x轴的初始值
           //参数2：x轴收缩后的值
           //参数3：y轴的初始值
           //参数4：y轴收缩后的值
           //参数5：确定x轴坐标的类型
           //参数6：x轴的值，0.5f表明是以自身这个控件的一半长度为x轴
           //参数7：确定y轴坐标的类型
           //参数8：y轴的值，0.5f表明是以自身这个控件的一半长度为x轴

           ScaleAnimation scaleAnimation = new ScaleAnimation(
                  0, 0.1f,0,0.1f,Animation.RELATIVE_TO_SELF,0.5f, Animation.RELATIVE_TO_SELF,0.5f);
           scaleAnimation.setDuration(1000);
           animationSet.addAnimation(scaleAnimation);
           image.startAnimation(animationSet);
       }
    }

    class TranslateButtonListener implementsOnClickListener{

       public void onClick(View v) {

           AnimationSet animationSet = new AnimationSet(true);

           //参数1～2：x轴的开始位置
           //参数3～4：y轴的开始位置
           //参数5～6：x轴的结束位置
           //参数7～8：x轴的结束位置

           TranslateAnimation translateAnimation = new TranslateAnimation(
                  Animation.RELATIVE_TO_SELF,0f, Animation.RELATIVE_TO_SELF,0.5f,
											Animation.RELATIVE_TO_SELF,0f, Animation.RELATIVE_TO_SELF,0.5f);
           translateAnimation.setDuration(1000);
           animationSet.addAnimation(translateAnimation);
           image.startAnimation(animationSet);
       }
    }
}

Tween Animations的通用方法
　　１、setDuration(long durationMills) 设置动画持续时间（单位：毫秒）
　　２、setFillAfter(Boolean fillAfter) 如果fillAfter的值为true,则动画执行后，控件将停留在执行结束的状态
　　３、setFillBefore(Boolean fillBefore) 如果fillBefore的值为true，则动画执行后，控件将回到动画执行之前的状态
　　４、setStartOffSet(long startOffSet) 设置动画执行之前的等待时间
　　５、setRepeatCount(int repeatCount) 设置动画重复执行的次数

在代码中使用Animations可以很方便的调试、运行，但是代码的可重用性差，重复代码多。同样可以在xml文件中配置Animations，这样做可维护性变高了，只不过不容易进行调试。
一、在xml中使用Animations步骤
1.在res文件夹下建立一个anim文件夹；
2.创建xml文件，并首先加入set标签，;在该标签当中加入rotate，alpha，scale或者translate标签；
3.在代码当中使用AnimationUtils当中装载xml文件，并生成Animation对象。
Animation animation = AnimationUtils.loadAnimation(Animation1Activity.this, R.anim.alpha);
// 启动动画
image.startAnimation(animation);

二、具体实现
1、 alpha.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator">
    <!-- fromAlpha和toAlpha是起始透明度和结束时透明度 -->
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:startOffset="500"
        android:duration="500"/>
</set>

2、 rotate.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator">
    
    <!--
        fromDegrees:开始的角度
        toDegrees：结束的角度，+表示是正的
        pivotX：用于设置旋转时的x轴坐标
        例
           1)当值为"50"，表示使用绝对位置定位
           2)当值为"50%"，表示使用相对于控件本身定位
           3)当值为"50%p"，表示使用相对于控件的父控件定位
        pivotY：用于设置旋转时的y轴坐标
      -->
    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="1000"/>
</set>

3、 scale.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator">
    
   <!--
       起始x轴坐标
           止x轴坐标
           始y轴坐标
           止y轴坐标
           轴的坐标
           轴的坐标
     -->
   <scale

       android:fromXScale="1.0"
       android:toXScale="0.0"
       android:fromYScale="1.0"
       android:toYScale="0.0"
       android:pivotX="50%"
       android:pivotY="50%"
       android:duration="1000"/>
</set>

4、 translate.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator">

    <!--
           始x轴坐标
           止x轴坐标
           始y轴坐标
           止y轴坐标
      -->
    <translate
        android:fromXDelta="0%"
        android:toXDelta="100%"
        android:fromYDelta="0%"
        android:toYDelta="100%"
        android:duration="2000"/>
</set

Java文件中调用的方法

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

public class Animation1Activity extends Activity {

    private Button rotateButton = null;
    private Button scaleButton = null;
    private Button alphaButton = null;
    private Button translateButton = null;
    private ImageView image = null;

    @Override
    public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.main);

       rotateButton = (Button) findViewById(R.id.rotateButton);
       scaleButton = (Button) findViewById(R.id.scaleButton);
       alphaButton = (Button) findViewById(R.id.alphaButton);
       translateButton = (Button) findViewById(R.id.translateButton);
       image = (ImageView) findViewById(R.id.image);

       rotateButton.setOnClickListener(new RotateButtonListener());
       scaleButton.setOnClickListener(new ScaleButtonListener());
       alphaButton.setOnClickListener(new AlphaButtonListener());
       translateButton.setOnClickListener(new TranslateButtonListener());
    }
    
    class AlphaButtonListener implements OnClickListener {

       public void onClick(View v) {

           // 使用AnimationUtils装载动画配置文件
           Animation animation = AnimationUtils.loadAnimation(Animation1Activity.this, R.anim.alpha);

           // 启动动画
           image.startAnimation(animation);
       }
    }

    class RotateButtonListener implements OnClickListener {

       public void onClick(View v) {
           Animation animation = AnimationUtils.loadAnimation( Animation1Activity.this, R.anim.rotate);
           image.startAnimation(animation);
       }
    }

    class ScaleButtonListener implements OnClickListener {

       public void onClick(View v) {
           Animation animation = AnimationUtils.loadAnimation(Animation1Activity.this, R.anim.scale);
           image.startAnimation(animation);
       }
    }

    class TranslateButtonListener implements OnClickListener {

       public void onClick(View v) {

           Animation animation = AnimationUtils.loadAnimation(Animation1Activity.this, R.anim.translate);
           image.startAnimation(animation);
       }
    }
}

AnimationSet的具体使用方法
1.AnimationSet是Animation的子类；
2.一个AnimationSet包含了一系列的Animation；
3.针对AnimationSet设置一些Animation的常见属性（如startOffset，duration等），可以被包含在AnimationSet当中的Animation集成；

例：一个AnimationSet中有两个Animation，效果叠加

第一种方法：
doubleani.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:shareInterpolator="true">

    <!-- fromAlpha和toAlpha是起始透明度和结束时透明度 -->
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:startOffset="500"
        android:duration="500"/>

    <translate
        android:fromXDelta="0%"
        android:toXDelta="100%"
        android:fromYDelta="0%"
        android:toYDelta="100%"
        android:duration="2000"/>
</set>

Java中调用方法

class DoubleButtonListener implements OnClickListener {

       public void onClick(View v) {

           // 使用AnimationUtils装载动画配置文件
           Animation animation = AnimationUtils.loadAnimation(Animation2Activity.this, R.anim. doubleani);

           // 启动动画
           image.startAnimation(animation);
       }
    }

第二种方法：

classDoubleButtonListener implements OnClickListener {

       public void onClick(View v) {

           AnimationSet animationSet = new AnimationSet(true);
           AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);
           RotateAnimation rotateAnimation = new RotateAnimation(0, 360,
                  Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
           rotateAnimation.setDuration(1000);
           animationSet.addAnimation(rotateAnimation);
           animationSet.addAnimation(alphaAnimation);
           image.startAnimation(animationSet);
       }
    }

Interpolator的具体使用方法

Interpolator定义了动画变化的速率，在Animations框架当中定义了一下几种Interpolator
AccelerateDecelerateInterpolator：在动画开始与结束的地方速率改变比较慢，在中间的时候速率快。
AccelerateInterpolator：在动画开始的地方速率改变比较慢，然后开始加速
CycleInterpolator：动画循环播放特定的次数，速率改变沿着正弦曲线
DecelerateInterpolator：在动画开始的地方速率改变比较慢，然后开始减速
LinearInterpolator：动画以均匀的速率改变

分为以下几种情况：
1、在set标签中
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"/>

2、如果在一个set标签中包含多个动画效果，如果想让这些动画效果共享一个Interpolator。
android:shareInterpolator="true"

3、如果不想共享一个interpolator，则设置android:shareInterpolator="false"，并且需要在每一个动画效果处添加interpolator。
<alpha
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:startOffset="500"
android:duration="500"/>

4、如果是在代码上设置共享一个interpolator，则可以在AnimationSet设置interpolator。
AnimationSet animationSet = newAnimationSet(true);
animationSet.setInterpolator(new AccelerateInterpolator());

5、如果不设置共享一个interpolator则可以在每一个Animation对象上面设置interpolator。
AnimationSet animationSet = newAnimationSet(false);
alphaAnimation.setInterpolator(new AccelerateInterpolator());
rotateAnimation.setInterpolator(new DecelerateInterpolator());

Frame Animations的使用方法
Frame Animations是一帧一帧的格式显示动画效果。类似于电影胶片拍摄的手法。

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    
    <LinearLayout
        android:orientation="horizontal"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content">

       <Button
           android:id="@+id/button"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="运动"/>

    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

       <ImageView
           android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"/>

    </LinearLayout>
</LinearLayout>

anim文件，放于drawable目录

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">

    <item android:drawable="@drawable/a_01" android:duration="50"/>
    <item android:drawable="@drawable/a_02" android:duration="50"/>
    <item android:drawable="@drawable/a_03" android:duration="50"/>
    <item android:drawable="@drawable/a_04" android:duration="50"/>
    <item android:drawable="@drawable/a_05" android:duration="50"/>
    <item android:drawable="@drawable/a_06" android:duration="50"/>
</animation-list>

Java文件

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;

public class AnimationsActivity extends Activity {

    private Button button = null;
    private ImageView imageView = null;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        button = (Button)findViewById(R.id.button);
        imageView = (ImageView)findViewById(R.id.image);

        button.setOnClickListener(newButtonListener());
    }

    class ButtonListener implementsOnClickListener{

       public void onClick(View v) {

           imageView.setBackgroundResource(R.anim.anim);
           AnimationDrawable animationDrawable = (AnimationDrawable)imageView.getBackground();
           animationDrawable.start();
       }
    }
}