Android--Animation动画的基本使用与介绍

最新推荐文章于 2024-05-15 01:31:15 发布

Amandu1995

最新推荐文章于 2024-05-15 01:31:15 发布

阅读量1.9k

点赞数 1

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

本文链接：https://blog.csdn.net/Amanduzhuojiang/article/details/77877900

版权

android 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

一、Animation动画的基本介绍

Animation，是一个可以实现Android UI界面动画的效果，同时，Animation也提供了一系列的动画效果，其中分别有：透明度动画、收缩动画、位移动画、旋转动画。这些动画效果绝大多数可以运用在控件中。

二、Animation动画的类型

Android中Animation动画的类型分为四部份类型组成：

1、Alpha——渐变透明度动画效果

2、Scale——渐变收缩动画效果

3、Translate——画面位移动画效果

4、Rotate——画面旋转动画效果

三、Animation动画的模式

Android中Animation动画的模式分为两种：

1、tweened animation(渐变动画),其中分别是Alpha和Scale

2、frame by frame(画面转换动画)，其中分别是Translate和Rotate

四、Animation动画的两种格式

1、xml文件中定义动画

2、JavaCode中定义动画

说到Animition动画的两种格式，无非就是写法了，在日常开发中，一般写法有xml定义动画和Javacode定义动画，但是大多数人可能比较喜欢xml定义，因为xml定义动画整理起来比较方便和规范，而用Javacode编写虽然也能实现和xml定义动画一模一样的效果，但是用JavaCode去定义动画只能增加代码的复杂性。在本文中，我们暂时先介绍xml定义动画的基本使用，有关javacode定义动画的使用，下次有时间再给大家讲解一下。

五、如何在xml文件中定义动画

步骤如下

1、新建Android项目

2、在res目录中新建anim文件夹

3、在anim文件夹中新建一个my_animation.xml文件

4、在my_animation.xml文件中编写动画代码

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <alpha />
    <scale />
    <translate />
    <rotate />
</set>

六、Aimation动画的解析--XML

1、alpha--渐变透明度动画

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="2000"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"></alpha>
    <!--
        alpha透明度渐变动画效果

        浮点数值:
        fromAlpha:属性为动画开始时的透明度
        toAlpha:属性为动画结束时的透明度
        说明：
        0.0表示完全透明
        1.0表示完全不透明
        以上可以取值为0.0-1.0之间float类型的数字

        长整数值：
        duration:属性为动画的持续时间
    -->
</set>

在这里，我设置的是fromAlpha0.0到toAlpha1.0，由此可见透明动画从开始的完全透明转为结束时的完全不透明。

2、scale--渐变收缩动画

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="2000"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />
    <!--
       scale尺寸收缩动画效果
       
       浮点数值:
       fromXScale:属性为动画起始时 X坐标上的伸缩尺寸
       toXScale:属性为动画结束时 X坐标上的伸缩尺寸
       fromYScale:属性为动画起始时 Y坐标上的伸缩尺寸
       toXScale:属性为动画结束时 Y坐标上的伸缩尺寸

       说明：
       0.0表示收缩到没有
       1.0表示正常无伸缩
       值小于1.0表示收缩
       值大于1.0表示放大

        pivotX     属性为动画相对于物件的X坐标的开始位置
        pivotY     属性为动画相对于物件的Y坐标的开始位置

       长整数值：
       duration:属性为动画的持续时间,时间是以毫秒为单位，即1000毫秒等于1秒
   -->

</set>

我这里设置了fromXScale起点坐标x为0.0和fromYScale起点坐标y为0.0，也就是说首先动画是从收缩到没有的，看不见的一个状态。然后我再通过设置了toXScale1.0结束时x坐标和toYScale1.0结束时y坐标，也就是说最终结束时候x坐标和y坐标分别放大了从原来的没有到有而已。那如果我想方法到原来图片的2倍怎么办呢？其实很容易，只要修改toXScale和toYScale各自为2.0就可以了。

3、translate--画面位移动画

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="2000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="500"
        android:toYDelta="-350">
    </translate>

    <!--
      translate画面位移动画效果

       浮点数值:
       fromXDelta:属性为动画开始时，x坐标上的位置
       toXDelta:属性为动画结束时，x坐标上的位置
       fromYDelta:属性为动画开始时，y坐标上的位置
       toYDelta:属性为动画结束时，y坐标上的位置

       长整数值：
       duration:属性为动画的持续时间,时间是以毫秒为单位，即1000毫秒等于1秒
   -->
</set>

由此可见，toXDelta等于500表示向右平移500px，而toYDelta等于-350，表示向上平移350px。整体平移动画效果看起来就是从原始位置慢慢平移到右上角位置。

4、rotate--画面旋转动画

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="3000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="+360">
    </rotate>
    <!--
     rotate画面旋转动画效果

     浮点数值:
     fromDegrees:属性为动画起始时物件的角度
     toDegrees:属性为动画结束时物件的角度，在这里我设置了+360，表示根据物件旋转了一圈
    
     说明：
     当角度为正数表示顺时针旋转
     当角度为负数表示逆时针旋转

      pivotX     属性为动画相对于物件的X坐标的开始位置
      pivotY     属性为动画相对于物件的Y坐标的开始位置
        
     长整数值：
     duration:属性为动画的持续时间,时间是以毫秒为单位，即1000毫秒等于1秒
 -->

</set>

由于我这里设置了formDegress为0表示物件开始旋转角度为0，toDegress为+360表示物件结束时旋转角度为360度，结合起来也就是说从一个0角度的物件旋转到360一圈后的物件。

七、如何在Java代码中加载我们解析好的xml动画文件

1、创建动画加载构造器

//第一个参数Context为程序的上下文    
//第二个参数id为动画XML文件的引用
//例子：
myAnimation= AnimationUtils.loadAnimation(this,R.anim.my_anim);
//使用AnimationUtils类的静态方法loadAnimation()来加载XML中的动画XML文件

具体代码如下：

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    private Animation myAnimation;
    private Button bt_alpha;
    private Button bt_scale;
    private Button bt_translate;
    private Button bt_rotate;
    private ImageView animation_iv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        bt_alpha= (Button) this.findViewById(R.id.bt_alpha);
        bt_scale= (Button) this.findViewById(R.id.bt_scale);
        bt_translate= (Button) this.findViewById(R.id.bt_translate);
        bt_rotate= (Button) this.findViewById(R.id.bt_rotate);
        animation_iv= (ImageView) this.findViewById(R.id.animation_iv);
        bt_alpha.setOnClickListener(this);
        bt_scale.setOnClickListener(this);
        bt_translate.setOnClickListener(this);
        bt_rotate.setOnClickListener(this);
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.bt_alpha:
                //加载透明度动画并且通过图片控件去启动动画
                myAnimation= AnimationUtils.loadAnimation(MainActivity.this,R.anim.alpha_animation);
                animation_iv.startAnimation(myAnimation);
                break;
            case R.id.bt_scale:
                //加载收缩动画并且通过图片控件去启动动画
                myAnimation= AnimationUtils.loadAnimation(MainActivity.this,R.anim.scale);
                animation_iv.startAnimation(myAnimation);
                break;
            case R.id.bt_translate:
                //加载位移动画并且通过图片控件去启动动画
                myAnimation= AnimationUtils.loadAnimation(MainActivity.this,R.anim.translate);
                //setFillAfter(true)表示执行位移动画结束后，控件将停留在执行结束的状态
                myAnimation.setFillAfter(true);
                animation_iv.startAnimation(myAnimation);
                break;
            case R.id.bt_rotate:
                //加载旋转动画并且通过图片控件去启动动画
                myAnimation= AnimationUtils.loadAnimation(MainActivity.this,R.anim.rotate);
                animation_iv.startAnimation(myAnimation);
                break;
        }
    }
}

在这里我分别创建了四个按钮点击事件去加载4个不同的动画效果。

activity_main布局文件如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#FFFFFF"
    tools:context="com.soft0754.animation.MainActivity">

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

        <Button
            android:id="@+id/bt_alpha"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="透明动画" />

        <Button
            android:id="@+id/bt_scale"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="收缩动画" />

        <Button
            android:id="@+id/bt_translate"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="位移动画" />

        <Button
            android:id="@+id/bt_rotate"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="旋转动画" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <ImageView
            android:id="@+id/animation_iv"
            android:src="@drawable/pc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
</LinearLayout>

布局文件中没什么的就是只有4个按钮和我们一张要展示的动画图片对象，好了下面我们一起看看运行后的效果图。

八、Animation其他常用的方法

1、setFillAfter(boolean fillAfter)

如果fillAfter的值为true，则表示动画执行后，控件停留在执行结束时候的状态。

2、setFillBefore(boolean fillBefore)

如果fillAfter的值为true，则表示动画执行后，控件将回到动画执行之前的状态。

3、 setStartOffset(long startOffset)

设置动画执行之前的等待时间。

4、setRepeatCount(int repeatCount)

设置动画的重复播放次数。

5、setRepeatMode(int repeatMode)

设置动画的重复播放的模式,在这里分别有两种模式，一种是RESTART表示重新开始重复执行,另一种是REVERSE表示反向执行。

不过这里需要注意的是：重复播放次数必须和重复播放模式加在一起才能起到作用。

当然了，这些常用方法你也可以定义在xml文件中，例如我在xml定义一个旋转动画为360度，重复2次并且播放模式为重新开始的物件：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="3000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatMode="restart"
        android:repeatCount="2"
        android:toDegrees="+360">
    </rotate>
</set>

效果如下：

九、Animation--list逐帧动画的基本介绍
一说起Animationlist增动画的实现，现在越来越多手机App在启动页面中都有一个加载动画效果，类似于美团，饿了么等等，动画效果非常好看，而这个加载动画效果可以采用Animation-list逐帧动画去实现，那么如何实现呢，现在让我们来一起学习吧！

首先我们先看看效果图：

大家有没有发现，所谓逐帧动画就是一张张图片合并在一起，让他实现动态旋转的这样一个过程，我这里分别准备了12张图片资源，如下图：

其实这12张我是从网上下载1张过来的而已，也就是上图中的第一张是原图的，然后我通过ps去旋转它，由于旋转了1圈，我这里12张图片资源，所以每张图片我通过ps转换的角度就是30度。当然了，以后如果需要逐帧动画最好的让公司美工妹子给你准备吧，细心的你其实应该发现了图片旋转的时候看起来不是效果很好，哈哈，其实是的，那可能是因为图片在ps处理旋转后保存的中心点定位不准的原因。所以我们看起来效果并不是很好。下面让我们一起来看看逐帧动画是如何实现的。

十、Animation--list逐帧动画的基本实现

1、准备好图片资源，这里我采用的是12张图片

2、在res-drawable目录下新建my_list.xml文件,

这里需要注意的是Animation--list逐帧动画资源是放在drawable目录下的，而不是anim目录下的。

3、在my_list.xml文件里面编写逐帧动画代码,代码如下：

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <!--其中oneshot代表着是否只展示一遍，设置为false会不停的循环播放动画
        drawable表示每一个逐帧动画的图片资源，我这里采用一共有12帧
        duration表示每一帧执行的时间
    -->
    <item
        android:drawable="@drawable/list_1"
        android:duration="50">
    </item>
    <item
        android:drawable="@drawable/list_2"
        android:duration="50">
    </item>
    <item
        android:drawable="@drawable/list_3"
        android:duration="50">
    </item>
    <item
        android:drawable="@drawable/list_4"
        android:duration="50">
    </item>
    <item
        android:drawable="@drawable/list_5"
        android:duration="50">
    </item>
    <item
        android:drawable="@drawable/list_6"
        android:duration="50">
    </item>
    <item
        android:drawable="@drawable/list_7"
        android:duration="50">
    </item>
    <item
        android:drawable="@drawable/list_8"
        android:duration="50">
    </item>
    <item
        android:drawable="@drawable/list_9"
        android:duration="50">
    </item>
    <item
        android:drawable="@drawable/list_10"
        android:duration="50">
    </item>
    <item
        android:drawable="@drawable/list_11"
        android:duration="50">
    </item>
    <item
        android:drawable="@drawable/list_12"
        android:duration="50">
    </item>
</animation-list>

这里逐帧动画xml代码已经定义好了，下面让我们一起来看看怎么去启动或者停止我们这个定义好的my_list.xml逐帧动画。

4、启动或停止逐帧动画

import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.Animation;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    private Button bt_list;
    private AnimationDrawable animationDrawable;
    private ImageView animation_iv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }


    private void initView() {
        bt_list= (Button) this.findViewById(R.id.bt_list);
        animation_iv= (ImageView) this.findViewById(R.id.animation_iv);
        bt_list.setOnClickListener(this);

        //设置图片控件一开始应用的是我们的逐帧动画资源
        animation_iv.setImageResource(R.drawable.my_list);
        //给逐帧动画资源赋值
        animationDrawable = (AnimationDrawable) animation_iv.getDrawable();
        //先设置动画一开始进来是停止的，这里默认是启动的
        animationDrawable.stop();
    }


    @Override
    public void onClick(View v) {
        switch (v.getId()){           
            case R.id.bt_list:
                //判断是否逐帧动画是否正在运行，如果正在运行的话我们点击按钮时候让它停止，否则启动逐帧动画
                if (animationDrawable.isRunning()) {
                    animationDrawable.stop();
                }else {
                    animationDrawable.start(); //启动逐帧动画
                }
                break;
        }
    }
}

有关于Android中的动画其实还有很多，由于时间关系未能给大家一一讲解，其他动画当中例如还有集合动画，抛物线动画等等，以后有机会的话再给大家讲解，此致！此文章到此结束！希望对大家在日常开发当中有所帮助！

Amandu1995

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Android--Animation动画的基本使用与介绍

一、Animation动画的基本介绍Animation，是一个可以实现Android UI界面动画的效果，同时，Animation也提供了一系列的动画效果，其中分别有：透明度动画、收缩动画、位移动画、旋转动画。这些动画效果绝大多数可以运用在控件中。二、Animation动画的类型Android中Animation动画的类型分为四部份类型组成：1、Alpha——渐变透明度动画
复制链接

扫一扫