属性动画Android实践—仿网易云乐签动画实现

        最近使用网易云签到时发现它的乐签动画效果很不错,正好抱着回顾下属性动画跟自定义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 绘制换行文字

        这样最后一步就完成了,其实思路很简单,麻烦的是动画具体的数值比较难测算,整体动画只是用固定的数值去实现的并不完整,因为时间关系现在没法完成活数值设置以及屏幕适配,有兴趣的小伙伴可以自行修改

          最后非常感谢小伙伴们耐心的看完这篇文章,这是我第一次写文章,写的不好,请大家多多见谅,有错误还请大家提出,我会第一时间修改,希望小伙伴们可以给个Star,你们的支持就是我最大的动力,祝小伙伴们开心每一天,早日达成自己的目标。

因为GitHub间歇性打不开,附上Gitee的地址:https://gitee.com/G_yk/netease-animation


——创作不易,转载请注明作者,谢谢~~~

    

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,386评论 6 479
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,939评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,851评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,953评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,971评论 5 369
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,784评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,126评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,765评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,148评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,744评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,858评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,479评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,080评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,053评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,278评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,245评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,590评论 2 343

推荐阅读更多精彩内容