一般来说，当内容更换时，有动画的话会更好过渡，用户也会体验较好。有三种比较常见的动画用于隐藏或显示内容：Circle Reveal动画、淡入淡出效果、卡片翻转效果。
下面将分别介绍这三种常见的动画效果：
淡入淡出动画
淡入淡出动画一般是一个View在渐渐消失，另一个View同时在渐渐出现。
先看效果，如下图：
淡入淡出效果动画
可以看到效果是一个文本渐渐出现，loading渐渐消失。
创建xml布局
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".animation.CrossFadeActivity">
<ScrollView
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
style="?android:textAppearanceMedium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:lineSpacingMultiplier="1.2"
android:padding="16dp"
android:text="@string/large_text"/>
</ScrollView>
<ProgressBar
android:id="@+id/loading_spinner"
style="?android:progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
</FrameLayout>
代码实现动画
class CrossFadeActivity : AppCompatActivity() {
private var mShortAnimationDuration: Int = 5000
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_cross_fade)
crossFade()
}
private fun crossFade() {
content.apply {
visibility = View.VISIBLE
alpha = 0f
animate().alpha(1.0f)
.setDuration(mShortAnimationDuration.toLong())
.withEndAction {
content.visibility = View.VISIBLE
}.start()
}
loading_spinner.animate()
.alpha(0.0f)
.setDuration(mShortAnimationDuration.toLong())
.withEndAction {
loading_spinner.visibility = View.GONE
}.start()
}
}
这里使用的属性动画，初始时内容alpha=0，渐渐变为1，而loading的alpha则由1变为0。喂了看出效果因此，设置了5s。
卡片翻转动画
先看效果：
卡片翻转动画效果
这里采用自定义Fragment的专场动画，其中有两个Fragment，布局都很简单，就不展示了。
动画代码
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Before rotating, immediately set the alpha to 0. -->
<objectAnimator
android:valueFrom="1.0"
android:valueTo="0.0"
android:propertyName="alpha"
android:duration="0" />
<!-- Rotate. -->
<objectAnimator
android:valueFrom="180"
android:valueTo="0"
android:propertyName="rotationY"
android:interpolator="@android:interpolator/accelerate_decelerate"
android:duration="@integer/card_flip_time_full" />
<!-- Half-way through the rotation (see startOffset), set the alpha to 1. -->
<objectAnimator
android:valueFrom="0.0"
android:valueTo="1.0"
android:propertyName="alpha"
android:startOffset="@integer/card_flip_time_half"
android:duration="@integer/card_flip_time_half" />
</set>
其他类似，分别表示左进、左出、右进、右出的动画。
Kotlin代码
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_card_flip)
if (savedInstanceState == null) {
supportFragmentManager.beginTransaction()
.add(R.id.container, CardFrontFragment())
.commit()
}
}
override fun onBackPressed() {
flipCard()
}
private var mShowingBack: Boolean = false
private fun flipCard() {
if (mShowingBack) {
supportFragmentManager.popBackStack()
mShowingBack = false
return
}
mShowingBack = true
supportFragmentManager.beginTransaction()
.setCustomAnimations(
R.animator.card_flip_right_in,
R.animator.card_flip_right_out,
R.animator.card_flip_left_in,
R.animator.card_flip_left_out
)
.replace(R.id.container, CardBackFragment())
.addToBackStack(null)
.commit()
}
重写了返回键，就是为了看效果。
去掉自定义的动画，转场如下图所示：
Fragment默认的转场动画
是不是很突兀？看来有个动画还是真的不一样的。
Circle Reveal动画
话不多说，先看效果：
Circle Reveal动画效果
ViewAnimationUtils.createCircularReveal()方法使我们可以有上述的效果。但是该类在API 21之上才有效果。
显示代码
显示代码如下：
private fun showView() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
val cx = text.width / 2
val cy = text.height / 2
val finalRadius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()
val anim = ViewAnimationUtils.createCircularReveal(text, cx, cy, 0f, finalRadius)
text.visibility = View.VISIBLE
anim.start()
} else {
text.visibility = View.VISIBLE
}
}
隐藏代码
private fun hideView() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
val cx = text.width / 2
val cy = text.height / 2
val initRadius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()
val anim = ViewAnimationUtils.createCircularReveal(text, cx, cy, initRadius, 0f)
anim.addListener(object : AnimatorListenerAdapter() {
override fun onAnimationEnd(animation: Animator?) {
super.onAnimationEnd(animation)
text.visibility = View.INVISIBLE
}
})
anim.start()
} else {
text.visibility = View.INVISIBLE
}
}
总结
动画确实很炫酷，不过要慎用，这周开发就遇到了坑，有机会会以文章的形式记录下来。
关于代码，请见 Github
参考：
