likes
comments
collection
share

小程序实现TabBar创意动画(文末附完整源代码)

作者站长头像
站长
· 阅读数 18

小程序实现TabBar创意动画(文末附完整源代码)

NO.1

这种效果主要使用了transformopacity来实现。文字默认隐藏并缩小,点击后icon图标transformy轴方向上移,同时控制文字的opacity。圆形块根据点击的index去动态计算x轴的偏移位置即可。

小程序实现TabBar创意动画(文末附完整源代码)

  • 核心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地址。

小程序实现TabBar创意动画(文末附完整源代码)

NO.3

下方这个效果还是用bouncejs在线编辑,编辑完成后只需要点击后给相应的元素添加类名即可。

小程序实现TabBar创意动画(文末附完整源代码)

结尾

转载自:https://juejin.cn/post/6963194943506645005
评论
请登录