H5动画的那些事儿~

一只想成为PM大咖而且很不安分的猴纸...

动画是场景过渡、吸引用户注意力的常用手法，在各种H5应用中也是屡见不鲜。今天码点有关动画的介绍，动画可分为三类：进入、强调、退出。一个对象要想产生动画，无非就是对象的位置、角度、大小、透明度在一定时间的变化。

进入动画关心的是动画从无到有的显示效果，这些动画一般用在页面预加载的时候，为了减少用户的焦虑等待感，常常会使用一些进入动画使得页面本身更加活泼有趣，其实这个时候程序正在后台请求服务器资源呢(^o^)，常见的手法有弹跳出现、淡入、光速、旋转进入、滑动进入、放大进入。

进入动画强调的是动画从无到有，而强调动画则强调的是动画从有到有，第一个有是对象的初始状态，第二个有强调的是对象的状态变化态，这2个状态的变化起到了强调突出的目的。在H5中为了突出比较重要的按钮，为了吸引别人的注意力，常常会让这个按钮一直抖动下。

和进入动画相反，退出动画，使对象从有到无。当对象没有被事件（点击、滑动等等）触发时，对象是在屏幕上的，当触发后，对象则会按照预先设定的动画效果消失。在H5中最为常见的就是各种弹窗的关闭动画。微信的收藏功能还是挺强大的，Android版的微信 6.3.16对收藏进行了一次小升级，现在可以在收藏的同时编辑收藏的标签，这次小升级还是挺方便的，不过IOS版微信 6.3.16还不能支持，应该也不远了吧。

虽然优化了，但还是得吐槽下：

1，收藏的按钮是在页面的右上角，但是编辑标签是放在页面的右下角，位置上不易发现

2，时间上虽然有3.5s左右的存留时间，但操作上始终觉得不舒服

3，添加完标签后直接回到页面，却并未给任何反馈，给用户心理造成疑惑，并不知道自己是否真的添加成功

建议优化如下：

1，保存成功的提示放在页面中央

2，如果只保存，提示已保存；如果保存后又成功执行了添加标签操作，提示标签已添加；如果保存后点击了去添加标签但是却并未执行，仍然提示已保存就好了

【关于我】

外号：小猴子

刚毕业一年的逗比猴一枚，本科修的是信息管理与信息系统专业，热爱产品热爱生活，喜欢交互喜欢UI喜欢前端，爱“搞机”爱把玩各种逗比的APP。好好学习，天天向上。

    关注 猴哥