不怕搞事,自定义View云扩散效果

前言

本文是自定义View邪教徒Wing的投稿,这篇故事告诉我们,只有发散思路,开拓视野,才能在自定义View上越走越远!

《交互炸了》或许是一系列高端特效教程, 文中会介绍一些比较炫酷的特效,以及实现的思路。特效实现本身也许不会有太大的难度。难点在于实现的思路。一旦思路被打开,特效将很简单实现。

效果项目地址: https://github.com/githubwing/WowSplash

本期是第三期,第二期做的比较草率,好像并不太符合“交互炸了”这一主题,所以以后我会保证质量,而不是为了跟进数量凑数。这次给大家分享的效果是一个闪屏页的效果,效果如下:

有没有眼前一亮?现在许多炫酷的闪屏页或者引导页喜欢用视频来做,但是我偏不,原因有两个:

1.视频会增加App体积,为了这一个闪屏页,多增加用户下载流量,这是很恶心的一件事情。

2.第二段云扩散融合效果,视频实现起来比较棘手。

1

动效制作思路发散

前面一篇跟大家分享了一写关于动画的小技巧。动画这种东西跟魔术一样,只要用户看的开心,怎么实现无所谓,所以做一些障眼法来取悦用户是没有问题的。这里的障眼法大概有如下几点:

1.View放大不是真正的放大。

2.View平移之后,可能悬浮在顶部的已经换成了一个一模一样的双胞胎View。

3.比较特殊的如上面的效果,扩散并不是View自己被扩散。

所以在做动效的时候,应该从一个魔术师的角度去考虑,而不能从用户的角度来考虑,做到思维的发散。这里可以去看看一些魔术揭秘教程~做到看起来很炫酷,原理很简单,基本上动效的思路就有啦。

2

WowSplash实现思路

我们先把特效分为两段,一段为描边动画。另一段为云雾扩散动画。首先来研究第一段。

第一阶段

第一段其实很简单,大部分小伙伴一眼就可以看出来,这就是SVG结合Path实现的动画。恩,对~你说的没错,网上有很多关于这种动画的实现,这里直接把需要的东西给到大家~

首先,你需要一张SVG图片,怎么获得呢,美工会配合我吗? 想多了,完全不需要美工大大帮忙~我们可以自己动手来。

首先需要用到一个神器: Vector Magic 他可以帮我们把普通图片转换为SVG图片。这里我就找来了一张铁塔的简笔画~ 转换之后,就可以得到SVG文件了~

其次,需要用到一个工具类,用于把SVG转换成Path.这里我直接拿了GAStudio哥的一个工具类:SvgPathParser 接下来,我们把拿到的SVG保存在String.xml文件中待用~

接下来使用PathMeasure 来进行SVG转换后Path的绘制,具体的细节,请看源码~这里不过多阐述。

铁塔完毕后,有点单调~ 我们来给他绘制一些云彩~ 每个云彩都是一个Path,所以画云彩只是绘制一些Path.

最后,加上动画~ 让他不生硬。最后暴漏一个方法,在进入Activity的时候执行,第一个阶段就完成啦~

第二阶段

第二阶段看起来比较炫,其实也是比较简单的,扩散不好搞,可以换一个思路嘛。所以这里我就想到使用Xfermode,没错,你看到发散的云,其实又是另一张图片:

哈哈哈哈,这张图片一贴出来,你是不是想笑。原来看起来很炫的效果,真实这么搞笑。

好的,有了思路就很好继续了。我只需要让两个图片使用Xfermode搞基一番,并且在过程中让这个View逐渐透明,遮罩图片逐渐放大即可。

当然,有了思路变成很简单,其实还是有些坑的,说说遇到的坑。

关于Xfermode小伙伴们用到过的可能了解,他有坑,非常大的坑。。经常发现与Demo图出不来一样的效果。所以我专门总结了一篇博客如下:PorterDuffXferMode不正确的真正原因(http://blog.csdn.net/wingichoy/article/details/50534175),感兴趣的可以看下。这里再来重复下Xfermode坑如何避免。

最终大总结,如果想让PorterDuffXferMode按照预期Demo(或者效果图)的效果图像实现,必须满足以下条件: 1、关闭硬件加速。(实际为开启硬离屏缓存) 2、两个bitmap大小尽量一样。 3、背景色为透明色。 4、如果两个bitmap位置不完全一样,可能也是预期效果,只不过你看到的效果和你自己脑补的预期效果不一致。

所以,为了避免这些坑,我把View分为了两个,第一阶段是一个View,第二阶段是一个View。当第一段View执行完之后,把该View截屏,转换为bitmap交给第二个View。同时第一个View设置gone来避免过度绘制,第二个View绘制的实际上是两个bitmap,并且开启硬离屏缓存来实现Xfermode的正确效果。

最后,在使用动画让第二个View从0扩大到数倍,同时改变透明度就达到我们想要的效果了。

好啦,本期《交互炸了》到此就结束了,最后附上项目地址,如果你觉得不错,欢迎star,关注我可以获得最新动态哦。

https://github.com/githubwing/WowSplash

原文发布于微信公众号 - Android群英传(android_heroes)

原文发表时间:2016-12-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏MixLab科技+设计实验室

App之可点击元素的设计

hi,这是系列文章:App之xxx的第3篇,前2篇我总结了 App之“文字”的设计技巧 App之底部导航栏的设计 直接点击可以查阅以上2篇文章。 我为什么写这个...

33670
来自专栏项勇

笔记59 | Android管理音频焦点的学习

31490
来自专栏腾讯大讲堂的专栏

玩转HTML5移动页面(动效篇)

作者:谭照强,热爱折腾前端,喜欢新奇创意的程序员,业余喜欢玩摄影,弄咖啡。 作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上...

61380
来自专栏IMWeb前端团队

关于移动端百分比宽度的几种实现

由于移动端的设备宽度各不相同,而且因为竖屏宽度都比较小,所以一般都采用满屏的方式布局,而不像PC端的使用固定宽度居中的技术布局。既然要使用满屏,那么各种百分比技...

29390
来自专栏企鹅号快讯

Web前端:看完这些终于知道为什么HTML5开启了一个时代

各大公司的支持 ? ? HTML5的优势 1、HTML5移动优先 随着高端手机(Andriod、Iphone、Ipod、winphone)的盛行,移动互联应用开...

25460
来自专栏Coco的专栏

盒子端 CSS 动画性能提升研究

16860
来自专栏腾讯社交用户体验设计

玩转HTML5移动页面(动效篇)- 腾讯ISUX

55730
来自专栏知晓程序

如何设置微信透明头像和昵称?| 晓技巧

21140
来自专栏速成应用小程序开发平台

教大家从零开始制作开发一款小程序商城包含预约服务和拼团功能

自小程序2017年1月9号正式上线以来,不论是中小商家,还是各大品牌巨头,都在抢占小程序这波风口,打造属于自己的小程序。截至目前,全国正式上线小程序超过150万...

22820
来自专栏纪俊的专栏

Reactjs vs. Vuejs

对于近期关注度最高的 React 和 Vue,想在这里谈谈两个框架在开发风格上的差异。Vue 升级到 2.0 之后新增了很多 React 原有的特性,我的理解是...

4K00

扫码关注云+社区

领取腾讯云代金券