先看效果：
在屏幕上添加互动，能为产品体验加分不少，这就是所谓的互动设计。在Flash中，捂脸与放手是分别是动画的两帧，用户单击号码框与密码框，触发的是gotoplay指令。
但是图示显然不是用Flash动画实现的。
这种状态下趴着的这两只手，是用css样式border-radius外加transform实现的效果：
hand与hand-r只是x偏移不同。当单击密码框时，通过setData给双手圆点添加了一个hand-password样式。
新加的新式只是改变了它的transform：
transform相当于对象的帧，代表视图对象的一个状态。
transition:0.3s ease-out;
而transition是定义动画时间、变换速率、延迟时间（附例未用）的。为view添加了transition属性，代表启用了样式切换的动画。
在css中，transition相当于gotoplay及动画桢率。而transform相当于动画的桢。
明白了机理，另外的手臂效果也很好理解了。是通过arm 与arm-password两个样式控制的。不同处在于arm是image，本身带有图片内容。
相关样式切换是通过密码框的blue事件驱动的，当密码框获得焦点时，变量inputPassword为true。命名为inputingPwd更好。
好心的作者已经将源码开源了，查看源看，喜欢拿去使用：
https://github.com/CodeDaraW/WeApp-LovelyLogin
最后给大家分享一下，文首的那个gif动画是如何制作的。
首先你需要在 Mac 上安装最新版本的 QQ 软件，这样才能使用它的录屏功能。
接下来可以通过点击 QQ 聊天窗口中的截图功能，如下图所示。
选择录屏，然后拉选一块屏幕区域，就可以录制了。可以导出为mp4或gif，很方便。产品体验不错。
---
我在知乎开了一个live，4月22日晚（周六）8点半我在知乎与大家见面：
【0基础周末学习小程序开发】
https://www.zhihu.com/lives/832919740296101888
在【哲学李论】公众号回复"0基础周末学习小程序开发"，可以免费领券，限量500名。
在微信公众号哲学李论，回复“小程序入门集锦”可以看到这个系列的所有文章。
如果觉得本文还行，请转发给朋友。
好文章与10W艺友分享，欢迎推荐：liyi@rixingyike.com。
网友评论