项目地址:https://github.com/JeasonWong/JikeGallery
话不多说,先上效果。
这个效果是在即刻app上看到,觉得很不错,遂仿之。
先说下我的实现思路(以上方的图片滚动为例,下方的文字实现效果类似):
- 自定义ViewGroup
- 装载两个ImageView和一个阴影View
- 通过一定规律交替控制两个ImageView和它们的marginTop,在onLayout()中实现
- marginTop的具体值由属性动画控制,不断调用requestLayout()
接下来依次说明
###一、自定义ViewGroup
|
|
先了解下成员变量,其中最重要的一个就是mSmoothMarginTop,相信很多人都知道一个View的marginTop可以设为负数,这个负数可以给我们带来太多的方便。
上图的图0就是我们展现在屏幕上的ImageView,图1则是屏幕外marginTop为-height的ImageView,这个一定要明白,接下来才好继续实现。
###二、装载两个ImageView和一个阴影View
|
|
关键点说明:
- MarginLayoutParams 为了之后方便取出margin值
- addViewInLayout() 为了对requestLayout的绝对控制
- getImgPath() 为了实现循环滚动
这样一来,我们需要的View都已经创建好了。
###三、通过一定规律交替控制两个ImageView和它们的marginTop,在onLayout()中实现
|
|
以上实现的就是不断的替换图1和图2谁上谁下,阴影和下方的图保持同步。
###四、marginTop的具体值由属性动画控制,不断调用requestLayout()
先看基类ViewGroup
|
|
关键点说明:
- 属性动画控制着mSmoothMarginTop在[-mHeight, 0]中变化
- 每完成一圈,mRepeatTimes自增1
再来看看Gallery实现类
|
|
关键点说明:
- 通过mSmoothMarginTop与mHeight的比值控制阴影View的透明度
- 每次动画完成时,下方的图(此时下方的图已经超出屏幕了,而上方图显示在屏幕内)需要加载第三张图,使用getImgPath()取出
以上就是图片的滚动实现,文字的滚动90%是一样的,有点区别的就是需要文字需要控制下垂直居中,我就不赘述了
如果有更好的思路,欢迎交流,开源本身就是大家互相喷喷,互相进步嘛,
对各种动画感兴趣的朋友欢迎加群479729938进行交流,
期待各种好看,好玩,实用的动画~