我本来还以为需要自己去训练语音AI模型，后来发现有现成的语音识别模块，后来想了想，我直接接入智能音箱不就好了。

我通过米家官网发现需要通过公司资质才能接入，所以我从搜索引擎随便搜了搜，发现有一些IoT平台可以直接接入智能音箱。比如点灯，巴法云。

我一开始用了巴法云，发现我的设备没有办法在他的后台上线，所以我就转用了点灯。

点灯是可以接入小爱、天猫进来、小度的。

下载下来，在 Arduino IDE 里面导入库

这样我们就可以在文件>示例里面找到一个使用手机点亮LED灯的实例。

得到如下代码

#define BLINKER_WIFI

#include <Blinker.h>

char auth[] = "Your Device Secret Key";
char ssid[] = "Your WiFi network SSID or name";
char pswd[] = "Your WiFi network WPA password or WEP key";

// 新建组件对象
BlinkerButton Button1("btn-abc");
BlinkerNumber Number1("num-abc");

int counter = 0;

// 按下按键即会执行该函数
void button1_callback(const String & state)
{
    BLINKER_LOG("get button state: ", state);
    digitalWrite(LED_BUILTIN, !digitalRead(LED_BUILTIN));
}

// 如果未绑定的组件被触发，则会执行其中内容
void dataRead(const String & data)
{
    BLINKER_LOG("Blinker readString: ", data);
    counter++;
    Number1.print(counter);
}

void setup()
{
    // 初始化串口
    Serial.begin(115200);
    BLINKER_DEBUG.stream(Serial);
    BLINKER_DEBUG.debugAll();

    // 初始化有LED的IO
    pinMode(LED_BUILTIN, OUTPUT);
    digitalWrite(LED_BUILTIN, HIGH);
    // 初始化blinker
    Blinker.begin(auth, ssid, pswd);
    Blinker.attachData(dataRead);

    Button1.attach(button1_callback);
}

void loop() {
    Blinker.run();
}

我们打开手机上的点灯-blinker的App（注册点灯需要先下载App），在App里面点添加设备>点灯>独立设备。

然后他会给我们一个 Secret Key，把Key复制到代码里面，替换代码里的 Your Device Secret Key。

然后在代码里输入我们的wifi的账号密码。

然后把代码烧录到硬件里。

回到手机APP里面，点击新添加的设备，选择载入示例。

可以看到一个可以控制器，这个控制器我们是可以点击右上角进行编辑的。

可以看到里面的按钮和信息会对应到我们代码的内容。

比如，Button1对应的就是UI界面里面的点我开灯，可以看到左上角的btn-abc对应的就是代码里面的Button1('btn-abc') 下面这句话代表按钮点击后触发的回调函数

Button1.attach(button1_callback);

目前为止我们的效果是这样的：

我们只需要把button1_callback函数替换成打开垃圾桶的方法就可以了。

虽然看起来可以用手机控制，但是距离我们使用语音控制还有一段距离。

我在官网找到了一个接入小爱同学的例子。

代码编译烧录以后，发现我手头没有小爱同学，小爱同学被我放到新家了。

所以这也是这篇文章为什么不叫使用小爱同学控制开发板的原因，手动狗头

等我搬到新家，就试一试。

最近裸辞离职在老家，正在收拾老家的房子准备住进去，但迫于经济压力，只能先装非常有必要的东西,例如床、马桶、浴室柜等。

但是垃圾桶是生活必备品，我发现大家现在都在用智能垃圾桶，那种可以感应开盖的，还有那种自动封袋的。我极其的羡慕。但是迫于经济压力，我没有足够的资金购买智能垃圾桶！

作为一个学美术的程序员，我在想我要不要去少儿美术培训教小孩，或者去街头卖艺，甚至去给人画遗照赚点钱呢？我想了想算了，给别人留点活路吧，我这么专业的美术人才去了，那些老师、街头艺人、画师不得喝西北风去。我想了想，我除了是学美术的，我还是个程序员啊！

虽然我没有学过嵌入式、硬件、IOT等等技术，但是入门应该不太困难吧！已经好多年没有从0开始学习一门技术了，非常怀念当时学习Web技术的那种感觉，可以没日没夜的去探索新知识，学习东西。之前上班的时候根本没有精力去学习或者搞一些有趣的东西，下班只想躺着看动漫，听爽文。既然现在赋闲在家，那就搞一搞吧！

项目启动

俗话说得好，找到一个好师傅就是成功的一半！在这方面我有着得天独厚的优势，我的前公司，北京犬安科技就是一个做车联网安全的公司，这家公司的Slogan是：从硅到云，守护网联汽车安全。可以看出，犬安的硬件软件安全能力都非常的强。像我，天天和测试组的同事去山西面馆吃鱼香肉丝盖饭，喝青岛雪花，他们组里面都是硬件大佬，甚至有人造过火箭。此时不向他们学习，更待何时？

他们告诉我，我需要一个开发板、一个超声波传感器、一个舵机。

我还在研究什么是stm32/esp32的时候，他们告诉我用Arduino，特别简单。我就去研究Arduino，在B站上搜了 Arduino，有一个播放量比较高的系列教程看了一下。我顿时就悟了！

我本来以为我需要买烙铁，焊电路板的，后来我发现，只需要买以上提到的三个东西，外加一个面包版，一些杜邦线就可以，甚至可以不需要面包版。

当然为了学习，我在淘宝上买了一些乱七八糟的东西，比如按钮、各种电阻、各种颜色led灯、面包版。买各种颜色的LED灯的时候，购买欲泛滥了，就想每个颜色都买一些，什么白发红，白发黄，白发翠绿，后来我买回来发现，不亮的情况下都是白色的，我根本分不清颜色。原来那个白发黄的意思就是不亮的时候是白色，亮了以后发黄色的光～我还买了接受RGB三色的LED灯，不知道为啥不是RGBA，难道不能让灯透明吗？

我还发现不同欧姆的电阻他上面的“杠杠”是不一样的。

主要是这玩意太便宜了，两块钱就买好多，但是作为新手玩家来说，根本用不了。我只买了公对公的杜邦线，然后我又单独下单了其他杜邦线，果然两块多就能包邮。

我在不同的店铺里面选了很多配件，包括我使用的主要配件：Arduino uno 开发板、SG90舵机、HC-SR04 超声波传感器。

开搞

设备买回来以后，废了9牛2虎之力才成功的能把我写的程序上传到开发板里。

一开始一直报下面这个错误，网上众说纷纭，始终没有找到解决方案。

avrdude: stk500_getsync() attempt 1 of 10: not in sync: resp=0x30

后来我去淘宝详情页仔细研究了一番才搞明白，我本以为我买的是Arduino的开发板，其实是esp8266，只是兼容Arduino。我从淘宝详情页找到了正确姿势，成功的刷入了程序。

看了 Arduino 的视频，我主要悟出来了什么？

开发板、舵机、传感器上有很多小尖尖或者小洞洞，他叫引脚，我们需要把舵机、传感器的引脚，通过一种名为杜邦线的线（通常有公对公/母对母/公对母，代表线两头是小尖尖还是小洞洞），连接到开发板的引脚上。然后使用程序控制某个引脚的电平向舵机发送信号，或者接受传感器的信号。

第一个项目

我举一个最简单的LED灯闪烁的例子： 线是这么接的：

面包版上面，竖着的五个小洞洞里面其实是连在一起的。我的电路是从一个引脚出来，到了一个电阻上，然后连接一个LED灯，然后接地。 接地的概念应该和负极的概念很像，但是不是，不过我暂且不关心它。 为什么不直接从引脚出来接LED，再接地呢，因为视频上说，LED几乎是没有电阻的，如果直接从串口出来接到LED，直接接地的话，开发板就废了，所以加了个电阻。

接下来我让ChatGPT帮我写一个小LED灯闪烁的代码：

我们可以看到在loop里面，调用了digitalWrite，把那个引脚进行了高低电平的切换，这样就实现了小LED灯闪烁的效果，高电平就相当于给小LED灯供电了。

我们只需要把他写的代码中的引脚的编号改成我们的编号就好了。

每种开发板的引脚编号都不一样！我在淘宝上买的这个板，他没有给我资料，我干了一件特别愚蠢的事情，分别给不同的数字编号供电，插线看哪个亮，就记录对应开发板上的引脚号和数字。

第二天我在网上稍微搜了一下资料就找到了。后来我发现，竟然还有一个编号对应两个引脚的，具体为什么我也不知道。

不过具体怎么给舵机传信号，或者接受传感器的信号呢？如果在 Arduino IDE 里面的话就是简单的调用API就好了。这一块我没写代码，都是ChatGPT帮我写的。

实现目标的主要部分

我使用同样的方法，制作了垃圾桶的功能的电路和代码。 使用超声波传感器的时候，我发现这玩意都好神奇啊，仿佛是魔法一样。 比如超声波传感器，要先发送一个超声波信号出去，然后等待回波信息，拿到发送和接收的时间差，通过计算得到距离。

我在调试超声波传感器的时候，我发现我能听到超声波传感器发出的声音，只要耳朵对着它不用靠太近就可以听得到。我朋友说我是超级耳。

有了LED灯的经验以后，超声波识别距离，调用舵机旋转很快就实现了。

最开始我在考虑这个舵机的力道到底能不能支撑起来垃圾盖子，不过现在感觉力道还是挺大的。不过现在没有办法试，因为我还没有做出来合适的垃圾桶。

接下来

接下来我要去找到一个合适的垃圾桶，我也不确定需要用什么方式去打开垃圾桶的盖子，是不是需要其他的比如初中学过的滑轮、齿轮、杠杆原理什么的？这块还没有开始涉猎，等我接下来研究研究来写第二部分。

感谢大家阅读～

博客有一些视频资源未展示，可到移步知乎文章，查看完整内容

背景

目前市场上有很多软件，通过使用图形连线加上一些编辑的功能去实现一些业务需求，比如说蓝图软件、流程图的软件、PPT 软件和电子电路设计图软件等等。从五月份到现在，我们在公司开发了一个车联网安全应用，并对它进行了一些思考设计和落地实施。

开发大型图编辑应用软件，我们需要明确哪些问题需要解决，这些问题可以从我们目前的产品效果入手。由于网联汽车安全的项目比较复杂，涉及到非常多的行业概念，比较晦涩难懂，为了让大家能够更加清晰地了解我们项目的大致内容，我设计了另外一个项目（如下方所描述），从而有利于理解：

博客有一些视频资源未展示，可到移步知乎文章，查看完整内容

我们要组建一个前端培训学校来招收学生，第一个学员明非，就职于犬安科技，是一名拥有 15 年编程经验的前端工程师。我们给他添加了“架构师”，“本科“标签；第二个学员张三，大三在读，前端初学者，本科学历。此时可以直接使用之前的“本科”标签，从左边拖入标签，也可以在右侧添加新的标签“小白”，来描述张三的技术水平，最后我们总计招收到两个学员。项目的第一步流程结束。

我们需要解决以下问题：

• 创建图形 / 编辑画布内容（实现图编辑）
• 画布/右侧表单/底部列表数据实时同步 （数据同步）
• 不同对象右侧表单的生成 （表单生成）

博客有一些视频资源未展示，可到移步知乎文章，查看完整内容

明非的需求: 学习node JS并达到精通水平；张三的需求：学习前端三门语言并达到熟悉水平；我们为每位学员选择相应的关联技术和关联目标，后台统计技术和目标数据并在右侧展示。项目的第二步流程结束。

我们发现，各个数据是分布在各个步骤中使用的。例如：成员数据可以在图编辑和关联技术中使用，成员数据和技术数据组成个人计划数据，并在关联目标中使用，关联目标关联着目标数据。

我们需要解决以下问题：

• 多个步骤同一份数据的数据存储（数据存储）
• 多数据之间如何进行关联（数据关联）

我们要解决的问题可以分为三类：

• 图编辑实现

  • ReactFlow/X6的选择
  • 如何解决复杂图编辑需求
  • 遇到问题怎么办？
  • 如何与业务进行结合

• 流畅的全局数据和事件系统

  • 统一的数据列表
  • 统一的事件通讯

• 表单生成和数据变化监听

  • 表单生成方案
  • 绘图数据的无缝对接
  • 步骤数据的实时修改

图编辑实现

• 创建图形/编辑画布内容（实现图编辑）

我们在日常开发中遇到的需求可能是做一个流程图属性图，使用的一些图编辑框架的基本的编辑能力即可实现。但更多情况，我们会结合我们的业务需求实现各种能力。

如何解决复杂图编辑需求?

例如：

博客有一些视频资源未展示，可到移步知乎文章，查看完整内容

实现连接桩的移动，并且避免移动中两个连接桩重合；移动到四个边角，圆角位置会发生变化。

博客有一些视频资源未展示，可到移步知乎文章，查看完整内容

实现连接桩的业务逻辑：不同属性的连接桩有不同的颜色，颜色不同，无法连接；连接状态的连接桩，其他属性的连接桩会变暗，从而表示不能连接。

如何选择框架?

我们需要找到一个十分靠谱的框架来实现上述复杂需求，ReactFlow和X6是市场上比较火的两个框架。我们根据自身所需要的功能，又根据两个软件的官网介绍可以提供的解决方案，如下图所示：

通过调研，我们得出以下结论：

1. react flow 实现了更符合前端的一些开发逻辑，但多数功能没有，需要自己开发；
2. X6 编辑能力比较完善，虽然增加底层功能会相对麻烦，但X6 现有的底层功能几乎满足我们所有定制化需求。

我们最终选择X6，事实证明我们的选择是正确的。

例如，解决我们项目中的一个复杂场景：

博客有一些视频资源未展示，可到移步知乎文章，查看完整内容

从一个内部连接桩连接到外部的连接桩：在每个跨越的元素上创建一个连接桩，然后把连接桩相互连接，在最后的连接线上创建一个圆点，然后把连接线拆成两根连到圆点上。

我们基于X6提供的一些API， 抽离了一些常用方法，并结合我们自己的业务逻辑去应对。

遇到问题怎么办？

使用开源库会发生很多问题：有些是我们的使用姿势问题，有些是开源库的一些bug；在使用一些普通功能，例如流程图，由于 X6经过很多项目的考验，基本没有什么问题；但我们的项目深度使用X6的各种功能，因此会出现一些问题；

图左边是我在仓库提的问题，X6的官方人员响应十分及时。但有些问题是我们独有的，需要自己动手解决。右边其实是我提PR 解决问题的一个截图，我向 X6 提了三次PR ，每次都在两天之内就合并。它会自动去发布一个新版本，并可以直接在项目里投入使用。

如何与业务进行结合

业务逻辑不仅仅是编辑图像，我们还需要将图像结合到业务中去。下面我将用车联网安全产品来展示这一个demo的数据关系图。

博客有一些视频资源未展示，可到移步知乎文章，查看完整内容

元素可以包含子元素，元素上面会有连接桩，可以移动；连接桩中间有连接线；连接线中会有数据的流动。

由此可见，我们不仅需要X6帮助我们实现图的编辑和展示，还需要底层的数据引擎来实现绑定关系。

实现了一个数据引擎：

只看代码就是节点、连接桩、边、数据，比较简单；

用面向对象的方式去做一些数据连接关系来绑定关系，只需要利用X6的事件和钩子，然后来调用。

例如：

添加一个node、连接桩和编的时候，监听X6的事件，来创建我们自己数据引擎的元素数据、连接桩和边。然后通过X6的一些功能，例如在一个元素里面添加一个子元素，我们的数据也会进行同步更新。

也可以调用我们数据引擎的一些方法，反过来操作X6上面图的一些变化。通过这种方式，我们可以解决非常多的图和数据绑定的问题，可以用在数据流程图、电子软件自动化、电子设计自动化软件、游戏引擎低代码工具等等工程中。

数据存储和数据关联

• 多个步骤使用同一份数据的数据存储（数据存储）
• 多数据之间如何进行关联（数据关联）

由于前端图编辑的逻辑比较复杂，我们强依赖前端的各种操作交互，因此图编辑步骤完全由前端自行管理；关联技术和关联目标是由前端调用服务端（后端）去完成的。

下面是一个图编辑画布中数据变化修改的数据流程图

博客有一些视频资源未展示，可到移步知乎文章，查看完整内容

当图编辑的节点数据发生变化，一方面要保存到前端的数据存储里面，另外一方面要把它保存到服务端，具体流程是通过一个事件系统告诉事件系统的一个模型，去保存图编辑的一个信息，事件系统会调用请求模块，通过数据服务把图编辑的节点信息存储到服务端。

博客有一些视频资源未展示，可到移步知乎文章，查看完整内容

当我们进入一个关联目标的步骤的时候，这个步骤就是一个React 文件。进入文件以后，我们需要个人计划数据和目标数据，走到事件系统，告诉个人计划，取个人计划数据，告诉个人目标，取个人目标数据，然后通过请求回到服务端。返回服务端以后，需要进行一个数据处理（后面会讲到数据处理的原因）。数据处理结束以后，生成一个前端可用的数据，并存放在数据存储器里面。数据存储器发生变化，里面的React 文件会响应它的变化。

我们需要下面的三个要点：

1. 将业务进行拆分，区分出多个模型；
2. 每个模型只负责自己的事情，但是它可以相互调用；
3. 通过命名空间区分模型，并且提供类型提示。

模型的区分最好是由前端后端共同理解业务需求，一起探讨总结得出，这样才能更好的理解业务，有助于我们的系统设计概念清晰、结构合理，从而更加可理解、可维护。

例如：

将培训学校的这个项目分成了四种数据、四个步骤 、五个模型，分布在各个步骤和各个数据当中。

数据设计：

使用store 的一个对象，store 对象里面会有命名空间，使用 set, on, get 分别去设置数据、监听数据的变化和获取数据。然后在React里面，直接使用useStore来获取这个数据和监听它的变化。

事件设计：

使用常用的on和emit，前面用命名空间区分。

将个人计划去绑定目标

step 1 事件绑定 数据设置

给Plan和Goal定义getList获取个人计划和所有目标。

监听获取个人计划的一个事件，设置个人计划数据，设置成功后，触发一次 Goal 的 getList 更新最新的个人计划列表。

step 2 绑定目标步骤的JSX

我们要监听获取目标的一个事件。右边是我们的React ，由于当前页面也需要计划和目标，所以我们要获取计划目标。需要在UC fact 里面，当刚刚进入这个步骤时，就要去触发服务端的计划和目标数据；我们会有一个方法是设置目标，我们左边去定义功能，右边在React 里面使用这些功能。

最后我们使用TypeScript 提供类型提示，提升开发效率，降低出错率。

表单生成和数据监听

说到表单生成我会想到：通过JSON Schema 的方式来生成表单、通过MobX的方式来监听数据的变化

JSON Schema用来定义JSON格式，可以校验或者生成JSON，通过这样定义，我们可以得出右上角的数据格式，也通过这种定义的方式来定义右下角的表单。

博客有一些视频资源未展示，可到移步知乎文章，查看完整内容

对一个对象进行绑定，在React 里面直接使用被实例化的一个对象，或一个实例，里面的属性发生变化的时候，React 里面的数据也会发生变化，从而解决掉我们刚才的那个数据绑定的问题。

表单生成

阿里巴巴Formily 的解决方案可以解决我们的需求，下面是各个竞品的一个数据对比：

Formily 学习成本比较高，但其他性能方面良好，另外作为一个中文工具，便于理解，例如可以直接在github 上发一些中文的issue。

使用Formily ，我们可以通过左侧的一个JSON 数据，然后生成右侧的一个表单，解决我们表单自动生成问题。

他可以直接将生成的数据实例和表单绑定起来，表单发生变化的时候，我们的数据也会发生变化，这是解决了我们的数据引擎里面的数据和表单的数据同步问题。

Fomily提供了一个可视化的表单生成器，不过我们在项目中没有运用。

我们在使用Formily 的时候会去实现一些自定义的功能，如何自定义功能呢？

比如我们点击上面的标题就能创建一个新的标签。

我们实现的方法是：

1. 我们在原组件的基础上去进行优化

将原组件的代码直接复制出来，在标题上面添加了一个schema 里面的一个X-titleClick 方法。

1. 注册自定义组件

把刚才我们复制出来的一个组件注册到schema field 里面。

1. 使用自定义组件，传入所需参数

由于我们定义了一个schema 上面的一个属性。然后我们需要在写schema 的时候输入我们的方法。

这样的话我们就可以通过schema 的方式去生成表单，schema 目录下面有各种需要生成表单的文件，文件里面写的都是schema。拿出来以后，当在下面列表里面进行数据选择，或者在画布里面点一下这个节点，我们就能监听到节点的变化，然后找到对应的schema 并把它放到这个React 里面显示出来。

数据同步

• 画布/右侧表单/底部列表数据实时同步（数据同步）

由于图编辑是前端自主管理数据，绑定技术和绑定目标需请求服务端，这两个方案其实是不同的。

前端自主管理数据，即图编辑中，Formily解决了表单和这个数据之间的一个同步。我们还需要做另一个同步：图画布里面的元素的同步，以及底部列表的同步。

博客有一些视频资源未展示，可到移步知乎文章，查看完整内容

MobX可以去监听数据变化，并做一些响应，Formily 提供了reactive 的一个库，效果和MobX相同。所以我们直接用Formily的reactive解决了这个问题。

我们刚才的这个数据引擎里面的node的代码中刚刚添加了name 和 description 。我们在构造函数中去定义名字和描述需要被监听。在表单里面修改的时候，会自动修改到这个 node 实例里的属性。然后我们的这个React 代码里面就可以去监听到这个属性的变化。

绑定技术和绑定目标这两个步骤如何用服务端接口去请求数据？

我们来看一下如何实现动态更新个人计划吧。左边有一个获取计划列表的功能，右边我们实现了一个方法叫getPlanList。首先我们去服务端获取这个列表，然后我们去通过Formily reactive 的observe 这个方法，把它变成了可被监听的一个对象。然后通过监听 observe 方法去监听这个对象。当其发生变化时，我们就去调用更新计划方法。更新完了以后，我们接着去把计划列表刷新一下，这样的话我们就可以实现在选择计划以后去触发服务端，再接着调用getList更新最新的计划列表。

总结

• 使用 X6 实现图编辑功能
• 创建数据引擎与 X6 进行融合
• 定义数据模型，通过Store 和Event 实现数据联动，
• 使用Formily 实现表单生成，使用@Formily/reactive 实现数据实时同步

我们通过解决以上问题来实现大型图编辑应用的基础框架和能力，当然大型应用内部细节非常复杂，往往伴随着相关的专业知识，本篇文章只是给到了一些基础问题的解决方案，可能也仅仅能够解决我在开发过程中遇到的问题。如果想要进一步与作者交流，可以联系作者微信：maydayfantast

漫画中的三个人物，左边的人在玩金币庄园，金币庄园中金币可抵扣现金，用户每天都会来收金币，中间的人在玩天猫农场，通过助力可以升级果树，种成可拿到真正的水果，右边的人通过扫码得到一定权益，促使消费。

结合平台业务属性，利用用户的目标感、成就感和社交欲打造互动游戏产品，从而达到拉新、留存、转化的效果。

我们需要基于一套互动引擎来打通阿里巴巴经济体互动研发工作流，未来会基于引擎实现编辑器、逻辑编排以及互动模板。另外，我们需要把控互动领域的核心技术，所以，我们需要开发一套互动引擎。

要解决的问题

集团目前有很多互动业务，很多BU也在陆续开始进行互动业务的探索，我们需要给各个BU提供一套上手快、开发效率高、能力完善的互动开发链路，因此互动引擎至少要完成以上漫画中的三个点，沉淀最佳实践、支持编辑器、支持常用资源。 互动引擎面临以下三大挑战，以及对应策略。

• 实现易于开发的引擎架构
  • 提供高扩展性的架构
  • 支持场景编辑器
• 支持渲染与动画能力
  • 渲染能力完备
  • 动画资源类型支持完善
• 友好的用户体验
  • 提供性能优化方案
  • 提供最佳实践

    实现易于开发的引擎架构

从目前的项目中，我们发现，每个项目都有一些共同的能力，比如说动画、图片、物理碰撞、交互等能力，我们需要通过组合的方式，将这些能力拼接到游戏对象上面，然后将游戏对象放入场景中，这个过程中尽量减少重复代码编写。所以，我们的引擎架构需要以组合的方式进行，并且需要对编辑器友好。

引擎架构

通过调研，我们发现ECS模式是业界游戏引擎开发的最佳实践，因此EVA采用了ECS的设计模式作为底层架构。

ECS具有高扩展性和高性能的特点，接下来详细看一下引擎的架构设计，我们通过游戏对象，组件和系统三层架构来实现游戏，游戏对象代表游戏中的物体，组件给予物体一些属性值，通过系统，读取组件中的属性值来给物体设置能力。这样，我们通过组件随时添加/删除游戏能力；通过组件和系统扩展游戏的功能，实现引擎架构的高扩展性。

ECS设计中，组件是存放数据的，将组件数据存放到CPU缓存当中，实现了天然的高性能读写，游戏循环中去遍历CPU缓存中的数据非常的高效，但是由于JS无法直接控制CPU缓存，因此无法享受到ECS设计中的这种优势，但是，我通过JS的getter/setter能力，实现了属性变化收集方案，当属性变化时通知系统进行相应操作，无需对数组进行遍历，大大提升运行性能。未来，如果我们能够使用WebAssembly的能力，或者将组件数据存放到ArrayBuffer中，是否能够更好到利用CPU缓存能力呢？这非常值得我们去探索。

编辑器支持

ECS天然支持编辑器设计，在图中编辑器案例中，左侧是游戏对象管理器，右侧是组件管理器，游戏对象和组件组合后，通过系统能力将其渲染到画布上。

对于编辑器而言，需要获取到对应的组件和系统的参数以及属性，提供给开发者进行可视化编辑，我在ECS之上做了一层装饰器，将属性、事件、类型、参数暴露给编辑器进行使用。

通过ECS架构和装饰器，我们实现了高扩展性、高性能、编辑器友好的引擎架构。

支持渲染与动画能力

我们知道，计算机游戏都要在屏幕上显示游戏内容来与用户进行交互，通过炫酷的效果能够提升游戏体验。 这些效果是如何实现的呢？

首先我们通过资源生产工具导出资源文件，然后使用渲染能力将其呈现在画布上。因此，我们需要支持常用的资源文件，并且实现完备的渲染能力。

为了快速的支持业务，我动画与渲染的实现过程分成了三步。

第一步：使用业界渲染引擎，业界渲染引擎一般将常用的动画能力和渲染能力放在一起。通过这种方案，快速的实现了引擎的渲染动画能力，并且落地到业务中使用。但是我们发现，动画能力是内置到渲染引擎中的，不符合我们引擎的架构模式，我们支持新的动画也不应该内置到渲染引擎当中。

第二步，抽离动画能力，将骨骼动画，帧动画，抽离成单独的系统，通过修改渲染组件上的属性进行动画实现，保障了引擎的统一性，扩展新的动画更方便。在渲染引擎上层，实现渲染适配器，通过统一的API进行绘制，更换渲染引擎只需要实现对应的API即可，为自研渲染引擎做准备。

我们发现，抽离了动画能力后，业界渲染引擎中有很多能力是冗余的，我们需要更轻量级的渲染引擎，另外，随着业务的发展，业界的渲染引擎能力已经没办法支持当下的业务场景了，业务中会用到更复杂的渲染效果，比如漫画的渲染效果、在2D场景里面实现更加立体的效果，接下来我们需要会对渲染引擎做简化、改造或自研渲染引擎。

友好的用户体验

对于互动引擎来讲，用户分为两部分，一部分是客户端用户，一部分是开发者用户。

客户端用户中，移动设备有好有坏，用户所处的环境、国家都对用户体验有非常大的影响，例如一些低端机上，如何优化动画卡顿问题，对于国际化、无障碍、夜间模式如何支持，因此，对于客户端用户来说我们需要做到端上更稳定，效果更丰富。

对于开发者用户，希望能够拿到一个可以快速开发互动游戏的引擎，关注引擎的学习门槛，系统健壮性，调试工具是否齐全。因此，我们需要做开发更高效，能力更完善。

接下来我会给大家分享三个解决方案，客户端用户的端稳定性、无障碍化、开发者的编码实践。我们来看一下具体问题和解决方案。

性能/稳定性问题

首先，我们来看最棘手的端稳定性问题，在互动业务开发中，最常见的问题就是首屏渲染时长和Crash问题。

首屏渲染时长主要是因为互动资源非常多，资源在使用之前需要实例化，骨骼动画、帧动画的实例化时间相对较长。 目前的加载流程，一般游戏都是先加载资源，再创建对象再实例化资源，最后再渲染，以这种线性的模式进行的。 我在引擎中做了三个事情。 第一，创建游戏对象和资源加载可以并行，我们的架构中，加载和对象的创建是完全分开的，天然做到了这一点。 第二，某个资源加载成功立即实例化，我在资源管理器中实现了实例创建器，各种资源注册实例化方法进去，每当一个资源加载回来，立即进入实例创建器，这时也不影响其他资源加载。 第三，实例化后立即渲染。因为游戏对象已经被创建了，所以当实例化后会瞬间被使用。

通过优化，我们实现了CPU线程和加载线程同时工作，可降低首屏30%-50%的加载时长。

对于Crash的问题，骨骼动画、帧动画都运用一些合并的图片，尺寸偏大，内存占用比较高，低端机承受不住内存压力，带来了很多crash，因此，我开发了分级体验组件，通过客户端等级判断，获取当前客户端是高端机还是低端机，针对高端机低端机选择图片还是骨骼动画，通过分级体验组件，我们可以在低端机中将骨骼动画替换成图片，从而降低内存占用，在数据中看到，使用这种方法内存占用降低30-60%。但是这种方法对视觉效果是有损害的，未来，我们会探索更多对业务和视觉无伤的能力去降低内存占用。

我们使用了引擎提供的资源管理能力和分级体验组件解决客户端用户的体验问题，接下来我们看一下如何解决开发者体验问题。

无障碍化

我们在游戏区域之上创建了A11y层，在该层上设计符合AOM（Accessbility Object Model）标准的接口，提供给开发者用户进行无障碍信息设置，从而达到标准化。无障碍插件将会自动识别手机是否开启了系统旁白，实现自动设置无障碍能力。无障碍的应用设计并非一个全自动化的过程，而是需要投入产品设计、开发人力的，我们需要针对具体场景进行无障碍设计，在开发中我们需要针对产品的无障碍设计去写无障碍化所需的代码。

我们知道 Canvas 上目前是没有办法实现无障碍操作的，目前，最有效的方案是在DOM中创建对应的可操作、可阅读的DOM元素，并且设置对应的无障碍化属性。

利用在架构中设计的组件监听器，监听A11y/Transform/Event组件的变化/添加/删除。只用被添加A11y组件的游戏对象才会被A11y系统接管，这样不会造成不必要的DOM生产和无意义的屏幕阅读，另外需要读取A11y组件上面的无障碍属性设置给DOM。监听Transform组件信息，判断游戏对象是否在游戏区域，并且读取Transform组件上面的信息设置DOM的定位以及宽高，直接读取Transform上面存储的Matrix信息设置给CSS的transform属性。最后监听Event组件的添加删除来给DOM添加事件。

目前无障碍化插件有几个特点：

• 在手淘/支付宝可自动识别是否开启无障碍能力
• 自动识别无障碍对象上的交互事件
• debug模式将无障碍对象展示出来

目前，无障碍化插件提供出了符合标准的接口设计以及自动识别的能力，能够实现互动游戏的无障碍化能力。

开发者体验问题

对于开发者，最紧迫的事情就是如何快速开始写代码，在开发者体验中，优先做了最佳实践。 我们知道，上手一个互动游戏类引擎是有一定门槛的，对于前端开发者而言，我们更希望通过前端的思路和解决方案处理问题。

在基于H5的互动开发中，我们通常在Canvas区域实现炫酷的动画效果、游戏逻辑，使用DOM实现一些布局类操作界面。 根据这个最佳实践，我们提供了基于Rax的互动开发解决方案，根据Rax的组件规范，将互动引擎的组件进行封装，提供给开发者使用，通过统一的Rax的开发规范来开发游戏区域和DOM区域的内容。

RaxEVA提供背景、操作界面、游戏区域三个区域，我们通过Rax提供的Driver对不同对区域中的组件进行不同形式的渲染，在背景和操作界面中使用的组件将会被渲染成DOM，在游戏区域使用的组件将会被渲染到Canvas上。

通过这种方式，可以降低前端开发的理解成本，使用JSX+Hooks的方案进行互动游戏的开发，另外，我们可以使用完善的Rax生态进行开发，更加便利。

总结

我们实现了一个易扩展的引擎架构，让游戏能力解偶，并且提供了编辑器的底层支持。 官方沉淀20+常用组件，包含动画、渲染、性能、数据状态以及常用的脚本组件。降低开发成本，提高开发效率。 针对首屏加载和内存问题，提供针对性的优化方案，提升C端用户体验。针对业务开发，提供解决方案和最佳实践，提升开发者体验。 目前EVAJS还未开源，可以参考下方内容进行实践。

扫描二维码查看DEMO

https://eva.js.org/playground

文档二维码

https://eva.js.org 欢迎志同道合的同学加入，一起共建阿里巴巴互动生态体系，这里有我们的团队介绍

如果希望进一步与作者沟通交流，可以联系作者微信： 微信：maydayfantast

前言

对于我来讲，虽然做前端那么多年，但对 CSS 的探索非常少，很多 CSS 知识还是在毕业之前积累下来。揣着一本《精通CSS:高级Web标准解决方案(第二版)》（现在出第三版了，这是我在 CSS 道路上的启蒙书）在前端路上走了这么几年。这次怀着对 CSS 的伪热爱，狠了狠心买了一张 CSSConf 的票上了车。


我个人经常会参加一些前端的会议，参加大会主要是能看看业界都在用什么方案，处理一些什么问题，虽然这些在会后都会有分享，但是实际体感还是不一样的，其实这也不是最主要原因，更重要的是能在会议上认识一些朋友，相互交流，听一些解决方案和他们遇到的问题，或许以后就是同事了。

开场

开场的时候，严肃而又诙谐主持人，周裕波，做了开场白，描述了这可能是最后一次办 CSSConf 了，其实我是很不解的，只是说行业里有一些不同的声音，并没有具体说明原因，其实会后我问了一下他，为什么以后不再办 CSSConf 了，他回答找到好的主题比较难，大家参会意愿不强。

后面的议题就正式开始了。

新时代 CSS 布局 - 陈慧晶

Slide：https://www.chenhuijing.com/slides/53-cssconfcn-2019/
大会第一个议题正式开始之前，讲师上台准备 Slide，我就想这个讲师好娘啊，难道是女的么？我还发消息给朋友，说这个讲师好娘哦，朋友说：“她是个女的吧！”哈哈，真是误会了误会了，跟陈慧晶老师远程道个歉。陈慧晶老师曾经是个专业篮球运动员，后来慢慢的转向了 CSS 技术领域，在布局和中文排版方面研究非常深入。

陈慧晶老师主要讲解了一些关于最新的 CSS 布局方面的知识，细节讲的比较多，讲解了一些属性，并做了一些演示，让我们能够非常直观的感受到各个属性的效果。

CSS 显示模块

陈慧晶老师讲到，之所以纵向比横向难排是因为，网页一开始是为了展示文字所产生。随着浏览器的发展，才慢慢开始支持弹性盒子、网络布局、盒模型。

目前已经有很多关于布局的属性，通常布局我们是使用配置 display 属性，这个属性有很多可选的值，分为内部显示模型和外部显示模型。

CSS 的 display 属性值对应不同的显示类型，下面是我从规范里面复制来的：

• 外部显示模型的值：block, inline, run-in
• 内部显示模型的值：flow, flow-root, table, flex, grid, ruby

后面讲了一些 CSS flex 布局的具体用法和现象，这些在网上就可以学得到，不过我感觉 grid 布局很神奇。flex 和grid 会结合使用，小孩子才做选择题，成年人全要了。

以内容为主的尺寸计算方式

灵活性尺寸

这种布局方案比较灵活，可以优先使用某个尺寸，达到某个临界点才会变化，或者固定某个尺寸不变化。描述起来可能有些困难，可以参考陈慧晶老师的 Slide，里面有视频。

旧版浏览器的支持

旧版浏览器使用 @supports() 方案，可以查看当前浏览器是否支持该属性。

最后陈慧晶老师问了大家一个问题，我们做的在所有浏览器上显示效果必须是一样的吗？答案是否定的，不同的浏览器显示的样式可能不一样，我们可以针对不同尺寸的浏览器进行不同的布局，当然我们也可以针对不同 CSS 支持度的浏览器进行不同的降级处理。

剖析css-tricks新版，为你所用 - 大漠

第二个议题是大漠老师的，大漠老师是 www.w3cplus.com 的站长，著有《图解CSS3：核心技术与案例实战》。他的议题是对最新版的 css-tricks 进行剖析，看看最新版 css-tricks 都用了哪些有意思的东西。大漠老师也提到了一些无障碍化的事情，讲到 css-trickers 使用黑色或许是出于对无障碍化的考虑，其实这一块也是目前业界比较关注的一方面。大漠老师已经将演讲内容发表到自己的博客：https://www.w3cplus.com/css/css-css-conf-5.html，感兴趣可以到这里来看一下。下面，我可能会根据我自己的理解来拓展一些其他的想法。

SVG的使用

在 css-tricks 中使用 SVG 比较多的地方是图标，大漠老师从性能的角度分析了，图标从小图片到 CSS Sprites 然后到 icon-font，后来使用 SVG，到 SVG Sprites 的演变，分析了每种方案的优劣。
QA环节有一个人问，现在 SVG 这种格式出来以后，还有其他格式的图片，是否其他格式就不需要再用了，SVG和WebP哪个好？其实，每种图片格式解决了不同的问题，SVG 是一种矢量图，解决一些简单的几何图形可以解决的图像表达问题，WebP、JPG、PNG等是一基于像素形成的位图，可以展示一些颜色和图形比较复杂的图像信息。其实他们的定位不一样。

滚动特性

滚动条样式

在不同的浏览器或者系统版本下，滚动条的样式其实是不同的，滚动条样式在几年前就已经可以使用了，只不过需要加 -webkit- 前缀，所以目前只支持 chrome 和 safari 浏览器，目前不支持手机上的 safari。

滚动捕捉

比如在 banner 轮滚这种场景下，我们希望自动停到对应的位置，大漠老师还举了一个特别有意思的人物换装的demo。

自定义属性

大漠老师多次强调，这叫做 CSS 自定义属性，不叫 CSS 变量。在 LESS 和 SCSS 中，也实现了类似的概念，但是在 LESS/SCSS 中，这真是一个变量，先定义了一个变量，在后续的 LESS/SCSS 中使用，但是这样的问题在于，在编译以后，这些变量对应的值就固定到了 CSS 代码中，不会再“变”。

例如：

/* SCSS */ 
$color: red;
a { color: $color; }

编译后生成的代码

a {
    color: red;
}

所以，网页上我们无法对 $color 进行修改。

CSS 自定义属性和一些普通 CSS 属性一样，可以被继承，也有作用域的概念。

<body>
  Hello,
  <div class="box">
    CSS
    <span>World!</span>
  </div>
</body>

body {
    --color: red;
  color: var(--color);
}
.box {
  --color: blue;
}
span {
  color: var(--color);
}

demo 地址：https://codepen.io/fanmingfei/pen/mgJOvP

body 的 –color 属性red，并且 body 的 color 属性设置成了 var(–color)，所以，body 的 color 属性是 red；

.box 没有设置 color，所以继承了 body 的红色，但是设置 –color 为 blue，所以 .box 里面使用 var(–color) 获取到的是 blue。

条件判断

基于自定义属性和 CSS 的一些特性，我们可以做到以前 CSS 做不到的一些条件判断的能力，例如条件判断，其实是基于自定义属性的变化引发的状态变化，后面张鑫旭的议题中也有用到这一点。
具体可以参考大漠老师这篇文章如何通过CSS自定义属性给CSS属性切换提供开关。

JS in CSS (Houdini)

其实是基于 CSS Paint API 来定义 CSS 自定义属性。使用一个类似 Canvas2D API 的上下文，可以直接绘制图形，大漠老师的demo是将 JS 代码写在了 CSS 自定义属性后面，然后用 JS 去获取了 CSS 自定义属性，拿到了这个方法的字符串，然后用 eval 去执行了，这样显得像是在 CSS 里面写了 JS。不过这样写也是一个思路，因为我们可以直接在属性后面面定义属性的样式，看起来也是合理的，但是如果用来渲染的 JS 量比较大，并不是一个好的方案。其实我们可以直接将用于绘制的 JS 代码写在 JS 文件中。

有了 CSS Paint API 我们用 CSS 做的事情有可以变得更多了，这是一个很令人兴奋的 API！

其他

看到这里，大漠老师再三强调的，没有 CSS 变量，只有 CSS 自定义属性，是非常合理的。我们其实是定义了一个 CSS 属性，并且给于它一个值，真正用到它的时候才是真正描述这个值去做什么事情的时候，用 var() 函数，它就变成了一个变量，用 paint() 函数，它就变成了 CSS Houdini.

Web Layout

陈慧晶老师全篇都在讲 Web 布局，大漠老师讲了一些 Web Layout 相关的一些属性和函数，并且指出了一些关于Web Layout 的一些误区和社区争论。

混合模式和滤镜

简单讲解了一些滤镜的效果和一些属性，而且这些功能已经可以在线上跑了，我在去年项目中已经用过 CSS 滤镜了。

其他(^_^)

最后讲了一些零散的点，有一些在项目里都可以用到，我们的项目也有用到过~而且都是一些小技巧，挺有意思的。

CSS创意与视觉表现 - 张鑫旭

张鑫旭老师，经常会在搜 CSS 问题的时候搜到他的博客，张鑫旭-鑫空间-鑫生活，他写文章有时候特别幽默，比如《理解 CSS3 transform 中的 Matrix - 矩阵》中。

张老师这次分享了很多的非常实用的案例。

CSS 属性放在那里，具体怎么用？有些人真的可以使用一些属性加上一些思维做出很好的效果，这个可能是要看天分的。这次大会混入了一个产品经理，她提了一个问题，如何提升前端的这种创意思维，张鑫旭老师给出的答案是，可以招聘新的符合你要求的前端，这种创意不是每个人都有的，业界有很多优秀的作品已经出来了，大家不需要自己去研究，直接用现有的就好。

张鑫旭老师的 Slide 里面每个效果都有demo，感兴趣的话可以直接下载查看 《CSS 创意与视觉表现.pdf》

其实有很多实现布局、特效的技巧，都是一些大师发明出来的，我们可以在项目中使用这些技巧，CSS 提供了很多属性，达到效果的方式不是唯一的，我们在日常工作中，其实可以多去思考这个效果如何实现，可能会发明出自己的奇淫技巧。

CSS 生成艺术 - 袁川

Slide: https://yuanchuan.name/talk/generative-art-with-css/
看了这个议题，很是震撼，袁川老师把浏览器当做了他的画板，CSS 当成他的画笔，生成了很多震撼的艺术作品，整个议题过程中，会场多次响起掌声。具体可以看 Slide，也可以看他的Codepen。

几张图片

上面这两张图，都是用逗号做的。

CSS 有着天然生成树的特性。

现场视频

放一个现场的视频感受一下，在文末大会官网上可以看全部视频。
cssconf.mp4

##

你不知道的五个 CSS 新特性 - 勾三股四

勾股介绍了几个 CSS 的新特性，感觉实用性没有那么好，还有很多在草案阶段。勾股的 Slide 地址：https://jinjiang.github.io/slides/five-css-features/

float

float & CSS Shapes

我们使用 float 可以进行文字环绕图片、多列布局，但是现在我们已经很少用 float 了。大家已经开始使用更新的布局方案。但是如果想实现图文混排 float 还是少不了的。

如果想让文字根据图片内容进行排版，单单只用 float 是不够的。需要配合 CSS Shapes 实现。

其他效果

page

网页里面有个打印的功能，可以针对打印状态下的页面进行样式设置，里面拓展了一些和打印相关的属性。

更多内容可以参考 https://www.pagedmedia.org/

scroll

勾股也讲了一些滚动条相关的内容。

font

Adobe, Apple, Google, Microsoft 4大巨头企业联合宣布了全新的字体规范Variable Font，字体在设计过程中可以提供出一些参数，CSS 中可以对参数进行配置。

viewport

以后可以使用 CSS 来设置页面的 viewport 啦！

CSS动画你应该知道的10件事 - Brian Birtles

这个议题提到了关于 CSS 动画的一些知识。
中文版Slide：https://birtles.github.io/cssconf2019/index.zh.html
英文版Slide：https://birtles.github.io/cssconf2019/#/title

我都不用去总结啦！对某个点感兴趣的话，可以看一下他的 Slide，每一个点，都对应了一些解释和实践。

CSS TIME - 陈在真

陈在真老师的 CSS TIME 这个话题，介绍了一些他做了很多 CSS 动画后总结的一些方法论。后面我和他有过一些交流，我在想，是否能有什么工具可以按照他的这种方法论产生的规则设计动画，直接产生线上可用的 CSS 动画效果，其实这也是从工程化上要考虑的事情。

简单案例

使用了几个简单的案例，总结出在做 CSS 动画时候，如何让多个动画联动起来，如何实现循环时间统一。

讲了一个复杂案例的实现，他做的动画很多都是他自己来设计的，所以在实现动画的设计理论上也有一些介绍。

各种设备下的时间

在不同的设备下，比如 pad、手机、穿戴设备，用户对时间的体感不同，一个动画使用的时间可能是不同的。

后语

这里只是按照我的理解和记忆总结了一些在大会上的所见所闻，列出了各位讲师分享的一些点，如果大家对哪些点感兴趣可以深入到 Slide 中学习。大会视频后续也会放出，可以进入大会官网中国第五届 CSS 开发者大会查看议题、Slide 以及视频。

138.2亿年前，世界上没有时间和空间，或许世界都不存在，在一个似有似无的点上，汇集了所有的物质，它孕育着无限的能量与可能性。

宇宙大爆炸

巨大的内力已无法被抑制，瞬间爆发，它爆炸了！世界上有了时间和空间，随着岁月的变迁，时光的流逝，无数的星系、恒星、卫星、彗星形成。我们生活的地球，只是茫茫宇宙中的一个小小的天体，或许在遥远的宇宙的另一边，会有平行世界的存在，或许在那里，我们可能是医生、老师、公务员。科学家说我们的宇宙正在加速度的膨胀，暗能量在无限吞噬着暗物质，未来的世界将会变得虚无缥缈。

人类起源

宇宙的形成，带来了无限可能性，人类释放着欲望和克制，对宇宙的渴望产生于公元前五世纪，古巴比伦人通过观察天体的位置以及外观变化，来预测人世间的各种事物。在遥远的古罗马，人们也舞弄着灵魂，把不羁的想象赋予肉体。Anim，来源于拉丁语，代表着灵魂与生命，代表着所有与生俱来。似乎世间万物都存在联系，宇宙、自然都存在灵魂。

动画的形成

两万五前年钱的石器时代，石洞中的野兽奔跑分析图，这是人类开始试图捕捉动作最早证据。文艺复兴时期的达芬奇画作上，用两只手臂两条腿来标识上下摆动的动作，在一张画作上做出不同时间的两个动作。 直到1906年，世界上第一部动画片《滑稽脸的幽默相》问世。

所以动画是否就是将多个画面连起来播放呢？

时间是连续的吗？是可以无线分割的吗？我也不太清楚，你看到的流星、人们的动作是连续的吗？或许是吧，毕竟现实生活中还没有像瞬间移动这种事情发生吧。

神经可能不是连续的，生物课学过，神经的传递是一个电信号传递过程，并且是颗粒的(神经信号)，那么我们看到的东西在我们脑海里的成像一定不是连续的。

那么我们为什么能看到连续的动作呢？

视觉暂留（Persistence of vision），让我们看到了连续的画面，视神经反应速度大约为1/16秒，每个人不太一样，有些人高一点，一些人低一点。上一次视神经传递的图像将会在大脑中存留，直到下一次神经信号到达。维基百科上说，日常用的日光灯每秒钟大约会熄灭100次，但是你并没有感觉。

一般电影的在帧率在24FPS以上，一般30FPS以上大脑会认为是连贯的，我们玩的游戏一般在30FPS，高帧率是60FPS。

小时候一定看过翻页动画吧，可以看一看翻页动画-地球进化史

前端动画实现

Atwood 定律：Any application that can be written in JavaScript will eventually be written in JavaScript.

前端做动画不是什么新鲜事了，从jQuery时代，到当下，无不是前端动画横行的时代。

我们知道多张不同的图像连在一起就变成了动态的图像。

在前端的世界里，浏览器在视觉暂留时间内，连续不断的逐帧输出图像。每一帧输出一张图像。

提及动画一定会讨论到帧率(FPS, Frame Per Second)，代表每秒输出帧数，也就是浏览器每秒展示出多少张静态的图像。

DOM动画中的 CSS3

CSS3 动画是当今盛行的 Web 端制作动画的方式之一，对于移动设备来说覆盖率已经非常广泛，在日常开发中可以使用。CSS3 动画只能通过对 CSS 样式的改变控制 DOM 进行动画

• CSS3 Animation MDN

• CSS3 Translate MDN

DOM动画中的 WebAnimation

WebAnimation 还在草案阶段，在Chrome可以尝试使用一下。移动设备还是相当惨烈，iOS 并没有开始支持。

Element Animation MDN

CSS3 和 WebAnimation 都只能作用于DOM，那么，如果我们想让 Canvas 上的对象产生动画，那我们该怎么办呢？

JavaScript

既然我们知道动画的原理，其实就是让用户看到连续的图片，并且每一张图片是有变化的。

对于事物来讲，我们可以通过改变某些数值来修改他的属性，从来改变他的外在展示。比如正方形的边长，颜色的RGB值，台风的位置（世界坐标），在每一帧去改变这些数值，根据这些数值将对象绘依次制到屏幕上，将会产生动画。

通过上面的描述，我们知道，实现一个动画，其实是数值随时间变化，以帧为时间单位。

在很久很久以前，JavaScript 使用 setInterval 进行定时调用函数。所以可以使用setInterval来进行数值的改变。

为了更好的让各位前端小哥哥小姐姐们做动画，出现了requestAnimationFrame，requestAnimationFrame 接收一个函数，这个函数将在下一帧渲染之前执行，也就是说，不需要太多次的计算，只要在下一帧渲染之前，我们将需要修改的数值修改掉即可。requestAnimationFrame 的帧率和硬件以及浏览器有关，一般是60FPS(16.66666666ms/帧)。

我们利用 Dom 进行动画的演示~

元素移动

创建一个方块

<div class=“box”></div>

设置宽高和背景颜色

.box {
    width: 100px;
    height: 100px;
    background: red;
}

const box = document.querySelector('.box') // 获取方块元素
let value = 0 // 设置初始值
// 创建每一帧渲染之前要执行的方法
const add = () => {
    requestAnimationFrame(add) // 下一帧渲染之前继续执行 add 方法
    value += 5 // 每帧加数值增加5
    box.style.transform = `translateX(${value}px)` // 将数值设置给 方块 的 css 属性 transform 属性可以控制元素在水平方向上的位移
}
requestAnimationFrame(add) // 下一帧渲染之前执行 add 方法

这样，方块每帧向右移动 5 像素，每秒移动60*5=300像素，不是每秒跳动一下，而是一秒在300像素内均匀移动哦。

补间动画

上一个demo实现了小方块从左到右的移动，但是貌似他会永无止境的移动下去，直到数值溢出，小时候学过flash的朋友都知道补间动画，其实就是让小方块0px到300px平滑移动。其实就是固定的时间点，有固定的位置。

所以我们只需要根据运动的已过时间的百分比去计算数值。

保持之前的 HTML 和 CSS 不变

/**
 *  执行补间动画方法
 *
 * @param      {Number}    start     开始数值
 * @param      {Number}    end       结束数值
 * @param      {Number}    time      补间时间
 * @param      {Function}  callback  每帧的回调函数
 */
function animate(start, end, time, callback) {
    let startTime = performance.now() // 设置开始的时间戳
    let differ = end - start // 拿到数值差值
    // 创建每帧之前要执行的函数
    function loop() {
        raf = requestAnimationFrame(loop) // 下一阵调用每帧之前要执行的函数
        const passTime = performance.now() - startTime // 获取当前时间和开始时间差
        let per = passTime / time // 计算当前已过百分比
        if (per >= 1) { // 判读如果已经执行
              per = 1 // 设置为最后的状态
              cancelAnimationFrame(raf) // 停掉动画
        }
        const pass = differ * per // 通过已过时间百分比*开始结束数值差得出当前的数值
        callback(pass) // 调用回调函数，把数值传递进去
    }
    let raf = requestAnimationFrame(loop) // 下一阵调用每帧之前要执行的函数
}

我们调用一下补间动画，让数值经过1秒匀速从0变成400。

let box = document.querySelector()
animate(0, 400, 1000, value => {
    box.style.transform = `translateX(${value}px)` // 将数值设置给 方块 的 css 属性 transform 属性可以控制元素在水平方向上的位移
})

一个简单的匀速补间动画就这么被我们做好了。

非匀速动画

那万一，这个动画不是非匀速的，比如抖一抖啊，弹一弹，那该怎么办呢？

当然也是一样，根据已过时间的百分比去计算数值

时间是匀速的，但是数值不是，如果数值变化是有规律的，那么我们就可以使用时间来表示数值，创建一个接收时间比例（当前时间百分比），返回当前位置比例（当前位置百分比）的方法。

我们称这个方法叫做缓动方法。

如果速度从慢到快，我们可以把时间和数值的图像模拟成以下的样子。

公式为 rate = time ^ 2

对应的函数应该是

function  easeIn(time) { // 接收一个当前的时间占总时间的百分比比
    return time ** 2
}

这个实现加速后抖动结束的效果，在Time小于0.6时是一个公式，time大于0.6是另外一个公式。

Time < 0.6 时： Rate = Time / 0.6 ^ 2

Time > 0.6 时： Rate = Math.sin((Time-0.6) ((3 Math.PI) / 0.4)) * 0.2 + 1

最终实现的函数是

function shake(time) {
    if (time < 0.6) {
        return (time / 0.6) ** 2
    } else {
        return Math.sin((time-0.6) * ((3 * Math.PI) / 0.4)) * 0.2 + 1
    }
}

我们改造一下之前的 animate 函数，接收一个 easing 方法。

/**
 *  执行补间动画方法
 *
 * @param      {Number}    start     开始数值
 * @param      {Number}    end       结束数值
 * @param      {Number}    time      补间时间
 * @param      {Function}  callback  每帧回调
 * @param      {Function}  easing    缓动方法，默认匀速
 */
function animate(start, end, time, callback, easing = t => t) {
    let startTime = performance.now() // 设置开始的时间戳
    let differ = end - start // 拿到数值差值
    // 创建每帧之前要执行的函数
    function loop() {
        raf = requestAnimationFrame(loop) // 下一阵调用每帧之前要执行的函数
        const passTime = performance.now() - startTime // 获取当前时间和开始时间差
        let per = passTime / time // 计算当前已过百分比
        if (per >= 1) { // 判读如果已经执行
            per = 1 // 设置为最后的状态
            cancelAnimationFrame(raf) // 停掉动画
        }
        const pass = differ * easing(per) // 通过已过时间百分比*开始结束数值差得出当前的数值
        callback(pass)
    }
    let raf = requestAnimationFrame(loop) // 下一阵调用每帧之前要执行的函数
}

测试一下，将我们刚刚创建的 easing 方法传进来

加速运动

let box = document.querySelector('.box')
animate(0, 500, 400, value => {
    box.style.transform = `translateX(${value}px)` // 将数值设置给 方块 的 css 属性 transform 属性可以控制元素在水平方向上的位移
}, easeIn)

加速后抖一抖

let box = document.querySelector('.box')
animate(0, 500, 400, value => {
    box.style.transform = `translateX(${value}px)` // 将数值设置给 方块 的 css 属性 transform 属性可以控制元素在水平方向上的位移
}, shake)

总结

这些只是 JavaScript 动画基础中的基础，理解动画的原理后，再做动画就更得心应手了。

市面上有很多JS动画库，大家可以开箱即用。有一些是针对DOM操作的，也有一些是针对 JavaScript 对象。实现原理你都已经懂了。

上述代码已发布到Github: https://github.com/fanmingfei/animation-base

我的另外两篇关于动画的文章：

• 为何 Canvas 内元素动画总是在颤抖？
• 前端动画/游戏开发 requestAnimationFrame 之 锁帧

CSS3 中使用 transform 可以对元素进行变换。其中包含：位移、旋转、偏移、缩放。 transform 可以使用 translate/rotate/skew/scale 的方式来控制元素变换，也可以使用 matrix 的方式来控制元素变换。

比如：

<div class="box"></div>

通过transform属性进行变换。

首先演示使用 translate/rotate/skew/scale 的方式：

.box {
    width: 100px;
    height: 100px;
    background: #00C487;
    transform: translate(10px, 20px) rotate(30deg) scale(1.5, 2);
}

也可以使用 matrix 的方式：

.box {
    width: 100px;
    height: 100px;
    background: #00C487;
    transform: matrix(0.75, 0.8, -0.8, 1.2, 10, 20);
}

查看demo

Matrix 的中文是矩阵，是一个数学术语，在计算机科学中，会用矩阵来对象量进行变换，在 CSS3 的 transform 属性中，可以使用矩阵对图像进行变换。

矩阵长什么样子？

矩阵可以分为一个形容词+一个名字，矩是形容词，阵是名词。

如果你喜欢看战争片，不管是古代战争还是现代战争，都需要有阵势，打仗没阵型，等于耍流氓；或者是开一局农药，可能也要考虑各个英雄的站位，各种球类运动、各种棋类都需要有阵型。

阵型中的每一个个体对整体的都会产生影响。比如打王者荣耀射手时候，射手应该猥琐在一个位置输出，站错位置，输掉整个游戏。

那，其实矩阵就是一些列的数字按照矩形排列。

在数学中，矩阵用方括号包裹起来。

上图就是一个矩阵。

CSS3 里的 matrix 如何和矩阵对应呢？

为什么要用矩阵来表示转换呢？因为在计算机科学中，矩阵可以对向量进行转换。矩阵中的每一个数字，对向量的转换都会产生影响。

CSS3 里面可以用矩阵表示 2D 和 3D 转换，这里只讲 2D。

selector {
    transform: matrix(a, b, c, d, e, f);
}

2D 的转换是由一个 3*3 的矩阵表示的，前两行代表转换的值，分别是 a b c d e f，要注意是竖着排的，第一行代表 x 轴发生的变化，第二行代表 y 轴发生的变化，第三行代表 z 轴发生的变化，因为这里是 2D 不涉及 z 轴，所以这里是 0 0 1。

假设一个问题

创建一个宽高为 200px 的div，div 里面有一个红色的点，位置是{x:181px y:50px}。

倘若将这个div 向右平移 10px，x 轴向下平移 20px，旋转37°，x轴缩放 1.5 倍，y 轴缩放 2 倍：

transform: translate(10px, 20px) rotate(37deg) scale(1.5, 2);

那么红色点的变化后的位置在哪里呢？

既然我们知道矩阵可以对向量进行转换那么我们只要把上面的信息转换成矩阵信息，通过矩阵信息可以将我们的原始坐标转换到新的坐标。

缩放 scale(x, y)

缩放对应的是矩阵中的 a 和 d，x 轴的缩放比例对应 a，y 轴的缩放比例对应 d。

transform: scale(x,y);

a=x d=y

所以 scale(1.5, 2) 对应的矩阵是：

transform: matrix(1.5, 0, 0, 2, 0, 0);

如果一个没有元素没有被缩放，默认a=1 d=1。

平移 translate(10, 20)

平移对应的是矩阵中的 e 和 f，平移的 x 和 y 分别对应 e 和 f。

transform: translate(10, 20)

e=10

f=20

对应： transform: matrix(a, b, c, d10, 20);

结合缩放： transform: matrix(1.5 0, 0, 2, 10, 20);

平移只会影响 e 和 f 值。

旋转 rotate(θdeg)

旋转影响的是a/b/c/d四个值，分别是什么呢？

transform: rotate(θdeg)

a=cosθ

b=sinθ

c=-sinθ

d=cosθ

这个是高中学的哦~

如果要计算 30° 的sin值：

首先我们要将 30° 转换为弧度，传递给三角函数计算。用 JS 计算就是下面的样子了。

// 弧度和角度的转换公式：弧度=π/180×角度 

const radian = Math.PI / 180 * 30 // 算出弧度

const sin = Math.sin(radian) // 计算 sinθ
const cos = Math.cos(radian) // 计算 cosθ

console.log(sin, cos) // 输出 ≈ 0.5, 0.866

这样我们算出了 sin 和 cos，分别是 0.5 和 0.866

如果我们不考虑缩放和偏移，只旋转30°，矩阵应该表示为

transform: rotate(30deg)

a=0.866

b=0.5

c=-0.5

d=0.866

transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);

偏移 skew(20deg, 30deg)

上面的题目中没有出现出现偏移值，偏移值也是由两个参数组成，x 轴和 y 轴，分别对应矩阵中的 c 和 b。是 x 对应 c，y 对应 b， 这个对应并不是相等，需要对 skew 的 x 值 和 y 值进行 tan 运算。

transform: skew(20deg, 30deg);

b=tan30°

c=tan20°

注意 x 对应的是 c，y 对应的是 b。

transform: matrix(a, tan(30deg), tan(20deg), d, e, f)

使用 JS 来算出 tan20 和 tan30

// 先创建一个方法，直接返回角度的tan值
function tan (deg) {
    const radian = Math.PI / 180 * deg
    return Math.tan(radian)
}

const b = tan(30)
const c = tan(20)
console.log(b, c) // 输出 ≈ 0.577, 0.364

b=0.577 c=0.364

transform: matrix(1, 0.577, 0.364, 1, 0, 0)

旋转+缩放+偏移+位移怎么办？

如果我们既要旋转又要缩放又要偏移，我们需要将旋转和缩放和偏移和位移多个矩阵相乘，要按照transform里面rotate/scale/skew/translate所写的顺序相乘。

这里我们先考虑旋转和缩放，需要将旋转的矩阵和缩放的矩阵相乘

实在是用语言解释不清楚如何去乘，用一张图解释吧：

这里我用小写字母代表第一个矩阵中的值，大写字母代表第二个矩阵里的值

将我们的已经得到的矩阵带入到公式

得出：

transform: rotate(30) scale(1.5 2);

转换为 matrix 表示为：

transform: matrix(1.299, 0.75, -1, 1.732, 0, 0);

找到这次转换的矩阵

div 的 transform 值如下

transform: translate(10px, 20px) rotate(37deg) scale(1.5, 2);

translate(10px, 20px)

x 平移 10px，y 平移 20px，所以 e=10，f=20。

rotate(37deg)

sin37° ≈ 0.6

cos37° ≈ 0.8

根据 a 对应 cos b，对应 sin，c 对应 -sin，d 对应 cos 的值

得到：

a=0.8，b=0.6，c=-0.6，d=0.8

scale(1.5, 2)

x 轴缩放 1.5，y 轴缩放 2，所以 a=1.5，d=2

结合

transform: translate(10px, 20px) rotate(37deg) scale(1.5, 2);

我们使用 位移矩阵 旋转矩阵 缩放矩阵（根据transform中的变换类型书写的顺序）

可以使用矩阵计算器进行计算

从左往右依次计算

所以最终得到矩阵

matrix(1.2, 0.9, -1.2 1.6, 10, 20)

验证一下

transform: matrix(1.2, 0.9, -1.2 1.6, 10, 20)

和

transform: translate(10px, 20px) rotate(37deg) scale(1.5, 2);

效果是一样的

如何对一个坐标进行矩阵变换

我们已经知道了这个矩阵，如何通过矩阵对一个坐标进行变化，找到这个坐标变化后的位置呢？

我们用之前得出的变换矩阵去乘以这一个坐标组成的3*1（三排一列）矩阵。

上面已经介绍过如何进行矩阵乘法了，这里在介绍一遍

上图中左右两个矩阵颜色相同的位置相乘后相加，每一行都进行这样的计算：

得到一个3*1的矩阵，第一行是转换后的 x 值，第二行是转换后的 y 值，第三行是转换后的 z 值（2d不考虑z值）。

前面讲到，矩阵的第一行影响 x，第二行影响 y，也体现在这个地方。

假设我们的坐标是(50, 80)，这里还没有针对我们提出的问题上面的点进行计算。

我们把坐标写成矩阵的形式，设置 z 轴是1：

然后进行乘法计算：

通过我们计算出来的矩阵变换得到新的位置(46, 172)

继续刚刚问题

坐标是需要基于一个坐标系存在的，我们需要找到正确的坐标系才能算出准确的坐标。 在 CSS transform 中，有个属性是 transform-origin，来设置变换所基于的点，默认是transform-origin: 50% 50%，基于中间元素的中心点。我们需要以这个点建立坐标系。

在网页中，坐标系是 x 轴向右，y 轴向下。

转换前：

转换后：

根据题目我们知道，这个点相对于绿色div左上角的坐标是(181, 50) 绿色div的宽高为200 基于绿色div中心点建立的坐标系，这个点的坐标是(81, -50)

将坐标代入公式进行计算：

得到坐标约为(167, 13)

再将这个坐标转换成页面坐标系(267,113)

最终我们得到了这个点在经过转换后的坐标

总结

矩阵在计算机图形学中运用非常多，就像我们经常用的PhotoShop，虽然是设计软件，但它的图形也是依赖各种数学能力进行计算后展现的。我们玩的游戏、看的3D电影，其实都和数学息息相关，学好这些知识，才能真正的成为发明者，即便不成为发明者，在应用层理解这些，让我们能做的事情更多。

本文错误的地方，欢迎斧正。

阿里巴巴智能场景事业部（Flab）是一支致力打造未来体验、探索未来科技的前沿团队，Flab技术团队综合利用人工智能、大数据、IoT等技术以及阿里巴巴独有的电商资源为线下新业务场景量身打造更加便利、快捷和科技感的用户产品和服务。这里我们广泛尝试、深入探索，不断追求技术与业务的最佳结合点，尝试从不同的维度定义未来生活。Flab技术团队也是一支快乐与Geek的团队，我们正在寻找同样快乐与Geek的小伙们加入我们！

如果你有意向，可以将简历发至：mingfei.fmf@alibaba-inc.com（坐标：杭州、北京均有）

3d引擎技术专家

资深客户端开发工程师

3D视觉算法

前端开发专家-图形学方向

资深前端开发专员/专家

资深java开发工程师/专家

资深算法专员/专家-算法几何分析方向

资深算法专员/专家-图像处理与视觉方向

资深算法专员/专家-大数据处理方向

资深算法专员/专家-机器学习方向

产品经理

产品运营

交互设计专家

视觉设计专家

这个属性可以设置字体大小。

我们已经了解了 CSS 尺寸单位，可以用于设置字体的大小。

p{ font-size: 16px;}

字体设置为 16px 并不代表每个字都是 16px，具体的大小取决于字体的字体。

font-style

这个属性可以把你的字体变成 _斜体_：

h2{ font-style: italic;}

默认值是： font-style: normal;.

另外一个可选的值是 oblique，但是基本不用。

font-weight

这个属性可以设置字体粗细：

h2{ font-weight: bold;}

默认值是：font-weight: normal;.

根据字体所用的 font-family，这里的值可以设置成 100 到 900：

font-weight: 100; /* Thin */
font-weight: 200; /* Extra Light */
font-weight: 300; /* Light */
font-weight: 400; /* 与 font-weight: normal; 相同 */
font-weight: 500; /* Medium */
font-weight: 600; /* Semi Bold */
font-weight: 700; /* 与 font-weight: bold; 相同 */
font-weight: 800; /* Extra Bold */
font-weight: 900; /* Ultra Bold */

很少有字体会支持所有的粗细程度。

font-variant

这个可以将文本显示为小型大写字母

h2{ font-variant: small-caps;}

默认值为：font-variant: normal;.

这个属性用的不多。

line-height 属性可以使用下面的单位：

• px
• em
• %
• 无单位, 比如 1.5

在没有单位的时候，它的工作原理类似百分比。比如 150% 和 1.5 是一样的。后者更实用可读。

为什么 line-height 非常重要

line-height 通过增加行间距，让你的文本更容易阅读。文本的大小影响可读性，建议使用相对与文本动态的值来设置行高，也就是无单位的值，不要使用px，因为使用px以后行高写死，如果字号变大，文字将会重叠。

当然 px 也是很有用的，比如说你想让一行文字对于整个块级元素上下居中，那么你可以设置行高为元素的高度。

因为使用 % 或 em 的可能产生意想不到的效果，推荐使用 无单位 的值

• 在文章中，建议使用1.5倍行高
• 在文章标题中，建议使用1.2倍行高

body{ font-size: 16px; line-height: 1.5;}

通过计算，行高是 16 * 1.5 = 24px

Line-height 继承

行高是会被子元素继承的：

body{ font-size: 16px; line-height: 1.5;}
blockquote{ font-size: 18px;}

blockquote 元素的行高会是 18*1.5 = 17px