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

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

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

时间: 2024-10-08 15:31:31

这交互炸了(三):闪屏页是像云一样消失的的相关文章

设置自定义闪屏页

设置自定义闪屏页 by 伍雪颖 UILaunchStoryboardName

手机安全卫士——闪屏页相关处理

根据功能模块划分(Android开发推荐此方法) - Activity   mobilesafe.activty    - 后台服务   mobilesafe.service    - 广播接受者 mobilesafe.receiver    - 数据库 mobilesafe.db.dao    - 对象(java bean) mobilesafe.domain/bean    - 自定义控件 mobilesafe.view    - 工具类 mobilesafe.utils    - 业务逻辑

闪屏页+引导页

实现原理: 用SharedPreferences实现.创建一个boolean的变量,默认值为true.当判断这个变量是true的时候,说明是第一次运行,就跳转到另一个引导页面,否则进入主页面. 引导页面跳转到最后一张图片时,点击某按钮发生跳转事件,回到MainActivity,此时把变量的值改成false. 引导图效果用ViewPager实现. 下面附上代码: splash.xml: <?xml version="1.0" encoding="utf-8"?&

Splash闪屏页-三种动画效果

三种动画效果 旋转 RotateAnimation 缩放 ScaleAnimation 渐变 AlphaAnimation 动画效果集合 AnimationSet 1 // 初始化欢迎页面的动画 2 3 private void initViews(){ 4 5 RelativeLayout rlRoot = (RelativeLayout) findViewById(R.id.rl_root); 6 7 RotateAnimation rotate = new RotateAnimation(

Xcode6之找回之前的闪屏

Xcode6 相对于之前的环境变化还是挺大的,更是增加了swift语言,使得刚开始接触还是有点不习惯.所以比对之前版本,研究新的环境,琢磨点小经验. 别的话不多说,直接切入正题,Xcode6环境下,默认的为我们加载LaunchScreen.xib和Main.storyboard两个文件,其中的LaunchScreen就是我们以前所熟悉的闪屏页.如图 这个闪屏页暂时会让我们感觉很别扭,并且在我们不是很会让其自适应的时候,显得有点蹩脚. 所以我们还是选择之前的那种方法之一来改变闪屏页的设置 第一步点

【腾讯Bugly干货分享】浅谈Android自定义锁屏页的发车姿势

本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57875330c9da73584b025873 一.为什么需要自定义锁屏页 锁屏作为一种黑白屏时代就存在的手机功能,至今仍发挥着巨大作用,特别是触屏时代的到来,锁屏的功用被发挥到了极致.多少人曾经在无聊的时候每隔几分钟划开锁屏再关上,孜孜不倦,其酸爽程度不亚于捏气泡膜.确实,一款漂亮的锁屏能为手机增色不少,但锁屏存在的核心目的主要是三个:保护自己手机的隐私,防止误操作,在不关闭

1.闪屏页面(Splash)

闪屏页面(Splash) - 展示logo,公司品牌- 项目初始化- 检测版本更新- 校验程序合法性(比如:判断是否有网络,有的话才运行) 检测版本更新 在toncat中放入一个json数据用来判断版本信息 {"versionName": "2.0", "versionCode": 2, "description": "新增NB功能,赶紧体验!!!", "downloadUrl": &q

浅谈 Android 自定义锁屏页的发车姿势

作者:blowUp,原文链接:http://mp.weixin.qq.com/s?__biz=MzA3NTYzODYzMg==&mid=2653577446&idx=2&sn=940cfe45f8da91277d1046d90368d440&scene=4#wechat_redirect 锁屏作为一种黑白屏时代就存在的手机功能,至今仍发挥着巨大作用,特别是触屏时代的到来,锁屏的功用被发挥到了极致.多少人曾经在无聊的时候每隔几分钟划开锁屏再关上,孜孜不倦,其酸爽程度不亚于捏气

手机安全卫士学习第一课 闪屏页面Splash

学习完了四大组件 然后按照黑马课程就是安全卫士了 四大组件学习之后感觉印象不是很深刻,所以趁着这个项目好好练习练习. 个人喜欢在注释中描述所以就只姐连着注释代码和注释一起贴上先! 首先是onCreate中 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.splash_layout); // 初始化控件