转载

Android Material Design 动画实现 | APP开发者

前段时间，利用Material Design控件编写了一个Example，今天我在这个项目的基础上，加入一些动画。

先上效果图：

主要加了3个动画：FAB动画，列表加载动画，Shared Element Transition

FAB动画

首先，我们需要把FAB按钮移到屏幕下边去，我在Fragment的 onActivityCreated 方法中加入

mFabButton.setTranslationY(2 * getResources().getDimensionPixelOffset(R.dimen.btn_fab_size));

然后我在从网络获取到数据后，开始FAB显示动画

mFabButton.animate()
        .translationY(0)
        .setInterpolator(new OvershootInterpolator(1.f))
        .setStartDelay(500)
        .setDuration(ANIM_DURATION_FAB)
        .start();

在delay 500秒后开始动画，主要是因为要与列表项的加载动画同步。使用OvershootInterpolator修饰动画，可以实现在向上移动超出原来位置一定值后，再返回到原位置的效果。

列表加载动画

列表我是用RecycleView实现，我们需要在Adapter里加入动画处理

在 onBindViewHolder 方法中加入

runEnterAnimation(holder.itemView, position);

然后我们实现runEnterAnimation方法

private void runEnterAnimation(View view, int position) {
    if (!animateItems || position >= 3) {
        return;
    }

    if (position > lastAnimatedPosition) {
        lastAnimatedPosition = position;
        view.setTranslationY(Utils.getScreenHeight(getActivity()));
        view.animate()
                .translationY(0)
                .setStartDelay(100 * position)
                .setInterpolator(new DecelerateInterpolator(3.f))
                .setDuration(700)
                .start();
    }
}

列表加载动画，不是所有项都需要的，比如我这个例子中，屏幕上只能显示3个Item，

所以 position >= 3 就不用加入动画了。

先将Item向下移出屏幕

view.setTranslationY(Utils.getScreenHeight(getActivity()));

接着根据Item的position设定delay时间，这样可以实现Item一个一个出现,

加入 DecelerateInterpolator 可以实现动画先快后慢的效果。

Shared Element Transition

Shared Element Transition是Android 5.0引入的动画效果，可以在两个Activity中实现共享元素变换动画，在我的这个例子中，就是实现点击Item后，图片可以慢慢放大和移位的效果。

设置transitionName

首先，我们需要选定变换开始和结束的元素，给它们设置一个相同的 transitionName ，

我这个例子中，开始变换的元素是列表中的图片

<ImageView
        android:id="@+id/ivBook"
        android:transitionName="@string/transition_book_img"
        android:layout_width="109dp"
        android:layout_height="135dp"
        android:src="@drawable/book1" />

开始变换的元素是图书明细界面中的图片

<ImageView
          android:id="@+id/ivImage"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:fitsSystemWindows="true"
          android:transitionName="@string/transition_book_img"
          android:scaleType="centerCrop"
          app:layout_collapseMode="parallax"
          app:layout_collapseParallaxMultiplier="0.7" />

transition_book_img 就是一个普通的string，只要值是唯一的就可以了。

使用Shared Element Transition

在Activity切换的时候，使用Shared Element Transition

Book book = mAdapter.getBook(position);
Intent intent = new Intent(getActivity(), BookDetailActivity.class);
intent.putExtra("book", book);
ActivityOptionsCompat options =
        ActivityOptionsCompat.makeSceneTransitionAnimation(getActivity(),
                view.findViewById(R.id.ivBook), getString(R.string.transition_book_img));

ActivityCompat.startActivity(getActivity(), intent, options.toBundle());