概念
动画实际上就是在指定的时间段内持续的修改某个属性的值，使得该值在指定取值范围之内平滑的过渡
android中的动画分为：View动画、帧动画和属性动画
帧动画
Frame动画是一系列图片按照一定的顺序展示的过程，它的原理是在一定的时间段内切换多张有细微差异的图片从而达到动画的效果
可以定义在xml文件中，代码实现使用到AnimationDrawable对象
xml实现
- 使用< animation-list>作为根元素，包含一个或多个< item>元素，放在drawable目录下
- android:onshot如果是true的话，动画只会执行一次，false则一致循环
- android:drawable指定此帧动画所对应的图片资源
- android:dutation代表此帧持续的时间，单位是毫秒
<!--在drawable目录下新建-->
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/g1" android:duration="200"/>
<item android:drawable="@drawable/g2" android:duration="200"/>
<item android:drawable="@drawable/g3" android:duration="200"/>
<item android:drawable="@drawable/g4" android:duration="200"/>
</animation-list>
- 将动画设置给某个view的背景
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="@drawable/frame" />
- 在代码中启动
val drawable = imageView.background as AnimationDrawable
drawable.start()
代码实现
//帧动画使用的是AnimationDrawable
val animationDrawable = AnimationDrawable()
for (i in 1..11) {
val id = resources.getIdentifier("g${i}", "drawable", packageName)
val drawable = resources.getDrawable(id)
//加入帧动画
animationDrawable.addFrame(drawable, 300)
}
//循环播放
animationDrawable.isOneShot = false
//设置view的背景
imageView.background = animationDrawable
animationDrawable.start()
推荐使用xml方式，因为将动画和代码中隔离，使动画更容易维护
帧动画使用比较简单，但是比较容易引起OOM，所以在使用帧动画时应尽量避免使用过多尺寸较大的图片
补间动画/View动画(Animation)
tween动画是操作某个控件旋转、渐变、移动、缩放的一种转换过程，称为补间动画
view动画的四种变换效果对应Animation的4个子类：TranslateAnimation,ScaleAnimation,RotateAnimation和AlphaAnimation
可以使用xml实现和代码实现，xml文件放在anim目录下，代码实现需要使用到Animation对象
补间动画只能运用在view对象上，功能局限，只能在x轴，y轴进行，不能在z轴上进行
alpha
xml
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:fromAlpha="0"
android:toAlpha="1">
</alpha>
val alpha = AnimationUtils.loadAnimation(this, R.anim.alpha)
alpha.repeatCount = -1//循环播放
imageView2.startAnimation(alpha)
代码
val alpha2 = AlphaAnimation(0f, 1f)
alpha2.duration = 1000
imageView2.startAnimation(alpha2)
scale
xml
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.5"
android:toYScale="1.5">
</scale>
val scale = AnimationUtils.loadAnimation(this, R.anim.scale)
scale.repeatCount = -1
imageView3.startAnimation(scale)
代码
val scale = ScaleAnimation(
1f,//fromX
1.5f,//toX
1f,//fromY
1.5f,//toY
ScaleAnimation.RELATIVE_TO_SELF,
0.5f,
ScaleAnimation.RELATIVE_TO_SELF,
0.5f
)
scale.repeatCount = -1
scale.duration = 2000
imageView3.startAnimation(scale)
translate
xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="100%"
android:toYDelta="0">
</translate>
val translate = AnimationUtils.loadAnimation(this, R.anim.translate)
translate.repeatCount = -1
imageView4.startAnimation(translate)
代码
val translate = TranslateAnimation(
TranslateAnimation.RELATIVE_TO_SELF,
0f,
TranslateAnimation.RELATIVE_TO_SELF,
1f,
TranslateAnimation.RELATIVE_TO_SELF,
0f,
TranslateAnimation.RELATIVE_TO_SELF,
0f
)
translate.repeatCount = -1
translate.duration = 2000
imageView4.startAnimation(translate)
rotate
xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360">
</rotate>
val rotate = AnimationUtils.loadAnimation(this, R.anim.rotate)
rotate.repeatCount = -1
imageView5.startAnimation(rotate)
代码
val rotate = RotateAnimation(
0f,
360f,
RotateAnimation.RELATIVE_TO_SELF,
0.5f,
RotateAnimation.RELATIVE_TO_SELF,
0.5f
)
rotate.repeatCount = -1
rotate.duration = 2000
imageView5.startAnimation(rotate)
view动画的特殊使用场景
LayoutAnimation
- 定义LayoutAnimation
<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
android:animation="@anim/alpha"
android:animationOrder="normal"
android:delay="0.5">
</layoutAnimation>
- 为子元素指定具体入场动画
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300"
android:shareInterpolator="true">
<alpha
android:fromAlpha="0"
android:toAlpha="1" />
<translate
android:fromXDelta="500"
android:toXDelta="0" />
</set>
- 为ViewGroup指定layoutAnimation属性
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="0dp"
android:layout_height="0dp"
android:layoutAnimation="@anim/layout_animation"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/imageView3"
app:layout_constraintTop_toBottomOf="@+id/imageView6" />
- 这样列表中的item就有了出场动画了
Activity的切换效果
属性动画
属性动画可以对任何对象做动画，甚至还可以没有对象
ValueAnimator,ObjectAnimator,AnimatorSet
属性动画通过调用属性的get，set方法来真实的控制一个view的属性值，原理是通过反射，如果该属性没有get，set方法，则会抛出异常。通过不断的修改对象的属性值来实现动画
ValueAnimator
属性动画机制中最核心的类，数值发生器，内部使用一种时间循环的机制来计算值与值之间的动画过渡
负责管理动画的播放次数，播放模式，以及动画的监听
使用ofFloat,ofInt等静态工厂函数构建ValueAnimator
xml
<?xml version="1.0" encoding="utf-8"?>
<animator xmlns:android="http://schemas.android.com/apk/res/android"
android:valueFrom="0.0"
android:valueTo="1"
android:valueType="floatType">
</animator>
val animator: ValueAnimator =
AnimatorInflater.loadAnimator(this, R.animator.value) as ValueAnimator
animator.duration = 5000
animator.addUpdateListener {
println(it.animatedValue)
}
animator.start()
代码
private fun startValueAnimator() {
val valueAnimator = ValueAnimator.ofFloat(0f, 1f)
valueAnimator.duration = 2000
valueAnimator.addUpdateListener {
println(it.animatedValue)
}
valueAnimator.start()
}
ObjectAnimator
ValueAnimator功能强大，但是需要做更多的工作来实现动画需求，ValueAnimator只是对值进行了一个平滑的动画过渡
ObjectAnimator继承ValueAnimator,使用ObjectAnimator直接对任意对象的任意属性进行动画操作
val a = ObjectAnimator.ofFloat(imageView7, "rotation", 0f, 90f, 180f)
a.duration = 5000
a.start()
- 改变view的背景色
val oa = ObjectAnimator.ofArgb(
imageView8,
"backgroundColor",
0xffff8080.toInt(),
0xff8080ff.toInt(),
0xff3C3F41.toInt(),
0xffFD7037.toInt()
)
oa.duration = 3000
//oa.setEvaluator(ArgbEvaluator())
oa.repeatCount = ObjectAnimator.INFINITE
oa.start()
- 动画改变view的宽度
class Wapper(val view: View) {
fun setWidth(width: Int) {
view.layoutParams.width = width
view.requestLayout()
}
fun getWidth(): Int {
return view.layoutParams.width
}
}
val wapper = Wapper(button2)
val oaa = ObjectAnimator.ofInt(wapper, "width", button2.layoutParams.width, 500)
oaa.duration = 1000
oaa.start()
//采用ValueAnimator，监听动画过程，实现属性改变
AnimatorSet
将多个动画组合在一起执行
val animatorSet = AnimatorSet()
animatorSet.duration = 5000
animatorSet.playTogether(
ObjectAnimator.ofFloat(imageView9, "rotationX", 0f, 360f),
ObjectAnimator.ofFloat(imageView9, "rotationY", 0f, 180f),
ObjectAnimator.ofFloat(imageView9, "rotation", 0f, -90f),
ObjectAnimator.ofFloat(imageView9, "translationX", 0f, 90f),
ObjectAnimator.ofFloat(imageView9, "translationY", 0f, 90f),
ObjectAnimator.ofFloat(imageView9, "scaleX", 1f, 1.5f),
ObjectAnimator.ofFloat(imageView9, "scaleY", 1f, 0.5f),
ObjectAnimator.ofFloat(imageView9, "alpha", 1f, 0.25f, 1f)
)
animatorSet.start()
在实际开发中建议采用代码实现属性动画，因为通过代码来实现比较简单
类型估值器TypeEvaluator
根据当前动画已执行时间占总时间的百分比来计算新的属性值
TypeEvaluator只有一个evaluate方法，该方法的职责就是计算新的属性值
常见的类型估值器有：IntEvaluator,FloatEvaluator,ArgbEvaluator
时间插值器TimeInterpolator
修改动画已执行时间与总时间的百分比，也就是修改fraction参数值
匀速的线性插值LinearInterpolator、加速插值器AccelerateInterpolator、减速插值器DecelerateInterpolator和加速减速插值器AccelerateDecelerateInterpolator等
在动画执行时，会调用TimeInterpolator的getInterpolation函数设置fraction，即修改估值器中的变化率
public float getInterpolation(float input)
使用动画存在的问题
Activity的过渡动画
android5.x为Activity提供了转场动画
提供了三种transition类型
进入，退出动画
- 从A跳转到B，调用startActivity方法
startActivity(
Intent(this, LdMenuActivity::class.java),
ActivityOptions.makeSceneTransitionAnimation(this).toBundle()
)
- 在B中设置
window.requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)
//进入B的动画
window.enterTransition = Slide()
//退出B的动画
//window.exitTransition = Fade()
//window.enterTransition = Explode()
共享元素
- 在A的Actvity的布局文件中给共享元素添加属性android:translationName
<ImageView
android:id="@+id/imageView"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="@drawable/ic_tag_faces"
android:transitionName="face"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
- 在B的Activity的布局文件中，给元素增加相同的属性，命名需要一致
<ImageView
android:id="@+id/imageView2"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_tag_faces"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.1"
android:transitionName="face"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.39" />
- 在A中启动activity
startActivity(
Intent(this, LdMenuActivity::class.java),
ActivityOptions.makeSceneTransitionAnimation(
this,
Pair.create<View, String>(binding.imageView, "face"),//多个共享元素
Pair.create<View, String>(binding.button4, "btn")
).toBundle()
)
Material Design动画
Ripple
设置波纹背景后，点击后波纹效果
- 波纹有边界
<Button
android:id="@+id/button5"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="?attr/selectableItemBackground"
android:text="有界波纹"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button2" />
- 波纹无边界
<Button
android:id="@+id/button6"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:text="无界波纹"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button5" />
- 直接创建一个具有Ripple效果的xml文件
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@android:color/holo_green_dark"><!--波纹的颜色-->
<item>
<shape android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="@android:color/white" />
</shape>
</item>
</ripple>
Circular Reveal
这个动画效果具体表现为一个View以圆形的形式展开，揭示出来
通过ViewAnimationUtils.createReveal方法创建一个RevealAnimator动画
val animator = ViewAnimationUtils.createCircularReveal(
oval,//view
oval.width / 2,//缩放的x
oval.height / 2,//缩放的y
oval.width.toFloat() / 2,//圆开始的半径
0f//圆结束的半径
)
animator.interpolator = AccelerateDecelerateInterpolator()
animator.duration = 2000
animator.start()
val animator = ViewAnimationUtils.createCircularReveal(
it,
0,
0,
0f,
Math.hypot(it.width.toDouble(), it.height.toDouble()).toFloat()
)
//animator.interpolator = BounceInterpolator()
animator.duration = 2000
animator.start()
View state chanegs Animation
在Android5.X中，系统提供了视图状态改变来设置一个视图的状态切换动画
- 在xml中定义一个StateListAnimator并添加到selector中(这是动画的selector，在animator文件夹中创建)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<set>
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="rotationX"
android:valueTo="360"
android:valueType="floatType" />
</set>
</item>
<item android:state_pressed="false">
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="rotationX"
android:valueTo="0"
android:valueType="floatType" />
</item>
</selector>
- 在view中设置android:stateListAnimator
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:stateListAnimator="@animator/oa"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
- 同样的，可以在代码中设置
val oa = AnimatorInflater.loadStateListAnimator(this, R.animator.oa)
button3.stateListAnimator = oa
3814
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
