Crossfading ,中文翻译叫做淡入淡出
(电影拍摄中又叫做dissolve
,即叠化,从一个镜头淡入另一个镜头)。Android
中该动画效果主要在某个UI组件逐渐消失,同时另外一个组件逐渐显现时使用。当你的App需要切换视图或者切换内容时,这个动画效果非常实用。Crossfading
精妙短小,但是可以非常流畅的从一个视图过渡到另外一个视图。如果不使用它,过渡过程将显得非常生硬和突然。
具体使用如下:
####1、创建布局文件 activity_crossfade.xml
Crossfading
是从一个视图过渡到另一个视图,所以你需要创建两个视图。下面使用RecycleView
作为ContentView实现淡入
,ProgressBar
作为LoadingView实现淡出
,代码如下:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RecycleView
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<ProgressBar android:id="@+id/loading"
style="?android:progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</FrameLayout>
对于需要淡入 的视图,将其的
visibility
设置为GONE
。这样可以阻止该视图占据布局空间并且在计算布局时将其忽略,可以加速该过程。
2、实现淡入淡出效果
- 对于淡入的视图,将其
alpha
值设置为0,并且将其visibility
设置为VISIBLE
。使其可见,但是完全透明。 - 对于淡入的视图,其
alpha
从0过渡到1 ,与此同时,将淡出的视图的alpha
值从1 过渡到0。 - 对于淡出的视图,设置
Animator.AnimatorListener
监听器,实现onAnimationEnd()
方法,当动画结束时,将其visibility
设置为GONE
。
CrossfadeActivity.java
主要代码如下:
public class CrossfadeActivity extends Activity {
private View mContentView;
private View mLoadingView;
private int mShortAnimationDuration=400;
...
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_crossfade);
mContentView = findViewById(R.id.content);
mLoadingView = findViewById(R.id.loading);
// 初始化隐藏内容View
mContentView.setVisibility(View.GONE);
...
}
...
...
private void crossfade() {
// 将内容视图设置为0%不透明度但可见,以便在动画期间完全透明
mContentView.setAlpha(0f);
mContentView.setVisibility(View.VISIBLE);
//通过动画化将内容视图设置为100%不透明度,并清除所有动画监听器
mContentView.animate()
.alpha(1f)
.setDuration(mShortAnimationDuration)
.setListener(null);
//将加载视图设为0%不透明度。动画结束后,将加载视图可见性设置为GONE
mLoadingView.animate()
.alpha(0f)
.setDuration(mShortAnimationDuration)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
mLoadingView.setVisibility(View.GONE);
}
});
}
通过上述步骤就可实现Crossfading
,下面两张图就是使用和未使用情况下的效果图:
-
未使用
Crossfading
-
使用
Crossfading