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

2019-04-18 本文已影响23人天涯的尽头s风沙

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.属性动画

后续更新......

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

1.帧动画（Frame动画）

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

3.属性动画（Property动画）

a. 作用对象局限：View

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

c. 动画效果单一

实例：

Demo1.帧动画

方法1：在XML代码中设置

方法2：在java代码中设置

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

方法1：在XML代码中设置

方法2：在java代码中设置

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

方法1：在XML代码中设置

方法2：在java代码中设置

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

方法1：在XML代码中设置

方法2：在java代码中设置

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

方法1：在XML代码中设置

方法2：在java代码中设置

Demo3.属性动画

猜你喜欢

热点阅读