View间渐变
最后更新于:2022-04-01 01:39:37
> 编写:[XizhiXu](https://github.com/XizhiXu) - 原文:[http://developer.android.com/training/animation/crossfade.html](http://developer.android.com/training/animation/crossfade.html)
渐变动画(也叫消失)通常指渐渐的淡出某个 UI 组件,同时同步地淡入另一个。在你 App 想切换内容或 view的情况下,这种动画很有用。渐变简短不易察觉,它也能提供从一个界面到下一个之间流畅的转换。当你不使用它们,不管怎么样转换经常感到生硬而仓促。
下面是一个利用进度指示渐变到一些文本内容的例子。
如果你想跳过看整个例子,[下载](http://developer.android.com/shareables/training/Animations.zip) App 样例然后运行渐变例子。查看下列文件中的代码实现:
- src/CrossfadeActivity.java
- layout/activity_crossfade.xml
- menu/activity_crossfade.xml
### 创建View
创建两个你想相互渐变的 view。下面的例子创建了一个进度提示圈和可滑动文本 view。
~~~
<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>
~~~
### 设置动画
为设置动画,你需要:
1.
为你想渐变的 view 创建成员变量。之后动画应用途中修改 View 的时候你会需要这些引用的。
1.
对于被淡出的 view,设置它的 visibility 为 [GONE](http://developer.android.com/reference/android/view/View.html#GONE)。这样防止 view 再占据布局的空间,而且也能在布局计算中将其忽略,加速处理过程。
1.
将 [config_shortAnimTime](http://developer.android.com/reference/android/R.integer.html#config_shortAnimTime) 系统属性暂存到一个成员变量里。这个属性为动画定义了一个标准的“短”持续时间。对于微妙或者快速发生的动画,这是个很理想的时间段。[config_longAnimTime](http://developer.android.com/reference/android/R.integer.html#config_longAnimTime) 和 [config_mediumAnimTime](http://developer.android.com/reference/android/R.integer.html#config_mediumAnimTime) 也行,如果你想用的话。
下面是个内容 view 的 [activity](# "An activity represents a single screen with a user interface.") 例子,它使用了前面所述代码片段中的布局。
~~~
public class CrossfadeActivity extends Activity {
private View mContentView;
private View mLoadingView;
private int mShortAnimationDuration;
...
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_crossfade);
mContentView = findViewById(R.id.content);
mLoadingView = findViewById(R.id.loading_spinner);
// 初始化隐藏这个View.
mContentView.setVisibility(View.GONE);
// 获取并缓存系统默认的“短”时长
mShortAnimationDuration = getResources().getInteger(
android.R.integer.config_shortAnimTime);
}
~~~
### 渐变View
既然正确地设置了那些 view,做下面这些事情来渐变他们吧:
1.
对于淡入的 view,设置 alpha 值为 0 并且设置 visibility 为 [VISIBLE](http://developer.android.com/reference/android/view/View.html#VISIBLE)(要记得他起初被设置成了 [GONE](http://developer.android.com/reference/android/view/View.html#GONE))。这让 view 可见了但是它是透明的。
1.
对于淡入的 view,把 alpha 值从 0 动态改变到 1。同时,对于淡出的 view,把 alpha 值从 1 动态变到 0。
1.
使用 [Animator.AnimatorListener](http://developer.android.com/reference/android/animation/Animator.AnimatorListener.html) 中的 [onAnimationEnd()](http://developer.android.com/reference/android/animation/Animator.AnimatorListener.html#onAnimationEnd(android.animation.Animator)),设置淡出 view 的 visibility 为 [GONE](http://developer.android.com/reference/android/view/View.html#GONE)。即使 alpha 值为 0,也要把 view 的 visibility 设置成 [GONE](http://developer.android.com/reference/android/view/View.html#GONE) 来防止 view 占据布局空间,还能把它从布局计算中忽略,加速处理过程。
下面方法展示如何去做:
~~~
private View mContentView;
private View mLoadingView;
private int mShortAnimationDuration;
...
private void crossfade() {
// 设置内容View为0%的不透明度,但是状态为“可见”,
// 因此在动画过程中是一直可见的(但是为全透明)。
mContentView.setAlpha(0f);
mContentView.setVisibility(View.VISIBLE);
// 开始动画内容View到100%的不透明度,然后清除所有设置在View上的动画监听器。
mContentView.animate()
.alpha(1f)
.setDuration(mShortAnimationDuration)
.setListener(null);
// 加载View开始动画逐渐变为0%的不透明度,
// 动画结束后,设置可见性为GONE(消失)作为一个优化步骤
//(它将不再参与布局的传递等过程)
mLoadingView.animate()
.alpha(0f)
.setDuration(mShortAnimationDuration)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
mLoadingView.setVisibility(View.GONE);
}
});
}
~~~