Zhang Qin's blog

Hello Everyone

0%

View动画（Tween补间动画）

发表于 更新于 分类于
本文字数： 4.6k 阅读时长 ≈ 4 分钟

一、简述

  1. 本文主要介绍View动画的平移、缩放、旋转和透明动画，帧动画，还有LayoutAnimation及Activity跳转动画。
  2. View动画建议使用XML来定义，文件的路径是res/anim/[动画文件名].xml。

二、View动画

  • accelerate_decelerate_interpolator：加速-减速 动画插入器
  • accelerate_interpolator：加速-动画插入器
  • decelerate_interpolator：减速动画插入器

1.透明度控制动画效果alpha

1
2
3
4
<alpha
	android:fromAlpha="0.1"
	android:toAlpha="1.0"
	android:duration="3000" />
  1. 浮点型值：
    • fromAlpha：属性为动画起始时透明度
    • toAlpha：属性为动画结束时透明度
      • 说明:
        • 0.0表示完全透明
          • 1.0表示完全不透明
        • 以上值取0.0-1.0之间的float数据类型的数字
  2. 长整型值：
    • duration 属性为动画持续时间
    • 说明:
      • 时间以毫秒为单位

2.尺寸伸缩动画效果scale

1
2
3
4
5
6
7
8
9
10
11
<scale
	android:interpolator="@android:anim/accelerate_decelerate_interpolator"
	android:fromXScale="0.0"
	android:toXScale="1.4"
	android:fromYScale="0.0"
	android:toYScale="1.4"
	android:pivotX="50%"
	android:pivotY="50%"
	android:fillAfter="false"
	android:startOffset="700"
	android:duration="700" />
  1. 浮点型值：
    • fromXScale：属性为动画起始时 X坐标上的伸缩尺寸
    • toXScale：属性为动画结束时 X坐标上的伸缩尺寸
    • fromYScale：属性为动画起始时Y坐标上的伸缩尺寸
    • toYScale：属性为动画结束时Y坐标上的伸缩尺寸
    • startOffset：属性为从上次动画停多少时间开始执行下个动画
    • 说明:
      • 以上四种属性值
      • 0.0表示收缩到没有
      • 1.0表示正常无伸缩
      • 值小于1.0表示收缩
      • 值大于1.0表示放大
  2. 百分比
    • pivotX：属性为动画相对于物件的X坐标的开始位置
    • pivotY：属性为动画相对于物件的Y坐标的开始位置
    • 说明：
      • 以上两个属性值 从0%-100%中取值，50%为物件的X或Y方向坐标上的中点位置
  3. 长整型值：
    • duration：属性为动画持续时间
    • 说明: 时间以毫秒为单位
  4. 布尔型值:
    • fillAfter：属性设置为true时，该动画转化在动画结束后被应用

3.位置转移动画效果translate

1
2
3
4
5
6
<translate
	android:fromXDelta="30"
	android:toXDelta="-80"
	android:fromYDelta="30"
	android:toYDelta="300"
	android:duration="2000" />
  1. 整型值:
    • fromXDelta：属性为动画起始时 X坐标上的位置
    • toXDelta：属性为动画结束时 X坐标上的位置
    • fromYDelta：属性为动画起始时 Y坐标上的位置
    • toYDelta：属性为动画结束时 Y坐标上的位置
    • 注意:
      • 没有指定fromXType toXType fromYType toYType 时候，默认是以自己为相对参照物
  2. 长整型值：
    • duration：属性为动画持续时间
    • 说明：时间以毫秒为单位

4.旋转动画效果rotate

1
2
3
4
5
6
7
<rotate
	android:interpolator="@android:anim/accelerate_decelerate_interpolator"
	android:fromDegrees="0"
	android:toDegrees="+350"
	android:pivotX="50%"
	android:pivotY="50%"
	android:duration="3000" />
  1. 浮点数型值:
    • fromDegrees：属性为动画起始时物件的角度
    • toDegrees：属性为动画结束时物件旋转的角度 可以大于360度
    • 说明:
      • 当角度为负数——表示逆时针旋转
      • 当角度为正数——表示顺时针旋转
      • (负数from——to正数:顺时针旋转)
      • (负数from——to负数:逆时针旋转)
      • (正数from——to正数:顺时针旋转)
      • (正数from——to负数:逆时针旋转)
  2. 百分比
    • pivotX：属性为动画相对于物件的X坐标的开始位置
    • pivotY：属性为动画相对于物件的Y坐标的开始位置
    • 说明：以上两个属性值 从0%-100%中取值，50%为物件的X或Y方向坐标上的中点位置
  3. 长整型值：
    • duration：属性为动画持续时间
    • 说明：时间以毫秒为单位

5. 在代码中使用动画

1
2
Animation animation = AnimationUtils.loadAnimation(this, R.anim.fade);
mButton.startAnimation(animation)

6. 使用Java代码定义动画

1
2
3
4
// 属性名称与xml中的名字类似
AlphaAnimation alphaAnimation = new AlphaAnimation(0,1);
alphaAnimation.setDuration(1000);
mButton.startAnimation(alphaAnimation)

三、帧动画

帧动画是顺序播放一组预先定义好的图片。需要注意OOM问题。

  1. 定义

    oneshot属性表示是否只播放一次，true表示只会播放一次，false表示一直循环播放

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!-- frame_anim.xml -->
    <animation-list xmlns:android="http://schemas.android.com/apk/res/android"
        android:oneshot="false">

        <item
            android:drawable="@mipmap/lottery_1"
            android:duration="200" />

    	... ...

    </animation-list>

  2. 播放

1
2
3
4
5
6
7
// 需要一个Drawable作为载体
button.setBackgroundResource(R.drawable.frame_anim);
AnimationDrawable animationDrawable = (AnimationDrawable) button.getBackgroundResource();
// 启动动画
animationDrawable.start();
// 停止动画
animationDrawable.stop();

四、View动画的特殊使用场景

1. LayoutAnimation

LayoutAnimation作用于ViewGroup为ViewGroup设置动画效果，这样它的子元素出场时会具有这种动画效果，经常被由于ListView可以在XML文件中设置，亦可以在Java代码中设置。

  1. 定义LayoutAnimation

    1
    2
    3
    4
    <layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
        android:delay="0.8"
        android:animationOrder="normal"
        android:animation="@anim/anim_layout_item"/>
    1. delay
      表示子元素开始动画的时间延迟，比如子元素入场动画的时间周期为300ms，那么0.5表示每子元素都要延迟150ms才能播放入场动画，简单点说如果delay=1，即每个动画都要等到上一个条目的动画完成后在播放入场动画。
    2. animationOrder
      表示子元素动画的顺序，有三种选项：normal、reverse和random，其中normal表示顺序显示，即从第一个元素开始；reverse表示逆向显示，即从最后一个开始播放；random是随机播放。
    3. animation
      为子元素指定具体的入场动画

  2. 为ViewGroup指定layoutAnimation属性

    1
    2
    3
    4
    <ListView
        ... ...
        android:layoutAnimation="@anim/anim_layout"
        ... ... />

  3. 也可以在代码中使用LayoutAnimationController实现

    1
    2
    3
    4
    5
    Animation animation = AnimationUtils.loadAnimation(this, anim_layout_item);
    LayoutAnimationController lac = new LayoutAnimationController(animation);
    lac.setDelay(0.5f);
    lac.setOrder(LayoutAnimationController.ORDER_REVERSE);
    datalist.setLayoutAnimation(lac);

2. Activity跳转动画

  1. 在Android 2.0之后有了overridePendingTransition()可以用来控制跳转动画，其中里面两个参数，一个是前一个activity的退出，另一个activity的进入。这个方法必须放在startActivity和finish之后才能调用

  2. Android提供了几种默认的跳转效果

    1
    2
    3
    4
    5
    6
    // 淡入淡出
    android.R.anim.fade_in
    android.R.anim.fade_out
    // 滑入滑出
    android.R.anim.slide_in_left
    android.R.anim.slide_out_right

  3. 使用方法

    1
    2
    3
    startActivity(new Intent(T1Activity.this,T2Activity.class));
    // 跳转之后调用
    overridePendingTransition(android.R.anim.slide_in_left,android.R.anim.slide_out_right);