微信小程序实现tabbar凹凸圆选中动画效果实例

实现微信小程序的tabbar凹凸圆选中动画效果，可以分为以下几个步骤：

步骤1：准备好tabbar图标资源

在实现tabbar凹凸圆选中动画效果之前，需要准备好凹凸圆图标资源。可以使用Sketch等设计工具，画出带有选中和未选中状态的凹凸圆图标，并按照微信小程序要求的尺寸进行导出。

步骤2：创建tabbar页面

在小程序根目录下，创建一个tabbar页面。使用wxml语言，实现底部tabbar布局，例如：

<view class="tabbar">
  <view class="tab-item" bindtap="switchTab" data-path="{{paths[0]}}">
    <image src="{{activeIndex == 0 ? activeIcon : normalIcon}}" />
    <text class="{{activeIndex == 0 ? 'active' : ''}}">首页</text>
  </view>
  <view class="tab-item" bindtap="switchTab" data-path="{{paths[1]}}">
    <image src="{{activeIndex == 1 ? activeIcon : normalIcon}}" />
    <text class="{{activeIndex == 1 ? 'active' : ''}}">消息</text>
  </view>
  <view class="tab-item" bindtap="switchTab" data-path="{{paths[2]}}">
    <image src="{{activeIndex == 2 ? activeIcon : normalIcon}}" />
    <text class="{{activeIndex == 2 ? 'active' : ''}}">我的</text>
  </view>
</view>

步骤3：为tabbar绑定切换事件

在tabbar页面中实现switchTab方法，用于切换选中的tab。例如：

Page({
  data: {
    activeIndex: 0,
    paths: ['pages/index/index', 'pages/message/message', 'pages/mine/mine'],
    normalIcon: 'images/tabbar/index_normal.png',
    activeIcon: 'images/tabbar/index_active.png',
  },
  switchTab(e) {
    const path = e.currentTarget.dataset.path
    wx.switchTab({
      url: `/${path}`,
    })
  },
})

步骤4：实现tabbar凹凸圆选中动画效果

在小程序根目录下的app.wxss文件中，实现tabbar凹凸圆选中动画效果。核心代码如下：

.tabbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  background-color: #ffffff;
  border-top: 1px solid #eeeeee;
  z-index: 999;
}

.tab-item {
  position: relative;
  width: 32rpx;
  height: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tab-item:before {
  content: "";
  position: absolute;
  left: -12rpx;
  top: -12rpx;
  width: 56rpx;
  height: 56rpx;
  border-radius: 28rpx;
  background-color: #ffffff;
  transform: scale(0.8) translate(0, 0);
  transition: all 0.3s ease-in-out;
}

.tab-item.active:before {
  transform: scale(1.2) translate(-6rpx, -6rpx);
  background-color: #173177;
}

通过设置.tab-item:before伪元素，实现选中凹凸圆的效果。通过.tab-item.active:before实现动画效果，当选中状态时，凹凸圆会变大并且颜色会变化。

示例1：完整代码

以下是一个基于微信小程序的tabbar凹凸圆选中动画效果实现的示例代码，供参考和学习：

<!-- app.json -->
{
  "tabBar": {
    "backgroundColor": "#fff",
    "borderStyle": "white",
    "selectedColor": "#173177",
    "color": "#999",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/tabbar/index_normal.png",
        "selectedIconPath": "images/tabbar/index_active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "images/tabbar/message_normal.png",
        "selectedIconPath": "images/tabbar/message_active.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "images/tabbar/mine_normal.png",
        "selectedIconPath": "images/tabbar/mine_active.png"
      }
    ]
  }
}

<!-- tabbar.wxml -->
<view class="tabbar">
  <view class="tab-item" bindtap="switchTab" data-path="{{paths[0]}}">
    <image src="{{activeIndex == 0 ? activeIcon : normalIcon}}" />
    <text class="{{activeIndex == 0 ? 'active' : ''}}">首页</text>
  </view>
  <view class="tab-item" bindtap="switchTab" data-path="{{paths[1]}}">
    <image src="{{activeIndex == 1 ? activeIcon : normalIcon}}" />
    <text class="{{activeIndex == 1 ? 'active' : ''}}">消息</text>
  </view>
  <view class="tab-item" bindtap="switchTab" data-path="{{paths[2]}}">
    <image src="{{activeIndex == 2 ? activeIcon : normalIcon}}" />
    <text class="{{activeIndex == 2 ? 'active' : ''}}">我的</text>
  </view>
</view>

// tabbar.js
Page({
  data: {
    activeIndex: 0,
    paths: ['pages/index/index', 'pages/message/message', 'pages/mine/mine'],
    normalIcon: 'images/tabbar/index_normal.png',
    activeIcon: 'images/tabbar/index_active.png',
  },
  switchTab(e) {
    const path = e.currentTarget.dataset.path
    wx.switchTab({
      url: `/${path}`,
    })
  },
})

/* app.wxss */
.tabbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  background-color: #ffffff;
  border-top: 1px solid #eeeeee;
  z-index: 999;
}

.tab-item {
  position: relative;
  width: 32rpx;
  height: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tab-item:before {
  content: "";
  position: absolute;
  left: -12rpx;
  top: -12rpx;
  width: 56rpx;
  height: 56rpx;
  border-radius: 28rpx;
  background-color: #ffffff;
  transform: scale(0.8) translate(0, 0);
  transition: all 0.3s ease-in-out;
}

.tab-item.active:before {
  transform: scale(1.2) translate(-6rpx, -6rpx);
  background-color: #173177;
}

示例2：根据需求自定义tabbar图标

以下是一个自定义tabbar图标的示例代码，仅供参考：

<!-- app.json -->
{
  "tabBar": {
    "backgroundColor": "#fff",
    "borderStyle": "white",
    "selectedColor": "#173177",
    "color": "#999",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/tabbar/index_normal.png",
        "selectedIconPath": "images/tabbar/index_active.png"
      },
      {
        "pagePath": "pages/message/message",
        "iconPath": "images/tabbar/message_normal.png",
        "selectedIconPath": "images/tabbar/message_active.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "images/tabbar/mine_normal.png",
        "selectedIconPath": "images/tabbar/mine_active.png"
      },
      {
        "pagePath": "pages/feedback/feedback",
        "iconPath": "images/tabbar/feed_normal.png",
        "selectedIconPath": "images/tabbar/feed_active.png"
      },
      {
        "pagePath": "pages/more/more",
        "iconPath": "images/tabbar/more_normal.png",
        "selectedIconPath": "images/tabbar/more_active.png"
      }
    ]
  }
}

以上是我对于微信小程序实现tabbar凹凸圆选中动画效果的步骤和示例说明，希望对你有所帮助。