Android 基础之动画简介与实例教程

本文目录

1. 帧动画（Frame动画）

2. 补间动画（视图动画、Tween动画）

3. 属性动画（Property动画）

实例

Demo1.帧动画

Demo2.1补间动画之Translate（平移动画）

Demo2.2.补间动画之Scale（缩放动画）

Demo2.3.补间动画之Rotate（旋转动画）

Demo2.4.补间动画之Alpha（透明度动画）

Demo3.属性动画

分割线

1.帧动画（Frame动画）

指通过指定每一帧的图片和播放时间，有序的进行播放而形成动画效果。

2.补间动画（视图动画、Tween动画）

通过指定View的初末状态和变化时间、方式，对View的内容完成一系列的图形变换来实现动画效果。主要包括四种效果：Alpha（透明度动画）、Scale（缩放动画）、Translate（平移动画）和Rotate（旋转动画）。

注：补间动画仅仅是可视属性在显示层面的动画，属性的实质并未改动。

3.属性动画（Property动画）

通过不断的改变View的属性，不断的重绘而形成动画效果。
属性动画是在Android 3.0（API 11）后才提供的一种全新动画模式
针对帧动画和补间动画的缺点而产生的一种动画

帧动画和补间动画的缺点：

a. 作用对象局限：View

即补间动画只能够作用在视图View上，只可以对一个Button、TextView、甚至是LinearLayout、或者其它继承自View的组件进行动画操作，但无法对非View的对象进行动画操作

有些情况下的动画效果只是视图的某个属性 & 对象而不是整个视图；
如，现需要实现视图的颜色动态变化，那么就需要操作视图的颜色属性从而实现动画效果，而不是针对整个视图进行动画操作

b. 没有改变View的属性，只是改变视觉效果

补间动画只是改变了View的视觉效果，而不会真正去改变View的属性。
如，将屏幕左上角的按钮通过补间动画移动到屏幕的右下角,点击当前按钮位置（屏幕右下角）是没有效果的，因为实际上按钮还是停留在屏幕左上角，补间动画只是将这个按钮绘制到屏幕右下角，改变了视觉效果而已。

c. 动画效果单一

补间动画只能实现平移、旋转、缩放、透明度这些简单的动画需求
一旦遇到相对复杂的动画效果，即超出了上述4种动画效果，那么补间动画则无法实现。

实例：

Demo1.帧动画

方法1：在XML代码中设置

1.将动画资源（即每张图片资源）放到 drawable文件夹里
（关于动画资源的获取利用gif分解软件获取）

图片.png

2.在drawable文件夹下新建帧动画资源文件frame_animation.xml文件

<?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/a01" android:duration="100"/>
    <item android:drawable="@drawable/a02" android:duration="100"/>
    <item android:drawable="@drawable/a03" android:duration="100"/>
    <item android:drawable="@drawable/a04" android:duration="100"/>
    <item android:drawable="@drawable/a05" android:duration="100"/>
    <item android:drawable="@drawable/a06" android:duration="100"/>
    <item android:drawable="@drawable/a07" android:duration="100"/>
    <item android:drawable="@drawable/a08" android:duration="100"/>
    <item android:drawable="@drawable/a09" android:duration="100"/>
    <item android:drawable="@drawable/a10" android:duration="100"/>
    <item android:drawable="@drawable/a11" android:duration="100"/>
    <item android:drawable="@drawable/a12" android:duration="100"/>
    <item android:drawable="@drawable/a13" android:duration="100"/>
    <item android:drawable="@drawable/a14" android:duration="100"/>
    <item android:drawable="@drawable/a15" android:duration="100"/>
    <item android:drawable="@drawable/a16" android:duration="100"/>
    <item android:drawable="@drawable/a17" android:duration="100"/>
    <item android:drawable="@drawable/a18" android:duration="100"/>
    <item android:drawable="@drawable/a19" android:duration="100"/>
    <item android:drawable="@drawable/a20" android:duration="100"/>
    <item android:drawable="@drawable/a21" android:duration="100"/>

</animation-list>

3.在activity_main.xml布局文件中加入开始和结束动画按钮以及ImageView控件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.animation.MainActivity">

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

      <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="horizontal">

         <Button
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="开始动画"
             android:layout_weight="1"
             android:onClick="startanimation"/>

         <Button
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="结束动画"
             android:layout_weight="1"
             android:onClick="endanimation"/>

      </LinearLayout>

      <ImageView
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:id="@+id/iv"/>

   </LinearLayout>
</RelativeLayout>

4.在java文件中加入实现动画代码

public class MainActivity extends AppCompatActivity {

    private ImageView iv;
    private AnimationDrawable animationDrawable;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        iv = (ImageView) findViewById(R.id.iv);

        iv.setImageResource(R.drawable.frame_animation);
        animationDrawable = (AnimationDrawable) iv.getDrawable();
    }
    //开始播放动画
    public void startanimation(View view){
        animationDrawable.start();
    }
   //结束动画
    public void endanimation(View view){
        animationDrawable.stop();
    }
}

5.效果

帧动画.gif

方法2：在java代码中设置

public class MainActivity extends AppCompatActivity {

    private ImageView iv;
    private AnimationDrawable animationDrawable;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        iv = (ImageView) findViewById(R.id.iv);
    
        //获取动画资源
        animationDrawable = new AnimationDrawable();
        for (int i = 1; i <= 21; i++) {
            int id = getResources().getIdentifier("a" + format(i), "drawable", getPackageName());
            Drawable drawable = getResources().getDrawable(id);
            animationDrawable.addFrame(drawable, 100);
        }
        iv.setImageDrawable(animationDrawable);
    }

    //格式化数字，0~9转变为00~09
    public String format(int value) {
        String Str = String.valueOf(value);
        if (value < 10) {
            Str = "0" + Str;
        }
        return Str;
    }
    //开始动画
    public void startanimation(View view){
        animationDrawable.stop();
        animationDrawable.start();
    }
    //结束动画
    public void endanimation(View view){
        animationDrawable.stop();
    }
}

注：
函数format()用来格式化数字，变量i是从1到21，而资源文件的名称是从a01到a21，因此在获取资源时用
int id = getResources().getIdentifier("a" + format(i), "drawable", getPackageName());

动画效果同方法1

Demo2.1补间动画之Translate（平移动画）

方法1：在XML代码中设置

1.在res/anim文件夹下新建动画文件translate_animation.xml（没有anim文件夹的话自己手动新建一个）
2.具体动画实现代码：translate_animation.xml文件

 <?xml version="1.0" encoding="utf-8"?>
     <translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:startOffset ="1000"
    android:fillBefore = "true"
    android:fillAfter = "false"
    android:fillEnabled= "true"
    android:repeatMode= "restart"
    android:repeatCount = "0"

    android:fromXDelta="0"
    android:toXDelta="500"
    android:fromYDelta="0"
    android:toYDelta="500" />

注：采用<translate /> 标签表示是平移动画
4种动画公共属性：
android:duration="3000"：动画持续时间（ms），必须设置，动画才有效果
android:startOffset ="1000"：动画延迟开始时间（ms）
android:fillBefore = "true" ：动画播放完后，视图是否会停留在动画开始的状态，默认为true
android:fillAfter = "false"：动画播放完后，视图是否会停留在动画结束的状态，优先于fillBefore值，默认为false
android:fillEnabled= "true"：是否应用fillBefore值，对fillAfter值无影响，默认为true
android:repeatMode= "restart"：选择重复播放动画模式，restart代表正序重放，reverse代表倒序回放，默认为restart
android:repeatCount = "0": 重放次数（所以动画的播放次数=重放次数+1），为infinite时无限重复
平移动画特有属性：
android:fromXDelta="0" ：视图在水平方向x 移动的起始值
android:toXDelta="500" ：视图在水平方向x 移动的结束值
android:fromYDelta="0" ：视图在竖直方向y 移动的起始值
android:toYDelta="500"：视图在竖直方向y 移动的结束值

3.在activity_main.xml文件中加入布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.animation.MainActivity">
   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical">
      <Button
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="启动动画"
          android:onClick="starttranslateanimation"/>
      <TextView
          android:id="@+id/textview"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="helloworld"
          android:textSize="16dp"/>
   </LinearLayout>
</RelativeLayout>

4.在Java代码中创建Animation对象并播放动画

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    //平移动画
    public void starttranslateanimation(View view){
        // 1:创建需要设置动画的视图View
        TextView textView = (TextView) findViewById(R.id.textview);
        // 2:创建动画对象并传入设置的动画效果xml文件
        Animation translateAnimation = AnimationUtils.loadAnimation(this, R.anim.translate_animation);
        // 3:播放动画
        textView.startAnimation(translateAnimation);
    }
}

5.效果

平移动画

方法2：在java代码中设置

public class MainActivity extends AppCompatActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
   }
   //平移动画
   public void starttranslateanimation(View view){
       // 1:创建需要设置动画的视图View
       TextView textView = (TextView) findViewById(R.id.textview);

       // 2:创建平移动画的对象：平移动画对应的Animation子类为TranslateAnimation
       // 参数分别是：
       // 1. fromXDelta ：视图在水平方向x 移动的起始值
       // 2. toXDelta ：视图在水平方向x 移动的结束值
       // 3. fromYDelta ：视图在竖直方向y 移动的起始值
       // 4. toYDelta：视图在竖直方向y 移动的结束值
       Animation translateAnimation = new TranslateAnimation(0,500,0,500);

       // 设置动画时间
       translateAnimation.setDuration(3000);

       // 3:播放动画
       textView.startAnimation(translateAnimation);
   }
}

效果和方法1相同。

Demo2.2.补间动画之Scale（缩放动画）

方法1：在XML代码中设置

1.在res/anim文件夹下新建动画文件scale_animation.xml
2.具体动画实现代码：scale_animation.xml文件

<?xml version="1.0" encoding="utf-8"?>
   <scale xmlns:android="http://schemas.android.com/apk/res/android"
   android:duration="3000"
   android:startOffset ="1000"
   android:fillBefore = "true"
   android:fillAfter = "false"
   android:fillEnabled= "true"
   android:repeatMode= "restart"
   android:repeatCount = "0"

   android:fromXScale="0.0"
   android:toXScale="2"
   android:fromYScale="0.0"
   android:toYScale="2"
   android:pivotX="50%"
   android:pivotY="50%"/>

注：采用<scale/>标签表示是缩放动画
缩放动画特有属性
android:fromXScale="0.0" // 动画在水平方向X的起始缩放倍数,0.0:收缩到没有;1.0:正常无伸缩;小于1.0:收缩;值大于1.0:放大
android:toXScale="2" //动画在水平方向X的结束缩放倍数
android:fromYScale="0.0" //动画开始前在竖直方向Y的起始缩放倍数
android:toYScale="2"//动画在竖直方向Y的结束缩放倍数
android:pivotX="50%"// 缩放轴点的x坐标
android:pivotY="50%"// 缩放轴点的y坐标
说明：轴点 = 视图缩放的中心点，pivotX，pivotY可取值为数字，百分比，或者百分比p

设置为数字（如50）：轴点为```View```的左上角的原点在x方向和y方向加上50px的点。
在Java代码里对应参数是```Animation.ABSOLUTE```
设置为百分比（如50%）：轴点为```View```的左上角的原点在x方向加上自身宽度50%和y方向自身高度50%的点。
在Java代码里对应参数是```Animation.RELATIVE_TO_SELF```
设置为百分比p（如50%p）：轴点为```View```的左上角的原点在x方向加上父控件宽度50%和y方向父控件高度50%的点。
在Java代码里对应参数是```Animation.RELATIVE_TO_PARENT```
两个50%表示动画从自身中间开始

3.在activity_main.xml文件中加入布局

在前面布局的基础上加入缩放按钮Button
为了方便观察动画，我在TextView控件中加入属性android:layout_margin="100dp"，将textview的位置挪动一下

图片.png

<!--加入缩放动画按钮--> 
<Button
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="缩放动画"
     android:onClick="startscaleanimation"/>

4.在Java代码中创建Animation对象并播放动画

图片.png

//缩放动画
   public void startscaleanimation(View view){
       // 步骤1:创建 需要设置动画的 视图View
       TextView textView = (TextView) findViewById(R.id.textview);
       // 步骤2:创建 动画对象 并传入设置的动画效果xml文件
       Animation scaleAnimation = AnimationUtils.loadAnimation(this, R.anim.scale_animation);
       // 步骤3:播放动画
       textView.startAnimation(scaleAnimation);
   }

5.效果

缩放动画.gif

方法2：在java代码中设置

图片.png

//缩放动画
   public void startscaleanimation(View view) {
       // 步骤1:创建 需要设置动画的 视图View
       TextView textView = (TextView) findViewById(R.id.textview);

       //步骤2：创建缩放动画的对象
       Animation scaleAnimation = new ScaleAnimation(0, 2, 0, 2, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

       // 设置动画时间
       scaleAnimation.setDuration(3000);

       // 步骤3:播放动画
       textView.startAnimation(scaleAnimation);
   }

注：
步骤2中new ScaleAnimation(fromX,toX,fromY,toY,pivotXType,pivotXValue,pivotYType,pivotYValue)对象参数说明:
fromX ：动画在水平方向X的结束缩放倍数
toX ：动画在水平方向X的结束缩放倍数
fromY ：动画开始前在竖直方向Y的起始缩放倍数
toY：动画在竖直方向Y的结束缩放倍数
pivotXType:缩放轴点的x坐标的模式
pivotXValue:缩放轴点x坐标的相对值
pivotYType:缩放轴点的y坐标的模式
pivotYValue:缩放轴点y坐标的相对值

pivotXType,pivotYType有三种参数
Animation.ABSOLUTE:缩放轴点的x坐标 = View左上角的原点在x方向加上pivotXValue数值的点(y方向同理)
Animation.RELATIVE_TO_SELF:缩放轴点的x坐标 = View左上角的原点在x方向加上自身宽度乘上pivotXValue数值的值(y方向同理)
Animation.RELATIVE_TO_PARENT:缩放轴点的x坐标 = View左上角的原点在x方向加上父控件宽度乘上pivotXValue数值的值 (y方向同理)

动画效果同方法1

Demo2.3.补间动画之Rotate（旋转动画）

方法1：在XML代码中设置

1.在res/anim文件夹下新建动画文件rotate_animation.xml
2.具体动画实现代码：rotate_animation.xml文件

<?xml version="1.0" encoding="utf-8"?>
  <rotate xmlns:android="http://schemas.android.com/apk/res/android"
   android:duration="3000"
   android:startOffset ="1000"
   android:fillBefore = "true"
   android:fillAfter = "false"
   android:fillEnabled= "true"
   android:repeatMode= "restart"
   android:repeatCount = "0"

   android:fromDegrees="0"
   android:toDegrees="270"
   android:pivotX="50%"
   android:pivotY="0"/>

注：采用<rotate/>标签表示是旋转动画
旋转动画特有属性
android:fromDegrees="0"// 动画开始时视图的旋转角度(正数 = 顺时针，负数 = 逆时针)
android:toDegrees="270" // 动画结束时视图的旋转角度(正数 = 顺时针，负数 = 逆时针)
android:pivotX="50%"// 旋转轴点的x坐标
android:pivotY="0"// 旋转轴点的y坐标

3.在activity_main.xml文件中加入布局
加入旋转按钮Button

图片.png

<!--加入旋转动画按钮--> 
<Button
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="旋转动画"
     android:onClick="startrotateanimation"/>

4.在Java代码中创建Animation对象并播放动画

图片.png

//旋转动画
   public void startrotateanimation(View view){

       // 步骤1:创建需要设置动画的视图View
       TextView textView = (TextView) findViewById(R.id.textview);
       // 步骤2:创建动画对象并传入设置的动画效果xml文件
       Animation rotateAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate_animation);
       // 步骤3:播放动画
       textView.startAnimation(rotateAnimation);
   }

5.效果

旋转动画.gif

方法2：在java代码中设置

//旋转动画
   public void startrotateanimation(View view){

       // 步骤1:创建需要设置动画的视图View
       TextView textView = (TextView) findViewById(R.id.textview);
       // 步骤2：创建旋转动画的对象
       Animation rotateAnimation = new RotateAnimation(0,270,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
       // 设置动画时间
       rotateAnimation.setDuration(3000);
       // 步骤3:播放动画
       textView.startAnimation(rotateAnimation);
   }

注:
参数说明: new RotateAnimation(fromDegrees ,toDegrees ,pivotXType,pivotXValue,pivotYType,pivotYValue);
fromDegrees ：动画开始时视图的旋转角度(正数 = 顺时针，负数 = 逆时针)
toDegrees：动画结束时视图的旋转角度(正数 = 顺时针，负数 = 逆时针)
pivotXType：旋转轴点的x坐标的模式
pivotXValue：旋转轴点x坐标的相对值
pivotYType：旋转轴点的y坐标的模式
pivotYValue：旋转轴点y坐标的相对值

Demo2.4.补间动画之Alpha（透明度动画）

方法1：在XML代码中设置

1.在res/anim文件夹下新建动画文件alpha_animation.xml
2.具体动画实现代码：alpha_animation.xml文件

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
   android:duration="3000"
   android:startOffset ="1000"
   android:fillBefore = "true"
   android:fillAfter = "false"
   android:fillEnabled= "true"
   android:repeatMode= "restart"
   android:repeatCount = "0"

   android:fromAlpha="1.0"
   android:toAlpha="0.0" />

注：采用<alpha/> 标签表示是透明度动画
透明度动画特有属性
android:fromAlpha="1.0" // 动画开始时视图的透明度(取值范围: -1 ~ 1)
android:toAlpha="0.0"// 动画结束时视图的透明度(取值范围: -1 ~ 1)

3.在activity_main.xml文件中加入布局

加入透明度动画按钮Button

图片.png

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="透明度动画"
    android:onClick="startalphaanimation"/>

4.在Java代码中创建Animation对象并播放动画

图片.png

//透明度动画
   public void startalphaanimation(View view){
       // 步骤1:创建 需要设置动画的 视图View
       TextView textView = (TextView) findViewById(R.id.textview);
       // 步骤2:创建 动画对象 并传入设置的动画效果xml文件
       Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.alpha_animation);
       // 步骤3:播放动画
       textView.startAnimation(alphaAnimation);

   }

5.效果

透明度动画.gif

方法2：在java代码中设置

//透明度动画
   public void startalphaanimation(View view){
       // 步骤1:创建 需要设置动画的 视图View
       TextView textView = (TextView) findViewById(R.id.textview);
       // 步骤2:创建 动画对象 并传入设置的动画效果xml文件
       Animation alphaAnimation = new AlphaAnimation(1,0);
       // 设置动画时间
       alphaAnimation.setDuration(3000);
       // 步骤3:播放动画
       textView.startAnimation(alphaAnimation);

   }

注:
参数说明:new AlphaAnimation(fromAlpha,toAlpha);
fromAlpha:动画开始时视图的透明度(取值范围: -1 ~ 1)
toAlpha:动画结束时视图的透明度(取值范围: -1 ~ 1)

动画效果和方法1相同

Demo3.属性动画

后续更新......