小程序实现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。 👉关注前端365：分享前端小技巧以及开发过程中的一些问题，欢迎关注+收藏+点赞，感谢支持～
