本篇学习笔记完全根据官方文档中使用动画显示或隐藏视图部分学习的，基本是照着文档学习的，点击链接可以直接跳转到官方文档部分。
使用动画显示或隐藏视图
有时候，我们需要在屏幕上显示新的信息，同时移除旧的信息，一般情况下我们通过VISIBILITY或者GONE来对需要显示或者隐藏的视图进行设置，这样做的坏处是显示或者隐藏的动作变化非常突兀，而且有时候变化很快导致用户无法注意到这些变化。这时就可以使用动画显示或者隐藏视图，通常情况下使用圆形揭露动画，淡入淡出动画或者卡片反转动画。
通过这篇笔记的学习，可以学习到如下内容:
-
通过控制视图的
alpha创建淡入淡出的动画
同时也会学习到使用ViewPropertyAnimator控制动画。 -
创建卡片翻转动画
同时也会学习到设置Fragment切换时的动画。 -
创建圆形揭露动画
同时也会学习到ViewAnimationUtils类中提供的createCircularReveal方法的使用。
创建淡入淡出动画、
淡入淡出动画会逐渐淡出一个View或者ViewGroup，同时淡入另一个。此动画适合在应用中切换内容或者视图的情况。这里使用ViewPropertyAnimator来创建这种动画。
下面的动画是从进度指示器切换到某些内容文字的淡入淡出示例。
- 创建布局文件:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--淡入淡出动画-->
<Button
android:id="@+id/btn_use_fade_in_fade_out_animator"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="10dp"
android:onClick="doClick"
android:text="@string/use_fade_in_fade_out_animator"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="w,1:1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/btn_use_fade_in_fade_out_animator">
<TextView
android:id="@+id/tv_content"
android:layout_width="0dp"
android:layout_height="0dp"
android:padding="16dp"
android:text="@string/test_use_fade_in_fade_out_animator_text"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!--进度条-->
<ProgressBar
android:id="@+id/loading_progress"
style="?android:progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
-
设置淡入淡出动画：
- 对于需要淡入的动画，首先将其可见性设置为
GONE，这一点在布局文件中已经设置。 - 在需要显示淡入的
View的时候，首先将其alpha设置为0，这样可以保证View已经显示但是不可见。 - 分别设置淡入的动画和淡出的动画，淡入的动画将其所在的
View的alpha属性从0变化到1，淡出的动画将其所在的View的alpha属性从1变化到0 - 对于淡出动画，在动画执行完成后，将其的可见性设置为
GONE，从而加快处理速度。
- 对于需要淡入的动画，首先将其可见性设置为
-
实现如下:
//开始执行淡入淡出动画
private fun crossFade() {
//设置需要淡入的View的alpha为0，可见性为VISIBLE
mBinding.tvContent.apply {
alpha = 0f
visibility = View.VISIBLE
//通过动画将透明度变为1.0
animate()
.alpha(1.0f)
.setDuration(mShortAnimationDuration.toLong())
.start()
}
//设置需要淡出的动画，将其alpha从1变为0，并通过监听动画执行事件，在动画结束后将View的可见性设置为GONE
mBinding.loadingProgress.animate()
.alpha(0f)
.setDuration(mShortAnimationDuration.toLong())
.setListener(object : AnimatorListenerAdapter() {
override fun onAnimationEnd(animation: Animator?) {
super.onAnimationEnd(animation)
mBinding.loadingProgress.visibility = View.GONE
}
})
.start()
}
最终执行的效果如下:
创建卡片翻转动画
卡片翻转通过显示模拟卡片翻转的动画，在内容视图之间添加动画，这里通过设置Fragment切换的动画来演示翻转动画的使用。
在这里共需要四个动画，其中两个用于卡片正面向左淡出以及从左侧淡入的动画，另外两个则用于从右侧淡入以及从右侧淡出的动画，动画文件如下:
card_flip_left_in.xml
<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="1" />
</set>
card_flip_left_out.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Rotate. -->
<objectAnimator
android:valueFrom="0"
android:valueTo="180"
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 0. -->
<objectAnimator
android:valueFrom="1.0"
android:valueTo="0.0"
android:propertyName="alpha"
android:startOffset="@integer/card_flip_time_half"
android:duration="1" />
</set>
card_flip_right_in.xml
<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="1" />
</set>
card_flip_right_out.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Rotate. -->
<objectAnimator
android:valueFrom="0"
android:valueTo="-180"
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 0. -->
<objectAnimator
android:valueFrom="1.0"
android:valueTo="0.0"
android:propertyName="alpha"
android:startOffset="@integer/card_flip_time_half"
android:duration="1" />
</set>
上面的动画文件时直接复制的文档中的文件内容，可以在官方文档中直接看到。
创建好了动画文件，还需要创建两个Fragment的布局文件，分别对应正面的Fragment和背面的Fragment,下面是正面Fragment的布局文件：
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#a6c">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:text="@string/card_front"
android:textSize="20sp"
android:textColor="#fff"
android:textStyle="bold"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
背面的Fragment则只显示一张图片:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:contentDescription="@null"
android:src="@mipmap/ic_default_mine_banner"
android:scaleType="centerCrop"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
然后就可以创建Fragment然后使用了:
//卡片切换的Fragment
class CardFrontFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_card_front, container, false)
}
}
class CardBackFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_card_back, container, false)
}
}
在Activity中，当切换Fragment的时候，通过向事务中设置自定义动画资源来设置Fragment切换时的动画:
//显示卡片背面
private fun showCardBack() {
if (mShowingBack) {
//supportFragmentManager.popBackStack()
return
}
mShowingBack = true
supportFragmentManager.beginTransaction().apply {
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.fl_content, mBackFragment)
//addToBackStack(null)
commit()
}
}
//显示卡片正面
private fun showCardFront(){
if(!mShowingBack){
//supportFragmentManager.popBackStack()
return
}
mShowingBack = false
supportFragmentManager.beginTransaction().apply {
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.fl_content, mFrontFragment)
//addToBackStack(null)
commit()
}
}
这里的切换方式和文档里面的略有不同，但是没有太大区别。
之后运行上面的代码就可以看到Fragment在切换时的动画了:
创建圆形揭露动画
当需要显示或者隐藏一组界面元素时，可以使用圆形揭露动画。ViewAnimationUtils.createCircleReveal()方法可以创建圆形揭露动画，此动画在ViewAnimationUtils类中提供，适用于5.0及更高版本。
下面的代码演示了通过圆形揭露动画显示之前不可见的视图:
首先创建需要显示和隐藏的布局:
<Button
android:id="@+id/btn_show_view_with_circle_animator"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/fl_content"
app:layout_constraintLeft_toLeftOf="parent"
android:text="@string/show_view_with_circle_animator"
app:layout_constraintRight_toLeftOf="@id/btn_hide_view_with_circle_animator"
android:layout_marginStart="10dp"
android:onClick="doClick"
/>
<Button
android:id="@+id/btn_hide_view_with_circle_animator"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBaseline_toBaselineOf="@id/btn_show_view_with_circle_animator"
app:layout_constraintLeft_toRightOf="@id/btn_show_view_with_circle_animator"
app:layout_constraintRight_toRightOf="parent"
android:text="@string/hide_view_with_circle_animator"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:onClick="doClick"
/>
<TextView
android:id="@+id/tv_view"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@id/btn_show_view_with_circle_animator"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintDimensionRatio="w,1:1"
android:background="@color/color_f54949"
android:layout_margin="10dp"
/>
下面是通过圆形揭露动画隐藏最下面的TextView：
//使用圆形揭露动画隐藏视图
private fun hideViewWithCircleAnimator() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
val cx = mBinding.tvView.width / 2
val cy = mBinding.tvView.height / 2
val anim =
ViewAnimationUtils.createCircularReveal(mBinding.tvView, cx, cy, cx.toFloat(), 0f)
anim.addListener(object : AnimatorListenerAdapter() {
override fun onAnimationEnd(animation: Animator?) {
super.onAnimationEnd(animation)
//动画运行结束后将View设置为GONE
mBinding.tvView.visibility = View.GONE
}
})
anim.start()
} else {
mBinding.tvView.visibility = View.GONE
}
}
下面的代码演示使用圆形揭露动画显示最下面的TextView：
//使用圆形揭露动画显示视图
private fun showViewWithCircleAnimator() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
val cx = mBinding.tvView.width / 2
val cy = mBinding.tvView.height / 2
val anim =
ViewAnimationUtils.createCircularReveal(mBinding.tvView, cx, cy, 0f, cx.toFloat())
mBinding.tvView.visibility = View.VISIBLE
anim.start()
} else {
mBinding.tvView.visibility = View.VISIBLE
}
}
运行效果如下:
实现上面的圆形揭露动画主要就是依赖于ViewAnimationUtils类中提供的createCircularReveal方法,这个方法接收5个参数分别是：
- 需要对哪个View实现动画，传入相应的View即可
- 圆形揭露动画的中心点的x坐标
- 圆形揭露动画的中心点的y坐标
- 开始时的半径
- 结束时的半径
通过布局文件可以看到，上面我要对tv_view实现圆形揭露动画，这个View的长宽时相等的，所以我这边设置的中心点坐标就是宽度和高度的一半，同时在隐藏的时候，设置的起始半径就是宽度的一半，结束半径就是0
