Android 动画 - 帧动画 & 补间动画

系列文章传送门:

Android 动画 - 帧动画 & 补间动画
Android 动画 - 插值器
Android 动画 - 属性动画


在移动开发中,动画可以丰富页面的 UI 效果,一个动画包含以下几个元素

  • 控件: 想实现动画的 View 等
  • 时长:动画的时长
  • 起始值,结束值:动画从开始和结束的值(比如移动,就是坐标值)
  • 插值器:定义了动画变化的速率

动画包含三大类型:帧动画(Frame),补间动画(Tween),属性动画(Property)

帧动画 (Frame)

顺序播放一组预先定义好的图。

  • 首先在 res/drawable/目录下定义xml,根节点为animation-list,设置动画播放的帧资源
  • 使用 AnimationDrawable 加载定义好的资源


    
    
    
    
    

  • oneshot 是否只展示一遍,设置为false会不停的循环播放动画
  • 根标签下,通过标签对动画中的每一个图片进行声明
    • drawable 要播放的图片
    • duration 展示该图片的时间长度

使用AnimationDrawable 播放动画

view.setBackground(R.drawable.frame_animation);
AnimationDrawable animation = (AnimationDrawable)view.getBackground();
animation.start();

补间动画(Tween )

补间动画也称作 View 动画,只要定义 View,设置它开始和结束的位置,中间的 View 会由系统自动补齐,不需要准备每一帧动画。
View 动画主要支持四种效果:平移、缩放、旋转、透明度。实现这几种动画的类,都是 Animation 的子类。
使用这种动画可以通过在 xml 中实现,也可以在 类文件中定义。

TranslateAnimation

平移动画,对应标签为

  • android:fromXDelta 起始 x 坐标
  • android:toXDelta 结束 x 坐标
  • android:fromYDelta 起始 y 坐标
  • android:toYDelta 结束 y 坐标

数值的表示方式如下:
数字:如10,表示当前坐标位置
百分比:如10%,表示当前 View 的坐标 + View 控件长度 10%
百分数p:如10%p,表示当前View的坐标 + 父控件长度 50%

范例:



在 java / kotlin 中使用该文件

Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim_translate);
view.startAnimation(animation);

其中 duration 是动画的时长,interpolator 是动画的插值器,来定义动画变化的速率,每一种动画都具有这两个属性,还有一些其他的公共属性可配置,可以慢慢尝试。

类实现,等同于上面的配置(后面的几种动画实现方式是一样的)

// view 在 1s 间从(0, 0) 移动到 (100, 100)
TranslateAnimation animation = new TranslateAnimation(0, 0, 100, 100);
animation .setDuration(1000);
animation .setInterpolator(new DecelerateInterpolator());
view.startAnimation(animation);
  • TranslateAnimation 还有一个重载的构造函数
/**
 * @param fromXType 动画开始前的X坐标类型。取值范围为 ABSOLUTE(绝对位置)、RELATIVE_TO_SELF(以自身宽或高为参考)、RELATIVE_TO_PARENT(以父控件宽或高为参考)
 * @param fromXValue 动画开始前的X坐标值。当对应的 Type 为ABSOLUTE时,表示绝对位置;否则表示相对位置,1.0表示100%
 * @param toXType 动画结束后的 X 坐标类型
 * @param toXValue 动画结束后的 X 坐标值
 * @param fromYType 动画开始前的 Y 坐标类型
 * @param fromYValue 动画开始前的 Y 坐标值
 * @param toYType 动画结束后的 Y 坐标类型
 * @param toYValue 动画结束后的 Y 坐标值
*/
public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
            int fromYType, float fromYValue, int toYType, float toYValue)

ScaleAnimation

缩放动画,对应标签

  • fromXScale、 fromYScale 起始缩放值
  • toXScale、toYScale 目标缩放值
  • pivotX、pivotY 缩放的中心位置


  • ScaleAnimation 有三个构造函数
public ScaleAnimation(float fromX, float toX, float fromY, float toY) 

public ScaleAnimation(float fromX, float toX, float fromY, float toY,  float pivotX, float pivotY)

/**
 * @param fromX X坐标初始值
 * @param toX X坐标目标值
 * @param fromY Y坐标初始值
 * @param toY Y坐标目标值
 * @param pivotXType 缩放中心点的X坐标类型。取值范围有三种
 *        Animation.ABSOLUTE(绝对坐标)
 *        Animation.RELATIVE_TO_SELF(相对于自身View)
 *        Animation.RELATIVE_TO_PARENT(相对于父控件的坐标)
 * @param pivotXValue 缩放中心点的X坐标值当对应的 Type 为ABSOLUTE时,表示绝对位置;否则表示相对位置,1.0表示100%
 * @param pivotYType 缩放中心点的Y坐标类型
 * @param pivotYValue 缩放中心点的Y坐标
*/
public ScaleAnimation(float fromX, float toX, float fromY, float toY,  
                      int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
// 以view中心为缩放点,放大两倍
ScaleAnimation animation = new ScaleAnimation(
        1.0f, 2.0f, 1.0f, 2.0f,
        Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f
);
animation.setDuration(1000);
view.startAnimation(animation);

RotateAnimation

旋转动画,对应标签

  • fromDegree 旋转的起始角度
  • toDegree 旋转的结束角度


/**
 * @param fromDegrees 旋转的起始角度
 * @param toDegrees 旋转的结束角度
 * 默认旋转中心点为 (0, 0)
 */
public RotateAnimation(float fromDegrees, float toDegrees) 
 
public RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY)
    
/**
 * @param fromDegrees 旋转的起始角度
 * @param toDegrees 旋转的结束角度
 * @param pivotXType 
 * @param pivotXValue
 * @param pivotYType
 * @param pivotYValue
 */
public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,
        int pivotYType, float pivotYValue) {

AlphaAnimation

透明度动画,对应标签

/**
 * @param fromAlpha 动画开始透明度 0~1
 * @param toAlpha 动画结束透明度
 */
public AlphaAnimation(float fromAlpha, float toAlpha) 

AnimationSet

AnimationSet 也继承于 Animation,可以同时处理多组动画,比如在平移的时候旋转等。

构造参数有一个参数,表示所添加的动画是否都共用一个插值器

/**
 * @param shareInterpolator 
 */
public AnimationSet(boolean shareInterpolator) {

常用的方法如下

// 添加动画
animationSet.addAnimation(new TranslateAnimation(0, 0, 100, 100));
// 设置插值器 默认 @android:anim/accelerate_decelerate_interpolator--> android:interpolator="`@android:anim/linear_interpolator`"
animationSet.setInterpolator(new LinearInterpolator());
// 设置动画持续时长,默认 0 --> android:duration="3000"
animationSet.setDuration(3000);
//设置动画结束之后是否保持动画的目标状态,默认 false --> android:fillAfter="true"
animationSet.setFillAfter(true);
//设置动画结束之后是否保持动画开始时的状态,默认 ture --> android:fillBefore="false"
animationSet.setFillBefore(false);
// 设置重复模式,RESTART(1) 顺序播放,REVERSE(2) 重复时逆向播放 android:repeatMode
animationSet.setRepeatMode(AnimationSet.REPEAT);
//设置重复次数,默认 0 --> android:repeatCount=-1
animationSet.setRepeatCount(AnimationSet.INFINITE);
//设置动画延时时间,默认 0 --> android:startOffset="2000"
animationSet.setStartOffset(2000);
//取消动画
animationSet.cancel();
//重置动画
animationSet.reset();

为 View 设置动画

//开始动画
view.startAnimation(animationSet);

你可能感兴趣的:(Android 动画 - 帧动画 & 补间动画)