用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

小程序入门:一个可爱的互动登陆面板

纸飞机 2018-3-8 09:34

作者:哲学李论,来自原文地址 先看效果:在屏幕上添加互动,能为产品体验加分不少,这就是所谓的互动设计。在Flash中,捂脸与放手是分别是动画的两帧,用户单击号码框与密码框,触发的是gotoplay指令。但是图示显然 ...

作者:哲学李论,来自

原文地址

先看效果:

在屏幕上添加互动,能为产品体验加分不少,这就是所谓的互动设计。在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,很方便。产品体验不错。
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏