前端那些花里胡哨的动画效果—轮播和内容的手势切换

效果


这应该是博客里面最后一个比较麻烦的动画了,但跟之前的轮播相比还算是简单的。



分析


给整个页面容器绑定touch事件,可能是因为中间的轮播图让整个页面挺有效果的,实际上还是之前封装的轮播组件,核心是同时改变轮播图容器和内容的位置

整体效果有4个断点,上下滑动距离过短时回弹至原来位置,上滑距离够长时内容滑动占满整个页面,下滑距离够长时轮播图占满整个页面,同时还需要改变轮播图的原item大小。


实现

利用vue动态绑定style的方式,图片容器不断改变高度,而内容则是使用translate来改变



手势处理还是老三样,开始记录位置,移动改变偏移位置,结束时候做断点状态处理,并且记录上次移动位置,不然再次移动位置会错乱。

可能在移动的move会有点纠结,c_offsetY是内容位移位置,而b_offsetY是图片banner高度位置,内容初始状态位移为0,因此比较容易处理,而图片banner高度初始状态是屏幕高度 / 2,也就是w_clientY / 2,因此需要基于这个进行位移,同时还要记录最后的位置处理。


最后就是touchEnd的四个断点处理了,以屏幕高度的四分之一来作为断点,唯一需要注意的一点是关于banner轮播,展示轮播时需要改变轮播item宽度,所以改变之后nextTick处理一下,之后重新初始化轮播就可以


0个评论
点击登录,快来和大家讨论吧~
表情
图片
暂无评论
_Async__
作者分享
前端项目分享:Q Maker——仿问卷星低代码项目
25
2023年度总结:我们的生活没有“如果”
69
一个真实二本学院的秋招:停止内耗,接受自己的平庸
94
求职经验分享——两周的求职历程
22
#蓝桥杯# web 今年的蓝桥杯属实是上压力了,作为一名稀有的web组选手(今年我们软院名单上好像就我一个web组,去年两个[捂脸]),按照去年省赛的难度的话压根要不了4个小时,但刚拿到试卷扫了一眼,瞅到了最后两题的名字就感觉难度上来了。 不过前几道题难度确实不是很大,但很明显给人的感觉就是web组的出题更加成熟了,比如没有像去年那种写两行css就a一道题,纯css的题目像还原设计稿就没有了,不过第一道题的grid布局,确实还挺不错的,如果不是后面有个响应式的题用grid布局的代码我就g了,最后比葫芦画瓢也能写的出来。 其次就是个人感觉削弱了JQuery的比重,jQuery虽然也有使用但没有像去年题目那样带来极大的便利,这次我依旧是原生写JS,感觉使不使用差别不是特别大。 只能说有点水平的就是最后两题:markdown解析、树形结构拖拽 markdown的还好,一是看正则基础,二是对于blockquote和ul需要费点功夫,看得出来web组对于正则的要求一直都是有的。 最后一道就有点东西了,个人在上面那道题费了太多时间,最后一道时间明显不太够了只写了送分的那一问。大概看了看应该是原生手写递归组件,之前只用vue写过类似多级评论,递归菜单这样的。虽然原理都一样但是原生还是有点虚,第三问应该就是类似树形结构查找,扁平化删改这样,当时也没仔细看,一会儿扒扒原题再研究研究。 整体来讲还是比较考验基础的,像使用框架的题目分值就那么多,压轴的题永远是看你的原生JS能力。难度确实比去年省赛的题目大,但个人感觉这才是正常的比赛,去年省赛和国赛的难度差别过大反而不太适应,今年听天由命得了,也是最后一次了,可能要捐款了。。
19
下载 APP