关键词：
《交互炸了》或许是一系列高端特效教程， 文中会介绍一些比较炫酷的特效,以及实现的思路。特效实现本身也许不会有太大的难度。难点在于实现的思路。一旦思路被打开，特效将很简单实现。
效果项目地址: 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的绘制,具体的细节，请看源码~这里不过多阐述。
float stop = mLength * mAnimatorValue;
mTowerPathMeasure.getSegment(0, stop, mTowerDst, true);
canvas.drawPath(mTowerDst, mPaint);
铁塔完毕后，有点单调~ 我们来给他绘制一些云彩~ 每个云彩都是一个Path，所以画云彩只是绘制一些Path.
private void drawCould(Canvas canvas) {
for (int i = 0; i < mCouldPaths.length; i++) {
setupCouldPath(mCouldPaths[i], i);
canvas.drawPath(mCouldPaths[i], mPaint);
}
}最后，加上动画~ 让他不生硬。最后暴漏一个方法，在进入Activity的时候执行，第一个阶段就完成啦~
public void startAnimate() {
restore();
//start tower animate
getTowerValueAnimator().start();
//start could animate
for (int i = 0; i < mCouldPaths.length; i++) {
final ValueAnimator couldAnimator = getCouldValueAnimator(i);
postDelayed(new Runnable() {
@Override public void run() {
couldAnimator.start();
}
}, mDuration / 2);
}
getTitleAnimate().start();
}第二阶段
第二阶段看起来比较炫，其实也是比较简单的，扩散不好搞，可以换一个思路嘛。所以这里我就想到使用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扩大到数倍，同时改变透明度就达到我们想要的效果了。
好啦，本期《交互炸了》到此就结束了，最后附上项目地址，如果你觉得不错，欢迎star，关注我可以获得最新动态哦。
https://github.com/githubwing/WowSplash
flutter:快速创建简单闪屏页
参考技术A近来闲暇时间一直在做Flutter,闪屏页是一个比较常见的需求,网上的闪屏页教程大部分是那种类似于广告页,而非iOS中的LaunchScreen性质的闪屏页.按照原来的方案我们要配置闪屏页的话,我们需要同时配置两端的闪屏页,那么... 查看详情
windowbackground闪屏页无法填充屏幕
参考技术A答案：要让闪屏页能够填充屏幕，您需要将您的图片设置为能够填充屏幕的尺寸，并且应该按照设备的分辨率来调整图片的尺寸大小。另外，您还需要确保图片的比例与屏幕的比例一致，这样才能保证图片能够填满屏... 查看详情
app闪屏页如何实现？告别白屏！看这一篇就够了！
...之后登陆界面会很突兀地跳出来布局，最好的做法是实现闪屏页，由闪屏页跳转到MainActivity去，再跳转完成后finish掉闪屏页，这样就很优雅地完成了app启动——>启动完成的效果。 本期，我们就来模仿微信来实现微信... 查看详情
闪屏页+引导页
实现原理：用SharedPreferences实现。创建一个boolean的变量，默认值为true。当判断这个变量是true的时候，说明是第一次运行，就跳转到另一个引导页面，否则进入主页面。引导页面跳转到最后一张图片时，点击某按钮发生跳转事件... 查看详情
闪屏页和右上角的倒计时跳转
效果图：闪屏页用到了handler和CountDownTimer类，还需配置一下Activity的主题，这里是：android:theme="@android:style/Theme.NoTitleBar.Fullscreen"全屏主题的意思。实现源码：1packagecom.example.shanping;23importjava.lang.ref.WeakReference;45import 查看详情
这交互炸了：饿了么是怎么让image变成详情页的
...么，发现推了一个版本，更新以后，点开了个鸡腿，哇，交互炫炸了。不过还是有槽点。我是无意中才发现可以左右滑动的。这。。。你不告诉我，我怎么知道左右可以滑。https://github.com/githubwing/ZoomHeader直接上图啊：挺有意思... 查看详情
手机安全卫士——闪屏页相关处理
根据功能模块划分(Android开发推荐此方法) -Activity mobilesafe.activty -后台服务 mobilesafe.service -广播接受者mobilesafe.receiver -数据库mobilesafe.db 查看详情
这交互炸了：爱范儿是如何让详情页缩小为横向列表的
...泪继续往下看。本开源库链接ExpandableViewpager一直想写《交互炸了》第二篇，但是好像没什么好的交互。就在昨晚11点，小马同学提出爱范儿里面的交互挺炸的。我一下，果然很赞。于是连夜写代码，封装成库，再撸文章。只为在... 查看详情
这交互炸了:一分钟让你拥有微信拖拽透明返回photoview(代码片段)
...微信公众号：鸿洋（hongyangAndroid）原创首发《交互炸了》或许是一系列高端特效教程，文中会介绍一些比较炫酷的特效,以及实现的思路。特效实现本身也许不会有太大的难度。难点在于实现的思路。一旦思路被打... 查看详情
如何制作一个闪屏页面
...号【小蚂蚁教你做游戏】，学习更多游戏开发原创教程。闪屏(Splash)指的是当你打开一个应用时，首先映入眼帘的那个界面。通常闪屏页面都会比较简单，因为要一闪而过(这大概就是为什么叫做闪屏了)，一般都会放置产品的LOGO... 查看详情
seleniumwebdriverapi是像javaapi一样的吗？
我发现他的API是jar格式。那么是不是就不像javaapi那样可以看到每个库函数的方法？参考技术A是的，在Selenium官网，下载对应的src包。然后再你的eclipseide中，通过按下ctrl然后再打开的类中，选择加载，通过浏览打开这个导入这个... 查看详情
C# 是像 Objective-C 和 C++ 一样的 C 超集吗？
】C#是像Objective-C和C++一样的C超集吗？【英文标题】：IsC#asupersetofCjustlikeObjective-CandC++?【发布时间】：2011-12-2107:12:49【问题描述】：C#是C的超集（如Objective-C和C++）吗？我的意思是，我可以像使用其他提到的语言一样用C#编写纯C... 查看详情
离子闪屏卡住了
】离子闪屏卡住了【英文标题】：Ionicsplashscreenstuck【发布时间】：2017-02-2715:12:14【问题描述】：我正在从事Ionic1项目。一切正常，但几天后，启动屏幕不会在iOS上消失，而在Android上会消失。在Google上找不到帮助。这里有人有什... 查看详情
Phonegap Build：如何在闪屏消失前加载 CSS 和 JS 文件？
】PhonegapBuild：如何在闪屏消失前加载CSS和JS文件？【英文标题】：PhonegapBuild:HowtoloadCSSandJSfilesbeforethesplashscreendissapears?【发布时间】：2013-06-1315:51:37【问题描述】：我正在使用PhonegapBuild服务（来自DreamweaverCS6）并且我一直在使用... 查看详情
Chrome 在没有任何用户交互的情况下立即关闭 Confirm() 提示
】Chrome在没有任何用户交互的情况下立即关闭Confirm()提示【英文标题】：Chromedismissesconfirm()prompsimmediatelywithoutanyuserinteraction【发布时间】：2018-07-0916:48:05【问题描述】：我们网站的一些用户报告说confirm对话框出现了，但立即消... 查看详情
win7装photoshopcc2018，用amtemu.v0.9.2-painter激活后，导致系统不时闪屏，像刷新一样，何因？何解？
...大的问题，所以大多数原因就是显卡没有驱动造成的各种闪屏效果也是经常存在的，你可以查看一下，望采纳。参考技术A那是软件本身出现了问题，你可以考虑一下卸载激活软件，看看有没有别的问题，尤其是当时安装的时候... 查看详情
UIViewController 交互式过渡 - 取消交互式关闭时呈现的视图消失
】UIViewController交互式过渡-取消交互式关闭时呈现的视图消失【英文标题】：UIViewControllerinteractivetransition-Presentedviewdisappearswheninteractivedismissiscanceled【发布时间】：2019-01-0918:58:03【问题描述】：我有一个演示应用程序，我试图在... 查看详情
UIView 在用户交互后消失
】UIView在用户交互后消失【英文标题】：UIViewdisappearsafteruserinteraction【发布时间】：2016-11-1217:24:53【问题描述】：每当我单击视图内的文本字段，然后单击另一个文本字段时，视图就会消失。奇怪...有人可以帮忙吗？我使用facebo... 查看详情