这交互炸了(三) :不看后悔!你一定没见过这样的闪屏
《交互炸了》或许是一系列高端特效教程, 文中会介绍一些比较炫酷的特效,以及实现的思路。特效实现本身也许不会有太大的难度。难点在于实现的思路。一旦思路被打开,特效将很简单实现。
效果项目地址: https://github.com/githubwing/WowSplash
本期是第三期,第二期做的比较草率,好像并不太符合“交互炸了”这一主题,所以以后我会保证质量,而不是为了跟进数量凑数。这次给大家分享的效果是一个闪屏页的效果,效果如下:
有没有眼前一亮?现在许多炫酷的闪屏页或者引导页喜欢用视频来做,但是我偏不,原因有两个:
1.视频会增加App体积,为了这一个闪屏页,多增加用户下载流量,这是很恶心的一件事情。2.第二段云扩散融合效果,视频实现起来比较棘手。
动效制作思路发散
前面一篇跟大家分享了一写关于动画的小技巧。动画这种东西跟魔术一样,只要用户看的开心,怎么实现无所谓,所以做一些障眼法来取悦用户是没有问题的。这里的障眼法大概有如下几点:
1.View放大不是真正的放大。
2.View平移之后,可能悬浮在顶部的已经换成了一个一模一样的双胞胎View。
3.比较特殊的如上面的效果,扩散并不是View自己被扩散。
所以在做动效的时候,应该从一个魔术师的角度去考虑,而不能从用户的角度来考虑,做到思维的发散。这里可以去看看一些魔术揭秘教程~做到看起来很炫酷,原理很简单,基本上动效的思路就有啦。
WowSplash实现思路
我们先把特效分为两段,一段为描边动画。另一段为云雾扩散动画。首先来研究第一段。
第一阶段
第一段其实很简单,大部分小伙伴一眼就可以看出来,这就是SVG结合Path实现的动画。恩,对~你说的没错,网上有很多关于这种动画的实现,这里直接把需要的东西给到大家~
首先,你需要一张SVG图片,怎么获得呢,美工会配合我吗? 想多了,完全不需要美工大大帮忙~我们可以自己动手来。
首先需要用到一个神器: Vector Magic 他可以帮我们把普通图片转换为SVG图片。这里我就找来了一张铁塔的简笔画~ 转换之后,就可以得到SVG文件了~
其次,需要用到一个工具类,用于把SVG转换成Path.这里我直接拿了GAStudio哥的一个工具类:SvgPathParser 接下来,我们把拿到的SVG保存在String.xml文件中待用~
接下来使用PathMeasure 来进行SVG转换后Path的绘制,具体的细节,请看源码~这里不过多阐述。
1 float stop = mLength * mAnimatorValue; 2 mTowerPathMeasure.getSegment(0, stop, mTowerDst, true); 3 canvas.drawPath(mTowerDst, mPaint);
铁塔完毕后,有点单调~ 我们来给他绘制一些云彩~ 每个云彩都是一个Path,所以画云彩只是绘制一些Path.
1 private void drawCould(Canvas canvas) { 2 for (int i = 0; i < mCouldPaths.length; i++) { 3 setupCouldPath(mCouldPaths[i], i); 4 canvas.drawPath(mCouldPaths[i], mPaint); 5 } 6 }
最后,加上动画~ 让他不生硬。最后暴漏一个方法,在进入Activity的时候执行,第一个阶段就完成啦~
1 public void startAnimate() { 2 3 restore(); 4 //start tower animate 5 getTowerValueAnimator().start(); 6 7 //start could animate 8 for (int i = 0; i < mCouldPaths.length; i++) { 9 final ValueAnimator couldAnimator = getCouldValueAnimator(i); 10 postDelayed(new Runnable() { 11 @Override public void run() { 12 couldAnimator.start(); 13 } 14 }, mDuration / 2); 15 } 16 17 getTitleAnimate().start(); 18 }
第二阶段
第二阶段看起来比较炫,其实也是比较简单的,扩散不好搞,可以换一个思路嘛。所以这里我就想到使用Xfermode,没错,你看到发散的云,其实又是另一张图片:
哈哈哈哈,这张图片一贴出来,你是不是想笑。原来看起来很炫的效果,真实这么搞笑。
好的,有了思路就很好继续了。我只需要让两个图片使用Xfermode搞基一番,并且在过程中让这个View逐渐透明,遮罩图片逐渐放大即可。
当然,有了思路变成很简单,其实还是有些坑的,说说遇到的坑。
关于Xfermode小伙伴们用到过的可能了解,他有坑,非常大的坑。。经常发现与Demo图出不来一样的效果。所以我专门总结了一篇博客如下:PorterDuffXferMode不正确的真正原因,感兴趣的可以看下。这里再来重复下Xfermode坑如何避免。
最终大总结,如果想让PorterDuffXferMode按照预期Demo(或者效果图)的效果图像实现,必须满足以下条件:
1、关闭硬件加速。(实际为开启硬离屏缓存)
2、两个bitmap大小尽量一样。
3、背景色为透明色。
4、如果两个bitmap位置不完全一样,可能也是预期效果,只不过你看到的效果和你自己脑补的预期效果不一致。
所以,为了避免这些坑,我把View分为了两个,第一阶段是一个View,第二阶段是一个View。当第一段View执行完之后,把该View截屏,转换为bitmap交给第二个View。同时第一个View设置gone来避免过度绘制,第二个View绘制的实际上是两个bitmap,并且开启硬离屏缓存来实现Xfermode的正确效果。
//解决硬件加速的bug
setLayerType(View.LAYER_TYPE_HARDWARE, null);
//将第一个View的bitmap交给第二个View
mWowView.startAnimate(wowSplashView.getDrawingCache());
最后,在使用动画让第二个View从0扩大到数倍,同时改变透明度就达到我们想要的效果了。
https://github.com/githubwing/WowSplash
转载于:https://www.cnblogs.com/huolongluo/p/6214011.html
这交互炸了(三) :不看后悔!你一定没见过这样的闪屏相关推荐
- 这交互炸了 - 收藏集 - 掘金
这交互炸了:饿了么是怎么让Image变成详情页的 - 掘金 晚上叫外卖,打开饿了么,发现推了一个版本,更新以后,点开了个鸡腿,哇,交互炫炸了. 本文同步自wing的地方酒馆 不过还是有槽点.我是无意中 ...
- opencv立方体的画法_【不看后悔!】最详细的立方体透视变化及画法讲解
原标题:[不看后悔!]最详细的立方体透视变化及画法讲解 初学素描的小伙伴们 不知道大家画石膏立方体的时候 有哪些困难呢 下面小编联合素描老师匡鹏智 从最基础为大家仔细讲解立方体 希望能为大家解难! 立 ...
- 联想台式主机拆机教程_联想 aio 520 拆机教程 ,全网最完整版,细节不放过,不看后悔...
联想 aio 520 拆机教程 ,全网最完整版,细节不放过,不看后悔 2020-03-28 16:25:37 10点赞 16收藏 5评论 你是AMD Yes党?还是intel和NVIDIA的忠实簇拥呢 ...
- enc易能变频_ENC易能变频器故障主修不看后悔
产品品牌 凌科自动化科技有限公司 产品型号 技术精湛,收费合理 生产城市 江苏常州 发货城市 时效短 供货总量 100 最小起订 1 产品单价 300 计量单位 台 ENC易能变频器故障主修不看后悔采 ...
- opencv立方体的画法_【清美艺考】不看后悔!最详细的立方体透视变化及画法讲解...
原标题:[清美艺考]不看后悔!最详细的立方体透视变化及画法讲解 初学素描的小伙伴们 不知道大家画石膏立方体的时候 有哪些困难呢 下面小编联合素描老师匡鹏智 从最基础为大家仔细讲解立方体 希望能为大家解 ...
- 抖音上传视频显示转成mp4怎么设置_详细的mp4转换成mp3格式的方法,不看后悔系列!...
详细的mp4转换成mp3格式的方法,不看后悔系列! 安利安利安利安利 话说,视频格式转换你们会,音频格式转换你们也会,你们就没有不会的吗? 对了,视频转音频你们会吗?知道怎么将MP4转成MP3吗?不会 ...
- 联想微型计算机一体机怎么拆开,联想 aio 520 拆机教程 ,全网最完整版,细节不放过,不看后悔...
联想 aio 520 拆机教程 ,全网最完整版,细节不放过,不看后悔 2020-03-28 16:25:37 14点赞 22收藏 9评论 创作立场声明:闲鱼垃圾王教你拆联想一体机 现在很多人都喜欢一体 ...
- C++引用的超详细解释及误区纠正,不看后悔哦(中)
书接上文,这次我想向大家谈一谈关于函数引用返回的问题 非引用返回,非引用接收: 首先我们来看这样一段代码: #include<iostream> using namespace std; ...
- java和python的web自动化有什么区别-三分钟看懂Python和Java的区别
随着人工智能的火爆,Python和Java一直在各种流行编程语言中名列前茅.其实Java和Python有些相似,因为很多编程语言之间是互通的.Java现在还是第一,不知道Python未来会不会超越Ja ...
最新文章
- Ubuntu 16.04 LTS界面美化
- 云栖大会100位顶级大咖演讲PPT+视频全分享!
- Java数组的定义方式有哪几种
- axios拦截器的实现
- Lync 2010 企业版安装
- JS实现表单多文件上传样式美化支持选中文件后删除相关项
- Java EE之JSP
- Android项目总结(3)-登录页图片循环过渡播放动画效果
- Filter过滤指定ip地址
- C 语言之父,UNIX 系统之父 Dennis Ritchie (丹尼斯 里奇)于 10 月 9 日去世,享年 70 岁
- 实验2-1-2 温度转换 (5 分)
- NFC源码分析之P2P工作模式.
- shopnc怎么使用 php,ShopNC单用户版/安装php
- php sku颜色,PHP 产品库 SPU、SKU 如何设计?
- APP弱网络条件下,体验优化之道
- 课时31:永久储存:腌制一缸美味的泡菜
- 正态性检验的R语言实现
- 【uniapp 动态设置 起始页 默认展示页面 】
- Vue.js基础-07-绑定事件(v-on)-01-点击事件(click)
- 检验杜宾 瓦森检验法R语言_应用统计学与R语言实现学习笔记(九)——线性回归...
热门文章
- 流放者柯南自建服务器 linux,流放者柯南怎么开服 个人服务器搭建方法图文教学_3DM单机...
- 【自研工具】漏洞盒子批量提交脚本
- 股市跌破2000点了,发帖纪念一下。
- Java常用类使用总结,netty实战百度网盘
- DCQCN: Congestion Control for Large-Scale RDMA Deployments-SIGCOMM‘2015不知道写的啥?
- 深入解析 multipart/form-data
- 免签个人收款支付|支付宝|微信|个人收款免签系统
- 设置了id自动增长 oracle还可以插入id吗
- C++ Primer 学习笔记_29_STL实践与分析(3) --操作步骤集装箱(下一个)
- 《TCP/IP详解卷一》读书笔记九:IGMP和MLD