小程序TabBar动画技巧 |
您所在的位置:网站首页 › 微信小程序跳转tabbar › 小程序TabBar动画技巧 |
小程序实现TabBar创意动画(文末附完整源代码)
小程序日益增多的情况下,UI风格显得越来越重要,在页面中如果能让TabBar个性化一点,加一些小交互,用户体验会大大提升。由于小程序对svg不太友好,所以我们尽量使用css动画进行实现。之前文章小程序开发技巧中提到过TabBar自定义方案,感兴趣的可以了解一下。下面就分享一下今天写的几个交互效果,文末也会分享源代码。记得点赞+关注+收藏! NO.1这种效果主要使用了transform和opacity来实现。文字默认隐藏并缩小,点击后icon图标transform的y轴方向上移,同时控制文字的opacity。圆形块根据点击的index去动态计算x轴的偏移位置即可。 核心css代码(完整代码见文末): .tabbar .item .text{ position: absolute; width: 100%; bottom: 10rpx; text-align: center; font-size: 22rpx; opacity: 0; transition: all .8s; transform: scale(0.8); width: 100%; } .tabbar .item.active .text{ opacity: 1; transform: scale(1); } .tabbar .item.active .icon{ color: #3561f5; transform: translateY(-55rpx); } .tabbar .item .icon{ font-size: 50rpx!important; text-align: center; transition: all .8s; } NO.2这个效果用到一个css动画工具库:bouncejs,它可以在线生成css动画,然后复制到项目中使用即可。下方效果采用跳跃式切换,整体看上去非常有活力。使用了animation动画。由于css动画代码过多,想看完整代码见文末github地址。 NO.3下方这个效果还是用bouncejs在线编辑,编辑完成后只需要点击后给相应的元素添加类名即可。 结尾如需源代码可以移步github。 👉欢迎关注+收藏+点赞,感谢支持~ |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |