前段时间,利用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());

使用ActivityOptionsCompatmakeSceneTransitionAnimation方法创建动画,
需要指定一个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开发者

本文固定链接: http://www.js-code.com/android/android_58279.html