前段时间，利用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());
使用ActivityOptionsCompat的makeSceneTransitionAnimation方法创建动画，
需要指定一个View作为起始变换的View，以及变换的transitionName，
我这里使用的是ivBook作为起始View，transition_book_img作为变换的transitionName，与XML中的设定一致。
这样就OK了，ImageView的位移和大小变化，Android会自动帮你搞定。
当然我们也可以自定义变换动画，后续再研究~~~
这个效果只支持Android 5.0以上
Github
最新项目的代码，已经上传到Github
源码地址：MaterialDesignExample
抛砖引玉，期待你的加入，一起来完善这个Demo
本文作者： 阳春面
原文地址：http://www.aswifter.com/2015/08/01/android-material-design-animation/
欢迎关注我的微信公众号，分享Android 开发，IOS开发，Swift开发和互联网内容
微信号：APP开发者
