那些炫酷的特效--QQ空间+VUE

废话,可以跳过

在这个色彩斑斓的时代,各种app、各式各样的特效充斥着我们的眼球。在我看来,炫酷的特效在很大程度上是能够博取用户的好感,提高用户体验的。而这些酷炫的交互方式是没有界限的,所以一些好的app特效也可以为网页所用。以此为宗旨,我以vue为基础,将QQ空间的一些特效进行了重现,一来锻炼自己组件化开发的思维,熟悉vue的使用,二来也是希望为大家在一些特效的实现上提供一些思路。(本文重点讨论特效的实现原理,不作任何代码的解析)

本来是想用vue全家桶仿一个完整的QQ空间,但是写着写着,感觉这样做的意义其实并不大(其实就是犯懒了,还得花时间准备面试)。但又不想荒废掉原来的代码,所以就改吧改吧,然后做一个特效的分享。

技术栈

vuex: 没什么卵用,就是想证明我会用。
better-scroll:本来想用原生方法来做一些滑动的,事实证明这就是在浪费时间,因为我根本搞不定 :(

正文

弹出层特效

先讲一个最简单的特效,简单到我都不知道要怎么描述:


弹出层特效
弹出层特效

最中间的+图标是本体,点击之后显示一个弹层,然后播放8个图标的动画,控制8个图标的速度不同,达到一种动态,活泼的特效。第二次点击弹出层消失,值得注意的是弹出层必须要在动画播放完成之后才能消失,不然效果会很突兀,所以需要用到animationend事件。

窗户特效

我管它叫作窗户特效,因为它给我感觉就像一扇窗户:

窗户特效
窗户特效

这个特效主要做的事就使图片在顶部可以下拉刷新,而在向上滚动时又会跟随滚动,经过再三思考我决定这样实现这个效果:
真-窗户特效
真-窗户特效

真相就是这样0.0,两张相同的图片!只需要在滑动到顶部时使上层的图片透明,就可以轻松实现这个效果了。
这里还有一个特效就是顶部的标题栏的渐变、收缩、下拉刷新的效果,故意放慢了动态图的速度,就是想让大家注意到它。虽然实现的逻辑很容易理解,但是真正实现还是需要花一番功夫的,这里用到了作用域插槽slot将组件的状态传递给slot。

可编辑导航列表

一个可编辑的导航列表,接受一组列表数据和初始需要显示的列表长度:


可编辑导航列表
可编辑导航列表

这个特效就花了我较多时间了,主要是卡在了如何切换弹出状态和正常状态,目前主要思路是--分离编辑状态和正常状态。具体的意思就是,给每个项再额外添加一个 index属性和translateY来记录它在编辑时的序号和位移。然后在切回正常状态时,再按照编辑后的序号重新排列每个项,重置位移,使列表的真实序列变为编辑后的序列,具体还有许多细节,大家想了解的话可以去看代码(有注释) ( :

简约弹框

简约弹框
简约弹框

这就是一个带有遮罩层的弹窗。值得一提的是,它是一个全局组件,可以显示传入的不同数据,这也是唯一一个有必要用到vuex的组件。弹窗的位置是根据点击的位置是否在屏幕的上半部分(下半部分),如果内容超过屏幕的一半--我也不知道会发生什么,反正不会好看就是了。最后那个小角就是一个旋转的小正方形:)

废话

这次的QQ空间特效分享就结束了,还有一些小特效没有实现,并且原本想解决一下移动端软键盘的问题的,最后还是不了了之(懒癌又犯了)。这是代码,大家拿去玩吧,万一玩出个什么bug就可以回来喷我了,反正我也不会:>
QQ、邮箱:774061539--无业游民

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转载 :OpenDiggawesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库...
    果汁密码阅读 23,212评论 8 124
  • 来源:github.com Vue.js开源项目速查表:https://www.ctolib.com/cheats...
    zhangtaiwei阅读 11,684评论 1 159
  • 1. 初中的时候,我的语文老师在课堂上做过一个“游戏”。 即使在那个还不懂得什么叫做矫情的年纪,这个“游戏”也让全...
    李小狼不狼阅读 5,479评论 50 126
  • 男人四十一枝花,这是为什么?因为当一个男人成长到四十岁,已经有了足够的生活以及社会各方面的阅历,无论是在外表还是在...
    男人风尚club阅读 308评论 0 0
  • 按照昨晚的想法,我今天趁孩子午睡的时候去拍了一些照片,现在还差中三班的照片,还有小中大班的体能活动照片,早操视频以...
    刘piano阅读 187评论 0 0