Android View Animation(动画)

最新推荐文章于 2024-03-30 21:33:25 发布

JUN_LLLL

最新推荐文章于 2024-03-30 21:33:25 发布

阅读量422

点赞数 1

分类专栏： Android基础文章标签： Android 动画 animation

本文链接：https://blog.csdn.net/qq_35988274/article/details/100660801

版权

Android基础专栏收录该内容

39 篇文章 0 订阅

订阅专栏

一、概述

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

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 class	Resource 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

JUN_LLLL

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android View Animation(动画)

目录一、概述二、Tween animation1、介绍2、属性代码3、类型3.1保存其他动画元素的容器3.2淡入淡出动画3.3缩放动画3.4平移3.5 旋转3.6 通用属性3.7 调用方式4、Interpolators(插值器)三、Frame animation1、介绍2、属性代码3、代码示例一、概述动画...
复制链接

扫一扫

专栏目录