最近使用网易云签到时发现它的乐签动画效果很不错,正好抱着回顾下属性动画跟自定义View的心态来自己实现下这个效果, 其实自己刚开始写动画前也会担心写出来,但是只要沉下心去做,其实也没有特别的难,本人水平有限,如果有错误还请小伙伴们指出, 话不多说看下效果~
动画效果就是上边图片这样,是不是还蛮有意思的🤪,关于动画的思路我做了个思维导图,这只是我自己的思路,小伙伴们有更好的思路咱们可以互相讨论哦
动画的实现大体分为三个思路,首先从卡片滑动效果入手,仔细观察分析动画发现,图片左右滑动的同时发生了一定角度的旋转,然后就想到了用属性动画的平移动画与旋转动画,当然实现动画之前先要解决滑动问题,于是回到了大家熟悉的自定义ViewGroup,代码如下
自定义ViewGroup的常规步骤,就不详说了,然后就开始View的创建与确定位置,首先创建View,然后在onLayout()中确定它们ViewGroup中的位置
关于View位置的确定我简单的画了个草图,画图技术很菜,请小伙伴们多多谅解
left、right的位置好确定,主要是在top这个位置,因为要实现这种叠加的感觉,后边的top要大于前边的top就能实现这种效果,我的想法是这样的,有更好想法的小伙伴们我们可以一起讨论哦,所以top=View的高度/2,但是效果没那么好,然后又微调了下,具体请看上图代码
准备工作已完成,下边就是重头戏了,View的滑动,需要进行平移与旋转,所以我们需要在 MotionEvent.ACTION_MOVE 时进行操作,代码如下
主要使用setTranslationX()方法与setRotation()方法进行平移和旋转,主要的动画是在 MotionEvent.ACTION_UP时操作,代码如下
两种情况—超过滑动阈值&&未超过滑动阈值时
超过滑动阈值时,直接滑出屏幕
未超过滑动阈值时,回弹动画并复位
关于如何判断左滑还是右滑,请看图1-9中代码,大体思路就是记录MotionEvent.ACTION_DOWN时的X坐标mInitx,然后滑动时根据移动的坐标与mInitX做比较,从而判断是左滑还是右滑
如此一来,图1-2 思维导图中的第一步就完成了
我感觉接下来是整个动画效果的灵魂了,类似抽屉效果,卡片向前推进效果(因为我也不知道怎么给他起名字,暂时就叫这个吧😂,小伙伴们能明白就行)
仔细观察动画不难发现这个动画的核心就是放大,当第一个View滑动出屏幕后,第二个View会放大至第一View的大小,并移动到第一个View的所在的位置,大体思路有了,下边就开始动手吧