交互炸了(三):闪屏页是如何像云一样消失的

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

效果项目地址: 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

交互炸了(三):闪屏页是如何像云一样消失的》有31个想法

  1. I just wanted to develop a brief word in order to express gratitude to you for these nice ways you are giving out here. My incredibly long internet search has at the end of the day been rewarded with reputable facts to go over with my two friends. I ‘d mention that we visitors are very much blessed to be in a notable website with very many lovely individuals with useful strategies. I feel somewhat lucky to have discovered your web page and look forward to some more exciting minutes reading here. Thanks again for a lot of things.

  2. Thank you for all your valuable labor on this web site. My aunt really likes making time for investigation and it’s easy to see why. Most of us know all relating to the powerful mode you convey good tips and hints by means of the web blog and in addition boost participation from the others on that issue then our own daughter is certainly starting to learn a whole lot. Enjoy the remaining portion of the year. You’re the one performing a great job.

  3. I must get across my love for your kind-heartedness for men and women who really want guidance on that situation. Your very own dedication to passing the message all through had been incredibly beneficial and have always enabled some individuals like me to realize their objectives. This informative tips and hints can mean a lot to me and substantially more to my mates. Warm regards; from all of us.

  4. Can I just say what a reduction to seek out somebody who truly knows what theyre talking about on the internet. You positively know learn how to carry an issue to mild and make it important. Extra individuals need to read this and understand this facet of the story. I cant believe youre no more well-liked since you positively have the gift.

  5. A powerful share, I simply given this onto a colleague who was doing a bit analysis on this. And he in truth bought me breakfast as a result of I discovered it for him.. smile. So let me reword that: Thnx for the deal with! But yeah Thnkx for spending the time to discuss this, I really feel strongly about it and love reading more on this topic. If attainable, as you turn out to be experience, would you mind updating your blog with more details? It is extremely useful for me. Huge thumb up for this weblog submit!

  6. I wish to show my love for your kind-heartedness supporting individuals who have the need for assistance with this one topic. Your personal commitment to getting the message all through had been unbelievably informative and have in every case helped individuals like me to arrive at their pursuits. Your amazing interesting hints and tips implies a lot a person like me and substantially more to my fellow workers. Many thanks; from each one of us.

  7. Oh my goodness! an amazing article dude. Thank you Nonetheless I am experiencing challenge with ur rss . Don抰 know why Unable to subscribe to it. Is there anybody getting equivalent rss downside? Anyone who knows kindly respond. Thnkx

  8. Aw, this was a very nice post. In idea I would like to put in writing like this additionally ?taking time and precise effort to make a very good article?but what can I say?I procrastinate alot and not at all appear to get one thing done.

  9. Good post. I learn one thing more challenging on different blogs everyday. It can all the time be stimulating to learn content from different writers and follow a little one thing from their store. I抎 desire to make use of some with the content material on my blog whether you don抰 mind. Natually I抣l offer you a link in your net blog. Thanks for sharing.

  10. Thank you for your entire effort on this web page. My daughter takes pleasure in managing investigations and it’s obvious why. We hear all of the compelling method you offer simple tricks through the blog and therefore invigorate response from the others on this subject matter while my simple princess has always been being taught a lot of things. Have fun with the rest of the year. You’re doing a remarkable job.

  11. After examine a couple of of the weblog posts in your website now, and I actually like your way of blogging. I bookmarked it to my bookmark website listing and will likely be checking again soon. Pls check out my web page as well and let me know what you think.

  12. An impressive share, I just given this onto a colleague who was doing a little bit evaluation on this. And he in fact purchased me breakfast as a result of I found it for him.. smile. So let me reword that: Thnx for the deal with! However yeah Thnkx for spending the time to debate this, I really feel strongly about it and love reading more on this topic. If attainable, as you become expertise, would you thoughts updating your weblog with extra details? It’s highly useful for me. Massive thumb up for this blog post!

  13. I must show thanks to you for bailing me out of such a challenge. After researching throughout the online world and obtaining suggestions which were not helpful, I assumed my entire life was done. Living minus the answers to the difficulties you’ve resolved by means of this blog post is a serious case, as well as ones that might have negatively affected my career if I hadn’t noticed the website. Your primary mastery and kindness in playing with all the stuff was excellent. I’m not sure what I would have done if I hadn’t come across such a stuff like this. I can also at this point look forward to my future. Thanks for your time so much for this specialized and amazing help. I won’t think twice to suggest your site to anyone who needs guide on this subject.

  14. There are some interesting time limits in this article but I don抰 know if I see all of them center to heart. There’s some validity however I will take hold opinion till I look into it further. Good article , thanks and we wish more! Added to FeedBurner as well

  15. Oh my goodness! a tremendous article dude. Thank you Nevertheless I am experiencing situation with ur rss . Don抰 know why Unable to subscribe to it. Is there anybody getting equivalent rss problem? Anybody who knows kindly respond. Thnkx

  16. The next time I learn a weblog, I hope that it doesnt disappoint me as much as this one. I imply, I do know it was my option to read, however I truly thought youd have something fascinating to say. All I hear is a bunch of whining about one thing that you possibly can repair for those who werent too busy looking for attention.

  17. Oh my goodness! an amazing article dude. Thank you Nonetheless I’m experiencing problem with ur rss . Don抰 know why Unable to subscribe to it. Is there anyone getting identical rss drawback? Anyone who is aware of kindly respond. Thnkx

  18. Youre so cool! I dont suppose Ive read something like this before. So nice to seek out any person with some original thoughts on this subject. realy thanks for starting this up. this website is something that is wanted on the net, somebody with just a little originality. helpful job for bringing something new to the internet!

  19. Youre so cool! I dont suppose Ive read anything like this before. So good to find someone with some authentic ideas on this subject. realy thank you for beginning this up. this web site is one thing that’s wanted on the internet, somebody with somewhat originality. helpful job for bringing one thing new to the internet!

  20. I wish to convey my respect for your kind-heartedness giving support to men and women that should have help on that issue. Your personal dedication to getting the solution all-around was extraordinarily good and have continually made employees much like me to get to their desired goals. Your own important recommendations denotes much a person like me and much more to my fellow workers. Thanks a lot; from everyone of us.

  21. Once I originally commented I clicked the -Notify me when new comments are added- checkbox and now each time a remark is added I get 4 emails with the identical comment. Is there any method you possibly can remove me from that service? Thanks!

  22. A powerful share, I just given this onto a colleague who was doing slightly evaluation on this. And he in actual fact purchased me breakfast as a result of I found it for him.. smile. So let me reword that: Thnx for the treat! However yeah Thnkx for spending the time to discuss this, I feel strongly about it and love reading more on this topic. If doable, as you develop into expertise, would you thoughts updating your weblog with extra particulars? It’s extremely useful for me. Massive thumb up for this blog publish!

发表评论

电子邮件地址不会被公开。