Android上实现进入详情展开的动画

Android Lollipop中引入的Material Design,概念中要求任何变化都是流畅的,不能突然出现和消失。Instgram的工程师实现的了如下图所示的效果:
img 作者的原文在这里,讲了一些实现方法,并附上了源代码。 这里总结一下实现的关键点。

  1. 进入详情页时,禁用Acitivity切换的动画,使ToolBar(或者ActionBar)看起来就像没有变一样:

    overridePendingTransition(0, 0);
    
  2. 设置详情页的Activity的背景为透明,详情页动画的时候,还能看到原来的页面。设置Activity的Theme如下:

    <style name="AppTheme.CommentsActivity" parent="AppTheme">
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowIsTranslucent">true</item>
    </style>
    
  3. 使用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();
    
  4. 注意上面的动画要在Activity的绘制出来之前开始,使用了ViewTreeObserver.OnPreDrawListener回调:

    contentRoot.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            @Override
            public boolean onPreDraw() {
                contentRoot.getViewTreeObserver().removeOnPreDrawListener(this);
                // 这里开始上面的动画
                ...
                return true;
            }
        });
    
  5. 使用RecyclerView代替ListView,加入新的item的时候,实现动画:

    public class CommentsAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
        ...
        @Override
    

    public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) { runEnterAnimation(viewHolder.itemView, position); ... } ... }

  6. 还有更多。例如ToolBar里面的item掉出来的动画,使用CardView等。

看看源代码,一定对你有帮助。