通过灯箱旋转效果学习path及其path动画

效果图如下:
灯箱旋转效果

备注:两个渐变色是可以围着矩形框一直旋转的(偷个懒,不搞gif图了)。
实现方案很多,具体可以是下面几种方式:

  • 此篇的主题:path动画
  • svg动画,svg图片也是基于path的,结合属性动画原理可以说和path动画一致。
  • ondraw绘制,涉及的计算量太大,这个就不考虑了。
  • 此篇重点描述path动画,svg动画稍候会有文章对齐解释。

结合到path动画又有两种实现方式,一种是公司同事实现,另一种是大神的PathAnimView,此篇文章着重解释学习后面一种,前面涉及到公司只是提供思路方法,不管怎样都非常感谢大家在我的学习道路上提供的帮助。

path动画核心要素:需要绘制的目的path在已固定的原路径path上绘制,动画路径无论多么复杂都是已固定写好的原路径,针对动态的目的路径只是原路径上的一截

方案一:


path路径示意图
  • 效果涉及两个渐变条旋转,所以每个渐变色都对应着一个path,需要注意的是path的起点,每一个渐变色都是从标注的点开始绘制,所以两个对称的起点使得渐变色依次旋转。 按照示意图标注的path 结构依次画一个圆角矩形,并将其反复画n倍,让该path成为n个圆角矩形重叠path,为后面动画提供源path(绘制n倍是为了让其旋转的更为流畅,后续会简单解释)
  • path动画除了path路径外,还需要发动机,其发动机就是属性动画,动画的本质就是在一段时间内执行一连串的动作并且让其连贯起来,需要注意的是此处属性动画并不是常用的ObjectAnimation而是其父类ValueAnimator。
  • 源路径和发动机都有了,此处还得借助先前文章提到的path的测绘工具类,PathMeasure,该类绑定path后可以测量出path的length及其给定一个distance可以测绘出给定点的x,y坐标同时还可以指定start和stop后截取原始的一段路径。
  • 结合上面及其path动画的核心要素此效果就很简单了,valueanimator提供一个0到1的动画,结合动画的每一个值和源路径path的length计算start,然后截取单个圆角矩形的一段加上start作为stop(就是计算渐变色的距离)通过pathmeasure计算所得目的路径后刷新view(在ondraw中会通过渐变色画笔绘制目的路径),动画的0,1对应着原路径的path的0到length,所以源路径越长旋转路径效果越好。
    方案二
    PathAnimview核心原理和上面基本一致,只是结合到具体的实现略有不同,下面以代码的方式分析其最基本的pathanim。
  • PathAnimview是一个很不错的封装框架,除了简单的pathanim还封装了其他一些很复杂的view动画,即时简单的pathanim其可以外面view指定任何path源路径,也是很方便的实现方案了。
  • 首先看其实现view ondraw的实现:


    pathanimview

    代码很简单就是先将源path绘制到view上,再将animPath绘制到view上。源path是外面view使用时候指定,那么当前重点放到animPath上,由view的其他代码很方便检索到pathanim的生成是在工具类PathAnimHelper上,简单代码为了节省篇幅就不一一备注了。

  • PathAnimView提供了启动动画的api(startAnim),下面看一下startAnim的代码实现:


    startAnim

    此段代码做了两件事一是测绘原始路径,而是将测绘路径后的参数数据交给loopAnim去执行动画,测绘原始路径需要注意的是,原始path可能并不是一条单独的线(path对线的数量判断是根据是否闭合),针对这种情况进行了多个测绘获取到最终的路径长度。

  • 继续去看loopAnim的代码实现:


    loopAnim

    代码也不复杂生成一个属性动画并启动动画,在onAnimationUpdate中去更新刷view,到此为止和方案一是没有什么区别的(核心原理一样)
    PathAnimView支持动画重复播放,此逻辑是在repeat监听中实现。
    生成目的路径的代码在回调方法onPathAnimCallback中实现,即:

  • image.png

    系统原生动画始终是以0为起点,动画控制的是终点,终点值是path的总路径和0到1区间值的乘积,截取该段路径作为动画路径在view上绘制,此动画原为图片的加载进度条实现,不过这个再结合属性动画的循环播放也可以实现上面的渐变色循环转圈的效果

  • PathAnimView的动画的实现与效果还有些瑕疵,效果中是一段path旋转,而当前效果是animpath不断扩展,进而当动画到1的时候会完全覆盖原有path,这个修改很简单,animpath的start不固定在0,而是受属性动画控制,stop是固定一段即可。

结合上面的实现分析两者实现的区别及其path动画的要点:

  • path动画核心实现大同小异,都是两段path并借助于属性动画
  • 两者实现思想不同,方案一是属性动画作用一个很大很大的一个源path路径,且动画时间也很长基本是一个页面的停留时间大约3分钟内(有点擦边球的意味),后者不同,后者是处理单个path路径动画时间设置也很小大约几秒即可,他是依赖于不停的循环播放动画,即一个是很长的动画在一个重叠的路径上不停的旋转绘制,一个是动画时长很小而不停的循环播放
  • 从性能和一些逻辑上后面方案更可取,效果上调试完成基本差不多。
  • 再次重申:path动画核心要素是目的路径在原路径上执行行为,路径在复杂也是固定的源路径复杂,目的路径不过是原路径上的一小段而已。源路径的绘制还得借助先前的文章介绍去实现。

参考文章
path实现小球的轨迹动画
path实现波浪动画,轨迹动画
path实现圆的动画
Android自定义曲线路径动画框架
结合path和canvas实现心形轨迹动画
PathAnimView实现
github工程:pathAnimView的实现
path实现b站弹幕页面的背景效果

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

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,101评论 1 32
  • --绘图与滤镜全面解析 概述 在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益...
    韩七夏阅读 2,727评论 2 10
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,419评论 0 17
  • 亲爱的儿子,你做的煎饼真美味,好吃的停不下来,我发现你的厨艺越来越好了,有个会做饭的儿子真好。
    晗晗ww阅读 314评论 0 1
  • 在北方,没有雪似乎一个冬天都不完整。 清晨,窗外的太阳含羞的摄入第一缕阳光,照在了睡梦中我的脸上,朦胧中,我慵懒的...
    密蒙树下的心阅读 236评论 2 10