View间渐变

编写:XizhiXu - 原文:<http://developer.android.com/training/animation/crossfade.html>

渐变动画（也叫消失）通常指渐渐的淡出某个UI组件，同时同步地淡入另一个。当App想切换内容或View的情况下，这种动画很有用。渐变简短不易察觉，同时又提供从一个界面到下一个之间流畅的转换。如果在需要转换的时候没有使用任何动画效果，这会使得转换看上去感到生硬而仓促。

下面是一个利用进度指示渐变到一些文本内容的例子。

0.7 倍 1.0 倍 1.2 倍 1.5 倍 2.0 倍

如果你想跳过这部分介绍直接查看样例，下载并运行样例App然后选择渐变例子。查看下列文件中的代码实现：

  • src/CrossfadeActivity.java
  • layout/activity_crossfade.xml
  • menu/activity_crossfade.xml

创建View

创建两个我们想相互渐变的View。下面的例子创建了一个进度提示圈和可滑动文本View。

1. <FrameLayout xmlns:android="/apk/res/android"
2. android:layout_width="match_parent"
3. android:layout_height="match_parent">

5. <ScrollView xmlns:android="/apk/res/android"
6. android:id="@+id/content"
7. android:layout_width="match_parent"
8. android:layout_height="match_parent">

10. <TextView style="?android:textAppearanceMedium"
11. android:lineSpacingMultiplier="1.2"
12. android:layout_width="match_parent"
13. android:layout_height="wrap_content"
14. android:text="@string/lorem_ipsum"
15. android:padding="16dp" />

17. </ScrollView>

19. <ProgressBar android:id="@+id/loading_spinner"
20. style="?android:progressBarStyleLarge"
21. android:layout_width="wrap_content"
22. android:layout_height="wrap_content"
23. android:layout_gravity="center" />

25. </FrameLayout>

设置动画

为设置动画，我们需要按照如下步骤来做：

  1. 为我们想渐变的View 创建成员变量。在之后动画应用途中修改View的时候我们会需要这些引用。
  2. 对于被淡入的View，设置它的visibility为GONE。这样防止view再占据布局的空间，而且也能在布局计算中将其忽略，加速处理过程。
  3. 将config_shortAnimTime系统属性暂存到一个成员变量里。这个属性为动画定义了一个标准的“短”持续时间。对于细微或者快速发生的动画，这是个很理想的持续时段。也可以根据实际需求使用config_longAnimTime或config_mediumAnimTime。

下面的例子使用了前文提到的布局文件：

1. public class CrossfadeActivity extends Activity {

3. private View mContentView;
4. private View mLoadingView;
5. private int mShortAnimationDuration;

7. ...

9. @Override
10. protected void onCreate(Bundle savedInstanceState) {
11. super.onCreate(savedInstanceState);
12. setContentView(R.layout.activity_crossfade);

14. mContentView = findViewById(R.id.content);
15. mLoadingView = findViewById(R.id.loading_spinner);

17. // Initially hide the content view.
18. mContentView.setVisibility(View.GONE);

20. // Retrieve and cache the system's default "short" animation time.
21. mShortAnimationDuration = getResources().getInteger(
22. android.R.integer.config_shortAnimTime);
23. }

渐变View

进行了上述配置之后，接下来就让我们实现渐变动画吧：

  1. 对于正在淡入的View，设置它的alpha值为0并且设置visibility为 VISIBLE（记住他起初被设置成了 GONE）。这样View就变成可见的了，但是此时它是透明的。
  2. 对于正在淡入的View，把alpha值从0动态改变到1。同时，对于淡出的View，把alpha值从1动态变到0。
  3. 使用Animator.AnimatorListener中的 onAnimationEnd()，设置淡出View的visibility为GONE。即使alpha值为0，也要把View的visibility设置成GONE来防止 view 占据布局空间，还能把它从布局计算中忽略，加速处理过程。

详见下面的例子：

1. private View mContentView;
2. private View mLoadingView;
3. private int mShortAnimationDuration;

5. ...

7. private void crossfade() {

9. // Set the content view to 0% opacity but visible, so that it is visible
10. // (but fully transparent) during the animation.
11. mContentView.setAlpha(0f);
12. mContentView.setVisibility(View.VISIBLE);

14. // Animate the content view to 100% opacity, and clear any animation
15. // listener set on the view.
16. mContentView.animate()
17. .alpha(1f)
18. .setDuration(mShortAnimationDuration)
19. .setListener(null);

21. // Animate the loading view to 0% opacity. After the animation ends,
22. // set its visibility to GONE as an optimization step (it won't
23. // participate in layout passes, etc.)
24. mLoadingView.animate()
25. .alpha(0f)
26. .setDuration(mShortAnimationDuration)
27. .setListener(new AnimatorListenerAdapter() {
28. @Override
29. public void onAnimationEnd(Animator animation) {
30. mLoadingView.setVisibility(View.GONE);
31. }
32. });
33. }