Android上实现进入详情展开的动画
Android Lollipop中引入的Material Design,概念中要求任何变化都是流畅的,不能突然出现和消失。Instgram的工程师实现的了如下图所示的效果:
作者的原文在这里,讲了一些实现方法,并附上了源代码。 这里总结一下实现的关键点。
进入详情页时,禁用Acitivity切换的动画,使ToolBar(或者ActionBar)看起来就像没有变一样:
overridePendingTransition(0, 0);
设置详情页的Activity的背景为透明,详情页动画的时候,还能看到原来的页面。设置Activity的Theme如下:
<style name="AppTheme.CommentsActivity" parent="AppTheme">
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowIsTranslucent">true</item>
</style>
使用animator.scaleY()来展开详情View:
contentRoot.animate()
.scaleY(1)
.setDuration(200)
.setInterpolator(new AccelerateInterpolator())
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
ViewCompat.setElevation(toolbar, Utils.dpToPx(8));
animateContent();
}
})
.start();
注意上面的动画要在Activity的绘制出来之前开始,使用了ViewTreeObserver.OnPreDrawListener
回调:
contentRoot.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
@Override
public boolean onPreDraw() {
contentRoot.getViewTreeObserver().removeOnPreDrawListener(this);
// 这里开始上面的动画
...
return true;
}
});
使用RecyclerView
代替ListView
,加入新的item的时候,实现动画:
public class CommentsAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
...
@Override
public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) { runEnterAnimation(viewHolder.itemView, position); ... } ... }
- 还有更多。例如
ToolBar
里面的item掉出来的动画,使用CardView
等。
看看源代码,一定对你有帮助。