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