专栏首页极乐技术社区DEMO | 小程序实现三种TabBar创意动画

DEMO | 小程序实现三种TabBar创意动画

DEMO

概述

小程序日益增多的情况下,UI风格显得越来越重要,在页面中如果能让TabBar个性化一点,加一些小交互,用户体验会大大提升。由于小程序对svg不太友好,所以我们尽量使用css动画进行实现。

第一种:文字默认隐藏并缩小效果

这种效果主要使用了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); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8);

width: 100%;

}

.tabbar .item.active .text{

opacity: 1;

transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1);

}

.tabbar .item.active .icon{

color: #3561f5;

transform: translateY(-55rpx); -webkit-transform: translateY(-55rpx); -moz-transform: translateY(-55rpx); -o-transform: translateY(-55rpx);

}

.tabbar .item .icon{

font-size: 50rpx!important;

text-align: center;

transition: all .8s;

}

第二种:跳跃式切换

这个效果用到一个css动画工具库:bouncejs,它可以在线生成css动画,然后复制到项目中使用即可。下方效果采用跳跃式切换,整体看上去非常有活力。使用了animation动画。由于css动画代码过多,想看完整代码见文末源码包。

第三种:简单跳动切换

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

下载链接

链接: 点击“阅读原文”

极乐技术社区

本文分享自微信公众号 - 极乐技术社区(wxapp-union),作者:陇锦

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-06-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 值得一看的小程序 TabBar 创意动画

    Hi 头像最近进行了 v2 版大改版,其中的交互动画得到了不少好友的称赞。今天我就来分享一些关于小程序 TabBar 创意动画,将从 TabBar 类型、完整的...

    一只图雀
  • 零基础学开发,她做了款「仿知乎」小程序 | 实战教程

    知晓君
  • Flutter NestedScrollView实现的一个经典滑动折叠头部图片的效果

    Flutter NestedScrollView 滑动组件是用来处理复杂情况下的滑动应用场景,如向上滑动视图时,要折叠隐藏一部分内容,这时候就需要使用到 Nes...

    早起的年轻人
  • 张小龙发布2018微信计划 | QQ 推出「玩一玩」小游戏平台

    轻松一刻 ? 漫画来自于西乔《神秘的程序员们》 01 张小龙现场“约战”跳一跳,发布2018微信全新计划 2017 年 1 月 15 日,微信公开课 PRO 版...

    极乐君
  • 小程序搜索栏新增“搜索历史” | 微信iOS版更新至6.6.0 ,客户端大更新、公众号界面、后台改版

    轻松一刻 ? 漫画来自于西乔《神秘的程序员们》 01 小程序搜索栏新增“搜索历史” 近期,极乐叔发现微信中出现了小程序历史搜索,在小程序发现栏中点击小程序搜索框...

    极乐君
  • iOS中tabBar按钮再次点击实现界面刷新(包含完整demo)【特色功能:在更新数据期间旋转tabbar的icon】

    公众号iOS逆向
  • iOS开发常用之网络

    GuangdongQi
  • iOS支付项目实践专栏- 总目录(持续更新)

    本专栏以实战为线索,逐步深入iOS开发各个环节,掌握支付APP常用的基础功能(均含demo源码),打造完整native客户端工作流,提升工程化编码能力和思维能力...

    公众号iOS逆向
  • 小程序学习笔记分享(含1-tabBar、轮播图和九宫格)

    今天分享一些学习小程序的代码,希望大家喜欢。

    疯狂的小程序
  • 小程序将有直播新能力

    轻松一刻 ? 漫画来自于西乔《神秘的程序员们》 01 微信公开课成都站:未来发展将关注商户如何获取更多收入和收益,小程序将有直播新能力 11月21日上午,在微信...

    极乐君
  • 使用原生开发高仿瑞幸小程序(一):使用 Vant 组件库和配置多页面

    为什么要跨平台,自然是为了节约成本。尤其是创业初期,需要快速迭代,快速试错。此时用原生技术,开发起来未免太过拖沓。我所想的是,如何能够快速的,最大化的覆盖屏幕数...

    一只图雀
  • 一周小程序【资讯教程】更新

    轻松一刻 ? 漫画来自于西乔《神秘的程序员们》 官方资讯更新 [新功能]小程序再添新功能,APPx生成工具要火的节奏! 小程序又上线新能力——云监控 最新《20...

    极乐君
  • 小程序快速入门教程 1.1 小程序开发入门

    结合刚创建的 DEMO,大致了解下小程序的文件结构和页面组成,详细的内容可以查看 小程序代码构成。

    twowinter
  • 微信小程序动画两种实现方式

    利用小程序API提供的wx.createAnimation(OBJECT)实现,API中是这样说:创建一个动画实例animation。调用实例的方法来描述动画。...

    Javanx
  • Flutter完整开发实战详解(二、 快速开发实战篇)

     作为系列文章的第二篇,继《Flutter完整开发实战详解(一、Dart语言和Flutter基础)》之后,本篇将为你着重展示:如何搭建一个通用的Flutter ...

    GSYTech
  • Flutter完整开发实战详解(二、 快速开发实战篇)

     作为系列文章的第二篇,继《Flutter完整开发实战详解(一、Dart语言和Flutter基础)》之后,本篇将为你着重展示:如何搭建一个通用的Flutter ...

    GSYTech
  • 手把手带你入门微信小程序新框架---Kbone

    微信小程序诞生至今,渗透到用户生活的方方面面,包括餐厅点餐,网上购物,乘车出行,挂号就医……

    极乐君
  • Ios常用第三方框架(二)

    honey缘木鱼
  • 微信开发--微信小程序(四)

    1.小程序向后台请求接口必须使用https,包括web-view里的网页,如果项目中有用到web socket,那么也必须使用wss协议。https证书一般会用...

    生南星

扫码关注云+社区

领取腾讯云代金券