listview的item初始化进场动画及activity转场动画
2017-03-17 17:05
495 查看
转自:https://www.aswifter.com/2015/08/01/android-material-design-animation/
前段时间,利用Material
Design控件编写了一个Example,今天我在这个项目的基础上,加入一些动画。
先上效果图:
主要加了3个动画:FAB动画,列表加载动画,Shared Element Transition
首先,我们需要把FAB按钮移到屏幕下边去,我在Fragment的
然后我在从网络获取到数据后,开始FAB显示动画
在delay 500秒后开始动画,主要是因为要与列表项的加载动画同步。
使用OvershootInterpolator修饰动画,可以实现在向上移动超出原来位置一定值后,再返回到原位置的效果。
列表我是用RecycleView实现,我们需要在Adapter里加入动画处理
在
然后我们实现runEnterAnimation方法
列表加载动画,不是所有项都需要的,比如我这个例子中,屏幕上只能显示3个Item,
所以
先将Item向下移出屏幕
接着根据Item的position设定delay时间,这样可以实现Item一个一个出现,
加入
Shared Element Transition是Android 5.0引入的动画效果,可以在两个Activity中实现共享元素变换动画,
在我的这个例子中,就是实现点击Item后,图片可以慢慢放大和移位的效果。
首先,我们需要选定变换开始和结束的元素,给它们设置一个相同的
我这个例子中,开始变换的元素是列表中的图片
开始变换的元素是图书明细界面中的图片
在Activity切换的时候,使用Shared Element Transition
使用
需要指定一个View作为起始变换的View,以及变换的transitionName,
我这里使用的是
这样就OK了,ImageView的位移和大小变化,Android会自动帮你搞定。
当然我们也可以自定义变换动画,后续再研究~~~
这个效果只支持Android 5.0以上
最新项目的代码,已经上传到Github
源码地址:MaterialDesignExample
前段时间,利用Material
Design控件编写了一个Example,今天我在这个项目的基础上,加入一些动画。
先上效果图:
主要加了3个动画:FAB动画,列表加载动画,Shared Element Transition
FAB动画
首先,我们需要把FAB按钮移到屏幕下边去,我在Fragment的onActivityCreated方法中加入
mFabButton.setTranslationY(2 * getResources().getDimensionPixelOffset(R.dimen.btn_fab_size)); |
mFabButton.animate() .translationY(0) .setInterpolator(new OvershootInterpolator(1.f)) d79f .setStartDelay(500) .setDuration(ANIM_DURATION_FAB) .start(); |
使用OvershootInterpolator修饰动画,可以实现在向上移动超出原来位置一定值后,再返回到原位置的效果。
列表加载动画
列表我是用RecycleView实现,我们需要在Adapter里加入动画处理在
onBindViewHolder方法中加入
runEnterAnimation(holder.itemView, position); |
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(); } } |
所以
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 TransitionBook 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
相关文章推荐
- listview item飞入和删除动画效果
- ListView底部item飞入动画效果
- Activity转场动画——ActivityOptions
- Activity进场退出动画
- Activity转场动画效果
- Android5.0之Activity的转场动画的示例
- 你所不知道的Activity转场动画——ActivityOptions,activity转场动画
- 一个ListView每个item都能跳转到不同的Activity,解决方案。
- android listview每个item定义动画呈现
- Android Activity和Fragment的转场动画
- 自定义控件-实现ListView Item进入动画
- 你所不知道的Activity转场动画——ActivityOptions
- ListView加ArrayAdapter结合android.R.layout.activity_list_item快速实现图文显示
- Activity转场动画
- listview布局操作----将item绑定到activity中
- 你所不知道的Activity转场动画——ActivityOptions
- Android Activity和Fragment的转场动画
- Android AbsListView 的item动画类库 —— JazzyListView
- 模仿android4.0的通知栏listview滑动删除item ,有滑动动画
- Android中ListView的自定义Adapter监听Item中Button,实现跳转到一个新的Activity