【小程序入门集锦】12，一个可爱的互动登陆面板

2017-04-12 本文已影响60人石桥码农

先看效果：

在屏幕上添加互动，能为产品体验加分不少，这就是所谓的互动设计。在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更好。

好心的作者已经将源码开源了，查看源看，喜欢拿去使用：

最后给大家分享一下，文首的那个gif动画是如何制作的。

首先你需要在 Mac 上安装最新版本的 QQ 软件，这样才能使用它的录屏功能。

接下来可以通过点击 QQ 聊天窗口中的截图功能，如下图所示。

选择录屏，然后拉选一块屏幕区域，就可以录制了。可以导出为mp4或gif，很方便。产品体验不错。

---

我在知乎开了一个live，4月22日晚（周六）8点半我在知乎与大家见面：

【0基础周末学习小程序开发】

在【哲学李论】公众号回复"0基础周末学习小程序开发"，可以免费领券，限量500名。

在微信公众号哲学李论，回复“小程序入门集锦”可以看到这个系列的所有文章。

如果觉得本文还行，请转发给朋友。

好文章与10W艺友分享，欢迎推荐：liyi@rixingyike.com。