前言
渐变动画(也叫消失)通常指渐渐的淡出某个 UI 组件,同时同步地淡入另一个。在你 App 想切换内容或 view 的情况下,这种动画很有用。渐变简短不易察觉,它也能提供从一个界面到下一个之间流畅的转换。但当你不使用它们时,转换经常会感到生硬而仓促。
效果如下图所示:
实现步骤
1.创建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>
2.设置动画
为设置动画,你需要:
- 1.为你想渐变的 view 创建成员变量。在之后动画应用途中修改 View 的时候你会需要这些引用的。
- 2.对于被淡入的 view,设置它的 visibility 为 GONE。这样防止 view 再占据布局的空间,而且也能在布局计算中将其忽略,加速处理过程。
- 3.将 config_shortAnimTime 系统属性暂存到一个成员变量里。这个属性为动画定义了一个标准的“短”持续时间。对于细微或者快速发生的动画,这是个很理想的持续时段。config_longAnimTime 和 config_mediumAnimTime 也行,如果你想用的话。
下面是个使用之前代码布局作为内容 view 的 activity 例子。
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);
// Initially hide the content view.
mContentView.setVisibility(View.GONE);
// Retrieve and cache the system's default "short" animation time.
mShortAnimationDuration = getResources().getInteger(
android.R.integer.config_shortAnimTime);
}
3.渐变View
既然正确地设置了那些 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 占据布局空间,还能把它从布局计算中忽略,加速处理过程。
下面方法展示如何做这些:
private View mContentView;
private View mLoadingView;
private int mShortAnimationDuration;
...
private void crossfade() {
// Set the content view to 0% opacity but visible, so that it is visible
// (but fully transparent) during the animation.
mContentView.setAlpha(0f);
mContentView.setVisibility(View.VISIBLE);
// Animate the content view to 100% opacity, and clear any animation
// listener set on the view.
mContentView.animate()
.alpha(1f)
.setDuration(mShortAnimationDuration)
.setListener(null);
// Animate the loading view to 0% opacity. After the animation ends,
// set its visibility to GONE as an optimization step (it won't
// participate in layout passes, etc.)
mLoadingView.animate()
.alpha(0f)
.setDuration(mShortAnimationDuration)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
mLoadingView.setVisibility(View.GONE);
}
});
}