Android开发

Android动画攻略—帧动画、补间动画、属性动画

本文主要是介绍Android动画攻略—帧动画、补间动画、属性动画,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

前言

  • 动画时Android开发中使用频率比较高的功能。
  • 对Android提供的补间动画,帧动画以及属性动画做出归纳总结。

目录

image

1. 帧动画

帧动画总体实现比较简单,其实现本身是实现一个图片集的连续播放,从而达到动画的效果。

实现帧动画就必须将大量图片资源加入到APK当中,从而增加APK的大小,但是却可以实现比较复杂的动画效果。

帧动画使用比较简单的,具体操作过程如下

  1. 将图片集导入到对应目录下
  2. 在drawable文件夹下新建文件anim_chat. xml,的代码实现如下
<?xml version="1.0" encoding="UTF-8"?>
<animation-list android:oneshot="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    //duraction字段可以用来设置该图片播放时长,drawable用来设置要显示的图片
    <item android:duration="230" android:drawable="@drawable/ic_chat_recording1" />
    <item android:duration="230" android:drawable="@drawable/ic_chat_recording2" />
    <item android:duration="230" android:drawable="@drawable/ic_chat_recording3" />
    <item android:duration="230" android:drawable="@drawable/ic_chat_recording4" />
    <item android:duration="230" android:drawable="@drawable/ic_chat_recording5" />
    <item android:duration="230" android:drawable="@drawable/ic_chat_recording6" />
</animation-list>
  1. 在布局文件activity_main.xml当中添加组件
<Button
        android:id="@+id/frame_animation_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="帧动画测试" />

    <ImageView
        android:id="@+id/frame_animation_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_chat_recording1"
        android:layout_marginTop="20dp"/>
  1. 在activity当中加入java代码实现
public class MainActivity extends AppCompatActivity {

    private Button frameButton;
    private ImageView frameImage;
    private AnimationDrawable frameAnimation;
    boolean isStart = false;

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

    private void initFrame() {
        //初始化控件
        frameButton = (Button) findViewById(R.id.frame_animation_test);
        frameImage = (ImageView) findViewById(R.id.frame_animation_img);
        //给ImageView设置drawable
        frameImage.setImageResource(R.drawable.anim_chat_recording);
        //给动画资源赋值
        frameAnimation = (AnimationDrawable) frameImage.getDrawable();
        //给按钮添加点击事件用来控制动画
        frameButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //当isStart=false时表示动画没有在播放,点击按钮开始播放
                if (!isStart) {
                    frameAnimation.start();
                    isStart = true;
                } else {//当isStart=true时表示动画正在播放,点击按钮停止播放
                    frameAnimation.stop();
                    isStart = false;
                }
            }
        });
    }
}

运行代码进行测试
image

帧动画也存在使用纯java代码的实现方式,但是在应用当中并不多见,有兴趣可以了解一下,这里不做介绍。

2. 补间动画

与按帧播放的帧动画不同,补间动画只需要定义初始和结束时的状态,中间的动画过程将由系统自动补齐。

  • 特点:

    • 补间动画作用于View,可以实现视觉上的动画效果,但是并没有真正对视图做出改变。
    • 使用简单,可以使用非常简单的方式实现动画效果。
    • 实现方式可以有jave代码实现和XML代码实现两种。
  • 分类:补间动画可分为四类

jave xml 效果
AlphaAnimation alph 渐变透明度动画效果
ScaleAnimation scale 渐变尺寸伸缩动画效果
TranslateAnimation1 translate 画面转换位置移动动画效果
RotateAnimation rotate 画面转移旋转动画效果

后文将对四种补间动画效果做具体说明。

2.1 alph动画

特有属性:

  • android:fromAlpha:动画开始时的透明度。
  • android:toAlpha:动画结束时的透明度。

Java代码实现

直接上代码

  1. 在activity_main.xml当中定义布局资源
<ImageView
        android:id="@+id/alph_animation_img"
        android:layout_width="150dp"
        android:layout_height="200dp"
        android:src="@drawable/animation_test1"/>

后续内容的动画效果基本针对图片涉及到的xml布局都基本类似,将不再进行说明。

  1. 在activity当中进行实现
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initAlphJava();
    }

    private void initAlphJava() {
        alphImage = (ImageView) findViewById(R.id.alph_animation_img);
        alphImage.setVisibility(View.VISIBLE);
        //构造参数中,第一个参数为动画开始时候透明度,第二个参数toAlpha为 动画结束时候透明度
        //对于fromAlpha和toAlpha,1.0代表完全不透明状态,0.0代表完全透明状态
        AlphaAnimation mAlpha = new AlphaAnimation(1.0f,0.0f);
        //设置动画播放时间,2000MS=2S
        mAlpha.setDuration(2000);
        //设置动画循环次数,-1为一直循环
        mAlpha.setRepeatCount(-1);
        //设置动画循环方式Animation.REVERSE为倒叙播放,Animation.RESTART为重复播放
        mAlpha.setRepeatMode(Animation.REVERSE);
        //alphImage开始播放动画
        alphImage.startAnimation(mAlpha);
    }

动画效果为:由原图显示渐变为隐藏状态。
image

XML实现

  1. 在res目录中新建anim文件夹。
  2. 在anim目录中新建一个alph_anim.xml文件(注意文件名小写)。
  3. 在alph_anim.xml文件当中对动画进行定义。
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--透明度控制动画效果 alpha-->
    <!--fromAlpha 属性为动画起始时透明度 0.0表示完全透明 1.0表示完全不透明-->
    <!--toAlpha   属性为动画结束时透明度-->
    <!--duration  属性为动画持续时间-->
    <alpha
        android:duration="2000" //播放时间为2秒
        android:fromAlpha="1.0" //初始透明度为完全显示
        android:toAlpha="0.0"   //结束透明度为完全透明
        android:repeatCount= "-1" />    //重复播放次数为无限循环
</set>

fromAlpha和toAlpha为alph动画的特有属性,1.0代表完全不透明状态,0.0代表完全透明状态

  1. 在activity当中对动画资源信息引用。
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initAlphXml();
    }

    private void initAlphXml() {
        alphImage = (ImageView) findViewById(R.id.alph_animation_img);
        Animation animation = AnimationUtils.loadAnimation(this,R.anim.alph_anim);
        alphImage.startAnimation(animation);
    }

运行程序,动画效果与上述java实现相同。
补间动画中有一些公共属性,其说明如下:

android:duration: 动画执行的时间,以毫秒为单位
android:fillEnabled:true|false 动画结束时还原到开始动画前的状态
android:fillBefore:true|false 动画结束后视图会停留在动画开始的状态,如果fillEnabled的值为true,它的值才有意义,否则没有意义。默认值是true。
android:fillAfter:true|false 动画结束后是否保留这个动画的最后一帧的效果,它的设置不受fillEnabled的影响
android:repeatMode:reverse|restart 重复类型,reverse:表示倒序回放,restart:表示重新放一遍,这个属性必须与repeatCount联合使用,因为它的前提是重复,即重复播放时的播放类型。
android:repeatCount:动画重复的次数(注意是重复的次数),设定具体数值,也是可以是infinite,表示无限循环
android:interpolator:设定的插值器,它主要用来为动画设置一些特殊的效果,比方说:加速运动、减速运动等等。

2.2 scale动画

特有属性:

  • android:fromXScale起始的X方向上相对自身的缩放比例,类型float
  • android:toXScale:结尾的X方向上相对自身的缩放比例,类型float
  • android:fromYScale:起始的Y方向上相对自身的缩放比例,类型float
  • android:toYScale:结尾的Y方向上相对自身的缩放比例,类型float
  • android:pivotX: 缩放起点X轴坐标,可以是数值、百分数、百分数p。
  • android:pivotY: 缩放起点Y轴坐标,同pivotX。

java代码实现

  1. 在activity_main.xml当中定义布局资源
  2. 在java代码当中的代码实现如下:

动画实现效果:以自身中心点为原点,缩放为原大小的两倍。
image
构造方法

ScaleAnimation(float fromX, float toX, float fromY, float toY,
            int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

参数取值介绍

对于前四个参数:0.0表示收缩到没有 1.0表示正常无伸缩 值小于1.0表示收缩 值大于1.0表示放大
pivotXType存在三种取值
pivotXType = Animation.ABSOLUTE:缩放轴点的x坐标 = View左上角的原点 在x方向 + pivotXValue数值的点(y方向同理)

pivotXType = Animation.RELATIVE_TO_SELF:缩放轴点的x坐标 = View左上角的原点 在x方向 + 自身宽度乘上pivotXValue数值的值(y方向同理)

pivotXType = Animation.RELATIVE_TO_PARENT:缩放轴点的x坐标 = View左上角的原点 在x方向 + 父控件宽度乘上pivotXValue数值的值 (y方向同理)

例子中所选参数为从原图大小X轴和Y轴缩放到原大小的两倍,缩放参照点为以自身宽高比例的50%处,也就是中心点。

XML实现

  1. 在res目录中新建anim文件夹。
  2. 在anim目录中新建一个scale_anim.xml文件(注意文件名小写)。
  3. 在scale_anim.xml文件当中对动画进行定义。
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <scale
        android:duration="3000"  //设置播放时长为3秒
        android:fillAfter="false"   //设置不保存播放完毕之后的画面
        android:fromXScale="1.0"    //起始画面X轴缩放倍数
        android:fromYScale="1.0"    //起始画面Y轴缩放倍数
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
        //使用accelerate_decelerate_interpolator加速--减速差值器
        android:pivotX="50%"    //X轴缩放原点为自身宽度的50%
        android:pivotY="50%"    //Y轴缩放原点为自身宽度的50%
        android:toXScale="2.0"  //结束画面X轴缩放倍数
        android:toYScale="2.0"  //结束画面Y轴缩放倍数
        android:repeatCount= "-1"   //动画循环次数为无限循环
        android:repeatMode="reverse"/>  //循环模式为倒播

</set>

pivotX与pivotY相同,有三种取值方式:

  • 取值为数值:当为数值时,表示在当前View的左上角,加上参数值即原点处,做为旋转点X坐标,单位为px。
  • 取值为百分数:如果是50%表示在当前控件的左上角加上自己宽度的50%做为旋转点X坐标。
  • 取值为百分数p:如果是50%p,那么就是表示在当前的左上角加上父控件宽度的50%做为旋转点X坐标。
  1. 在activity当中对动画资源信息引用。
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initScaleXML();
    }

    private void initAlphXml() {
        private void initScaleXML() {
        mImage = (ImageView) findViewById(R.id.animation_img);
        Animation animation = AnimationUtils.loadAnimation(this,R.anim.scale_anim);
        mImage.startAnimation(animation);
    }
    }

运行程序,动画效果与上述java实现相同。

2.3 translate动画

特有属性:

  • android:fromXDelta:起始点X轴坐标。
  • android:fromYDelta:起始点Y坐标。
  • android:toXDelta:结束点X坐标
  • android:toYDelta:结束点Y坐标

java代码实现

  1. 在activity_main.xml当中定义布局资源
  2. 在java代码当中的代码实现如下:
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initTranslateJava();
    }
 
    private void initTranslateJava() {
        mImage = (ImageView) findViewById(R.id.animation_img);
        TranslateAnimation translateAnimation = new TranslateAnimation(0,300,0,300);
        //fromXDelta:起始点X轴的坐标
        //toXDelta:终止点X轴的坐标
        //fromYDelta:起始点Y轴的坐标
        //toYDelta:终止点Y轴的坐标
        translateAnimation.setDuration(2000);
        translateAnimation.setRepeatMode(Animation.REVERSE);
        //Animation.INFINITE与-1取值相同,为无限重播
        translateAnimation.setRepeatCount(Animation.INFINITE);
        mImage.startAnimation(translateAnimation);
    }

上述代码实现效果:View向右下角45°移动,最终坐标为原左上角坐标的X轴正方向300,Y轴正方向300.
动画效果如下
image
对于构造方法

public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
            int fromYType, float fromYValue, int toYType, float toYValue) {

参数类型可大体分为两种: value和type

Type参数取值介绍

  • fromXType = Animation.ABSOLUTE:缩放轴点的x坐标 = View左上角的原点 在x方向 加上 pivotXValue数值的点(y方向同理) 默认为这种方式。
  • fromXType = Animation.RELATIVE_TO_SELF:缩放轴点的x坐标 = View左上角的原点 在x方向 加上 自身宽度乘上pivotXValue数值的值(y方向同理)
  • fromXType = Animation.RELATIVE_TO_PARENT:缩放轴点的x坐标 = View左上角的原点 在x方向 加上 父控件宽度乘上pivotXValue数值的值 (y方向同理)

Value取值介绍:

  • 取值为数值:当为数值时,表示在当前View的左上角,即原点处加上参数值,做为旋转点X坐标,单位为px。
  • 取值为百分数:如果是50%表示在当前控件的左上角加上自己宽度的50%做为原点X坐标。
  • 取值为百分数p:如果是50%p,那么就是表示在当前的左上角加上父控件宽度的50%做为原点X坐标。

XML实现

  1. 在res目录中新建anim文件夹。
  2. 在anim目录中新建一个translate_anim.xml文件(注意文件名小写)。
  3. 在translate_anim.xml文件当中对动画进行定义。
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="2000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="300"
        android:toYDelta="300" />

</set>

参数值类型介绍

整型值:
fromXDelta 属性为动画起始时 X坐标上的位置
toXDelta 属性为动画结束时 X坐标上的位置
fromYDelta 属性为动画起始时 Y坐标上的位置
toYDelta 属性为动画结束时 Y坐标上的位置

注意:
没有指定fromXType toXType fromYType toYType 时候, 默认是以自己为相对参照物
长整型值:
duration 属性为动画持续时间
说明: 时间以毫秒为单位

  1. 在activity当中对动画资源信息引用。
  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initTranslateXML();
    }

    private void initTranslateXML() {
        mImage = (ImageView) findViewById(R.id.animation_img);
        Animation animation = AnimationUtils.loadAnimation(this,R.anim.translate_anim);
        mImage.startAnimation(animation);
    }

运行程序,动画效果与上述java实现相同。

作者:銀灬楓
链接:https://www.jianshu.com/p/1fac598febc1
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

这篇关于Android动画攻略—帧动画、补间动画、属性动画的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!