Android 中补间动画包括下面四种:
1.透明度动画 (AlphaAnimation)
2.缩放动画 (ScaleAnimation)
3.平移动画 (TranslateAnimation)
4.旋转动画 (RotateAnimation)
补间动画是专门针对View 的。只能应用于View。
具体使用
AlphaAnimation 透明度动画
补间动画可以使用代码创建也可以使用xml文件创建。在代码中创建透明度动画:
val alphaAnimation = AlphaAnimation(1f, 0f)
alphaAnimation.duration = 1000
imageView.startAnimation(alphaAnimation)
使用xml文件创建,需要在res文件夹下新建一个anim文件夹,所有的补间动画全部放在此文件夹下。
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="1"
android:toAlpha="0"
android:duration="1000">
</alpha>
属性含义:
fromAlpha 动画开始时View的透明度,1为完全不透明 ,0为完全透明 。取值为0~1
toAlpha 动画结束时View的透明度
duration 动画持续时间,单位为毫秒
在代码中使用AnimationUtils来加载动画并开始该动画:
val alphaAnimation: AlphaAnimation =
AnimationUtils.loadAnimation(this, R.anim.alpha_anim) as AlphaAnimation
imageView.startAnimation(alphaAnimation)
ScaleAnimation 缩放动画
在代码中创建缩放动画
val scaleAnimation = ScaleAnimation(1f, 2f, 1f, 2f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f)
scaleAnimation.duration = 1000
imageView.startAnimation(scaleAnimation)
使用xml文件创建
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="1"
android:toXScale="2"
android:fromYScale="1"
android:toYScale="2"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000">
</scale>
属性含义:
fromXScale 动画开始时X轴方向上的缩放系数
toXScale 动画结束时X轴方向上的缩放系数
fromYScale 动画开始时Y轴方向上的缩放系数
toYScale 动画结束时Y轴方向上的缩放系数
pivotX X轴方向上的缩放的轴点 值可以是具体值 百分比 百分比p(如50%p) 例如50 代表pivotX 为当前执行动画的View的左上角加上50px为轴点。 50%代表当前执行动画的View的左上角加上View宽的50%为轴点。50%p代表当前执行动画的View的左上角加上该View的父View宽的50%为轴点
pivotY Y轴方向上的缩放的轴点。取值同pivotX
在代码中加载并开始该动画
val scaleAnimation: ScaleAnimation =
AnimationUtils.loadAnimation(this, R.anim.scale_anim) as ScaleAnimation
imageView.startAnimation(scaleAnimation)
TranslateAnimation 平移动画
在代码中创建平移动画
val translateAnimation = TranslateAnimation(Animation.RELATIVE_TO_SELF, 0f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0f,
Animation.RELATIVE_TO_SELF, 0.5f)
translateAnimation.duration = 1000
imageView.startAnimation(translateAnimation)
使用xml文件创建,
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0"
android:toXDelta="50%"
android:fromYDelta="0"
android:toYDelta="50%"
android:duration="1000" >
</translate>
属性含义:
fromXDelta 动画开始时X轴方向上的移动距离。值可以是具体值 百分比 百分比p(如50%p)
toXDelta 动画结束时X轴方向上的移动距离。值可以是具体值 百分比 百分比p(如50%p)
fromYDelta 动画结束时Y轴方向上的移动距离。值可以是具体值 百分比 百分比p(如50%p)
toYDelta 动画结束时Y轴方向上的移动距离。值可以是具体值 百分比 百分比p(如50%p)
在代码中加载并开始该动画
val translateAnimation: TranslateAnimation =
AnimationUtils.loadAnimation(this, R.anim.translate_anim) as TranslateAnimation
translateAnimation.duration = 1000
imageView.startAnimation(translateAnimation)
RotateAnimation 旋转动画
在代码中创建旋转动画
val rotateAnimation = RotateAnimation(0f, 180f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f)
rotateAnimation.duration = 1000
imageView.startAnimation(rotateAnimation)
使用xml文件创建,
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="180"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000">
</rotate>
属性含义:
fromDegrees 动画开始时的角度
toDegrees 动画结束时的角度 正直表示顺时针旋转 负值表示逆时针旋转
pivotX 旋转的中心点X轴坐标 取值和ScaleAnimation 的pivotX一样
pivotY 旋转的中心点Y轴坐标
在代码中加载并开始该动画
val rotateAnimation: RotateAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate_anim) as RotateAnimation
imageView.startAnimation(rotateAnimation)
注意:scaleAnimation和rotateAnimation中的pivotX和pivotY可以看成是一个钉子钉在该坐标点上在进行缩放或旋转。在计算pivotX和pivotY的值的时候要注意。不管是具体指,还是百分比或百分比p。都是以进行动画的View的左上角为原点来计算。即50%是以该View的中间位置作为轴点。但是50%p就不是以该View的父View的中心位置作为轴点。而是以该View的左上角加上该View的父View的宽高的一半作为轴点。这一点需要注意。
AnimationSet
Android 还提供了一个AnimationSet类来组合使用补间动画。
在代码中使用AnimationSet
val set1 = AnimationSet(true)
val alphaAnimation = AlphaAnimation(0f, 1f)
alphaAnimation.duration = 1000
val scaleAnimation = ScaleAnimation(1f, 0.5f, 1f, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f)
scaleAnimation.duration = 1000
val set2 = AnimationSet(true)
set2.addAnimation(RotateAnimation(0f, 360f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f))
set2.addAnimation(TranslateAnimation(Animation.RELATIVE_TO_SELF, 0f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0f,
Animation.RELATIVE_TO_SELF, 0.5f))
set2.duration = 2000
set2.startOffset = 1000
set1.apply {
addAnimation(alphaAnimation)
addAnimation(scaleAnimation)
addAnimation(set2)
}
imageView.startAnimation(set1)
同样我们可以在xml文件中创建AnimationSet
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="true">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="1000"/>
<scale
android:fromXScale="1.0"
android:toXScale="0.5"
android:fromYScale="1.0"
android:toYScale="0.5"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"/>
<set android:shareInterpolator="true"
android:startOffset="1000"
android:duration="2000">
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%" />
<translate
android:fromXDelta="0"
android:toXDelta="50%"
android:fromYDelta="0"
android:toYDelta="50%" />
</set>
</set>
上面的属性一看就懂。不做过多解释。
补间动画还提供了一些控制动画的方法。
setRepeatCount(int repeatCount); 设置动画的播放次数. 不包括第一次执行的次数. 比如设置为1.表示动画执行2次.如果要让动画一直重复,可以传入一个小于0的数,比如-1
setRepeatMode(int repeatMode); 设置动画的重复播放的模式,包括Animation.RESTART(重复播放) Animation.REVERSE(倒序播放)
setFillAfter(boolean fillAfter) 设置动画在执行完毕后是否停留在最后一帧,默认为false
setStartOffset(long startOffset) 设置动画延时
监听动画的执行 我们有时候需要在动画执行开始前 执行结束后执行一些操作可以监听视图动画的执行。调用Animation.setAnimationListener(); 比如我们要监听TranslateAnimation动画
val translateAnimation = TranslateAnimation(Animation.RELATIVE_TO_SELF, 0f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0f,
Animation.RELATIVE_TO_SELF, 0.5f)
translateAnimation.duration = 1000
translateAnimation.setAnimationListener(object: Animation.AnimationListener {
override fun onAnimationRepeat(animation: Animation?) {
//动画重复时调用
}
override fun onAnimationEnd(animation: Animation?) {
//动画结束时调用
}
override fun onAnimationStart(animation: Animation?) {
//动画开始时调用
}
})
imageView.startAnimation(translateAnimation)