万科上周连续发布俩个以画图功能为主的H5。画图功能最大的卖点在于一步步蚕食用户的好奇心，并参与其中甚至掉入设计者的大坑中。

下面我总结了H5画图功能的两大套路，希望能教会大家如何把这些套路现卖现用，制作人生第一个带有画图功能的H5。

套路一：你画的东西只不过是个幌子

画图功能的吸引之处就在于加强用户的参与度，《画出属于你的夏日座驾》就是一个好的例子，虽然用户画出来的小人会被替换掉，但是用户就是想去画。

原理有三：

①先设置能给用户画图的窗口，并提示用户去动手画小人

②通过一定的动画、过渡素材进行触发

③让用户画出来的小人带着动效消失

下面是我在iH5后台上效仿的一个小作品（运用的功能有画图、按钮、事件、动效）：

画图功能还支持预设。意思就是说我可以事先画好一部分东西，然后再让用户来画。

比如我在刚效仿的作品基础上，自己画了一只狗，再让用户画个人来牵住它：

套路二：你画的东西绝对是主角！！

先来看看下面这俩案例：

神笔马良下笔成真，你画的小人就是贯穿整个故事的主角。就拿361°的H5来说，画出小人，模拟给小人穿上鞋子，小人奔跑起来跨过障碍，打败怪兽...不按套路出牌的剧情更是防不胜防。

在上面这个开发者案例中，人物的指向性奔跑、箭的抛物线飞向靶心，这些交互效果背后也只是时间轴动画。

实现步骤如下：

• 首先得设置好时间轴下的画图轨迹，分为5个时间节点调整其坐标属性。
• 时间轴属性：自动播放 no ；循环播放 no。
• 当画图完成点击触发的按钮时，事件触发时间轴的播放。

在操作上十分简单明了，在设置各帧属性的时候千万别忘了先点击选中关键帧再改变属性，不然是白费的。

当然你也可以做更为复杂的时间轴动画，只要你有耐心和很好的线性规划，尝试延长时间轴时间，设置多点相关的关键帧，把整个时间轴动画丰富起来。

三、我该如何玩转画图功能

在画图的应用上除了画笔，还有与之相呼应的橡皮擦功能——擦拭。

大致设想的逻辑是用户得用橡皮擦擦拭掉某样东西，才算是完成了交互。

比如我可以这样做：提示用户图案擦拭干净，借此触发控制GIF素材的播放。

先来看看我简单做出来的效果：

这涉及两个层面——GIF的暂停和播放、擦拭面积触发交互。

制作过程讲解：

1.准备好GIF素材：

把GIF用图片序列导入到编辑器，在画图功能上加载需要擦拭的背景图案。

2.在画图功能下用事件组来控制相应的逻辑：

用事件组的优势在于其能优化案例后台的运行速度，相对地形成系统化的事件管理。但也有一定的局限，毕竟事件组的设置只能针对同一触发条件的事件。

现在有很多设计师在H5中做页面过渡也会用到这种手法，模拟iPhone向右滑动解锁？模拟安卓绘手势解锁？简直无压力。

打开脑洞想想呗，画图+擦拭，这俩玩意相信还能玩出更多新花样。