从边界之外的动画视图显示部分然后完整答案

【问题标题】：Animate view from outside of bounds to show partly then full从边界之外的动画视图显示部分然后完整
【发布时间】：2015-03-20 11:59:28
【问题描述】：

我目前正在努力寻找一种以特定方式为某些视图设置动画的好方法。以下屏幕截图应显示我想要实现的目标：

第一个状态（隐藏）：

第二状态（折叠）

第三状态（扩展）

这些状态之间的变化应该是动画的。这些视图根本不可拖动或滑动。我知道 umano 有 SlidingUpPanel，但我认为这有点矫枉过正。

目前我实现此行为的方式如下：我将 2 个面板（顶部和底部）包装在相对布局中，并使用属性动画器为相对布局的高度变化设置动画。因此，当状态为 COLLAPSED 时，相对布局的高度将从 0 动画到顶部面板的高度。

这很好用，但我认为这是一种非常糟糕的方法。我已经尝试创建一个自定义 ViewGroup，但动画部分还没有工作。

感谢任何输入。

【问题讨论】：

标签： android android-animation android-custom-view

【解决方案1】：

我会在这里使用 FrameLayout，如下所示：

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <FrameLayout
            android:id="@+id/screen"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    <FrameLayout
            android:id="@+id/top_panel"
            android:layout_width="match_parent"
            android:layout_height="@dimen/top_panel_height"
            android:layout_gravity="bottom"/>
    <FrameLayout
            android:id="@+id/bottom_panel"
            android:layout_width="match_parent"
            android:layout_height="@dimen/bottom_panel_height"
            android:layout_gravity="bottom"/>
</FrameLayout>

然后，为状态创建枚举

enum State {
    HIDDEN {
        @Override
        public void moveTo(View topPanel, View bottomPanel, long animationDuration) {
            topPanel.animate().translationY(topPanel.getHeight()).setDuration(animationDuration);
            bottomPanel.animate().translationY(topPanel.getHeight() + bottomPanel.getHeight()).setDuration(animationDuration);
        }
    },
    COLLAPSED {
        @Override
        public void moveTo(View topPanel, View bottomPanel, long animationDuration) {
            topPanel.animate().translationY(0).setDuration(animationDuration);
            bottomPanel.animate().translationY(bottomPanel.getHeight()).setDuration(animationDuration);
        }
    },
    EXPANDED {
        @Override
        public void moveTo(View topPanel, View bottomPanel, long animationDuration) {
            topPanel.animate().translationY(-bottomPanel.getHeight()).setDuration(animationDuration);
            bottomPanel.animate().translationY(0).setDuration(animationDuration);
        }
    };

    public abstract void moveTo(View topPanel, View bottomPanel, long animationDuration);
}

它的用法如下：

State newState = State.EXPANDED;
newState.moveTo(topPanel, bottomPanel, 200);

【讨论】：