文章目录
1 前言
动画也是 Android 知识体系中一块非常重要的内容,我们要想在界面中实现一些炫酷的效果,那么必然离不开动画。Android 中动画分为三种,View 动画(视图动画)、帧动画、属性动画。其中帧动画也属于 View 动画的一种。
2 View 动画种类
View 动画由 5 种类型组成:透明度(alpha)、旋转(rotate)、缩放(scale)、位移(translate)、动画集(set)。
2.1 View 动画标签实现
2.1.1 如何使用动画标签
使用动画标签创建视图动画有两个步骤。
- 使用 XML 配置动画文件
- 在界面中加载动画并使用
动画文件存放在 res/anim 文件夹下面,使用时候,需要使用 R.anim.XXX 来访问,位置如下图所示。
//1.使用 XML 配置动画文件
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="0"
android:toXScale="1.5"
android:fromYScale="0"
android:toYScale="1.5"
android:pivotX="50%"
android:pivotY="50%">
</scale>
//2.在界面中加载动画并使用
ImageView iv = findViewById(R.id.iv);
Animation animation = AnimationUtils.loadAnimation(this,R.anim.scalse_anim);
//设置动画时间
animation.setDuration(3000);
//控件开始动画
iv.startAnimation(animation);
2.1.2 动画标签分类
2.1.2.1 alpha
alpha 实现透明度的变化的动画,自身属性如下。
- android:fromAlpha:动画开始时候的透明度,取值范围为 0.0 - 1.0,0. 0 表示全透明,1.0 表示不透明。
- android:toAlpha:动画结束时候的透明度。
2.1.2.2 rotate
rotate 实现画面旋转的动画,自身属性如下。
- android:fromDegree:动画开始旋转时候的角度,正值表示顺时针方向的度数,负值表示逆时针方向的度数。
- android:toDegree:动画结束旋转时候的角度。
- android:pivotX:动画旋转中心点的 X 轴位置,默认为控件坐标原点,有三种表示,数值、百分数、百分数p,例如 50,50%,50%p。50 表示 坐标点为 50,50% 表示自身宽度 50%位置,50%p 表示父控件宽度 50% 的位置。
- android:pivotY:动画旋转中心点的 X 轴位置。
2.1.2.3 scale
scale 实现缩放的动画,自身属性如下。
- android:fromXScale:动画开始,控件在 X 轴方向上缩放值。
- android:toXScale:动画结束,控件在 X 轴方向上缩放值。
- android:fromYScale:动画开始,控件在 Y 轴方向上缩放。值。
- android:toYScale: 动画结束,控件在 Y 轴方向上缩放值。
- android:pivotX:同 rotate 。
- android:pivotY:同 rotate。
2.1.2.4 translate
scale 实现位移的动画,自身属性如下。
- android:fromXDelta:起点 X 坐标,有数值、百分数、百分数p 三种。
- android:toXDelta:终点 Y 坐标。
- android:fromYDelta:起点 Y 轴坐标。
- android:toYDelta:终点 Y 坐标。
2.1.2.5 set
set 集合表示动画集合,如下代码所示。
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="1"
android:toAlpha="0" />
<scale
android:fromXScale="1.5"
android:fromYScale="1.5"
android:toXScale="1"
android:toYScale="1" />
</set>
2.1.2.6 Animation 公用属性
View 视图除了自身的属性,还继承了 Animation 的属性,Animation 所有动画的基类。
- android:duration:设置动画持续时间,单位毫秒
- android:fillAfter:为 true 时,保持动画结束时状态。
- android:fillBefore:为 true 时,还原动画到初始状态。
- android:fillEnabled:为 true 时,还原动画到初始状态。
- android:repeatMode:重复次数,为 infinite ,表示无限循环。
- android:repeatCount:重复类型,有 reverse(倒序回放) 和 restart(重放) 两个值。
- android:interpolator:插值器,例如匀速、弹跳等效果,例如设置 @android:anim/accelerate_interpolator 表示动画越来越快。
2.2 View 动画代码实现
View 动画代码实现形式比较简单,xml 形式可以转成代码实现。
标签 | 类 |
---|---|
alpha | AlphaAnimation |
scale | ScaleAnimation |
rotate | RotateAnimation |
translate | TranslateAnimation |
set | AnimationSet |
//示例代码,直接 new 就可以
AlphaAnimation alpha = new AlphaAnimation(1.0f,0.0f)
alpha .setDurtion(1000);
iv.startAnimation(alpha);
需要注意 android:pivotX 有三种样式,数值、百分数、百分数p,转成代码变成构造函数参数 pivotXType
- Animation.ABSOLUTE
- Animation.RELATIVE_TO_SELF
- Animation RELATIVE_TO_ENT
另外 android:repeateMode 转换成代码为 setRepeatMode() 取值为 Animation.RESTART 和 Animation.REVERSE,android:reateCount = “infinite” 转换成代码为 setRepeateCount(Animation.INFINITE) 。
2.2.1 AnimationSet
public AnimationSet(Context context, AttributeSet attrs)
//shareInterpolator 为 true,共用插值器
public AnimationSet(boolean shareInterpolator)
2.2.2 常用函数
//1.取消动画
void cancel()
//2.重置动画
void reset()
//3.设置动画监听
void setAnimationListener(AnimationListener listener)
2.3 逐帧动画
逐帧动画,其实就是一帧一帧播放图片,可以通过 XML 实现或者 Java 实现。逐帧动画比较消耗内存,使用完成之后一定要释放掉。
2.3.1 XML 实现
//1.在 drawable 新建一个 XML 文件
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false"><!--是否只播放一次-->
<!--android:drawable 图片位置,
android:duration 动画播放时间-->
<item android:drawable="@drawable/ic_1"
android:duration="1000"/>
</animation-list>
//2.设置给 ImageView
<ImageView
android:id="@+id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/loading_anim" />
//3.使用
AnimationDrawable animation= (AnimationDrawable)iv.getBackground();
animation.start();
2.3.2 代码实现
逐帧动画也可以使用代码实现,也比较简单。
//1.新建 AnimationDrawable 对象
AnimationDrawable animation = new AnimationDrawable();
for (int i = 1; i < 13; i++) {
//通过文件名称获取资源 id
int id = getResources().getIdentifier("ic_" + i, "drawable", getPackageName());
Drawable drawable = getResources().getDrawable(id);
//2.给 AnimationDrawable 添加帧
animation.addFrame(drawable, 100);
}
//2.无限循环
animation.setOneShot(false);
//3.设置给 ImageView
iv.setBackgroundDrawable(animation);
2.3.3 例子
接下来我们写一个例子,一个加载动画,如下图所示。
动画图片资源文件如下。
1.定义 XML 文件
<?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/ic_1"
android:duration="1000" />
<item
android:drawable="@drawable/ic_2"
android:duration="100" />
<item
android:drawable="@drawable/ic_3"
android:duration="100" />
<item
android:drawable="@drawable/ic_4"
android:duration="100" />
<item
android:drawable="@drawable/ic_5"
android:duration="100" />
<item
android:drawable="@drawable/ic_6"
android:duration="100" />
<item
android:drawable="@drawable/ic_7"
android:duration="100" />
<item
android:drawable="@drawable/ic_8"
android:duration="100" />
<item
android:drawable="@drawable/ic_9"
android:duration="100" />
<item
android:drawable="@drawable/ic_10"
android:duration="100" />
<item
android:drawable="@drawable/ic_11"
android:duration="100" />
<item
android:drawable="@drawable/ic_12"
android:duration="100" />
<item
android:drawable="@drawable/ic_13"
android:duration="100" />
</animation-list>
2.设置给 ImageView
<ImageView
android:id="@+id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/loading_anim" />
3.加载动画
AnimationDrawable animation = (AnimationDrawable) iv.getBackground();
animation.start();