补间动画

一、补间动画概述与分类


补间动画是利用视图的平移、旋转、缩放和渐变来实现动画效果。对于补间动画,知道以下四个类或者接口,就可以满足大部分使用情况了。

  • Animation,是其它动画类的基类,声明适用于Views,Surfaces等对象。
  • AnimationSet,是Animation的子类,表示一组一起播放的动画。
  • Interpolator,控制动画播放中的效果,系统提供了常用的几个值。
  • AnimationUtils,提供包括加载动画资源文件等功能的工具类。

二、xml资源文件实现


实现方式:在 res/anim 文件夹下创建xml资源文件,使用 <alpha>、 <translate>、<rotate>和<scale>标签即可定义相应的动画效果。

通用参数:
属性 含义
android:duration    动画的持续时间,单位为毫秒
android:fillAfter 是否保留动画结束时的状态,如果为true,则保留;反之则变回动画开始时的状态。
android:fillBefore 当为true或者fillEnabled不为true时,动画恢复到最开始状态。默认值是true。
android:fillEnabled 当为true,与fillBefore为true的结果相同。
android:interpolator 定义一个插值器使动画过渡更加平滑,可以被动画集合共用。
android:repeatCount 定义动画被重复执行的次数。默认值是0。
android:repeatMode 当repeatCount>0,且动画执行到了终值时,进行的重复行为的类型。restart是默认值,表示从头开始。reverse,表示反向开始。
android:startOffset 动画开始执行前延迟的毫秒数。
android:zAdjustment 设置动画执行时,视图内容在Z轴上的层级。normal是默认值,表示维持当前层级。top,表示移到最上层。bottom,表示移到最底层。
透明度动画-AlphaAnimation
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromAlpha="1.0"
    android:toAlpha="0.1"
    android:duration="2000"/>
属性 含义
fromAlpha 起始透明度(透明度的范围为:0-1,完全透明-完全不透明)
toAlpha 结束透明度
duration 持续时间(毫秒)
缩放动画-ScaleAnimation
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:fromXScale="0.2"
    android:toXScale="1.5"
    android:fromYScale="0.2"
    android:toYScale="1.5"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="2000"/>
属性 含义
fromXScale 沿着X轴缩放的起始比例
fromYScale 沿着X轴缩放的起始比例
toXScale 沿着X轴缩放的结束比例
toYScale 沿着Y轴缩放的结束比例
pivotX 缩放的中轴点X坐标,即距离自身左边缘的位置,比如50%就是以图像的 中心为中轴点
pivotY 缩放的中轴点Y坐标
duration 持续时间
位移动画-TranslateAnimation
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromXDelta="0"
    android:toXDelta="320"
    android:fromYDelta="0"
    android:toYDelta="0"
    android:duration="2000"/>
属性 含义
fromXDelta 动画起始位置的X坐标
fromYDelta 动画起始位置的Y坐标
toXDelta 动画结束位置的X坐标
toYDelta 动画结束位置的Y坐标
duration 持续时间
旋转动画-RotateAnimation
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:duration="1000"
    android:repeatCount="1"
    android:repeatMode="reverse"/>
属性 含义
fromDegrees/toDegrees 旋转的起始/结束角度
repeatCount 旋转的次数,默认值为0,代表一次,假如是其他值,比如3,则旋转4次 另外,值为-1或者 infinite时,表示动画永不停止
repeatMode 设置重复模式,默认restart,但只有当repeatCount大于0或者infinite或-1时 才有效。还可以设置成reverse,表示偶数次显示动画时会做方向相反的运动
duration 持续时间
动画组合-AnimationSet
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:shareInterpolator="true" >

    <scale
        android:duration="2000"
        android:fromXScale="0.2"
        android:fromYScale="0.2"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.5"
        android:toYScale="1.5" />

    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:toDegrees="360" />

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

    <alpha
        android:duration="2000"
        android:fromAlpha="1.0"
        android:toAlpha="0.1" />
</set>
代码如何使用xml配置
Animation animation = AnimationUtils.loadAnimation(MainActivity.this,R.anim.anim_alpha);
mImageView.startAnimation(animation);

三、代码直接使用补间动画


用代码实现补间动画我们主要是通过构造 Animation animation = new AlphaAnimation(); 拿到响应的引用以后去设置动画的一些属性。

公共方法设置如下:

animation.setDuration(2000);
animation.setFillAfter(true);
animation.setFillBefore(false);
animation.setRepeatCount(2);
animation.setRepeatMode(Animation.RESTART);
animation.setInterpolator(new BounceInterpolator());

其中含义,参考上边提到的公告参数即可。

透明度动画(AlphaAnimation)

透明度动画参数最多的构造方法如下:

//fromAlpha   动画开始的透明度,从0.0 --1.0 ,0.0表示全透明,1.0表示完全不透明
//toAlpha       动画结束时的透明度,也是从0.0 --1.0 ,0.0表示全透明,1.0表示完全不透明
public AlphaAnimation(float fromAlpha, float toAlpha) {

}

使用:

animation=  new AlphaAnimation(0, 1);
animation.setDuration(2000);
mImageView.startAnimation(animation);
缩放动画(ScaleAnimation)

缩放动画参数最多的构造方法如下:

public ScaleAnimation(float fromX, float toX, float fromY, float toY,
            int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) {
}
属性 含义
fromX 沿着X轴缩放的起始比例
fromY 沿着X轴缩放的起始比例
toX 沿着X轴缩放的结束比例
toY 沿着Y轴缩放的结束比例
pivotXValue 缩放的中轴点X坐标,即距离自身左边缘的位置,比如50%就是以图像的 中心为中轴点
pivotXType 有2种模式,RELATIVE_TO_SELF(相对于自身)和RELATIVE_TO_PARENT(相对于父布局)pivotx,pivotY的值就应该是0-1的浮点数,分别对应xml中的%(自身)和%p(父布局)
pivotYValue 缩放的中轴点Y坐标,即距离自身左边缘的位置,比如50%就是以图像的 中心为中轴点
pivotYType 同pivotXType

使用:

animation = new ScaleAnimation(0, 1.4f, 0, 1.4f,
                        ScaleAnimation.RELATIVE_TO_SELF,0.5f,ScaleAnimation.RELATIVE_TO_SELF,0.5f);
animation.setDuration(2000);
mImageView.startAnimation(animation);
位移动画(TranslateAnimation)

参数最多的构造方法如下:

//fromXDelta     起始点X轴坐标,可以是数值、百分数、百分数p 三种样式,同scale
//fromYDelta    起始点Y轴从标,可以是数值、百分数、百分数p 三种样式
//toXDelta         结束点X轴坐标
//toYDelta        结束点Y轴坐标 
// fromYType、toYType同 ScaleAnimation,
public TranslateAnimation(int fromXType, float fromXValue, int toXType,
  float toXValue,int fromYType, float fromYValue, int toYType, float toYValue) {

 }

使用:

animation= new TranslateAnimation(TranslateAnimation.RELATIVE_TO_SELF, 0, TranslateAnimation.RELATIVE_TO_SELF, 0.5f,
        TranslateAnimation.RELATIVE_TO_SELF, 0, TranslateAnimation.RELATIVE_TO_SELF, 0.5f);
animation.setDuration(2000);
mImageView.startAnimation(animation);
旋转动画(RotateAnimation)

参数最多的构造方法如下:

//fromDegrees 起始角度
//toDegrees 结束角度
//其他参数参考 ScaleAnimation
public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType,
   float pivotXValue, int pivotYType, float pivotYValue) {

}

使用:

animation= new RotateAnimation(0, -720, RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                        RotateAnimation.RELATIVE_TO_SELF, 0.5f);
animation.setDuration(2000);
mImageView.startAnimation(animation);
组合动画

通过AnimationSet可以将前面的四种动画组合在一起,实现一些混合动画效果

Animation rotateAnimation = new RotateAnimation(0, -720, RotateAnimation.RELATIVE_TO_SELF, 0.5f,
        RotateAnimation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setDuration(2000);

Animation translateAnimation = new TranslateAnimation(TranslateAnimation.RELATIVE_TO_PARENT, 0, TranslateAnimation.RELATIVE_TO_PARENT, 0.5f,
        TranslateAnimation.RELATIVE_TO_PARENT, 0, TranslateAnimation.RELATIVE_TO_PARENT, 0.5f);
translateAnimation.setDuration(2000);

Animation scaleAnimation = new ScaleAnimation(0, 1.4f, 0, 1.4f, ScaleAnimation.RELATIVE_TO_SELF,
        0.5f, ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
scaleAnimation.setDuration(2000);

Animation alphaAnimation = new AlphaAnimation(0, 1);
alphaAnimation.setDuration(2000);

AnimationSet animationSet = new AnimationSet(true);
animationSet.addAnimation(rotateAnimation);
animationSet.addAnimation(translateAnimation);
animationSet.addAnimation(scaleAnimation);
animationSet.addAnimation(alphaAnimation);
animationSet.setDuration(4000);
animationSet.setFillAfter(true);
mImageView.startAnimation(animationSet);

四、插值器


  • BaseInterpolator,一个抽象的插值器,用来作为扩展的基类(2-11是其子类)。
  • AccelerateDecelerateInterpolator,数值按照默认变化方向先快后慢。
  • AccelerateInterpolator,数值按照默认变化方向一直加快。
  • AnticipateInterpolator,数值先与默认变化方向相反,后与默认变化方向相同。
  • AnticipateOvershootInterpolator,数值先与默认变化的方向相反,后与默认变化的方向相同,接着与默认变化的方向相反。
  • BounceInterpolator,值的变化模仿小球调到地面上的弹跳变化。
  • CycleInterpolator,值的变化模仿正选函数,010-10。
  • DecelerateInterpolator,数值按照默认变化方向一直减慢。
  • LinearInterpolator,数值按照默认变化方向匀速变化。
  • OvershootInterpolator,数值先与默认变化方向相同,后与默认变化方向相反。
  • PathInterpolator,值的变化由规划的路径控制。
  • FastOutLinearInInterpolator,值的变化符合(0,0) (0.4,0) (1.0,1.0) (1.0,1.0)控制的贝塞尔曲线。
  • FastOutSlowInInterpolator,值的变化符合(0,0) (0.4,0) (0.2,1.0) (1.0,1.0)控制的贝塞尔曲线。
  • LinearOutSlowInInterpolator,值的变化符合(0,0) (0,0) (0.2,1.0) (1.0,1.0)控制的贝塞尔曲线。

五、监听动画的执行


1、单种动画监听

val animation = RotateAnimation(
    0f,
    720f,
    RotateAnimation.RELATIVE_TO_SELF,
    0.5f,
    RotateAnimation.RELATIVE_TO_SELF,
    0.5f
)

......

animation.setAnimationListener(object: Animation.AnimationListener{
    override fun onAnimationStart(animation: Animation?) {
       
    }

    override fun onAnimationEnd(animation: Animation?) {
       
    }

    override fun onAnimationRepeat(animation: Animation?) {
        
    }
})

2、组合动画监听

animationSet.setAnimationListener(object : Animation.AnimationListener{
    override fun onAnimationStart(animation: Animation?) {
        TODO("Not yet implemented")
    }

    override fun onAnimationEnd(animation: Animation?) {
        TODO("Not yet implemented")
    }

    override fun onAnimationRepeat(animation: Animation?) {
        TODO("Not yet implemented")
    }
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容