当您的应用程序正在使用时，新信息会出现在屏幕上，旧信息会被删除。立即更改屏幕上显示的内容可能会让人感到不舒服，用户可能会错过突然出现的新内容。动画会减缓更改速度，并用运动吸引用户的眼球，使更新更加明显。
您可以使用三种常见的动画来显示或隐藏视图：显示动画、交叉淡入淡出动画和卡片翻转动画。
创建交叉淡入淡出动画
交叉淡入淡出动画（也称为溶解）会逐渐淡出 View 或 ViewGroup，同时逐渐淡入另一个。此动画适用于您想要在应用程序中切换内容或视图的情况。此处显示的交叉淡入淡出动画使用 ViewPropertyAnimator，该动画适用于 Android 3.1（API 级别 12）及更高版本。
以下是如何从进度指示器到文本内容的交叉淡入淡出的示例
创建视图
创建要交叉淡入淡出的两个视图。以下示例创建了一个进度指示器和一个可滚动文本视图
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView style="?android:textAppearanceMedium"
android:lineSpacingMultiplier="1.2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/lorem_ipsum"
android:padding="16dp" />
</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>
设置交叉淡入淡出动画
要设置交叉淡入淡出动画，请执行以下操作
- 为要交叉淡入淡出的视图创建成员变量。稍后在动画期间修改视图时，您需要这些引用。
- 将要淡入的视图的可见性设置为
GONE。这将阻止视图使用布局空间并将视图从布局计算中省略，从而加快处理速度 - 将
config_shortAnimTime系统属性缓存到成员变量中。此属性定义动画的标准“短”持续时间。此持续时间非常适合细微的动画或频繁发生的动画。config_longAnimTime和config_mediumAnimTime也可用。
以下是如何使用先前代码片段中的布局作为活动内容视图的示例
Kotlin
class CrossfadeActivity : Activity() {
private lateinit var contentView: View
private lateinit var loadingView: View
private var shortAnimationDuration: Int = 0
...
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_crossfade)
contentView = findViewById(R.id.content)
loadingView = findViewById(R.id.loading_spinner)
// Initially hide the content view.
contentView.visibility = View.GONE
// Retrieve and cache the system's default "short" animation time.
shortAnimationDuration = resources.getInteger(android.R.integer.config_shortAnimTime)
}
...
}
Java
public class CrossfadeActivity extends Activity {
private View contentView;
private View loadingView;
private int shortAnimationDuration;
...
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_crossfade);
contentView = findViewById(R.id.content);
loadingView = findViewById(R.id.loading_spinner);
// Initially hide the content view.
contentView.setVisibility(View.GONE);
// Retrieve and cache the system's default "short" animation time.
shortAnimationDuration = getResources().getInteger(
android.R.integer.config_shortAnimTime);
}
...
}
交叉淡入淡出视图
当视图正确设置后，请通过执行以下操作来交叉淡入淡出视图
- 对于要淡入的视图，将 alpha 值设置为 0，并将可见性从其初始设置
GONE设置为VISIBLE。这将使视图可见，但不可见。 - 对于要淡入的视图，将其 alpha 值从 0 动画到 1。对于要淡出的视图，将其 alpha 值从 1 动画到 0。
- 使用
onAnimationEnd()在Animator.AnimatorListener中，将要淡出的视图的可见性设置为GONE。即使 alpha 值为 0，将视图的可见性设置为GONE也会阻止视图使用布局空间并将视图从布局计算中省略，从而加快处理速度。
以下方法显示了如何执行此操作的示例
Kotlin
class CrossfadeActivity : Activity() {
private lateinit var contentView: View
private lateinit var loadingView: View
private var shortAnimationDuration: Int = 0
...
private fun crossfade() {
contentView.apply {
// Set the content view to 0% opacity but visible, so that it is
// visible but fully transparent during the animation.
alpha = 0f
visibility = View.VISIBLE
// Animate the content view to 100% opacity and clear any animation
// listener set on the view.
animate()
.alpha(1f)
.setDuration(shortAnimationDuration.toLong())
.setListener(null)
}
// Animate the loading view to 0% opacity. After the animation ends,
// set its visibility to GONE as an optimization step so it doesn't
// participate in layout passes.
loadingView.animate()
.alpha(0f)
.setDuration(shortAnimationDuration.toLong())
.setListener(object : AnimatorListenerAdapter() {
override fun onAnimationEnd(animation: Animator) {
loadingView.visibility = View.GONE
}
})
}
}
Java
public class CrossfadeActivity extends Activity {
private View contentView;
private View loadingView;
private int shortAnimationDuration;
...
private void crossfade() {
// Set the content view to 0% opacity but visible, so that it is
// visible but fully transparent during the animation.
contentView.setAlpha(0f);
contentView.setVisibility(View.VISIBLE);
// Animate the content view to 100% opacity and clear any animation
// listener set on the view.
contentView.animate()
.alpha(1f)
.setDuration(shortAnimationDuration)
.setListener(null);
// Animate the loading view to 0% opacity. After the animation ends,
// set its visibility to GONE as an optimization step so it doesn't
// participate in layout passes.
loadingView.animate()
.alpha(0f)
.setDuration(shortAnimationDuration)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
loadingView.setVisibility(View.GONE);
}
});
}
}
创建卡片翻转动画
卡片翻转通过显示模拟卡片翻转的动画来在内容视图之间切换。此处显示的卡片翻转动画使用 FragmentTransaction。
以下是如何进行卡片翻转
创建动画器对象
要创建卡片翻转动画，您需要四个动画器。当卡片正面动画到左侧时使用两个动画器，当卡片动画从左侧进入时使用另外两个动画器。另外两个动画器用于当卡片背面动画从右侧进入以及当卡片动画到右侧时使用。
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" />
<!-- Halfway through the rotation, set the alpha to 1. See startOffset. -->
<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" />
<!-- Halfway through the rotation, set the alpha to 0. See startOffset. -->
<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" />
<!-- Halfway through the rotation, set the alpha to 1. See startOffset. -->
<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" />
<!-- Halfway through the rotation, set the alpha to 0. See startOffset. -->
<objectAnimator
android:valueFrom="1.0"
android:valueTo="0.0"
android:propertyName="alpha"
android:startOffset="@integer/card_flip_time_half"
android:duration="1" />
</set>
创建视图
卡片的每一侧都是一个独立的布局，可以包含您想要的任何内容，例如两个文本视图、两张图片或任何视图组合，以便在它们之间翻转。在您稍后动画的片段中使用这两个布局。以下布局创建了卡片的一侧，显示文本
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#a6c"
android:padding="16dp"
android:gravity="bottom">
<TextView android:id="@android:id/text1"
style="?android:textAppearanceLarge"
android:textStyle="bold"
android:textColor="#fff"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/card_back_title" />
<TextView style="?android:textAppearanceSmall"
android:textAllCaps="true"
android:textColor="#80ffffff"
android:textStyle="bold"
android:lineSpacingMultiplier="1.2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/card_back_description" />
</LinearLayout>
下一个布局创建了卡片的另一侧，显示 ImageView
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/image1"
android:scaleType="centerCrop"
android:contentDescription="@string/description_image_1" />
创建片段
为卡片的正面和背面创建片段类。在您的片段类中，从 onCreateView() 方法返回您创建的布局。然后，您可以在要显示卡片的父活动中创建此片段的实例。
以下示例显示了嵌套在使用它们的父活动中的片段类
Kotlin
class CardFlipActivity : FragmentActivity() {
...
/**
* A fragment representing the front of the card.
*/
class CardFrontFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View = inflater.inflate(R.layout.fragment_card_front, container, false)
}
/**
* A fragment representing the back of the card.
*/
class CardBackFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View = inflater.inflate(R.layout.fragment_card_back, container, false)
}
}
Java
public class CardFlipActivity extends FragmentActivity {
...
/**
* A fragment representing the front of the card.
*/
public class CardFrontFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_card_front, container, false);
}
}
/**
* A fragment representing the back of the card.
*/
public class CardBackFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_card_back, container, false);
}
}
}
动画卡片翻转
在父活动中显示片段。为此，请为您的活动创建布局。以下示例创建了一个 FrameLayout，您可以在运行时向其中添加片段
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
在活动代码中，将内容视图设置为您创建的布局。建议在创建活动时显示默认片段。以下示例活动显示了如何默认显示卡片的正面
Kotlin
class CardFlipActivity : FragmentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_activity_card_flip)
if (savedInstanceState == null) {
supportFragmentManager.beginTransaction()
.add(R.id.container, CardFrontFragment())
.commit()
}
}
...
}
Java
public class CardFlipActivity extends FragmentActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_activity_card_flip);
if (savedInstanceState == null) {
getSupportFragmentManager()
.beginTransaction()
.add(R.id.container, new CardFrontFragment())
.commit();
}
}
...
}
当卡片的正面显示时，您可以在适当的时候使用翻转动画显示卡片的背面。创建一个方法来显示卡片的另一侧，该方法执行以下操作
- 设置您为片段转换创建的自定义动画。
- 用新片段替换显示的片段，并使用您创建的自定义动画为该事件制作动画。
- 将先前显示的片段添加到片段回退堆栈中，以便当用户点击“后退”按钮时，卡片会翻转回来。
Kotlin
class CardFlipActivity : FragmentActivity() {
...
private fun flipCard() {
if (showingBack) {
supportFragmentManager.popBackStack()
return
}
// Flip to the back.
showingBack = true
// Create and commit a new fragment transaction that adds the fragment
// for the back of the card, uses custom animations, and is part of the
// fragment manager's back stack.
supportFragmentManager.beginTransaction()
// Replace the default fragment animations with animator
// resources representing rotations when switching to the back
// of the card, as well as animator resources representing
// rotations when flipping back to the front, such as when the
// system Back button is tapped.
.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 any fragments in the container view with a fragment
// representing the next page, indicated by the just-incremented
// currentPage variable.
.replace(R.id.container, CardBackFragment())
// Add this transaction to the back stack, letting users press
// the Back button to get to the front of the card.
.addToBackStack(null)
// Commit the transaction.
.commit()
}
}
Java
public class CardFlipActivity extends FragmentActivity {
...
private void flipCard() {
if (showingBack) {
getSupportFragmentManager().popBackStack();
return;
}
// Flip to the back.
showingBack = true;
// Create and commit a new fragment transaction that adds the fragment
// for the back of the card, uses custom animations, and is part of the
// fragment manager's back stack.
getSupportFragmentManager()
.beginTransaction()
// Replace the default fragment animations with animator
// resources representing rotations when switching to the back
// of the card, as well as animator resources representing
// rotations when flipping back to the front, such as when the
// system Back button is pressed.
.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 any fragments in the container view with a fragment
// representing the next page, indicated by the just-incremented
// currentPage variable.
.replace(R.id.container, new CardBackFragment())
// Add this transaction to the back stack, letting users press
// Back to get to the front of the card.
.addToBackStack(null)
// Commit the transaction.
.commit();
}
}
创建圆形显示动画
显示动画在显示或隐藏一组 UI 元素时为用户提供视觉连续性。 ViewAnimationUtils.createCircularReveal() 方法允许您对剪切圆进行动画处理，以显示或隐藏视图。此动画在 ViewAnimationUtils 类中提供，该类适用于 Android 5.0（API 级别 21）及更高版本。
以下是如何显示先前不可见视图的示例
Kotlin
// A previously invisible view.
val myView: View = findViewById(R.id.my_view)
// Check whether the runtime version is at least Android 5.0.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
// Get the center for the clipping circle.
val cx = myView.width / 2
val cy = myView.height / 2
// Get the final radius for the clipping circle.
val finalRadius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()
// Create the animator for this view. The start radius is 0.
val anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0f, finalRadius)
// Make the view visible and start the animation.
myView.visibility = View.VISIBLE
anim.start()
} else {
// Set the view to invisible without a circular reveal animation below
// Android 5.0.
myView.visibility = View.INVISIBLE
}
Java
// A previously invisible view.
View myView = findViewById(R.id.my_view);
// Check whether the runtime version is at least Android 5.0.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
// Get the center for the clipping circle.
int cx = myView.getWidth() / 2;
int cy = myView.getHeight() / 2;
// Get the final radius for the clipping circle.
float finalRadius = (float) Math.hypot(cx, cy);
// Create the animator for this view. The start radius is 0.
Animator anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0f, finalRadius);
// Make the view visible and start the animation.
myView.setVisibility(View.VISIBLE);
anim.start();
} else {
// Set the view to invisible without a circular reveal animation below
// Android 5.0.
myView.setVisibility(View.INVISIBLE);
}
ViewAnimationUtils.createCircularReveal() 动画接受五个参数。第一个参数是要在屏幕上显示或隐藏的视图。接下来的两个参数是剪切圆中心的 X 和 Y 坐标。通常，这是视图的中心，但您也可以使用用户点击的点，以便动画从用户选择的位置开始。第四个参数是剪切圆的起始半径。
在前面的示例中，初始半径设置为零，以便显示的视图被圆形隐藏。最后一个参数是圆形的最终半径。当显示视图时，请使最终半径大于视图，以便在动画结束之前完全显示视图。
要隐藏先前可见的视图，请执行以下操作
Kotlin
// A previously visible view.
val myView: View = findViewById(R.id.my_view)
// Check whether the runtime version is at least Android 5.0.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
// Get the center for the clipping circle.
val cx = myView.width / 2
val cy = myView.height / 2
// Get the initial radius for the clipping circle.
val initialRadius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()
// Create the animation. The final radius is 0.
val anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0f)
// Make the view invisible when the animation is done.
anim.addListener(object : AnimatorListenerAdapter() {
override fun onAnimationEnd(animation: Animator) {
super.onAnimationEnd(animation)
myView.visibility = View.INVISIBLE
}
})
// Start the animation.
anim.start()
} else {
// Set the view to visible without a circular reveal animation below
// Android 5.0.
myView.visibility = View.VISIBLE
}
Java
// A previously visible view.
final View myView = findViewById(R.id.my_view);
// Check whether the runtime version is at least Android 5.0.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
// Get the center for the clipping circle.
int cx = myView.getWidth() / 2;
int cy = myView.getHeight() / 2;
// Get the initial radius for the clipping circle.
float initialRadius = (float) Math.hypot(cx, cy);
// Create the animation. The final radius is 0.
Animator anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0f);
// Make the view invisible when the animation is done.
anim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
myView.setVisibility(View.INVISIBLE);
}
});
// Start the animation.
anim.start();
} else {
// Set the view to visible without a circular reveal animation below Android
// 5.0.
myView.setVisibility(View.VISIBLE);
}
在这种情况下，剪切圆的初始半径设置为与视图一样大，以便在动画开始之前视图可见。最终半径设置为零，以便在动画结束时隐藏视图。向动画添加一个侦听器，以便在动画完成时可以将视图的可见性设置为 INVISIBLE。