3窗格布局片段动画结巴

Question

实现信息：我已经实现了一个3窗格布局，以下是CommonsWare对他自己的问题的回应：Gmail三片段动画场景的完整工作示例？

总体而言，我的布局由以下级别（1到3）组成：

1. MainActivity
2. SlidingMenu（侧抽屉UI模式）隐藏在左侧的片段，而ContentFragment作为存放3窗格布局的片段。
3. 在ContentFragment内部:LeftListFragment（每行具有3个文本视图）、MiddlelistFragment（每行具有8个文本视图）、DetailFragment。

LeftListFragment和MiddlelistFragment使用CursorLoaders从每个列表中的ContentProvider加载数据。detailfragment还在需要时调用带有数据的游标。所以我甚至没有实现自定义适配器（这样设计更好）。然后我添加了3个窗格布局+动画。就工作而言，它按预期工作，没有问题。动画时间为500ms。

问题是：动画有点结巴。几个掉帧。当左边和中间都是可见的，并且我点击中间的列表项打开一个细节；当我点击后退按钮再次看到左边和中间列表时（实际上没有加载任何东西）。

我试过的：

1. 删除了在detailview中加载片段的代码。我只需点击middlefragment中的一个项目，动画就开始了，实际上没有加载任何细节。还是口吃。而且，当回击时，没有任何东西加载并且仍然结巴，所以我认为加载器/游标不是导致这种情况的原因。
2. 我使用dumpsys gfxinfo查看计算每个帧的平均时间（毫秒）。实际上，一次计算的平均时间为18ms，高于16ms阈值。那么这是否意味着口吃是因为在动画时再次绘制列表所花费的时间？如果是，为什么？我是说...我在行视图中没有任何图像。而且我不能搞砸适配器代码，因为我还没有编写任何...
3. 将动画时间从500ms减少到200ms。如果你真的仔细看，它还是会结巴的，它只是更快了。

ObjectAnimator.ofInt(this, "middleWidth", rightPaneWidth, leftPaneWidth)
                    .setDuration(ANIM_DURATION).start();

package com.xyz.view.widget;

import android.animation.ObjectAnimator;
import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewPropertyAnimator;
import android.widget.LinearLayout;


public class ThreePaneLayout extends LinearLayout
{
    private View leftView = null;
    private View middleView = null;
    private View rightView = null;

private static final int ANIM_DURATION = 500;
private int leftPaneWidth = -1;
private int rightPaneWidth = -1;


// -------------------------------------------------------------------------------------------
// --------------   Constructor
// -------------------------------------------------------------------------------------------


public ThreePaneLayout(Context context, AttributeSet attrs)
{
    super(context, attrs);
    setOrientation(HORIZONTAL);
}

@Override
public void onFinishInflate()
{
    super.onFinishInflate();
    leftView = getChildAt(0);
    middleView = getChildAt(1);
    rightView = getChildAt(2);
}


// -------------------------------------------------------------------------------------------
// --------------   Public methods
// -------------------------------------------------------------------------------------------


public View getLeftView()
{
    return leftView;
}

public View getMiddleView()
{
    return middleView;
}

public View getRightView()
{
    return rightView;
}

@SuppressLint("NewApi")
public void hideLeft()
{
    if (leftPaneWidth == -1)
    {

        leftPaneWidth = leftView.getWidth();
        rightPaneWidth = middleView.getWidth();
        resetWidget(leftView, leftPaneWidth);
        resetWidget(middleView, rightPaneWidth);
        resetWidget(rightView, rightPaneWidth);
        requestLayout();
    }
    translateWidgets(-1 * leftPaneWidth, leftView, middleView, rightView);
    ObjectAnimator.ofInt(this, "middleWidth", rightPaneWidth, leftPaneWidth)
                    .setDuration(ANIM_DURATION).start();
}

@SuppressLint("NewApi")
public void showLeft()
{
    translateWidgets(leftPaneWidth, leftView, middleView, rightView);
    ObjectAnimator.ofInt(this, "middleWidth", leftPaneWidth, rightPaneWidth)
                    .setDuration(ANIM_DURATION)
                    .start();
}


// -------------------------------------------------------------------------------------------
// --------------   Private methods
// -------------------------------------------------------------------------------------------


private void setMiddleWidth(int value)
{
    middleView.getLayoutParams().width = value;
    requestLayout();
}

@TargetApi(12)
private void translateWidgets(int deltaX, View... views)
{
    for (final View view : views)
    {
        ViewPropertyAnimator viewPropertyAnimator = view.animate();
        viewPropertyAnimator.translationXBy(deltaX)
                            .setDuration(ANIM_DURATION);
    }
  }

  private void resetWidget(View view, int width)
  {
      LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams)view.getLayoutParams();  
      layoutParams.width = width;
      layoutParams.weight = 0;
  }
}

ContentFragment的XML：

    <?xml version="1.0" encoding="utf-8"?>
<com.xyz.view.widget.ThreePaneLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_content_three_pane_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

<FrameLayout
    android:id="@+id/fragment_content_framelayout_left"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="3" />

<FrameLayout
    android:id="@+id/fragment_content_framelayout_middle"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="7" />

<FrameLayout
    android:id="@+id/fragment_content_framelayout_right"
    android:layout_width="0dp"
    android:layout_height="match_parent" />
</com.xyz.view.widget.ThreePaneLayout>

Answer 1

问题不是ObjectAnimator，而是您的应用程序在动画的每一帧上做得太多了。具体地说，您正在对布局参数进行动画化，并在每个帧上请求布局。布局强大有用...但在除最琐碎的视图层次结构之外的任何其他视图层次结构中都可能非常昂贵。在动画过程中避免每帧进行昂贵的操作是很重要的，而布局就属于这种“昂贵”的范畴。滑动东西是好的（翻译x/y)，淡入/淡出东西是好的(alpha)，但实际上把东西放在每一帧上？说不就行了。