Flutter:快速创建简单闪屏页

Posted 2023-05-03

参考技术A

近来闲暇时间一直在做Flutter,闪屏页是一个比较常见的需求,网上的闪屏页教程大部分是那种类似于广告页,而非ios中的 LaunchScreen 性质的闪屏页.按照原来的方案我们要配置闪屏页的话,我们需要同时配置两端的闪屏页,那么有没有比较简单的方案来配置闪屏页呢? 毋庸置疑,当然是有了,那就是Flutter的插件 - flutter_native_splash . 接下来我们就来看一下具体应该怎么使用这个插件.

首先把 flutter_native_splash 导入到工程的 pubspec.yaml 中.这里需要注意的是需要放在 dev_dependencies 下,而不是 dependencies .具体如下所示.

接下来我们就来配置 flutter_native_splash ,在配置之前我们看一下 flutter_native_splash 的可配置项.

例如,我现在只有一个logo图片,那么我想生成iOS和android两端的闪屏页,这时候我只需在 pubspec.yaml 如下设置即可.

当然了,如果你有其他配置可以自行进行添加.

配置完成了,我们该如何生成呢?这时候需要我们打开终端 cd 到我们的工程目录下.如果是Android Studio 或者 VSCode 默认就是在当前工程目录下.

然后我们需要执行下面的三个命令来生成闪屏页

每一次都敲三个命令实属麻烦,我们把上诉的三个命令整合成一个命令,如下所示.

那么,我们不想使用该插件生成的闪屏页该怎么办呢?我们只需要执行下面命令即可.

注:每一次更换图片都是需要重新执行命令重新生成.

OK,上面就是关于 flutter_native_splash 的使用全部内容,其实比较简单,如果需要定制化的,建议还是各自平台配置各自的闪屏页.如果有任何问题欢迎在评论区批评指导,感谢大家了.

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

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

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