Android 动画里的贝塞尔曲线

对贝塞尔曲线的听闻，大概是源自 Photoshop 里的钢笔工具，用来画曲线的，但一直不明白这个曲线有什么用，接触学习到 Android 动画，又发现了贝塞尔曲线的身影，这玩意不是在绘图软件里画曲线的吗，怎么和动画扯上关系了，好吧，今天高低得来了解一下。

插值

首先我们得知道什么是插值，数学里面的插值（Interpolation），是一种通过已知的、离散的数据点，在范围内推求新数据点的过程或方法。

下面这个表给出了某个未知函数 f 的值，函数的具体表达式我们并不知道。

现在让你估算出 $x=2.5$ 时，$f(x)$ 的值。

简单嘛，已知 $f(2)=0.9093$ 、$f(3)=0.1411$，连接两个已知点，$f(2.5)$ 不就是线段中点嘛，$(0.9093-0.1411)/2$，一下子就算出来了。这个通过已知的、离散的数据点，在范围内推求新数据点的过程其实就叫做 "插值"。

插值有多种方法，上面这种粗暴地将相邻已知点连接为线段，然后按比例取线段上某个点，来推求新数据点，属于"线性插值"。

虽然口头上表达这个过程不难，可如果这是一道数学试卷上面的解答题，请问阁下又该如何作答呢？

线性插值

咱们再来一道

假设已知坐标 $\left ( {{x}_{0},\, {y}_{0}} \right )$ 与 $\left ( {{x}_{1},\, {y}_{1}} \right )$，求： $\left [ {{x}_{0},\, {x}_{1}} \right ]$ 区间内某一位置 $x$ 在所对应的 $y$ 值。

因为 $\left ( {{x}_{0},\, {y}_{0}} \right )$ 和 $\left ( x,\, y \right )$ 之间的斜率，与 $\left ( {{x}_{0},\, {y}_{0}} \right )$ 和 $\left ( {{x}_{1},\, {y}_{1}} \right )$ 之间的斜率相同，所以：

其中 ${x}_{0}$、${y}_{0}$、${x}_{1}$、${y}_{1}$、$x$ 都已知，那么：

过程和上面的例子，线性插值推算未知函数 $f(2.5)$ 的值其实是一样的，原来数学里线性插值的过程是这么表达的啊。

贝塞尔曲线

线性贝塞尔曲线

线性贝塞尔曲线是一条两点之间的直线，给定点 ${P}_{0}$、${P}_{1}$，这条线由下式给出：

等等，这不就是线性插值吗，和线性插值公式一样，而且线性插值的结果也在一条两点之间的直线上。

二次方贝塞尔曲线

既然两个点线性插值可以表示一条两点之间的直线，或者说是一条线性贝塞尔曲线，那...3个点线性插值的结果，几何表示会是什么样？

同时对 ${P}_{0}{P}_{1}$ 、${P}_{1}{P}_{2}$ 进行插值：

${P}_{0}{P}_{1}$ 插值得到连续点 ${Q}_{0}$，描述线段 ${P}_{0}{P}_{1}$，是一条线性贝塞尔曲线；

${P}_{1}{P}_{2}$ 插值得到连续点 ${Q}_{1}$，描述线段 ${P}_{1}{P}_{2}$，是一条线性贝塞尔曲线；

在 ${P}_{0}{P}_{1}$ 、${P}_{1}{P}_{2}$ 插值的同时，用同样的插值因子对得到的 ${Q}_{0}{Q}_{1}$ 再插值，也就是对图中绿色线段进行插值，得到连续点 $B$，追踪连续点 $B$ 的运动轨迹，得到曲线 ${P}_{0}{P}_{2}$，也就是图中红色曲线，是一条二次贝塞尔曲线。

原来，两个及以上的点 线性插值函数 就是 贝塞尔曲线函数，我们可以简单地不断循坏迭代两点线性插值来得到最终结果。

三次方贝塞尔曲线 & 动画速度曲线

无论是网页设计里的 CSS 还是 Android 开发，它们里面的动画速度曲线其实是三次方贝塞尔曲线，由 4 个点不断两两插值得到。

我们自定义自己的动画曲线（三次方贝塞尔曲线）时，里面包含 4 个点的信息，其中第一个和最后一个点的坐标是 (0, 0) 和 (1, 1)，我们还需要提供中间两个点的坐标。原来自定义动画曲线要填入 4 个数字的原因是这样啊，豁然开朗。

另外，你可以用网址 cubic-bezier 快速定制自己的动画曲线。

Ease / Easing

现实生活中极少存在线性匀速运动的场景，汽车启动、停下、自由落体运动等等都包含加速、减速，人的脑子里已经潜移默化地习惯了这种加速减速地运动。动画也是一种运动，设计动画的时候应该遵循现实世界的物理模型，让动画看起来更加自然，符合直觉。

缓动 Ease，表示缓慢地移动（缓动），在 CSS 过渡动画里面，我们可以选择动画的缓动（Easing）类型，其中一些关键字有：

• linear


• ease-in


• ease-out


• ease-in-out

在经典动画中，开始阶段缓慢，然后加速的动作称为 "slow in"；开始阶段运动较快，然后减速的动作称为 "slow out"。网络上面分别叫 "ease in" 和 "ease out"，这里的 in/out 可以理解成一个动画里的一开始（start）或者最后（end）

slow in (ease in)

比较适合出场动画，因为开始阶段比较慢，容易让人注意到哪个元素要开始移动，然后加速飞到视线之外。

好比你送朋友，看到朋友上了车，车子缓缓启动，然后加速驶去。

slow out (ease out)

比较适合进场动画，因为结束阶段比较缓慢，能让人清楚看到是哪个元素飞了进来。

就像你站在公交车站，看到一辆公交车远远飞速驶来，减速停下。

ease in out

那 ease in out 又是啥呢？ease 是缓和的意思，而 in/out 前面说过可以看作是一次动画里面的开始或结束阶段。ease in out 自然就代表：在一次动画里的开始阶段和结束阶段，动作都是缓和的，仅中间阶段是加速的，能够将用户注意力集中在过渡的末端。这也是 Material Design 的标准缓动，由于现实世界中的物体不会立即开始或停止移动，这种缓动类型可以让动画更有质感。

这种动画曲线比较适合转换动画，也就是说一个元素运动过程中，没有涉及入场与离场，它始终位于屏幕内，只是由一种形态变换为另一种形态。

Jetpack Compose 里面，表示动画速度曲线的接口是 Easing，Compose 提供了 4 中常见的速度曲线：

/**

 * Elements that begin and end at rest use this standard easing. They speed up quickly

 * and slow down gradually, in order to emphasize the end of the transition.

 *

 * Standard easing puts subtle attention at the end of an animation, by giving more

 * time to deceleration than acceleration. It is the most common form of easing.

 *

 * This is equivalent to the Android `FastOutSlowInInterpolator`

 */

val FastOutSlowInEasing: Easing = CubicBezierEasing(0.4f, 0.0f, 0.2f, 1.0f)



/**

 * Incoming elements are animated using deceleration easing, which starts a transition

 * at peak velocity (the fastest point of an element’s movement) and ends at rest.

 *

 * This is equivalent to the Android `LinearOutSlowInInterpolator`

 */

val LinearOutSlowInEasing: Easing = CubicBezierEasing(0.0f, 0.0f, 0.2f, 1.0f)



/**

 * Elements exiting a screen use acceleration easing, where they start at rest and

 * end at peak velocity.

 *

 * This is equivalent to the Android `FastOutLinearInInterpolator`

 */

val FastOutLinearInEasing: Easing = CubicBezierEasing(0.4f, 0.0f, 1.0f, 1.0f)



/**

 * It returns fraction unmodified. This is useful as a default value for

 * cases where a [Easing] is required but no actual easing is desired.

 */

val LinearEasing: Easing = Easing { fraction -> fraction }

LinearEasing 是匀速运动，最好理解了，另外 3 个和前面提到的 CSS 里的 ease-in-out、ease-out、ease-in 其实都是对应的

• ease-in-out => FastOutSlowIn


• ease-out => LinearOutSlowIn


• ease-in => FastOutLinearIn

...真是想不明白 Compose 官方这个命名是从哪个角度理解的

内存泄漏简介

关于内存泄露的定义，想必大家已经烂熟于心了，简单一点的说，就是程序占用了不再使用的内存空间。

那在 Android 里边，怎样的内存空间是程序不再使用的内存空间呢？

这就不得不提到内存泄漏相关的检测了，拿 LeakCanary 的检测举例，销毁的 Activity 、Fragment 、fragment View 、ViewModel 如果没有被回收，当前应用被判定为发生了内存泄漏。LeakCanary 会生成引用链相关的日志信息。

有了引用链的日志信息，我们就可以开开心心的解决内存泄漏问题了。但是除了查看引用链还有更好的解决方式吗？答案是有的，那就是通过画图来解决，会更加的直观形象~

一个简单的例子

如下是一个 Handler 发生内存泄露的例子：

class MainActivity : ComponentActivity() {



    private val handler = LeakHandler(Looper.getMainLooper())



    override fun onCreate(savedInstanceState: Bundle?) {

        // other code



        // 发送了一个 100s 的延迟消息

        handler.sendMessageDelayed(Message.obtain(), 100_000L)

    }



    private fun doLog() {

        Log.d(TAG, "doLog")

    }



    private inner class LeakHandler(looper: Looper): Handler(looper) {

        override fun handleMessage(msg: Message) {

            doLog()

        }

    }

}

因为 LeakHandler 是一个内部类，持有了外部类 MainActivity 的引用。

其在如下场景会发生内存泄漏：onCreate 执行之后发送了一个 100s 的延迟消息，在 100s 以内旋转屏幕，MainActivity 进行了重建，上一次的 MainActivity 还被 LeakHandler 持有无法释放，导致内存泄露的产生。

引用链图示

如下是执行完 onCreate() 方法之后的引用链图示：

简单说明一下引用链 0 的位置，这里为了简化，直接使用 GCRoot 代替了，实际上存在这样的引用关系：GCRoot → ActivityThread → Handler → MessageQueue → Message。简单了解一下即可，不太清楚的话也不会影响接下来的问题解决。
同时，为了简单明了，文中还简化了一些相关但是不重要的引用链关系，比如 Handler 对 MessageQueue 的引用。

100s 以内旋转屏幕之后，引用链图示变成这样了：

之前的 Activity 被释放，引用链 4 被切断了。我们可以很清晰的看到，由于 LeakHandler 对 MainActivity 的强引用(引用链2)，LeakHandler 间接被 GCRoot 节点强引用，导致 MainActivity 没办法释放。

MainActivity 指的是旋转屏幕之前的 Activity，不是旋转屏幕之后新建的

那么很显然，接下来我们就需要对引用链 0、1 或 2 进行一些操作了，这样才可以让 MainActivity 得到释放。

解决方案

方案一：

在 onDestroy() 的时候调用 removeCallbacksAndMessages(null) ，该方法会进行两步操作：移除该 Handler 发送的所有消息，并将 Message 回收到 MessagePool：

override fun onDestroy() {

    super.onDestroy()

    handler.removeCallbacksAndMessages(null)

}

此时，在图示上的表现，就是移除了引用链 0 和 1。如此 MainActivity 就可以正常回收了。

方案二：

使用弱引用 + 静态内部类的方式，我们同样也可以解决这个内存泄漏问题，想必大家已经非常熟悉了。

这里再简单说明一下弱引用 + 静态内部类的原理：
弱引用的回收机制：在垃圾回收器线程扫描它所管辖的内存区域的过程中，一旦发现了只被弱引用引用的对象，不管当前内存空间足够与否，都会回收它的内存。
静态内部类：静态内部类不会持有外部类的引用，也就不会有 LeakHandler 直接引用 MainActivity 的情况出现

代码实现上，只需要传入 MainActivity 的弱引用给 NoLeakHandler 即可：

private val handler = NoLeakHandler(WeakReference(this), Looper.getMainLooper())



private class NoLeakHandler(

    private val activity: WeakReference<MainActivity>,

    looper: Looper

): Handler(looper) {

    override fun handleMessage(msg: Message) {

        activity.get()?.doLog()

    }

}

下图中，2.1 表示的是 NoLeakHandler 对 WeakReference 的强引用，NoLeakHandler 通过 WeakReference 间接引用到了 MainActivity。我们可以很清楚的看到，在旋转屏幕之后，MainActivity 此时只被一个弱引用引用了(引用链 2.2，使用虚线表示)，是可以正常被回收的。

另一个简单的例子

再来一个静态类持有 Activity 的例子，如下是关键代码：

object LeakStaticObject {

    val activityCollection: MutableList<Activity> = mutableListOf()

}



class MainActivity : ComponentActivity() {



    override fun onCreate(savedInstanceState: Bundle?) {

        // other code



        activityCollection.add(this)

    }

}  

正常运行的情况下，存在如下的引用关系：

在旋转屏幕之后，会发生内存泄漏，因为之前的 MainActivity 还被 GCRoot 节点(LeakStaticObject)引用着。那要怎么解决呢？相信大家已经比较清楚了，要么切断引用链 0，要么将引用链 0 替换成一个弱引用。由于比较简单，这里就不再单独画图说明了。

总结

本文介绍了一种使用画图来解决常见内存泄露的方法，会比直接查看引用链更加清晰具体。同时，其相比于一些归纳常见内存泄漏的方法，会更加的通用，很大程度上摆脱了对内存泄漏场景的强行记忆。

通过画图，找到引用路径之后，在引用链的某个节点上进行操作，切断强引用或者将强引用替换成弱引用，以此来解决问题。

总的来说，对于常见的内存泄漏场景，我们都可以通过画图来解决，本文为了介绍简便，使用了比较简单常见的例子，实际上，遇到复杂的内存泄漏，也可以通过画图的方式来解决。当然，熟练之后，省略画图的操作，也是可以的。

REFERENCE

wikipedia 内存泄漏

Excalidraw — Collaborative whiteboarding made easy

How LeakCanary works - LeakCanary

理解Java的强引用、软引用、弱引用和虚引用 - 掘金

前言

跨端技术一直是移动端开发领域的热门话题，Flutter 作为一种领先的移动跨端技术之一，凭借其快速的渲染引擎、丰富的UI组件库和强大的开发工具，成为了开发人员的首选之一。

从 Flutter 诞生之初，我们就一直关注着它的发展，Flutter 早期版本变更较为频繁，并且经常伴随着 Breaking Change，另外可用的三方插件较少且不稳定。直到2019年，Flutter 的热度暴涨，国内不少团队陆续把 Flutter 引入到了生产环境使用，社区也涌现出不少优秀的开源项目，我们也决定在这个时候做一些技术上的尝试。

经过这几年在 Flutter 技术上的不断学习、探索和积累，Flutter 已经成为了客户端技术体系中的重要组成部分。

回顾整个过程，我们大致经历了这么几个阶段：可行性验证、基建一期建设、小范围试验、基建二期建设、大范围推广、前端生态的探索，下文将分别对每个阶段展开进行介绍。

可行性验证

其实在这之前我们已经做过了一些调研，但许多结论都是来源于网上的一些文章或者其它团队的实践，这些结论是否靠谱是否真实还有待商榷，另外，网上的文章大都千篇一律，要么使劲吹捧，要么使劲贬低，要得出相对客观的结论还是得需要我们自己通过实践才能得出。

目标

我们确定了以下几个维度，用来评估 Flutter 是否值得我们进一步投入：

• 开发效率


• UI一致性


• 性能体验


• 学习成本


• 发展趋势

由于前期对 Flutter 的熟练度不高，基础设施也还没有搭建起来，所以在开发效率上，我们期望的 Flutter 的开发耗时能保持在原生开发耗时的 1.5 倍以内，不然虽然实现了跨端，但是需求的开发周期反而被拉长了，这样得不偿失。在UI一致性上，我们期望同一份代码在两端的表现要基本达到一致，不需要额外的适配成本。在性能方面，尽量保证崩溃、卡顿、内存、帧率这些指标在可控范围内。

方案

我们希望用较小的代价完成上述维度的评估，所以在试验期间的架构及基础设施方面我们做的比较简单。

测试目标

当时我们正在做一个叫切克的 App，用户量级比较小，工程架构也相对简单一些，正好可以用来做一些技术方面的探索和验证。

我们选择的是切克的商品详情页，用 Flutter 技术实现了一个一模一样的商详，按1:1的流量分配给 Native 和 Flutter。

项目架构

由于我们的工程不是一个全新的项目，所以采用的是 Native 与 Flutter 混合开发的方式，Native 主工程只依赖 Flutter 产物即可，同时也尽量避免对原有工程的影响。

关于混合页面栈的问题，我们没有额外处理，因为暂时只测试一个页面，不会涉及到多页面混合栈的问题，所以暂时先忽略。

构建流程

为了降低验证成本，我们没有对接现有的 Native 的持续集成流程，而是直接在本地构建 Flutter 产物，然后上传到远程仓库。

结论

经过一段时间的线上验证，我对 Flutter 技术基本有了一个比较全面的了解：

在开发效率上由于基础库和基建的缺失，在处理 Flutter 业务跟 Native 业务的交互时需要更多的适配成本，包括像页面跳转、埋点上报、接口请求、图片加载等也需要额外的处理，但我们评估随着后续基建的不断完善，这部分的效率是可以逐步得到改善的；而在涉及UI开发方面，得益于热重载等技术，Flutter 的开发效率是要优于原生开发的。整体评估下来，在开发效率方面 Flutter 是符合我们的预期的。

在UI一致性上，除了在状态栏控制和文本在某些情况下需要特殊适配下外，其它控件在两端的表现基本一致。

在性能表现上，Flutter 会额外引入一些崩溃，内存占用也有所上涨，但还在可接受范围内。

Flutter 的学习成本相对还是比较高，毕竟需要单独学习一门语言，另外 Flutter 的渲染原理也跟原生有很多差异，需要转变思维才能更快的适应，此外 Flutter 还提供了众多的 Widget 组件，也需要较长时间学习。

在发展趋势上，Flutter 无疑是当时增长最快的跨端技术之一，社区的活跃程度以及官方的投入都非常高，国内不少团队也都在积极推进 Flutter 技术的发展，Flutter 正处在一个快速的上升期。

整体来说，Flutter 是满足我们团队对跨平台技术的需求的，我们计划在接下来的一段时间投入更多资源，把 Flutter 的基础设施逐渐建立起来。

基建一期建设

基建一期内容主要包括以下几个方面：

• 工程架构


• 开发框架


• 脚本工具


• 自动化构建

在基建一期完成后，我们的目标是要达到：

• 基础能力足够支撑普通业务开发


• 开发效率接近原生开发


• 开发过程要基本顺畅

工程架构

工程架构指的是原生工程与 Flutter 工程之间的关系，以及 Flutter 工程与 Flutter 工程之间的关系。

原生工程与Flutter工程的关系

我们知道，使用 Flutter 开发通常有两种情况，一种是直接使用 Flutter 开发一个新的App，属于纯 Flutter 开发；一种是在已有的 Native 工程中引入，属于混合开发。我们当然属于后者。

而混合开发又可分为两种：源码集成和产物集成。源码集成需要改变原工程的项目结构，并且需要 Flutter 开发环境才能编译，而产物集成则不需要改动原工程的项目结构，只需把 Flutter 的构建产物当作普通的依赖库引入即可，原有 Native 工程和 Flutter 工程从物理上完全独立。显而易见的我们选择产物集成的方式，引入 Flutter对于原工程以及非 Flutter 开发人员来说，基本上是毫无感知的。

所以原生工程与 Flutter 工程之间的关系如下图所示：

Flutter工程之间的关系

根据已有的客户端基建的开发经验，我们将所有 Flutter 工程分为了四层：

• 壳工程


• 业务层


• 公共层


• 容器层

容器层负责提供 Flutter 的基础运行环境，包括 Flutter 引擎管理、页面栈管理、网络框架、KV存储、数据库访问、埋点框架、Native 与 Flutter 通信通道和其它基础功能。

公共层包含一些通用的开源库、自定义UI组件、部分通用业务等。

业务层包含用户信息、商品、发布等业务组件。

壳工程负责集成各业务组件，最终构建出产物集成到 Native 主工程。

其中业务层、公共层、容器层都是由若干个独立的工程所组成，整体结构如下：

开发框架

开发框架是为了提高开发效率、规范代码结构、减少维护成本等考虑而设计的一套软件框架，包括：基础能力、状态管理、页面栈管理等。

基础能力

开发框架需要提供各种必要的能力，比如：页面跳转、埋点、网络请求、图片加载、数据存储等，为了最大化减少研发成本，我们在底层定义了一套通用的数据交互协议，直接复用了现有的 Native 的各项能力，也使得 Native 的各种状态与 Flutter 侧能够保持统一。

状态管理

相信了解 Flutter 的同学一定知道状态管理，这也是跟 Native 开发区别较大的地方。在开发较为复杂的页面时，状态维护是非常繁琐的，在不引入状态管理框架的情况下，开发效率会受很大影响，后期的维护成本以及业务交接都是很大的问题。

另外，在开发框架设计之初，我们就期望从框架上能够在一定程度上限定代码结构、模块之间的交互方式、状态更新方式等，我们期望的是不同的人写出来的代码在逻辑、结构和风格上都能保持比较统一，即在提高开发效率的同时，也能保证项目后续的可维护性和扩展性，减少不同业务间的交接成本。

基于上述这些需求，在我们对比了多个开源项目后，FishRedux 的整体使用感受正好符合我们的要求。

如下图，两个页面的代码结构基本一致：

页面栈管理

在早期版本，Flutter 引擎的实例占用内存较高，为了减少内存消耗，大家普遍采用单实例的模式，而在 Native 和 Flutter 混合开发的场景下就会存在一个问题，就是 Native 有自己的页面栈，而 Flutter 也维护着一套自己的页面栈，如果 Native 页面与 Flutter 页面穿插着打开，在没有特殊处理的情况下，页面栈会发生错乱。在调研了业内的各种开源方案后，我们选择引入 FlutterBoost 用来管理页面混合栈。

脚本工具

为了方便开发同学搭建 Flutter 的开发环境，同时能够管理使用的 Flutter 版本，我们开发了 zflutter 命令行工具，包含以下主要功能：

• Flutter开发环境安装


• Flutter版本管理


• 创建模版工程（主工程、组件工程）


• 创建模版页面（常规页面、列表页、瀑布流页面）


• 创建页面模块


• 组件工程发布


• 构建Flutter产物


• 脚本自更新

如图：

自动化构建

客户端使用的是自研的 Beetle 平台（集工程管理、分支管理、编译、发布于一体），短时间内要支持上 Flutter 不太现实，基于此，我们先临时自己搭台服务器，通过 gitlab 的 webhook 功能结合 zflutter 工具简单实现了一套自动化构建的服务，待 Beetle 支持 Flutter 组件化开发功能后，再将工作流切回到 Beetle 平台。

小范围试验

在完成基建一期的开发工作后，我们决定通过开发几个实际业务来试验目前的基础设施是否达到既定目标。

我们以不影响主流程、能覆盖常见UI功能、并且能跟 Native 页面做AB测试（主要是方便在出问题时能够切换到 Native 版本）为条件挑选了个人资料页和留言列表页进行了 Flutter 化改造，如下图所示：

这两个页面涵盖了网络请求、图片加载、弹窗、列表、下拉刷新、上拉加载更多、左滑删除、埋点上报、页面跳转等常见功能，足以覆盖日常开发所需的基础能力。

经过完整的开发流程以及一段时间的线上观察，我们得出如下结论：

基础能力

目前已具备的基础能力已经足够支撑普通业务开发（开发过程中补足了一些缺失的能力）。

工作流

整个开发过程在工程依赖管理和分支管理方面的支持还比较缺失，比较依赖人工处理。

开发效率

我们在开发前根据页面功能同时做了纯 Native 开发排期和 Flutter 开发排期，按单人日的成本来对比的话，Flutter 实际开发耗时跟 Native 排期耗时比为 1.25:2，Native 是按照 Android+iOS 两端各一人算的，也就是1.25人/日比2人/日，如果后续对 Flutter 技术熟悉度提升后相信效率还可以进一步提升。

性能体验

线上两个 Flutter 页面的体验效果跟 Native 对比基本感觉不到差别，但是首次进入 Flutter 页面时会有短暂的白屏等待时间，这个是由于 Flutter 环境初始化导致的延迟，后续可以想办法优化。

包体积

在引入 Flutter 之后，转转的安装包体积在两端都分别有所增加：

• Android增加6.1M


• iOS增加14M

试验结果基本符合预期，包体积的增量也在我们的可接受范围内，接下来将进行基建二期的建设，补足目前缺失的能力。

基建二期建设

基建二期的内容主要包含以下工作：

• 配合工程效率组完成 Beetle 对 Flutter 项目的支持


• 组织客户端内部进行 Flutter 技术培训

Beetle支持Flutter

为了能让大家更清晰的了解 Beetle 的工程管理机制，这里先简单介绍下客户端的工程类型：

• Native主工程（又分为 Android 和 iOS）


• Native组件工程（又分为 Android 和 iOS）


• Flutter主工程


• Flutter组件工程（即 Flutter 插件工程）

举个例子，当有一个新版本需要开发时，先从 Native 主工程创建一个版本同时创建一个 Release 分支，即版本分支，然后从版本分支根据具体需求创建对应 Native 组件的版本分支，Flutter 主工程此时可看作是一个 Native 组件，比如此时创建了一个 Flutter 主工程的版本分支后，可以进入 Flutter 主工程再根据需要创建对应的 Flutter 组件工程的版本分支。

Beetle 目前已支持 Flutter 工程管理、分支管理、组件依赖管理以及组件的发布、Flutter 产物的构建等，Beetle 的作用贯穿从开发到上线的整个工作流。

Flutter技术培训

为了让大家更快的熟悉 Flutter 开发，我们在客户端内部组织了5次 Flutter 快速入门的系列分享：

同时也逐步完善内部文档的建设，包括：FlutterSdk 源码维护策略、Flutter 入门指南、Flutter 混合开发方案、Flutter 与 Native 通信方案、Flutter 开发环境配置、Flutter 组件化工程结构、Flutter 开发与调试、Flutter 开发工作流、ZFlutter 工具使用介绍、Flutter 开发之 Beetle 使用指南等，涵盖了从环境搭建、开发调试到构建发布的整个过程。

大范围推广

在完成基建二期的建设后，整体基础设施已经能够支撑我们常见的业务，开发工作流也基本顺畅，于是我们开始了在内部大范围推广计划。

我们先后改造和新开发了个人主页、我发布的页面、微商详、奇趣数码页等业务，基本涵盖了常见的各种类型的页面和功能，整体开发效率与原生单端开发效率持平，但是在特别复杂的页面的性能表现上，Flutter 的表现相对要差一些。

部分页面如下图所示：

探索前端生态

在跨端技术领域我们知道 Web 技术是天然支持的，如果能把前端生态引入到 Flutter 中，那么对客户端来说，在业务的支持度上会更上一个台阶，Web 的体验得到提升的同时客户端也具备了动态化，基于此背景我们开始探索 Flutter 在 Web 上的可能性。

技术调研

当时可选的开源方案有：Kraken、MXFlutter、Flutter For Web。

Kraken

Kraken 是一款基于 W3C 标准的高性能渲染引擎。Kraken 底层基于 Flutter 进行渲染，通过其自绘渲染的特性，保证多端一致性。上层基于 W3C 标准实现，拥有非常庞大的前端开发者生态。

Kraken 的最上层是一个基于 W3C 标准而构建的 DOM API，在下层是所依赖的 JS 引擎，通过 C++ 构建一个 Bridge 与 Dart 通信。然后这个 C++ Bridge 把 JS 所调用的一些信息，转发到 Dart 层。Dart 层通过接收这些信息，会去调用 Flutter 所提供的一些渲染能力来进行渲染。

Kraken 是不依赖 Flutter Widget，而是依赖 Flutter Widget 的底层渲染数据结构 —— RenderObject。Kraken 实现了很多 CSS 相关的能力和一些自定义的 RenderObject，直接将生成的 RenderObject 挂载在 Flutter RenderView 上来进行渲染，通过这样的方式能够做到非常高效的渲染性能。

MXFlutter

MXFlutter 是一套使用 TypeScript/JavaScript 来开发 Flutter 应用的框架。

MXFlutter 把 Flutter 的渲染逻辑中的三棵树（即：WidgetTree、Element、RenderObject ）中的第一棵（即：WidgetTree），放到 JavaScript 中生成。用 JavaScript 完整实现了 Flutter 控件层封装，实现了轻量的响应式 UI 框架，支撑JS WidgetTree 的 build逻辑，build 过程生成的UI描述， 通过Flutter 层的 UI 引擎转换成真正的 Flutter 控件显示出来。

Flutter For Web

Flutter 在 Web 平台上以浏览器的标准 API 重新实现了引擎。目前有两种在 Web 上呈现内容的选项：HTML 和 WebGL。

• 在 HTML 模式下，Flutter 使用 HTML、CSS、Canvas 和 SVG 进行渲染。


• 在 WebGL 模式下，Flutter 使用了一个编译为 WebAssembly 的 Skia 版本，名为 CanvasKit。

HTML 模式提供了最佳的代码大小，CanvasKit 则提供了浏览器图形堆栈渲染的最快途径，并为原生平台的内容提供了更高的图形保真度。

结论

我们对以上方案从接入成本、渲染性能、包体积、开发生态、学习成本等多维度进行了对比：

• 接入成本：Kraken ≈ MXFlutter ≈ Flutter For Web


• 渲染性能：Kraken > MXFlutter > Flutter For Web


• 包体积增量：Flutter For Web < Kraken < MXFlutter


• 开发生态：Kraken ≈ MXFlutter > Flutter For Web


• 学习成本：Flutter For Web < Kraken ≈ MXFlutter

最终选择了 Kraken 作为我们的首选方案。

上线验证

为了使 Kraken 顺利接入转转App，我们做了以下几个方面的工作：

• 升级 FlutterSdk 到最新版，满足接入 Kraken 的基础条件


• 统一客户端容器接口，使得 Kraken 容器能够完美继承 Web 容器的能力


• 自己维护 Kraken 源码，及时修复官方来不及修复的问题，方便增加转转特有的扩展能力


• 制定 Kraken 容器与 Web 容器的降级机制


• 兼容 HTML 加载，保持跟 Web 容器一致的加载方式


• 添加监控埋点，量化指标，指导后续优化方向


• 选择一个简单 Web 页并协助前端同学适配

上线后，我们对页面的各项指标进行了对比，使用 Kraken 容器加载比使用 WebView 加载，在首屏加载耗时的指标上平均增加了281毫秒，原因为：当前版本的 Kraken 容器不支持直接加载 HTML，且只能加载单个 JsBundle，导致加载效率比 WebView 差。

通过跟前端同学沟通，从开发效率上来看，Kraken 工程的开发周期会比实现同样需求的普通 Web 工程增加1.5到2倍的时间，主要原因是受到 CSS 样式、Api 差异，无法使用现有UI组件，另外 Kraken 的调试工具目前还不够完善，使用浏览器调试后还须在客户端容器中调试，整体下来导致开发 Kraken 工程会比开发普通Web工程耗费更多时间。

再次验证

由于之前选择的 Web 页面太过简单，不具备代表性，所以我们重新选定了“附近的人”页面做为改造目标，再次验证 Kraken 在实际开发过程中的效率及性能体验。页面如图所示：

最终因为部分问题得不到解决，并且整体性能较差，导致页面没能成功上线。

存在的问题包括但不限于下面列举的一些：

• 表现不一致问题
  
  
  
  1. CSS 定位、布局表现与浏览器表现不一致
  
  
  2. 部分 API 表现与浏览器不一致(getBoundingClientRect等)
  
  
  3. iOS，Android系统表现不一致
  
  
  
  


• 重大 Bug
  
  
  
  1. 页面初始化渲染完成，动态修改元素样式，DOM不重新渲染
  
  
  2. 滑动监听计算导致 APP 崩溃
  
  
  
  


• 调试成本高
  
  
  
  1. 不支持 vue-router，单项目单路由
  
  
  2. 不支持热更新，npm run build 预览
  
  
  3. 不支持 sourceMap，无法定位源代码
  
  
  4. 真机调试只支持 element 和 network；dom 和 element 无法互相选中；无法动态修改 dom 结构，无法直接修改样式.......
  
  
  5. 页面白屏，假死
  
  
  
  


• 安全性问题
  
  
  
  1. 无浏览器中的“同源策略”限制
  
  
  
  


• 兼容性
  
  
  
  1. npm 包不兼容等
  
  
  
  

通过这一系列的探索和尝试，我们了解到了 Kraken 目前还存在许多不足，如果继续应用会带来高额的开发调试以及维护成本，所以暂时停止了在 Kraken 方向上的投入，但我们仍然在这个方向上保持着关注。

结尾

目前转转在Flutter方向上的实践和探索只是一个起点，我们意识到仍然有很多工作需要去做。我们坚信Flutter作为一项领先的跨端技术，将为转转业务的发展带来巨大的潜力和机会。我们将持续努力，加强技术建设，不断完善实践经验，推动Flutter在转转的应用和发展，为用户提供更好的产品和体验。

前言

我们之前写过《Android 实现LED 展示效果》，在这篇文章中，我们使用了图像分块（或者是分片）的算法，这样做的目的是降低像素扫描的时间复杂度，并且也利于均色采样。其实图像分块是很常见的图像动效处理手段，一般主要用于场景变换，这项技术也和图像光栅化类似。

什么是光栅化

光栅化渲染（Rasterized Rendering）直译过来是栅格化渲染。寻找图像中被几何图形占据的所有像素的过程称为栅格化，因此对象顺序渲染(Object-order rendering)也可以称为栅格化渲染。

我们今天的所要用到的技术也是栅格化和像素采样技术。

LED原理简述

马赛克是一种图像编辑技术，广泛应用于隐私保护和涂鸦渲染，很多手机系统自带了这种效果，那如何才能实现这种技术呢？

了解过我之前的文章的知道，我们制作LED有几个特征

• 每个LED单元要么亮要么不亮


• 每个LED单元只有一种颜色


• 每个LED单元和其他LED单元存在一定的间距


• 所有LED的单元成网格排列


• 每个LED单元大小一致

以上相当于顶点坐标信息，我们拿到网格的位置，就能拿到LED整个区域的片段，知道这个区域的片段我们就可以修改其像素。

着色采样：

即便是每个矩形区域，也有很多像素点，如果每个矩形区域每个像素都要进行均色计算的话，那10x10的也要100此，因此为了更快的效率，需要对LED 范围内的像素点采样，求出颜色均值，均值色就是LED最终展示的颜色。

避坑——修改像素

上一篇我们知道，通过Bitmap.setPixel方法修改像素效率是极低的，我曾经写过一篇通过修改像素生成圆形图片的文章，在那篇文章里我们看到，像素本身也是有size的，导致最终的圆形图片存在大量锯齿，主要原因是通过这种方式没法做到双线性过滤（图片放大之后会对边缘优化），还有另一个问题，就是效率极差。
总结一下修改像素的问题：

• 无法抗锯齿


• 效率低

避坑——透明色

像素中往往存在 color为0或者alpha通道为0的情况，甚至有的区域因为采样原因导致清晰度急剧下降，甚至出现了透明区域噪点，这些问题主要来自于alpha 通道引发的颜色稀释问题，因此在采样时一定要规避这两种情况，至于会不会失真？答案是如果采用alpha失真只会更严重。

清晰度问题

同样，清晰度也容易受到这olor为0或者alpha通道为0的情况情况干扰，除了这两种就是采样区域的大小了，理论上采样网格密度越密，清晰度越高，越接近原始图片，因此一定要权衡，太清晰不就很原图一样了么，还制作什么LED呢？

马赛克原理

实际上，马赛克原理和LED展示方式类似，为什么这么说呢？从特征来看，几乎一样，马赛克和LED效果只在两部分存在区别

马赛克没有LED间距很好理解，至于次数少的好处第一肯定是效率高，其次是采样太多容易接近原色，而LED是要有一定程度接近原色。

技术实现

本篇我们邀请一位可爱的猫猫，老师们太耀眼的图片就算了，不利于大家阅读。

我们接下来的任务是把给猫脸打上马赛克，了解完这项技术实现后，其实你不仅可以给猫脸打马赛克，自行涂鸦，指哪儿打哪儿。

基本信息

private Bitmap mBitmap; //猫图

private float blockWidth = 30; //30x30的像素快

private RectF blockRect = new RectF(); //猫头区域

private RectF gridRect = new RectF(); //网格区域

Canvas 包裹Bitmap

主要方便绘制和内存回收

static class BitmapCanvas extends Canvas {

    Bitmap bitmap;

    public BitmapCanvas(Bitmap bitmap) {

        super(bitmap);

        this.bitmap = bitmap;

    }

    public Bitmap getBitmap() {

        return bitmap;

    }

}

定位猫头位置

由于时间关系，我没有做TOUCH事件处理，就写了这个猫头区域

/ 这个区域到时候可以自己调制，想让什么部位有马赛克那就会有马赛克

blockRect.set(bitmapCanvas.bitmap.getWidth() - 400, 0, bitmapCanvas.bitmap.getWidth() - 100, 300);

网格分割

//根据平分猫头矩形区域

int col = (int) (blockRect.width() / blockWidth);

int row = (int) (blockRect.height() / blockWidth);

网格定位

float startX = blockRect.left;

float startY = blockRect.top;

for (int i = 0; i < row * col; i++) {

    int x = i % col;

    int y = (i / col);

    gridRect.set(startX + x * blockWidth, startY + y * blockWidth, startX + x *     blockWidth + blockWidth, startY + y * blockWidth + blockWidth);

  

}

采样和着色

float startX = blockRect.left;

float startY = blockRect.top;

for (int i = 0; i < row * col; i++) {

    int x = i % col;

    int y = (i / col);

    gridRect.set(startX + x * blockWidth, startY + y * blockWidth, startX + x * blockWidth + blockWidth, startY + y * blockWidth + blockWidth);

   //采样

    int sampleColor = mBitmap.getPixel((int) gridRect.centerX(), (int) gridRect.centerY());

    mCommonPaint.setColor(sampleColor);

    //着色，我们这里不修改像素，而是drawRect，避免性能问题和锯齿问题

    bitmapCanvas.drawRect(gridRect, mCommonPaint);

}

渲染到View上

canvas.drawBitmap(bitmapCanvas.bitmap, null, mainRect, mCommonPaint);

效果预览

避坑点

网格区间不易过小，和LED一样，越小清晰度越高，就会失去了处理的意义。

全部代码

public class MosaicView extends View {

    private final DisplayMetrics mDM;

    private TextPaint mCommonPaint;

    private RectF mainRect = new RectF();



    private BitmapCanvas bitmapCanvas; //Canvas 封装的

    private Bitmap mBitmap; //猫图

    private float blockWidth = 30; //30x30的像素快

    private RectF blockRect = new RectF(); //猫头区域

    private RectF gridRect = new RectF(); //网格区域

    private boolean showMask = false;



    public MosaicView(Context context) {

        this(context, null);

    }

    public MosaicView(Context context, AttributeSet attrs) {

        this(context, attrs, 0);

    }

    public MosaicView(Context context, AttributeSet attrs, int defStyleAttr) {

        super(context, attrs, defStyleAttr);

        mDM = getResources().getDisplayMetrics();

        initPaint();

    }



    private void initPaint() {

        //否则提供给外部纹理绘制

        mCommonPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);

        mCommonPaint.setAntiAlias(true);

        mCommonPaint.setStyle(Paint.Style.FILL_AND_STROKE);

        mCommonPaint.setStrokeCap(Paint.Cap.ROUND);

        mBitmap = decodeBitmap(R.mipmap.ic_cat);



    }

    private Bitmap decodeBitmap(int resId) {

        BitmapFactory.Options options = new BitmapFactory.Options();

        options.inMutable = true;

        return BitmapFactory.decodeResource(getResources(), resId, options);

    }



    @Override

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {



        int widthMode = MeasureSpec.getMode(widthMeasureSpec);

        int widthSize = MeasureSpec.getSize(widthMeasureSpec);



        if (widthMode != MeasureSpec.EXACTLY) {

            widthSize = mDM.widthPixels / 2;

        }

        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        int heightSize = MeasureSpec.getSize(heightMeasureSpec);



        if (heightMode != MeasureSpec.EXACTLY) {

            heightSize = widthSize / 2;

        }

        setMeasuredDimension(widthSize, heightSize);

        mBitmap = decodeBitmap(R.mipmap.ic_cat);



    }



    @Override

    protected void onSizeChanged(int w, int h, int oldw, int oldh) {

        super.onSizeChanged(w, h, oldw, oldh);

        if (bitmapCanvas != null && bitmapCanvas.bitmap != null && !bitmapCanvas.bitmap.isRecycled()) {

            bitmapCanvas.bitmap.recycle();

        }

        bitmapCanvas = null;



    }



    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        int width = getWidth();

        int height = getHeight();

        if (width < 1 || height < 1) {

            return;

        }

        if (bitmapCanvas == null || bitmapCanvas.bitmap == null) {

            bitmapCanvas = new BitmapCanvas(Bitmap.createBitmap(mBitmap.getWidth(), mBitmap.getHeight(), Bitmap.Config.ARGB_8888));

        } else {

            bitmapCanvas.bitmap.eraseColor(Color.TRANSPARENT);

        }

        float radius = Math.min(width / 2f, height / 2f);



      //关闭双线性过滤

      //  int flags = mCommonPaint.getFlags();

      //  mCommonPaint.setFlags(flags &~ Paint.FILTER_BITMAP_FLAG);

      //  mCommonPaint.setFilterBitmap(false);



        int save = bitmapCanvas.save();

        bitmapCanvas.drawBitmap(mBitmap, 0, 0, mCommonPaint);





        // 这个区域到时候可以自己调制，想让什么部位有马赛克那就会有马赛克

        blockRect.set(bitmapCanvas.bitmap.getWidth() - 560, 10, bitmapCanvas.bitmap.getWidth() - 100, 410);



        if(showMask) {

            //根据平分猫头矩形区域

            int col = (int) (blockRect.width() / blockWidth);

            int row = (int) (blockRect.height() / blockWidth);



            float startX = blockRect.left;

            float startY = blockRect.top;



            for (int i = 0; i < row * col; i++) {

                int x = i % col;

                int y = (i / col);

                gridRect.set(startX + x * blockWidth, startY + y * blockWidth, startX + x * blockWidth + blockWidth, startY + y * blockWidth + blockWidth);

                //采样

                int sampleColor = mBitmap.getPixel((int) gridRect.centerX(), (int) gridRect.centerY());

                mCommonPaint.setColor(sampleColor);

                //着色，我们这里不修改像素，而是drawRect，避免性能问题和锯齿问题

                bitmapCanvas.drawRect(gridRect, mCommonPaint);

            }

        }else{

            Paint.Style style = mCommonPaint.getStyle();

            mCommonPaint.setStyle(Paint.Style.STROKE);

            mCommonPaint.setColor(Color.MAGENTA);

            mCommonPaint.setStrokeWidth(8);

            bitmapCanvas.drawRect(blockRect, mCommonPaint);

            mCommonPaint.setStyle(style);



        }



        bitmapCanvas.restoreToCount(save);

        int saveCount = canvas.save();

        canvas.translate(width / 2f, height / 2f);

        mainRect.set(-radius, -radius, radius, radius);

        canvas.drawBitmap(bitmapCanvas.bitmap, null, mainRect, mCommonPaint);

        canvas.restoreToCount(saveCount);



    }



    public void openMask() {

        showMask = true;

        postInvalidate();

    }



    public void closeMask() {

        showMask = false;

        postInvalidate();



    }



    static class BitmapCanvas extends Canvas {

        Bitmap bitmap;

        public BitmapCanvas(Bitmap bitmap) {

            super(bitmap);

            //继承在Canvas的绘制是软绘制，因此理论上可以绘制出阴影

            this.bitmap = bitmap;

        }

        public Bitmap getBitmap() {

            return bitmap;

        }

    }

}

总结

实际上还有另一种方法，我们绘制图片时关闭双线性过滤

//关闭双线性过滤

//  int flags = mCommonPaint.getFlags();

//  mCommonPaint.setFlags(flags &~ Paint.FILTER_BITMAP_FLAG);

//  mCommonPaint.setFilterBitmap(false);

然后将图片放到很大，这个时候你的图片就会产生一定的网格区域，截图然后进行一系列矩阵转换，最后把图贴到原处就出现了马赛克，但是这个有个问题，超高像素的图片得先缩小，然后再放大，显然处理步骤比较多。

下图是先缩小20倍然后画到原来大小的效果

实现代码

本来不打算放代码的，想想还是放上吧

public class BitmapMosaicView extends View {

    private final DisplayMetrics mDM;

    private TextPaint mCommonPaint;

    private RectF mainRect = new RectF();

    private BitmapCanvas bitmapCanvas; //Canvas 封装的

    private BitmapCanvas srcThumbCanvas; //Canvas 封装的

    private Bitmap mBitmap; //猫图

    private RectF blockRect = new RectF(); //猫头区域



    public BitmapMosaicView(Context context) {

        this(context, null);

    }

    public BitmapMosaicView(Context context, AttributeSet attrs) {

        this(context, attrs, 0);

    }

    public BitmapMosaicView(Context context, AttributeSet attrs, int defStyleAttr) {

        super(context, attrs, defStyleAttr);

        mDM = getResources().getDisplayMetrics();

        initPaint();

    }



    private void initPaint() {

        //否则提供给外部纹理绘制

        mCommonPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);

        mCommonPaint.setAntiAlias(true);

        mCommonPaint.setStyle(Paint.Style.FILL_AND_STROKE);

        mCommonPaint.setStrokeCap(Paint.Cap.ROUND);

        mBitmap = decodeBitmap(R.mipmap.ic_cat);



    }

    private Bitmap decodeBitmap(int resId) {

        BitmapFactory.Options options = new BitmapFactory.Options();

        options.inMutable = true;

        return BitmapFactory.decodeResource(getResources(), resId, options);

    }



    @Override

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {



        int widthMode = MeasureSpec.getMode(widthMeasureSpec);

        int widthSize = MeasureSpec.getSize(widthMeasureSpec);



        if (widthMode != MeasureSpec.EXACTLY) {

            widthSize = mDM.widthPixels / 2;

        }

        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        int heightSize = MeasureSpec.getSize(heightMeasureSpec);



        if (heightMode != MeasureSpec.EXACTLY) {

            heightSize = widthSize / 2;

        }

        setMeasuredDimension(widthSize, heightSize);



    }



    @Override

    protected void onSizeChanged(int w, int h, int oldw, int oldh) {

        super.onSizeChanged(w, h, oldw, oldh);

        if (bitmapCanvas != null && bitmapCanvas.bitmap != null && !bitmapCanvas.bitmap.isRecycled()) {

            bitmapCanvas.bitmap.recycle();

        }

        if (srcThumbCanvas != null && srcThumbCanvas.bitmap != null && !srcThumbCanvas.bitmap.isRecycled()) {

            srcThumbCanvas.bitmap.recycle();

        }

        bitmapCanvas = null;



    }



    private Rect srcRectF = new Rect();

    private Rect dstRectF = new Rect();



    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        int width = getWidth();

        int height = getHeight();

        if (width < 1 || height < 1) {

            return;

        }

        if (bitmapCanvas == null || bitmapCanvas.bitmap == null) {

            bitmapCanvas = new BitmapCanvas(Bitmap.createBitmap(mBitmap.getWidth(), mBitmap.getHeight(), Bitmap.Config.ARGB_8888));

        } else {

            bitmapCanvas.bitmap.eraseColor(Color.TRANSPARENT);

        }

        if (srcThumbCanvas == null || srcThumbCanvas.bitmap == null) {

            srcThumbCanvas = new BitmapCanvas(Bitmap.createBitmap(mBitmap.getWidth()/35, mBitmap.getHeight()/35, Bitmap.Config.ARGB_8888));

        } else {

            srcThumbCanvas.bitmap.eraseColor(Color.TRANSPARENT);

        }

        float radius = Math.min(width / 2f, height / 2f);



      //关闭双线性过滤

        int flags = mCommonPaint.getFlags();

        mCommonPaint.setFlags(flags &~ Paint.FILTER_BITMAP_FLAG);

        mCommonPaint.setFilterBitmap(false);

        mCommonPaint.setDither(false);





        srcRectF.set(0,0,mBitmap.getWidth(),mBitmap.getHeight());

        dstRectF.set(0,0, srcThumbCanvas.bitmap.getWidth(), srcThumbCanvas.bitmap.getHeight());



        int save = bitmapCanvas.save();

        srcThumbCanvas.drawBitmap(mBitmap, srcRectF, dstRectF, mCommonPaint);



        srcRectF.set(dstRectF);

        dstRectF.set(0,0,bitmapCanvas.bitmap.getWidth(),bitmapCanvas.bitmap.getHeight());

        bitmapCanvas.drawBitmap(srcThumbCanvas.bitmap, srcRectF,dstRectF, mCommonPaint);

        // 这个区域到时候可以自己调制，想让什么部位有马赛克那就会有马赛克

        blockRect.set(bitmapCanvas.bitmap.getWidth() - 560, 10, bitmapCanvas.bitmap.getWidth() - 100, 410);

        bitmapCanvas.restoreToCount(save);

        int saveCount = canvas.save();

        canvas.translate(width / 2f, height / 2f);

        mainRect.set(-radius, -radius, radius, radius);

        canvas.drawBitmap(bitmapCanvas.bitmap, null, mainRect, mCommonPaint);

        canvas.restoreToCount(saveCount);



    }

    static class BitmapCanvas extends Canvas {

        Bitmap bitmap;

        public BitmapCanvas(Bitmap bitmap) {

            super(bitmap);

            //继承在Canvas的绘制是软绘制，因此理论上可以绘制出阴影

            this.bitmap = bitmap;

        }

        public Bitmap getBitmap() {

            return bitmap;

        }

    }

}

总结下本文分享技术特点：

• 网格化
• 采样
• canvas着色，不要去修改像素

一、前言

LED以其卓越的亮度和醒目的文字和图案，已成为车水马龙的城市中充满烟火气息的象征，深层次的是您红灯的闪烁唤醒着人们的娱乐、怀旧、童年的记忆。当然对新时代来说这显然格格不入的，因此这种霓虹灯能存在多久显然还是个问题。

效果预览

二、实现原理

最初的设想是利用BitmapShader  + Shader 实现网格图片，但是最终是失败的，因此绘制出的网格不是纯色。

为什么是需要网格纯色呢 ，主要原因是LED等作为单独的实体，单个LED智能发出一种光，电视也是一样的道理，微小的发光单元不可能同时发出多种光源，这也是LED显示屏的制作原理。至于我们的自定义View，本身是细腻的屏幕上发出的，如果一个LED发出多种光，就会显得很假。但事实上，在绘制View时一个区域可能会出现多种颜色，如何平衡这种颜色也是个问题，优化方式当然是增加采样点；但是采样点多了也会带来新的副作用，一是性能问题，而是过多的全透明和alpha为0的情况，因为这种情况会过度稀释真是的颜色，造成模糊不清的问题，其次和View本身的背景穿透，形成较大范围的噪点，所以绘制过程中一定要控制采样点的数量，其次对alpha为0或者过小的的情况剔除，当然不用担心失真，因为过度的透明人眼会认为是全透明，没有太多意义，我们来做个总结：

• LED 单元智能发出一种光，因此不适合BitampShader做风格渲染


• 颜色逼真程度和采样点有关，采样点越多越逼近真色


• 清晰程度和LED单元大小相关，LED单元越小越清晰


• 剔除alpha通道过小和颜色值为0的采样点颜色 

三、核心逻辑

生成刷子纹理

     if (brushBitmap == null) {

            brushBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

            brushCanvas = new Canvas(brushBitmap);

        }



      for (int i = 0; i < drawers.size(); i++) {

            int saveCount = brushCanvas.save();

            drawers.get(i).draw(brushCanvas, width, height, mCommonPaint);

            brushCanvas.restoreToCount(saveCount);

        }

生成网格数据

        float blockWidth = (squareWidth + padding);

        int w = width;

        int h = height;

        int columNum = (int) Math.ceil(w / blockWidth);

        int rowNum = (int) Math.ceil(h / blockWidth);



        if (gridRects.isEmpty() && squareWidth > 1f) {

            //通过rowNum * columNum方式降低时间复杂度

            for (int i = 0; i < rowNum * columNum; i++) {



                int col = i % columNum;

                int row = (i / columNum);



                Rect rect = new Rect();

                rect.left = (int) (col * blockWidth);

                rect.top = (int) (row * blockWidth);

                rect.right = (int) (col * blockWidth + squareWidth);

                rect.bottom = (int) (row * blockWidth + squareWidth);

                //记录网格点

                gridRects.add(rect);

            }



        }

采样绘制

    //这里是重点 ,LED等可以看作一只灯泡，灯泡区域要么全亮，要么全不亮

        for (int i = 0; i < gridRects.size(); i++) {

            Rect rect = gridRects.get(i);



            if (brushBitmap.getWidth() <= rect.right) {

                continue;

            }

            if (brushBitmap.getHeight() <= rect.bottom) {

                continue;

            }



            if (sampleColors == null) {

                sampleColors = new int[9];

            }



            //取7个点采样，纯粹是为了性能考虑，如果想要更准确的颜色，可以多采样几个点



            sampleColors[0] = brushBitmap.getPixel(rect.left, rect.top);  // left-top

            sampleColors[1] = brushBitmap.getPixel(rect.right, rect.top); // right-top

            sampleColors[2] = brushBitmap.getPixel(rect.right, rect.bottom); // right-bottom

            sampleColors[3] = brushBitmap.getPixel(rect.left, rect.bottom); // left-bottom

            sampleColors[4] = brushBitmap.getPixel(rect.left + rect.width() / 2, rect.top + rect.height() / 2); //center



            sampleColors[5] = brushBitmap.getPixel(rect.left + rect.width() / 2, rect.top + rect.height() / 4);  //top line

            sampleColors[6] = brushBitmap.getPixel(rect.left + rect.width() * 3 / 4, rect.top + rect.height() / 2); //right line

            sampleColors[7] = brushBitmap.getPixel(rect.left + rect.width() / 4, rect.top + rect.height() / 2); // left line

            sampleColors[8] = brushBitmap.getPixel(rect.left + rect.width() / 2, rect.top + rect.height() * 3 / 4);  // bottom line



            int alpha = 0;

            int red = 0;

            int green = 0;

            int blue = 0;

            int num = 0;



            for (int c : sampleColors) {

                if (c == Color.TRANSPARENT) {

                    //剔除全透明的颜色，必须剔除

                    continue;

                }

                int alphaC = Color.alpha(c);

                if (alphaC <= 0) {

                    //剔除alpha为0的颜色，当然可以改大一点，防止降低清晰度

                    continue;                }

                alpha += alphaC;

                red += Color.red(c);

                green += Color.green(c);

                blue += Color.blue(c);

                num++;

            }



            if (num < 1) {

                continue;

            }



            //求出平均值

            int rectColor = Color.argb(alpha / num, red / num, green / num, blue / num);

            if (rectColor != Color.TRANSPARENT) {

                mGridPaint.setColor(rectColor);

                //   canvas.drawRect(rect, mGridPaint);  //绘制矩形

                canvas.drawCircle(rect.centerX(), rect.centerY(), squareWidth / 2, mGridPaint);  //绘制圆

            }

        }

如果不剔除颜色，那么就会有噪点和清晰度问题

全部代码

public class LedDisplayView extends View {

    private final DisplayMetrics mDM;

    private TextPaint mGridPaint;

    private TextPaint mCommonPaint;

    private List<IDrawer> drawers = new ArrayList<>();

    private Bitmap brushBitmap = null;

    private float padding = 2; //分界线大小

    private float squareWidth = 5;  //网格大小

    private List<Rect> gridRects = new ArrayList<>();

    int[] sampleColors = null;

    private Canvas brushCanvas = null;



    public LedDisplayView(Context context) {

        this(context, null);

    }



    public LedDisplayView(Context context, AttributeSet attrs) {

        this(context, attrs, 0);

    }



    public LedDisplayView(Context context, AttributeSet attrs, int defStyleAttr) {

        super(context, attrs, defStyleAttr);

        mDM = getResources().getDisplayMetrics();

        initPaint();



    }





    @Override

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);



        int widthMode = MeasureSpec.getMode(widthMeasureSpec);

        int widthSize = MeasureSpec.getSize(widthMeasureSpec);



        if (widthMode != MeasureSpec.EXACTLY) {

            widthSize = mDM.widthPixels / 2;

        }



        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        int heightSize = MeasureSpec.getSize(heightMeasureSpec);



        if (heightMode != MeasureSpec.EXACTLY) {

            heightSize = widthSize / 2;

        }

        setMeasuredDimension(widthSize, heightSize);

    }





    public float dp2px(float dp) {

        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, mDM);

    }



    public float sp2px(float dp) {

        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, dp, mDM);

    }





    @Override

    protected void onSizeChanged(int w, int h, int oldw, int oldh) {

        super.onSizeChanged(w, h, oldw, oldh);

        if (brushBitmap != null && !brushBitmap.isRecycled()) {

            brushBitmap.recycle();

        }

        brushBitmap = null;

    }





    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);



        int width = getWidth();

        int height = getHeight();

        if (width <= padding || height <= padding) {

            return;

        }



        if (brushBitmap == null) {

            brushBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

            brushCanvas = new Canvas(brushBitmap);

        }



        for (int i = 0; i < drawers.size(); i++) {

            int saveCount = brushCanvas.save();

            drawers.get(i).draw(brushCanvas, width, height, mCommonPaint);

            brushCanvas.restoreToCount(saveCount);

        }





        float blockWidth = (squareWidth + padding);

        int w = width;

        int h = height;

        int columNum = (int) Math.ceil(w / blockWidth);

        int rowNum = (int) Math.ceil(h / blockWidth);



        if (gridRects.isEmpty() && squareWidth > 1f) {

            //通过rowNum * columNum方式降低时间复杂度

            for (int i = 0; i < rowNum * columNum; i++) {



                int col = i % columNum;

                int row = (i / columNum);



                Rect rect = new Rect();

                rect.left = (int) (col * blockWidth);

                rect.top = (int) (row * blockWidth);

                rect.right = (int) (col * blockWidth + squareWidth);

                rect.bottom = (int) (row * blockWidth + squareWidth);

                //记录网格点

                gridRects.add(rect);

            }



        }

        int color = mGridPaint.getColor();



        //这里是重点 ,LED等可以看作一只灯泡，灯泡区域要么全亮，要们全不亮

        for (int i = 0; i < gridRects.size(); i++) {

            Rect rect = gridRects.get(i);



            if (brushBitmap.getWidth() <= rect.right) {

                continue;

            }

            if (brushBitmap.getHeight() <= rect.bottom) {

                continue;

            }



            if (sampleColors == null) {

                sampleColors = new int[9];

            }



            //取7个点采样，纯粹是为了性能考虑，如果想要更准确的颜色，可以多采样几个点



            sampleColors[0] = brushBitmap.getPixel(rect.left, rect.top);  // left-top

            sampleColors[1] = brushBitmap.getPixel(rect.right, rect.top); // right-top

            sampleColors[2] = brushBitmap.getPixel(rect.right, rect.bottom); // right-bottom

            sampleColors[3] = brushBitmap.getPixel(rect.left, rect.bottom); // left-bottom

            sampleColors[4] = brushBitmap.getPixel(rect.left + rect.width() / 2, rect.top + rect.height() / 2); //center



            sampleColors[5] = brushBitmap.getPixel(rect.left + rect.width() / 2, rect.top + rect.height() / 4);  //top line

            sampleColors[6] = brushBitmap.getPixel(rect.left + rect.width() * 3 / 4, rect.top + rect.height() / 2); //right line

            sampleColors[7] = brushBitmap.getPixel(rect.left + rect.width() / 4, rect.top + rect.height() / 2); // left line

            sampleColors[8] = brushBitmap.getPixel(rect.left + rect.width() / 2, rect.top + rect.height() * 3 / 4);  // bottom line



            int alpha = 0;

            int red = 0;

            int green = 0;

            int blue = 0;

            int num = 0;



            for (int c : sampleColors) {

                if (c == Color.TRANSPARENT) {

                    //剔除全透明的颜色，必须剔除

                    continue;

                }

                int alphaC = Color.alpha(c);

                if (alphaC <= 0) {

                    //剔除alpha为0的颜色，当然可以改大一点，防止降低清晰度

                    continue;

                }

                alpha += alphaC;

                red += Color.red(c);

                green += Color.green(c);

                blue += Color.blue(c);

                num++;

            }



            if (num < 1) {

                continue;

            }



            //求出平均值

            int rectColor = Color.argb(alpha / num, red / num, green / num, blue / num);

            if (rectColor != Color.TRANSPARENT) {

                mGridPaint.setColor(rectColor);

                //   canvas.drawRect(rect, mGridPaint);  //绘制矩形

                canvas.drawCircle(rect.centerX(), rect.centerY(), squareWidth / 2, mGridPaint);  //绘制圆

            }

        }

        mGridPaint.setColor(color);



    }





    private void initPaint() {

        // 实例化画笔并打开抗锯齿

        mGridPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);

        mGridPaint.setAntiAlias(true);

        mGridPaint.setColor(Color.LTGRAY);

        mGridPaint.setStyle(Paint.Style.FILL);

        mGridPaint.setStrokeCap(Paint.Cap.ROUND);  //否则网格绘制



        //否则提供给外部纹理绘制

        mCommonPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);

        mCommonPaint.setAntiAlias(true);

        mCommonPaint.setStyle(Paint.Style.FILL_AND_STROKE);

        mCommonPaint.setStrokeCap(Paint.Cap.ROUND);



    }



    public void addDrawer(IDrawer drawer) {

        if (drawer == null) return;

        this.drawers.add(drawer);

        gridRects.clear();

        postInvalidate();

    }



    public void removeDrawer(IDrawer drawer) {

        if (drawer == null) return;

        this.drawers.remove(drawer);

        gridRects.clear();

        postInvalidate();

    }



    public void clearDrawer() {

        this.drawers.clear();

        gridRects.clear();

        postInvalidate();

    }



    public List<IDrawer> getDrawers() {

        return new ArrayList<>(drawers);

    }



    public interface IDrawer {

        void draw(Canvas canvas, int width, int height, Paint paint);

    }



}

使用方式

       LedDisplayView displayView = findViewById(R.id.ledview);

        final BitmapDrawable bitmapDrawable1 = (BitmapDrawable)getResources().getDrawable(R.mipmap.mm_07);

        final BitmapDrawable bitmapDrawable2 = (BitmapDrawable)getResources().getDrawable(R.mipmap.mm_08);

        ledDisplayView.addDrawer(new LedDisplayView.IDrawer() {



            Matrix matrix =  new Matrix();

            @Override

            public void draw(Canvas canvas, int width, int height, Paint paint) {

                canvas.translate(width/2,height/2);

                matrix.preTranslate(-width/2,-height/4);

                Bitmap bitmap1 = bitmapDrawable1.getBitmap();

                canvas.drawBitmap(bitmap1,matrix,paint);



                matrix.postTranslate(width/2,height/4);

                Bitmap bitmap2 = bitmapDrawable2.getBitmap();

                canvas.drawBitmap(bitmap2,matrix,paint);

            }

        });

        ledDisplayView.addDrawer(new LedDisplayView.IDrawer() {

            @Override

            public void draw(Canvas canvas, int width, int height, Paint paint) {

                paint.setColor(Color.CYAN);

                float textSize = paint.getTextSize();

                paint.setTextSize(sp2px(50));

                canvas.drawText("你好，L E D", 100, 200, paint);

                canvas.drawText("85%", 100, 350, paint);



                paint.setColor(Color.YELLOW);

                canvas.drawCircle(width*3 / 4, height / 4, 100, paint);



                paint.setTextSize(textSize);

            }

        });

四、总结

这个本质上的核心就是采样，通过采样我们最终实现了纹理贴图，这点类似open gl中的光栅化，将图形分割成小三角形一样，最后着色，理解本篇也能帮助大家理解open gl和led显示原理。

前言

在之前的文章中，通过LED效果、马赛克效果两篇文章，介绍了分片绘制的效果的方法和原理，通过这两篇文章，相信大家都已经熟悉了分片绘制的思路。其实分片绘制不仅仅能实现LED、马赛克等特殊效果，实际上类似百叶窗、图片对角线锯齿过渡等，很多PPT中存在的特效，基本上也是按照这种原理来实现的。

分片可以有很多种意想不到的效，我们再来说一下分片特点：

• [1] 按一定的距离、大小、角度对区域进行对一张图片或者区域裁剪或者提取区域图像


• [2] 对提取出来的区域进行一系列变换，如百叶窗、微信摇一摇等


• [3] 被裁剪的区域可以还原回去

技术前景

其实单纯的分片可以做一些瓦片效果，当然还可以做一些组合效果，下面是一个github开源项目(Camera2DApplication)利用Camera和图片分片实现的效果，这个过程中对一张图片进行分片绘制。

代码中的逻辑不是很复杂，本质上就是利用2张图片实现的，我们先来看下代码实现，作者的代码很认真，注释都写了，涉及postTranslate比较难懂的操作我也进行了微调。

/**

 * 3d旋转效果

 *

 * @param canvas

 */

private void drawModeNormal(Canvas canvas) {

    //VERTICAL时使用rotateY，HORIZONTAL时使用rotateX

    if (orientation == VERTICAL) {

        //如果是前进，则画当前图，后退则画上一张图,注释用的是前进情况

        matrix.reset();

        camera.save();

        //旋转角度 0 - -maxDegress 

        camera.rotateX(-degress);

        camera.getMatrix(matrix);

        camera.restore();



        //绕着图片top旋转

        matrix.preTranslate(-viewWidth / 2f, 0);

        //旋转轴向下平移，则图片也向下平移

        matrix.postTranslate(viewWidth / 2f, rotatePivotY);

        //如果是前进，则画当前图，后退则画上一张图，因为后退时，这里画的是动画下方出来的图片，而下方的图片是前一张图

        canvas.drawBitmap(getBitmapScale(bitmapResourceIds.get(isForward ? currentIndex : preIndex), viewWidth, viewHeight),

                matrix, mPaint);



        //在处理下一张图片

        matrix.reset();

        camera.save();

        //旋转角度 maxDegress - 0

        camera.rotateX(maxDegress - degress);

        camera.getMatrix(matrix);

        camera.restore();



        //绕着图片bottom旋转

        matrix.preTranslate(-viewWidth / 2f, -viewHeight);

        //旋转轴向下平移，则图片也向下平移

        matrix.postTranslate(viewWidth / 2f, rotatePivotY);

        //如果是前进，则画下一张图，后退则画当前图，后退时，这边代码画的是动画上方的图片，上方的图片是当前图片

        canvas.drawBitmap(getBitmapScale(bitmapResourceIds.get(isForward ? nextIndex : currentIndex), viewWidth, viewHeight),

                matrix, mPaint);

    } else {

        //如果是前进，则画当前图，后退则画上一张图,注释用的是前进情况

        matrix.reset();

        camera.save();

        //旋转角度 0 - maxDegress 

        camera.rotateY(degress);

        camera.getMatrix(matrix);

        camera.restore();



        //绕着图片left旋转

        matrix.preTranslate(0, -viewHeight / 2);

        //旋转轴向右平移，则图片也向右平移

        matrix.postTranslate(rotatePivotX, viewHeight / 2);

        //如果是前进，则画当前图，后退则画上一张图，因为后退时，这里画的是动画右方出来的图片，而右方的图片是前一张图

        canvas.drawBitmap(getBitmapScale(bitmapResourceIds.get(isForward ? currentIndex : preIndex), viewWidth, viewHeight),

                matrix, mPaint);



        //在处理下一张图片

        matrix.reset();

        camera.save();

        //旋转角度 -maxDegress - 0

        camera.rotateY(-maxDegress + degress);

        camera.getMatrix(matrix);

        camera.restore();



        //绕着图片right旋转

        matrix.preTranslate(-viewWidth, -viewHeight / 2f);

        //旋转轴向右平移，则图片也向右平移

        matrix.postTranslate(rotatePivotX, viewHeight / 2f);

        //如果是前进，则画下一张图，后退则画当前图，后退时，这边代码画的是动画左方的图片，左方的图片是当前图片

        canvas.drawBitmap(getBitmapScale(bitmapResourceIds.get(isForward ? nextIndex : currentIndex), viewWidth, viewHeight),

                matrix, mPaint);

    }

}

分片操作

下面是分片操作，这个地方其实可以不用创建Bitmap缓存，创建Path就行，绘制时对Path区域利用Shader贴图即可。

private Bitmap getBitmapScale(int resId, float width, float height) {

    if (ImageCache.getInstance().getBitmapFromMemCache(String.valueOf(resId)) != null) {

        return ImageCache.getInstance().getBitmapFromMemCache(String.valueOf(resId));

    }

    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), resId);

    //创建分片

    Bitmap bitmapDst = Bitmap.createScaledBitmap(bitmap, (int) width, (int) height, false);

    bitmap.recycle();



    ImageCache.getInstance().addBitmapToMemoryCache(String.valueOf(resId)

            , bitmapDst);

    return bitmapDst;

}

小试一下

我们这里通过一个简单的Demo，实现一种特效，这次我们利用网格矩阵分片。说到矩阵，很多人面试的时候都会遇到一些算法题，比较幸运的人遇到的是矩阵旋转90度、逆时针打印矩阵、矩阵孤岛问题、从左上角开始进行矩阵元素搜索，运气稍差的会遇到由外到里顺时针打印矩阵和斜对角打印矩阵，后面两种看似简单的问题实际上做起来并不顺手，有点扯远了，我们来看看效果。

你没看错，这次遇到了算法问题，我这边用的空间换取时间的方法。

图像分片

将图片分片，计算出网格的列和行

int col = (int) Math.ceil(mBitmaps[index].getWidth() / blockWidth);

int row = (int) Math.ceil(mBitmaps[index].getHeight() / blockWidth);

分片算法

这个算法实际上是每次将列数 +1，然后按对角分割，把符合的区域添加到path中

int x = xPosition;

int y = 0;

while (x >= 0 && y <= row) {

    if (x < col && y < row) {

        dstRect.set((int) (x * blockWidth), (int) (y * blockWidth), (int) (x * blockWidth + blockWidth), (int) (y * blockWidth + blockWidth));

      //  bitmapCanvas.drawBitmap(mBitmaps[index], dstRect, dstRect, mCommonPaint);

        path.addRect(dstRect, Path.Direction.CCW);  //加入网格分片

    }

    x--;

    y++;

}

Path 路径贴图

• Path过程中我们添加的rect是闭合区域，是可以贴图的，当然，一般有三种方法：


• Path的贴图一般使用 clipPath对图片裁剪然后贴图，当然还有将对应的图片区域绘制到View上


• Path 是Rect，按照Rect将图片区域绘制到Rect区域


• 使用BitmapShader一次性绘制

实际上我们应该尽可能使用Bitmap，因为BitmapShader唯一是不存在锯齿性能比较好的绘制方法。

int save = bitmapCanvas.save();

mCommonPaint.setShader(new BitmapShader(mBitmaps[index], Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));

bitmapCanvas.drawPath(path,mCommonPaint);

bitmapCanvas.restoreToCount(save);

其实我们的核心代码到这里就结束了，我们可以看到，分片可以的意义很重要的，当然，借助其他工具也可以实现，不过代码实现的好处是可以编辑和交互，不是所有的动画都可以产生交互。

到此，我们还可以对今天的demo添加一些想象

• 从中间外扩效果


• 奇偶行切换效果


• 国际象棋黑白格子变换效果


• ......

总结

这是我们的第三篇关于图片分片特效的博客，希望通过一些了的文章，熟悉一些技术，往往看似高大上的效果，其实就是通过普普通通的方法叠加在一起的，当然，让你的技术承载你的想象，才是最重要的。

本篇demo全部代码

实际上代码贴太多很可能没人看，但是依照惯例，我们给出完整代码。

public class TilesView extends View {

    private final DisplayMetrics mDM;

    private TextPaint mCommonPaint;

    private RectF mainRect = new RectF();

    private BitmapCanvas bitmapCanvas; //Canvas 封装的

    private Bitmap[] mBitmaps;

    private RectF dstRect = new RectF();

    Path path = new Path();

    private float blockWidth = 50f;

    private int xPosition = -2;

    private int index = 0;

    private boolean isTicking = false;

    public TilesView(Context context) {

        this(context, null);

    }

    public TilesView(Context context, AttributeSet attrs) {

        this(context, attrs, 0);

    }



    public TilesView(Context context, AttributeSet attrs, int defStyleAttr) {

        super(context, attrs, defStyleAttr);

        mDM = getResources().getDisplayMetrics();

        initPaint();

    }



    private void initPaint() {

        //否则提供给外部纹理绘制

        mCommonPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);

        mCommonPaint.setAntiAlias(true);

        mCommonPaint.setStyle(Paint.Style.FILL_AND_STROKE);

        mCommonPaint.setStrokeCap(Paint.Cap.ROUND);

        mCommonPaint.setFilterBitmap(true);

        mCommonPaint.setDither(true);

        mBitmaps = new Bitmap[3];

        mBitmaps[0] = decodeBitmap(R.mipmap.mm_013);

        mBitmaps[1] = decodeBitmap(R.mipmap.mm_014);

        mBitmaps[2] = decodeBitmap(R.mipmap.mm_015);

    }



    private Bitmap decodeBitmap(int resId) {

        BitmapFactory.Options options = new BitmapFactory.Options();

        options.inMutable = true;

        return BitmapFactory.decodeResource(getResources(), resId, options);

    }



    @Override

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {



        int widthMode = MeasureSpec.getMode(widthMeasureSpec);

        int widthSize = MeasureSpec.getSize(widthMeasureSpec);



        if (widthMode != MeasureSpec.EXACTLY) {

            widthSize = mDM.widthPixels / 2;

        }

        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        int heightSize = MeasureSpec.getSize(heightMeasureSpec);



        if (heightMode != MeasureSpec.EXACTLY) {

            heightSize = widthSize / 2;

        }

        setMeasuredDimension(widthSize, heightSize);



    }



    @Override

    protected void onSizeChanged(int w, int h, int oldw, int oldh) {

        super.onSizeChanged(w, h, oldw, oldh);

        if (bitmapCanvas != null && bitmapCanvas.bitmap != null && !bitmapCanvas.bitmap.isRecycled()) {

            bitmapCanvas.bitmap.recycle();

        }

        bitmapCanvas = null;



    }





    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        int width = getWidth();

        int height = getHeight();

        if (width < 1 || height < 1) {

            return;

        }

        if (bitmapCanvas == null || bitmapCanvas.bitmap == null || bitmapCanvas.bitmap.isRecycled()) {

            bitmapCanvas = new BitmapCanvas(Bitmap.createBitmap(mBitmaps[index].getWidth(), mBitmaps[index].getHeight(), Bitmap.Config.ARGB_8888));

        }

        int nextIndex = (index + 1) % mBitmaps.length;

        canvas.drawBitmap(mBitmaps[nextIndex],0,0,mCommonPaint);



        int col = (int) Math.ceil(mBitmaps[index].getWidth() / blockWidth);

        int row = (int) Math.ceil(mBitmaps[index].getHeight() / blockWidth);

        mCommonPaint.setStyle(Paint.Style.FILL);



     //   path.reset();

//        for (int x = 0; x < row; x++) {

//            for (int y = 0; y < col; y++) {

//                gridRectF.set(x * blockWidth, y * blockWidth, x * blockWidth + blockWidth, y * blockWidth + blockWidth);

//                canvas.drawRect(gridRectF, mCommonPaint);

//                path.addRect(gridRectF, Path.Direction.CCW);

//            }

//        }



        diagonalEffect(col,row,xPosition,path);

        canvas.drawBitmap(bitmapCanvas.bitmap, 0, 0, mCommonPaint);



        if (isTicking && xPosition >= 0 && xPosition < col * 2) {

            clockTick();

        } else if(isTicking){

            xPosition = -1;

            index = nextIndex;

            isTicking = false;

        }

    }



    private void diagonalEffect(int col, int row, int xPosition,Path path) {

        int x = xPosition;

        int y = 0;

        while (x >= 0 && y <= row) {

            if (x < col && y < row) {

                dstRect.set((int) (x * blockWidth), (int) (y * blockWidth), (int) (x * blockWidth + blockWidth), (int) (y * blockWidth + blockWidth));

              //  bitmapCanvas.drawBitmap(mBitmaps[index], dstRect, dstRect, mCommonPaint);

                path.addRect(dstRect, Path.Direction.CCW);  //加入网格分片

            }

            x--;

            y++;

        }

        int save = bitmapCanvas.save();

        mCommonPaint.setShader(new BitmapShader(mBitmaps[index], Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));

        bitmapCanvas.drawPath(path,mCommonPaint);

        bitmapCanvas.restoreToCount(save);



    }



    public void tick() {

        isTicking = true;

        xPosition = -1;

        path.reset();

        clockTick();

    }



    private void clockTick() {

        xPosition += 1;

        postInvalidateDelayed(16);

    }





    public float dp2px(float dp) {

        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, mDM);

    }



    public float sp2px(float dp) {

        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, dp, mDM);

    }



    static class BitmapCanvas extends Canvas {

        Bitmap bitmap;

        public BitmapCanvas(Bitmap bitmap) {

            super(bitmap);

            //继承在Canvas的绘制是软绘制，因此理论上可以绘制出阴影

            this.bitmap = bitmap;

        }



        public Bitmap getBitmap() {

            return bitmap;

        }

    }

}

响应式编程是一种以对数据随时间变化做出反应为中心的范式。它有助于自动传播更新，从而可确保 UI 和数据保持同步。用 Flutter 术语来说，这意味着只要状态发生变化就会自动触发重建。

Observables

Observables是响应式编程的核心。这些数据源会在数据发生变化时向订阅者发出更新。Dart 的核心可观察类型是 Stream。

当状态发生变化时，可观察对象会通知侦听器。从用户交互到数据获取操作的任何事情都可以触发此操作。这有助于 Flutter 应用程序实时响应用户输入和其他更改。

Flutter 有两种类型：ValueNotifier和ChangeNotifier，它们是类似 observable 的类型，但不提供任何真正的可组合性计算。

ValueNotifier

Flutter 中的类ValueNotifier在某种意义上是响应式的，因为当值发生变化时它会通知观察者，但您需要手动监听所有值的变化来计算完整的值。

1、监听

  // 初始化

 final ValueNotifier<String> fristName = ValueNotifier('Tom');

 final ValueNotifier<String> secondName = ValueNotifier('Joy');

 late final ValueNotifier<String> fullName;



  @override

  void initState() {

    super.initState();

    fullName = ValueNotifier('${fristName.value} ${secondName.value}');



    fristName.addListener(_updateFullName);

    secondName.addListener(_updateFullName);

  }

  

  void _updateFullName() {

    fullName.value = '${fristName.value} ${secondName.value}';

  }





  //更改值得时候

  firstName.value = 'Jane'

  secondName.value = 'Jane'

2、使用ValueListenableBuilder更新UI

 //通知观察者

 ValueListenableBuilder<String>(

   valueListenable: fullName,

   builder: (context, value, child) => Text(

      '${fristName.value} ${secondName.value}',

       style: Theme.of(context).textTheme.headlineMedium,

   ),

),

ChangeNotifier

1、监听

  String _firstName = 'Jane';

  String _secondName = 'Doe';



  String get firstName => _firstName;

  String get secondName => _secondName;

  String get fullName => '$_firstName $_secondName';



  set firstName(String newName) {

    if (newName != _firstName) {

      _firstName = newName;

      // Triggers rebuild

      notifyListeners();

    }

  }



  set secondName(String newSecondName) {

    if (newSecondName != _secondName) {

      _secondName = newSecondName;

      // Triggers rebuild

      notifyListeners();

    }

  }

  

  //更改值得时候

  firstName.value = 'Jane'

  secondName.value = 'Jane'

2、使用AnimatedBuilder更新UI

//通知观察者

AnimatedBuilder(

     animation: fullName,

     builder: (context, child) => Text(

     fullName,

     style: Theme.of(context).textTheme.headlineMedium,

    ),

 ),

get

GetX将响应式编程变得非常简单。

• 您不需要创建 StreamController。


• 您不需要为每个变量创建一个 StreamBuilder。


• 你不需要为每个状态创建一个类。


• 你不需要创造一个终极价值。

使用 Get 的响应式编程就像使用 setState 一样简单。
让我们想象一下，您有一个名称变量，并且希望每次更改它时，所有使用它的小组件都会自动刷新。

1、监听以及更新UI

//这是一个普通的字符串

var name = 'Jonatas Borges';

为了使观察变得更加可观察，你只需要在它的附加上添加“.obs”。

var name = 'Jonatas Borges'.obs;

而在UI中，当你想显示该值并在值变化时更新页面时，只需这样做。

Obx(() => Text("${controller.name}"));

Riverpod

final fristNameProvider = StateProvider<String>((ref) => 'Tom');

final secondNameProvider = StateProvider<String>((ref) => 'Joy');

final fullNameProvider = StateProvider<String>((ref) {

  final fristName = ref.watch(fristNameProvider);

  final secondName = ref.watch(secondNameProvider);

  return '$fristName  $secondName';

});



//更改值得时候

 ref.read(fristNameProvider.notifier).state =

                     'Jane'

 ref.read(secondName.notifier).state =

                     'BB'

2、使用ConsumerWidget更新UI

ref.read(surnameProvider) 读取某个值

ref.read(nameProvider.notifier).state 更新某个值的状态

class MyHomePage extends ConsumerWidget {

  const MyHomePage({super.key});



  @override

  Widget build(BuildContext context, WidgetRef ref) => 

     Scaffold(

        appBar: AppBar(

          title: const Text('Riverpod Example'),

        ),

        body: Text(

               ref.watch(fullNameProvider),

               style: Theme.of(context).textTheme.headlineMedium,

            ),

      )；

}

这里Consumer组件是与状态交互所必需的，Consumer有一个非标准build方法，这意味着如果您需要更改状态管理解决方案，您还必须更改组件而不仅仅是状态。

RxDart

RxDart将ReactiveX的强大功能引入Flutter，需要明确的逻辑来组合不同的数据流并对其做出反应。

存储计算值：它不会以有状态的方式直接存储计算值，但它确实提供了有用的运算符（例如distinctUnique）来帮助您最大限度地减少重新计算。

RxDart 库还有一个流行的类型被称为BehaviorSubject。响应式编程试图解决的核心问题是当依赖图中的任何值（依赖项）发生变化时自动触发计算。如果有多个可观察值，并且您需要将它们合并到计算中，Rx 库自动为我们执行此操作并且自动最小化重新计算以提高性能。

该库向 Dart 的现有流添加了功能。它不会重新发明轮子，并使用其他平台上的开发人员熟悉的模式。

1、监听

 final fristName = BehaviorSubject.seeded('Tom');

 final secondName = BehaviorSubject.seeded('Joy');

 

 /// 更新值

  fristName.add('Jane'),

  secondName.add('Jane'),

2、使用StreamBuilder更新UI

 StreamBuilder<String>(

        stream: Rx.combineLatest2(

            fristName,

            secondName,

            (fristName, secondName) => '$fristName $secondName',

             ),

             builder: (context, snapshot) => Text(

               snapshot.data ?? '',

               style: Theme.of(context).textTheme.headlineMedium,

              ),

    ),

Signals

Signals以其computed功能介绍了一种创新、优雅的解决方案。它会自动创建反应式计算，当任何依赖值发生变化时，反应式计算就会更新。

1、监听

  final name = signal('Jane');

  final surname = signal('Doe');

  late final ReadonlySignal<String> fullName =

      computed(() => '${name.value} ${surname.value}');

  late final void Function() _dispose;



 @override

  void initState() {

    super.initState();

    _dispose = effect(() => fullName.value);

  }

2、使用watch更新UI

Text(

    fullName.watch(context),

    style: Theme.of(context).textTheme.headlineMedium,

 ),

今天第一天正式开始学习鸿蒙应用开发。

本来想着，作为一个拥有 10 来年工作经验的资深开发，对 React/Vue，React Native，Android 开发都有丰富的实践经验，对 Swift UI 也有所涉猎，在大前端这一块可以说是信心满满，学习 ArkUI 应该信手拈来才对，谁知道学习的第一天，我就发现我太天真了。

HarmonyOS 与 ArkUI 给我了沉痛一击

学习第一天一点都不顺利，上午还算有所收获，下午直接毫无建树，踩在一个坑里出不来，人直接裂开，差点以为自己要创业未半而中道崩殂了。不过好在晚饭后，侥幸解决了下午遇到的坑

最终今天学习的成果如下

导航栏的4个图标都是用了 lottie 的动画，因为使用了 gif 录制，可能有点感觉不太明显，真机上的感受非常舒适，用户体验极佳

今天已经学习过的内容包括

• 基础项目结构


• 基础布局组件


• 容器布局组件


• 滚动组件


• 导航组件


• ohpm 安装


• 引入 lottie 动画


• 属性动画


• 配置 hot reload


• 组件状态管理 @state @props @link


• 组件逻辑表达式


• 沉浸式状态栏


• 真机调试

我的开发设备具体情况如下

MacOS M1

HarmonyOS API 9

华为 P40 pro+，已安装 HarmonyOS 4

作为一个把主要精力放在前端的开发者，做个记录分享一下学习体会

01

组件概念

在前端开发中，不管你是用 React 还是使用 Vue，我们只需要掌握一个概念：组件。复杂的组件是由小的组件组成，页面是由组件组成，项目是由组件组成，超大项目也是由组件组成。组件可以组成一切。因此 React/Vue 的学习会相对更简单一些

和 Android 一样，由于 HarmonyOS 有更复杂的应用场景、多端、分屏等，因此在这一块的概念也更多一些，目前我接触到的几个概念包括

Window 一个项目好像可以有多个窗口，由于接触的时间太短了暂时不是很确定，可以创建子窗口，可以管理窗口的相关属性，创建，销毁等

Ability 用户与应用交互的入口点，一个 app 可以有一个或者对个 Ability

page 页面，一个应用可以由多个 page 组成

Component 组件，可以组合成页面

由于目前接触的内容不够全面，因此对这几个概念的理解还不够笃定，只是根据自己以往的开发经验推测大概可能是什么情况，因此介绍得比较简单，但是可以肯定的是理解这些概念是必备的

02

基础布局

虽然 HarmonyOS 目前也支持 web 那一套逻辑开发，不过官方文档已经明确表示未来将会主推 arkUI，因此我个人觉得还是应该把主要学习重心放在 arkUI 上来

arkUI 的布局思路跟 html + css 有很大不同。

html + css 采用的是结构样式分离的方式，再通过 class/id 关联起来。因此，html + css 的布局写起来会简单很多，我们只需要先写结构，然后慢慢补充样式即可

arkUI 并未采用分离思路，而是把样式和结构紧密结合在一起，这样做的好处就是性能更强了，因为底层渲染引擎不用专门写一套逻辑去匹配结构和样式然后重新计算 render-tree，坏处就是...

代码看着有点糟心

比如下面这行代码，表示两段文字

Column() {

  Text('一行文字')

    .textAlign(TextAlign.Center)

    .fontSize(30)

    .width('100%')

    .backgroundColor('#aabbcc')

  Text('二行文字')

    .textAlign(TextAlign.Center)

    .fontSize(30)

    .width('100%')

    .backgroundColor('#aabbcc')

}.width('100%')

 .height('100%')

 .backgroundColor('red')

如果用 html 来表示的话....

<div>

  <p>一行文字p>

  <p>一行文字p>

div>

当然我期望能找到一种方式去支持属性的继承和复用。目前简单找了一下没找到，希望有吧 ~

由于 html 中 div 足以应付一切，因此许多前端开发者会在思考过程中忽视或者弱化容器组件的存在，反而 arkUI 的学习偏偏要从容器组件开始理解

我觉得这种思路会对解耦思路有更明确的训练。许多前端开发在布局时不去思考解耦问题，我认为这是一个坏处。

arkUI 的布局思路是：先考虑容器，再考虑子元素，并且要把样式特性结合起来一起思考。而不是只先思考结构，再考虑样式应该怎么写。

例如，上面的 GIF 图中， nav 导航区域是由 4 按钮组成。先考虑容器得是一个横向的布局

然后每一个按钮，包括一个图标和一个文字，他们是纵向的布局，于是结构就应该这样写

Row: 横向布局

Column: 竖向布局

Row() {

  Column() { Lottie() Text() }

  Column() { Lottie() Text() }

  Column() { Lottie() Text() }

  Column() { Lottie() Text() }

}