Android View Animation(动画)

景仲渊
2023-12-01

目录

一、概述

二、Tween animation

1、介绍

2、属性代码

3、类型

3.1  保存其他动画元素的容器

3.2  淡入淡出动画

3.3  缩放动画

3.4  平移

3.5  旋转

3.6 通用属性

3.7 调用方式

4、Interpolators(插值器)

三、Frame animation

1、介绍

2、属性代码

3、代码示例


一、概述

动画资源可以定义两种类型的动画之一:

1、属性动画(Property Animation)

      通过在一个固定的时间段内修改对象的属性值来创建动画.

2、视图动画(View Animation)

     有两种类型的动画可以用视图动画框架来完成:

  • Tween animation:通过对带有动画的单个图像执行一系列变换来创建动画
  • Frame animation: 或者通过显示一系列图像来创建动画。

详细内容参考官方文档animation的介绍。

二、Tween animation

1、介绍

在XML中定义的一种动画,它执行图形的旋转、渐变、移动和拉伸等转换。

 file location:   res/anim/filename.xml

 In Java: R.anim.filename

2、属性代码

文件必须有一个根元素:<alpha><scale><translate><rotate><set>包含一组动画类型作为动画集。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@[package:]anim/interpolator_resource"
    android:shareInterpolator=["true" | "false"] >
    <alpha
        android:fromAlpha="float"
        android:toAlpha="float" />
    <scale
        android:fromXScale="float"
        android:toXScale="float"
        android:fromYScale="float"
        android:toYScale="float"
        android:pivotX="float"
        android:pivotY="float" />
    <translate
        android:fromXDelta="float"
        android:toXDelta="float"
        android:fromYDelta="float"
        android:toYDelta="float" />
    <rotate
        android:fromDegrees="float"
        android:toDegrees="float"
        android:pivotX="float"
        android:pivotY="float" />
    <set>
        ...
    </set>
</set>

3、类型

Android的animation由四种类型组成:alpha、scale、translate、rotate,

alpha渐变透明度动画效果
scale渐变尺寸伸缩动画效果
translate画面转换位置移动动画效果
rotate画面转移旋转动画效果

3.1 <set> 保存其他动画元素的容器

  • android:interpolator:插值器定义动画的变化率(动画效果执行时的速度)。允许加速、减速、重复等基本动画效果,类似DOtween的Ease缓动函数,效果链接
  • android:shareInterpolator:如果你想在所有的孩子之间共享同一个interpolator

3.2 <alpha> 淡入淡出动画

  • android:fromAlpha:   动画开始的透明度,从0.0 --1.0 ,0.0表示全透明,1.0表示完全不透明
  • android:toAlpha:       动画结束时的透明度,也是从0.0 --1.0 ,0.0表示全透明,1.0表示完全不透明

3.3 <scale> 缩放动画

  • android:fromXScale:    起始的X方向上相对自身的缩放比例,浮点值,比如1.0代表自身无变化,0.5代表起始时缩小一倍,2.0代表放大一倍;
  • android:toXScale:        结束的X方向上相对自身的缩放比例,浮点值;
  • android:fromYScale:    起始的Y方向上相对自身的缩放比例,浮点值,
  • android:toYScale:        结尾的Y方向上相对自身的缩放比例,浮点值;
  • android:pivotX:            缩放起点X轴坐标(起始相对于原点的X的增减,结束回到原点),可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p,当为数值时,表示在当前View的左上角(原点),即原点处加上50px,做为起始缩放点;如果是50%,表示在当前控件的左上角加上自己宽度的50%做为起始点;如果是50%p,那么就是表示在当前的左上角加上父控件宽度的50%做为起始点x轴坐标。
  • android:pivotY :         缩放起点Y轴坐标,取值及意义跟android:pivotX一样。
     

3.4 <translate> 平移

  • android:fromXDelta:    起始点X轴坐标,可以是数值、百分数、百分数p 三种样式。
  • android:fromYDelta:    起始点Y轴从标,
  • android:toXDelta:         结束点X轴坐标
  • android:toYDelta:         结束点Y轴坐标

3.5 <rotate> 旋转

  • android:fromDegrees :    开始旋转的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数
  • android:toDegrees :       结束时旋转到的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数
  • android:pivotX :             缩放起点X轴坐标
  • android:pivotY :              缩放起点Y轴坐标

3.6 通用属性

  • android:duration:          动画持续时间,以毫秒为单位 
  • android:fillAfter  :          如果设置为true,控件动画结束时,将保持动画最后时的状态
  • android:fillBefore :       如果设置为true,控件动画结束时,还原到开始动画前的状态
  • android:fillEnabled :    与android:fillBefore 效果相同,都是在动画结束时,将控件还原到初始化状态
  • android:repeatCount:  重复次数
  • android:repeatMode:   重复类型,有reverse和restart两个值,reverse表示倒序回放,restart表示重新放一遍,必须与repeatCount一起使用才能看到效果。
  • android:interpolator:  设定插值器,其实就是指定的动作效果,比如弹跳效果等。
     

3.7 调用方式

ImageView image = (ImageView) findViewById(R.id.image);
Animation anim= AnimationUtils.loadAnimation(this, R.anim.anim_test);
image.startAnimation(anim);

4、Interpolators(插值器)

插值器是XML中定义的动画修改器,它影响动画的变化率。这允许你现有的动画效果被加速、减速、重复、弹跳等,类似DOtween的Ease缓动函数,效果链接,这是我以前做游戏开发使用的动画插件。

下表指定用于每个内插器的资源:

Interpolator classResource ID

Means

AccelerateDecelerateInterpolator@android:anim/accelerate_decelerate_interpolator在动画开始与介绍的地方速率改变比较慢,在中间的时候加速
AccelerateInterpolator@android:anim/accelerate_interpolator 在动画开始的地方速率改变比较慢,然后开始加速
AnticipateInterpolator@android:anim/anticipate_interpolator开始的时候向后然后向前甩
AnticipateOvershootInterpolator@android:anim/anticipate_overshoot_interpolator开始的时候向后然后向前甩一定值后返回最后的值
BounceInterpolator@android:anim/bounce_interpolator

动画结束的时候弹起

CycleInterpolator@android:anim/cycle_interpolator动画循环播放特定的次数,速率改变沿着正弦曲线
DecelerateInterpolator@android:anim/decelerate_interpolator在动画开始的地方快然后慢
LinearInterpolator@android:anim/linear_interpolator以常量速率改变
OvershootInterpolator@android:anim/overshoot_interpolator向前甩一定值后再回到原来位置

使用方式:

<set android:interpolator="@android:anim/accelerate_interpolator">
    ...
</set>

如果您不满意平台提供的内插器(在上面的表中列出),您可以自定义插值器,同样的再anim文件下创建,添加你需要的修改的插值器的名字和相关属性。

<?xml version="1.0" encoding="utf-8"?>
<InterpolatorName xmlns:android="http://schemas.android.com/apk/res/android"
    android:attribute_name="value"
    />

三、Frame animation

1、介绍

 在XML中定义的动画,按顺序显示图像序列(如电影)。

 file location: res/drawable/filename.xml

 In Java: R.drawable.filename

2、属性代码

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot=["true" | "false"] >
    <item
        android:drawable="@[package:]drawable/drawable_resource_name"
        android:duration="integer" />
</animation-list>

<animation-list>:  这必须是根元素,包含一个或多个<item>元素

  • android:oneshot:是否执行动画一次,“false”循环动画

<item> : 单一的动画框架,必须作为一个<animation-list>元素

  • android:drawable: 可开采资源. 可用于此框架
  • android:duration: 显示此帧的持续时间,以毫秒为单位

3、代码示例

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>

该应用程序代码将动画设置为视图的背景,然后播放动画:

ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
rocketImage.setBackgroundResource(R.drawable.rocket_thrust);

rocketAnimation = rocketImage.getBackground();
if (rocketAnimation instanceof Animatable) {
    ((Animatable)rocketAnimation).start();
}

参考启航大佬自定义控件三部曲之动画篇(一)/  Interpolator插值器

参考官方文档介绍Animation

 类似资料: