swift tabbar点击的动画效果_Taro 版 | 小程序 TabBar 创意动画

最新推荐文章于 2024-09-05 15:18:35 发布
最新推荐文章于 2024-09-05 15:18:35 发布
阅读量1.4k 收藏 9
点赞数 1
文章标签： swift tabbar点击的动画效果

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

8fc6e1e668410d9da08e25a243adfea0.png

为何要使用自定义 TabBar 效果呢？在页面的抽屉动画、TabBar 组件、添加图像素材按钮的多种要求下，我们只能选择使用自定义 TabBar 动画了。

基础知识

默认 TarBar

Tabbar[1] 在 app.json 中配置，作用范围为 TabBar 页，常驻页面最底部，占据页面高度 50px，有 iPhone x 全面屏适配。

tabBar: {
  custom: true,
  backgroundColor: '#DEE8FF',
  borderStyle: 'white',
  color: '#95a1af',
  selectedColor: '#2f5aff',
  list: [
    {
      pagePath: 'pages/theme-list/theme-list',
      text: '主题',
      iconPath: 'images/tab-theme-1.png',
      selectedIconPath: 'images/tab-theme-2.png'
    },
  ]
}

下图为小溪里参与维护的 CCtalk 出品的“打卡鸭”小程序。

7a2b1677797c7c3d8ad019ce2d24535e.png

全局自定义 TarBar

自定义 tabBar[2]可以让开发者更加灵活地设置 tabBar 样式，以满足更多个性化的场景。

在自定义 tabBar 模式下

  • 为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。
  • 此时需要开发者提供一个自定义组件来渲染 tabBar，所有 tabBar 的样式都由该自定义组件渲染。推荐用 fixed 在底部的 cover-view + cover-image 组件渲染样式，以保证 tabBar 层级相对较高。
  • 与 tabBar 样式相关的接口，如 wx.setTabBarItem 等将失效
  • 每个 tab 页下的自定义 tabBar 组件实例是不同的，可通过自定义组件下的 getTabBar 接口，获取当前页面的自定义 tabBar 组件实例。

简单来说：

  • 使用 CSS fixed 将 Tabbar 固定到底部，需要做 iPhone x 全面屏适配
  • 在切换页面(onShow)后，设置当前高亮的 TabItem
53c1b486ed110412639e6cbd9fc0c4db.png

注意：如需实现 tab 选中态，要在当前页面下，通过 getTabBar 接口获取组件实例，并调用 setData 更新选中态。

show() {
  if (typeof this.getTabBar === 'function' && this.getTabBar()) {
    this.getTabBar().setData({
      selected: 1
    })
  }
}

以下为全局自定义 TabBar 的几篇文章：

  • 小程序自定义底部导航栏组件[3]
  • Taro 3.x 设置自定义 TabBar[4]
  • 基于 Taro 封装微信小程序的 tabBar[5]
  • taro 中自定义 tabbar 实现中间图标凸出效果[6]

页面单独调用自定义 TabBar

每个页面调用 TabBar，页面内控制组件更加灵活。

这种方式可以视为每个 TabBar 都单独调用了 TabBar 组件。

bf0157d238eadf1405eff139c7e0ba10.png 
  selected={tabBarIndex}
  hideIndex={tabBarIndex === 1 && !isShowShape ? 1 : -1}
/>

动画调研

抽屉动画演示

在移动端 UI 中汉堡包菜单配合抽屉式弹出动画是很常见的交互动效之一。首先，我们来看几个比较经典的动画效果：

气泡动画参考

气泡动画的核心点为，几个子按钮按照圆心分布，弹出有先后。

https://codepen.io/0guzhan/pen/YvNmwJ

b3332d817b83ebf6f6f36a6707c71f8a.png

抽屉式动画抽屉式动画要点为

  • 页面容器内有菜单和页面主内容两个子容器
  • 带回弹效果的交互动画会更有趣

https://codepen.io/andrejsharapov/pen/jJXEGq

fcb8678ac42ceb03efaced3f803c8197.png

https://codepen.io/tylerfowle/pen/vEqXMV

7be847b7260d7bed18af14b8e4c40d32.png

通过对上面抽屉动画所对应页面布局进行分析，我们可以发现，TabBar 组件只能放在当前页面中,作为“主要页面内容”模块被缩小。

aba2f7c74958cf7a882b4f157eb92e51.png

底部 TabBar 动画

通过对国内常见的几十款 APP 进行分析，我们可以得出以下几个特点

  1. 大部分 APP 的 TabBar 的交互动画中除了有类似小程序那样的几个页面 TabBar 外，都会有“+”号或者“▶”的主按钮
  2. 在 TabBar 上 都会有一些微动画，比如爱奇艺 APP 上的气泡动画和京东 APP 上的图标转场动画。
爱奇艺京东
1)气泡动画
2)粘连动画		Icon 高亮动画
a055a336882ee8247f34dd274e78f5c0.pnga22658254b283902d970bebed26bd43f.png

视频演示：https://v.qq.com/x/page/k3161mu12nw.html

动画试验

动画 1——粘连菜单

下方动画基于 CSS filter 滤镜与 SVG 高斯模糊实现，在 web 端上没有问题，但在真机上小程序上不支持。

0d3f58350c32119e434ce1187aa318ed.png

效果源码：https://codepen.io/siseer/pen/MBameP

这篇《微信小程序 CSS filter(滤镜)的使用示例[7]》讲了大部分 CSS 滤镜效果，但都是基于微信开发者工具的，在真机上只有 filter(abc.svg#goo) 的这个不支持。

知识点补充

《粘连效果实现[8]》 对应的示例：https://codepen.io/leevare/pen/yxxMMq

动画 2——SVG 路径

既然黏连动画在小程序上无法实现，我就尝试换成了 SVG 路径来实现动画。那为何不使用 CSS 圆角矩形呢？因为圆弧与直线的连接处要做“过渡”效果的。

58a46b405a5358f9a7220bd7db74452a.png

效果源码：https://codepen.io/ainalem/pen/KBvOWV

Hi 头像动画简述

视频演示：https://v.qq.com/x/page/c3161x3vo8v.html

Tab 页切换动画

(具体效果情况请看上面的视频)

Tab 页切换有两种实现思路：

  • 分为多个有页面实体的 Tab 页
    • 在页面切换后，需要重新产生 TabBar 组件实例
    • 切换动画不够理想，但页面逻辑完全独立
  • 在一个实体页面内
    • 用 Tabs 组件包含多个 Tab 子页面(组件)
    • 几个组件的逻辑相对独立，切换动画会更好

特别说明，Hi 头像的 TabBar并非使用 fixed 布局，而是用了页面 100% 高度配合 flex 布局，具体可以看 https://face.xiaoxili.com。

95b95dd9a94db74918cdbcb5ead5e8b4.png 
// 示意源码
import Taro from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import { isIphoneSafeArea } from 'utils/common'
import './styles.styl'

const IS_IPHONEX = isIphoneSafeArea()

export default class CustomTabBar extends Taro.Component {
  ...

  static defaultProps = {
    selected: -1,
    hideIndex: -1
  }

  constructor(props) {
    super(props)
    this.state = {
      list: [
        {
          pagePath: '/pages/theme-list/theme-list',
          text: '主题',
          iconPath:  Taro.getEnv() === 'WEB' ? require('../../images/tab-theme-1.png') : '../../images/tab-theme-1.png',
          selectedIconPath:  Taro.getEnv() === 'WEB' ? require('../../images/tab-theme-2.png') : '../../images/tab-theme-2.png',
        }
      ]
    }
  }

  switchTab = (e) => {
    const data = e.currentTarget.dataset
    const url = data.path
    Taro.switchTab({ url })
  }
  render() {
    const { selected, hideIndex } = this.props
    const { list } = this.state
    return (
      <View className={`tab-bar ${IS_IPHONEX ? 'bottom-safe-area' : ''} ${hideIndex === selected ? 'tab-bar-hide' : ''}`}>
        {
          list.map((item, index) => {
            const { pagePath, selectedIconPath, iconPath, text } = item
            return (<View key={text} hoverClass='tab-bar-item-hover' className={`tab-bar-item ${selected === index ? 'tab-item-active' : ''}`} data-path={pagePath} data-index={index} onClick={this.switchTab}><Image className="tab-bar-image" src={'' + (selected === index ? selectedIconPath : iconPath)}>Image><View className="tab-bar-text">{text}View>View>
            )
          })
        }View>
    )
  }
}

TabBar 源码地址：https://github.com/hi-our/hi-face/tree/master/taro/src/components/custom-tab-bar

按钮弹出动画

(具体效果情况请看上面的视频)

在 v2 版 Hi 头像里，添加头像素材的按钮是在 TabBar 组件中“加号”中弹出，其中关键点为“同心圆布局”和“动画延迟”。

视频地址：https://v.qq.com/x/page/z3161kzeiwx.html

同圆心布局是按照圆心进行布局的，比计算 X 轴 和 Y 轴的偏移量更方便更准确transform: rotate(-60deg) translateY(-85px) rotate(60deg);

动画延迟，多个按钮菜单项所对应的动画在执行时需要加上动画延迟transition-delay: 0.1s;

按钮菜单源码：https://github.com/hi-our/hi-face/blob/master/taro/src/pages/avatar-edit/components/menu-choose/index.js

抽屉式动画

在抽屉式动画中，抽屉菜单和页面容器的动画参数是核心，可以有一点回弹效果

.menu-main {
  transition: 0.35s cubic-bezier(.75,.26,.02,1.01) transform;
}

.page-container {
  transition: 0.35s cubic-bezier(.75,.26,.02,1.01) transform, 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55) border-radius;
}

下图为 “cubic-bezier”的参数效果，具体细节可以访问 https://cubic-bezier.com/#.68,-0.04,.26,1.55

d6d517607a8d5bee1b952885cb965840.png 
.menu-item:nth-child(1) {
    transition-delay: 0.1s;
    transform: rotate(-60deg) translateY(-85px) rotate(60deg);
}
.menu-item:nth-child(2) {
    transition-delay: 0.18s;
    transform: rotate(-20deg) translateY(-85px) rotate(20deg);
}

抽屉动画源码：https://github.com/hi-our/hi-face/blob/master/taro/src/pages/avatar-edit/components/menu-main/index.js

补充信息

PPT 演示

https://www.xiaoxili.com/slides/5-minapp-tabbar/

视频课程

为了让大家更好地了解我的动画效果，后续会有一节 Hi 头像 UI 交互的分享课。

d51138caad07c2323fc01b1bbe3ce727.png

关于 Hi 头像开源项目

Hi 头像，让头像有趣一点

8ec7fdb4ab5786574441c0bf78c228c4.png
  • Web体验版：https://face.xiaoxili.com
  • 源码：https://github.com/hi-our/hi-face
  • 部署文档：https://github.com/hi-our/hi-face/blob/master/DEPLOYMENT.md
  • 云开发技术小册：https://www.xiaoxili.com/hi-face/docs/README.html

参考资料

[1]

Tabbar: https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html

[2]

自定义 tabBar: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

[3]

小程序自定义底部导航栏组件: https://github.com/ljybill/miniprogram-custom-tab-bar

[4]

Taro 3.x 设置自定义 TabBar: https://github.com/tarojsx/ui/blob/master/src/CustomTabBar.tsx

[5]

基于 Taro 封装微信小程序的 tabBar: https://www.jianshu.com/p/a3822409622e

[6]

taro 中自定义 tabbar 实现中间图标凸出效果: https://my.oschina.net/u/4403673/blog/3345417

[7]

微信小程序 CSS filter(滤镜)的使用示例: https://juejin.im/post/6844903633289478152

[8]

粘连效果实现: https://www.leevii.com/2018/09/adhesive-effect.html

weixin_39827506
关注
iOS中给自定义tabBar的按钮添加点击放大缩小的动画效果
01-04
之前想过一些通过第三方的方式实现动画，感觉有点麻烦，就自己写了一个 不足之处还望大家多多指出 // 一句话,写在UITabBarController.m脚本中,tabBar是自动执行的方法 // 点击tabbarItem自动调用 -(void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item { NSInteger index = [self.tabBar.items indexOfObject:item]; [self animationWithIndex:index]; if([item.title isEqualT
彩色TabBar切换动画实现
技术之窗
08-12 524
无意间看到一个彩色TabBar切换的设计图，感觉很不错，有空就把他实现了。 环境信息 Mac OS X 10.10.4 Xcode 6.4 iOS 8.4 效果图： 源码下载地址： https://github.com/saitjr/TColorfulTabBar.git 一、实现分析 看到这个彩色切换效果的时候，我第一个反应就是在TabBar上有一个彩色的View，然后
Taro小程序，自定义tabbar问题解决
最新发布
Avengerrr的博客
09-05 538
bottom-- name属性，作为匹配的标识符（默认值：当前标签的索引值） -->
tabbar切换动画
weixin_43240623的博客
01-20 613
router-view上加了一个类名，这个类名是用来干吗的？ 为了解决我们所说的留白问题，给大家解释这个留白的原因，因为他从一个路由跳转到另一个路由，这个过程是有顺序的， 你第一个动画进行完毕之后才会有第二个动画，那么我们怎样才能实现让他同时去执行，这样就可以完成我们想要的效果了，也就是我们所说的没有留白 解决：router-view 脱标 position absolute 这样上一个动画还在的...
小程序选项动画
菜鸟老五
05-08 363
//index.wxml <!--index.wxml--> <view class="page"> <view class='cont'> <view class="list" wx:for="{{list}}" wx:key="key"> <view class="block-view" id="time...
炫酷 Tabbar 切换动画.zip
09-23
炫酷 Tabbar 切换动画.zip,具有唯一动画供选择的tabbarcontroller
swift-一个简单实用的自定义tabBar点击tabbar有动画效果
08-15
在iOS应用开发中，...通过以上步骤，我们成功地创建了一个具有点击动画效果的自定义Swift TabBar。这种自定义不仅提升了用户界面的交互性，还能让应用更具个性化。记住，良好的用户体验往往在于这些细节的打磨。
微信小程序 自定义tabbar (源码)
05-31
微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义...
小程序tabbar素材
07-08
在微信小程序开发中，TabBar 是一个至关重要的组件，它位于小程序页面的底部，用于展示主要功能模块的快捷入口，通常包含2-5个图标和文字。本资源包"小程序tabbar素材"提供了专为微信小程序设计的TabBar图形元素，以...
优雅实现微信小程序动态tabBar，根据不同用户角色显示不同底部导航-更新版（支持自由组合总数超过5个tabBar菜单）
01-03
1、小程序底部的tabBar需要根据不同用户角色显示不同底部导航。 2、使用自定义底部导航custom-tab-bar优雅实现微信小程序动态tabBar。 3、实现自由组合tabBar菜单项目，支持自由组合总数超过5个tabBar菜单。 4、本...
微信小程序按钮点击动画效果的实现
10-16
主要介绍了微信小程序按钮点击动画效果的实现,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
类似附带几个button的view，点击button的时候，实现button动画移动
11-16
类似附带几个button的view，点击button的时候，实现视觉效果上是按钮在移动。
Android tabbar自定义切换动画
rookieCi的博客
05-06 741
公司美工突然从网上找了个切换动画，叫我照着gif图给tabbar写个动画。看了那个gif半天没看出什么头绪，只要硬着头皮 用贝塞尔曲线实现了tabbar切换动画。 先贴个代码git地址：https://gitee.com/rookieci/TabBarAnimView 再上个效果图 主要由TabBarAnimView绘制而成，使用方式如下 <com.xcc.viewlibrary....
微信小程序开发--3.2点击按钮动画
weixin_46479909的博客
07-12 946
首先导入小程序原生组件库colorui。2.下方购物车标识动画效果。1.点击加号按钮动画效果。
微信小程序自定义tabbar 图标凸出效果
weixin_45252024的博客
07-01 3343
底部自定义tabbar实现凸出效果及源码
微信小程序自定义tabbar导航栏，中间凸出样式
m0_65826745的博客
03-17 1826
微信小程序自定义tabbar底部导航栏
Tab Bar动画效果
努力是为了将来有好的生活，所以一起努力吧！
02-23 759
Tab Bar动画效果 1、hello大家好我又来分享炫酷代码 ，这个是点击后背景颜色会改变，我把代码分享到下面，大家请自行查看。谢谢！！！ 2、如果你们有兴趣的话可以可以进网站玩一下这个是链接http://haiyong.site <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>海拥 | 源码Tab Bar动画</title>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值