Android 动画整理---- 补间动画

Android 动画详解——–补间动画

前言

对于动画,大多数Android 开发都玩得挺好的,这里也就不献丑了,本文重在记录,已经自己对动画的一些理解,鉴于篇幅问题,分为三个文章

Android 动画整理—- 帧动画
Android 动画整理—- 补间动画
Android 动画整理—- 属性动画

🔥🔥🔥本文重在自己的查漏补缺,非常推荐 大佬的 Android:这是一份全面 & 详细的补间动画使用教程 讲解到尾!

补间动画

通过使用 Animation 对单张图片执行一系列转换来创建动画,通过对图形执行旋转、淡出、移动和拉伸等转换,达到动画的效果

Animation 关系图

如何使用

官方文档对使用也做了充分的说明,下面简单介绍各种使用,以及动画示例

ps 官方文档才是最好的博客

资源引用

  • 在 Java 中:R.anim.filename
  • 在 XML 中:@[package:]anim/filename

语法 xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?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>

语法 代码设置

除了可以使用 xml 系统也单独提供了类 方便我们实现补间动画

  • AlphaAnimation
  • RotateAnimation
  • ScaleAnimation
  • TranslateAnimation
  • AnimationSet

下面会对每个属性 介绍, 以及 xml 和代码的写法

alpha (透明度)

动画的透明度 取值范围在 [0.0f—1.0f] ; 0.0f 完全透明, 1.0f 完全不透明

在 res/anim 下新建一个 xml

1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="3000"
android:toAlpha="0.0"
android:fromAlpha="1.0">
</alpha>

然后 使用 AnimationUtils从xml 中读取属性;

1
2
3
4
5
val animationAlpha = AnimationUtils.loadAnimation(this, R.anim.tween_alpha)
//设置透明度
btn_alpha.setOnClickListener {
image.startAnimation(animationAlpha)
}

效果

触发以后能够看到 动画在 3S 内从 不透明(1.0f) 到完全透明 (0.0f)

参数含义

参数含义
toAlpha动画结束时的透明度
fromAlpha动画开始时的透明度

AlphaAnimation

系统也提供可一个 AlphaAnimation 帮助我们实现 appha 的动画效果

1
2
3
4
5
6
7
8
 private var alphaAnimation = AlphaAnimation(0f, 1f)

//设置透明度
btn_alpha.setOnClickListener {
cancel()
alphaAnimation.duration = 3000
image.startAnimation(alphaAnimation)
}

scale (缩放)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="3000"
android:fromYScale="1.0"
android:toXScale="0.0"

android:fromXScale="1.0"
android:toYScale="0.0"

android:pivotX="50%"
android:pivotY="50%"

>

</scale>

效果

参数含义

参数含义
fromXScale起始 X 缩放比例
toXScale结束 X 缩放比例
fromYScale起始 Y 缩放比例
toYScale结束 Y 缩放比例
pivotX图片做缩放运动时候中心点 X 的位置
pivotY图片做缩放运动时候中心点 Y 的位置

ScaleAnimation

1
2
3
4
5
6
7
8
9
10
11
12
13

private var scaleAnimation = ScaleAnimation(
1.0f, 0f, 1.0f, 0f,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f
)

//设置缩放
btn_scan.setOnClickListener {
cancel()
scaleAnimation.duration = 3000
image.startAnimation(scaleAnimation)
}

补充说明

pivotX 和 pivotY 有三种方式可以设置

1. 在示例中的 50% ,这样百分比的时候

例如 上面的gif 中示例的那样

1
2
android:pivotX="50%"
android:pivotY="50%"

表示当前View 宽一半的位置,和高一半的位置,

2. 设置 0 等 这样的数值的时候

例如设置

1
2
android:pivotX="0"
android:pivotY="0"

表示 当前View的 左上角, 0px 0px 的位置

3. 设置 50%p 百分比加上p 的时候

这里为了能够更佳清晰的描述,选中 translate 作为示例

设置 移动的 位置 从 (0,0) 移动到 (50%p,50%p)

1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0"
android:duration="3000"
android:toXDelta="50%p"
android:fromYDelta="0"
android:toYDelta="50%p" >

</translate>

先看一下效果

看一下解析图,设置图片大小(200,400),图片的左边距离屏幕的左边间距200px,图片原来的中心点的位置就是(300,200),那么移动以后,这个就要加上屏幕的一半,所以移动以后的图片中心点左边是 (300+屏幕宽的一半,200+屏幕高的一半),

图片中标注的A点坐标对应的就是 屏幕中心点右边原点的坐标

translate 位移

1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0"
android:duration="3000"
android:toXDelta="800"
android:fromYDelta="0"
android:toYDelta="1600" >

</translate>

效果

参数含义

参数含义
fromXDelta起始 X 偏移
toXDelta结束 X 偏移
fromYDelta起始 Y 偏移
toYDelta结束 Y 偏移

TranslateAnimation

1
2
3
4
5
6
7
8
9
10
11
12
private var translateAnimation = TranslateAnimation(
Animation.RELATIVE_TO_PARENT, 0f, Animation.RELATIVE_TO_PARENT, 0.5f,
Animation.RELATIVE_TO_PARENT, 0f, Animation.RELATIVE_TO_PARENT, 0.5f
)


//设置位移
btn_translate.setOnClickListener {
cancel()
translateAnimation.duration = 3000
image.startAnimation(translateAnimation)
}

补充说明

同上面的 scan 属性一样,translate 也能够设置 3种不同类型的 参数

rotate 旋转

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="3000"
android:fromDegrees="0"
android:toDegrees="-90"
android:pivotX="0"
android:pivotY="0" >
</rotate>

效果

参数含义

参数含义
fromDegrees起始角度
fromDegrees结束角度
pivotX起始X坐标
pivotY结束Y坐标

set 组合

set 组合其实就是把上面的4中动画按照自己喜欢的样式组合在一起,写在 set 标签下面即可

比如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

<alpha
android:duration="3000"
android:fromAlpha="1.0"
android:toAlpha="0.0" />

<translate
android:duration="3000"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="500"
android:toYDelta="0" />
</set>

同时设置他的 透明度从不透明到透明 和 x 轴的移动

效果

AnimationSet

1
2
3
4
5
6
7
8
9
10
11
12
13
14

private val animationSet = AnimationSet(true)
//设置组合动画
btn_set.setOnClickListener {
cancel()

animationSet.addAnimation(alphaAnimation)
animationSet.addAnimation(rotateAnimation)
animationSet.addAnimation(scaleAnimation)
animationSet.addAnimation(translateAnimation)

animationSet.duration = 3000
image.startAnimation(animationSet)
}

补充说明

对于 set 来说也有两个重要的属性

参数含义
interpolator插值器资源
shareInterpolator是否所有子元素中共用同一插值器

补间动画的监听器

1
animation.setAnimationListener(this)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
override fun onAnimationRepeat(animation: Animation?) {
//动画重复
Log.i(TAG, "动画重复")
}

override fun onAnimationEnd(animation: Animation?) {
//动画结束
Log.i(TAG, "动画结束")
}

override fun onAnimationStart(animation: Animation?) {
//动画开始
Log.i(TAG, "动画开始")
}

源码

博客
源码Github