微信小程序?qū)崿F(xiàn)tabbar凹凸圓選中動畫效果實例

更新時間：2022年09月21日 16:02:47 作者：蘇蘇就是小蘇蘇呀

小程序日益增多的情況下,UI風格顯得越來越重要,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)tabbar凹凸圓選中動畫效果的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

1.實現(xiàn)效果

2.實現(xiàn)原理

2.1 引入阿里巴巴矢量圖標

可參考文章：微信小程序引入外部icon（阿里巴巴矢量圖標）[1]^{[1]}[1]

2.2 css函數(shù)var

css的var函數(shù)[2]^{[2]}[2]：var() 函數(shù)用于插入自定義的屬性值，如果一個屬性值在多處被使用，該方法就很有用。

語法：

var(custom-property-name, value)

值	描述
custom-property-name	必需。自定義屬性的名稱，必需以 -- 開頭。
value	可選。備用值，在屬性不存在的時候使用。

eg:

page {
  --color: #222;
  background: var(--color);
  --bg: orange;
  --w: 175rpx;
}

2.3 ios底部安全距離

蘋果官方推薦：使用env()，constant()來進行底部安全距離適配。

iOS11 新增特性，Webkit 的一個 CSS 函數(shù)，用于設(shè)定安全區(qū)域與邊界的距離，有四個預(yù)定義的變量： safe-area-inset-left：安全區(qū)域距離左邊邊界的距離 safe-area-inset-right：安全區(qū)域距離右邊邊界的距離 safe-area-inset-top：安全區(qū)域距離頂部邊界的距離 safe-area-inset-bottom ：安全距離底部邊界的距離 一般情況下，關(guān)注safe-area-inset-bottom即可。

使用前提：

網(wǎng)頁需設(shè)置viewport-fit=cover，小程序總默認為viewport-fit=cover
IOS11.2之前使用constant()函數(shù)，IOS11.2之后使用env()
env()和constant()需要同時存在，并且constant()在前，順序不能改變

2.4 css屬性transition

CSS3 transition 屬性[3]^{[3]}[3]：transition 屬性設(shè)置元素當過渡效果。注：始終指定transition-duration屬性，否則持續(xù)時間為0，transition不會有任何效果。

語法：

transition: property duration timing-function delay;

值	描述
transition-property	指定CSS屬性的name，transition效果
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的轉(zhuǎn)速曲線
transition-delay	定義transition效果開始的時候

2.5 box-shadow

CSS3 box-shadow 屬性[4]^{[4]}[4]：可以設(shè)置一個或多個下拉陰影的框。 boxShadow 屬性把一個或多個下拉陰影添加到框上。該屬性是一個用逗號分隔陰影的列表，每個陰影由 2-4 個長度值、一個可選的顏色值和一個可選的 inset 關(guān)鍵字來規(guī)定。省略長度的值是 0。

語法：

box-shadow: h-shadow v-shadow blur spread color inset;

值	說明
h-shadow	必需的。水平陰影的位置。允許負值
v-shadow	必需的。垂直陰影的位置。允許負值
blur	可選。模糊距離
spread	可選。陰影的大小
color	可選。陰影的顏色。在CSS顏色值尋找顏色值的完整列表
inset	可選。從外層的陰影（開始時）改變陰影內(nèi)側(cè)陰影

2.6 border-radius

CSS3 border-radius 屬性:[5]^{[5]}[5]border-radius 允許你設(shè)置元素的外邊框圓角。當使用一個半徑時確定一個圓形，當使用兩個半徑時確定一個橢圓。這個(橢)圓與邊框的交集形成圓角效果。

語法

border-radius: 1-4 length|% / 1-4 length|%;

注：每個半徑的四個值的順序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

eg:

view{
  margin: 50px auto;
  border-radius: 15rpx 50rpx;
  width: 200rpx;
  height: 100rpx;
  border: 1px solid orange;
}

3.實現(xiàn)步驟

3.1 實現(xiàn)底部tabbar

flex橫向布局并居中，實現(xiàn)4個tabbar，fixed定位居于底部，并設(shè)置ios底部安全距離

設(shè)置currIndex參數(shù)，表示當前選中tabbar的索引，currIndex==index設(shè)置激活樣式

為當前選中的tabbar添加選中背景，背景基于整個底部欄設(shè)置absolute定位，根據(jù)tabbar寬，背景度，頁面總寬得出定位left偏移距離，top設(shè)置為底部欄高度的-50%

left偏移距離的計算：

使用var函數(shù)計算：

page {
  --w: 175rpx;//tabbar寬度
  --t: 750rpx;//總寬度
  --c: 120rpx;//選中背景寬度
  /* 注意：env()和constant()需要同時存在，且constant()在前 */
  padding-bottom: calc(constant(safe-area-inset-bottom) +140rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
}

-left-pad: calc(var(--t) - (4 * var(--w)));
 left: calc((var(--left-pad) / 2) + (var(--w) / 2) - (var(--c) / 2));

topt偏移距離的計算： top設(shè)置為底部欄高度的-50%，需要配合ios底部安全距離使用，即：

  top: calc(-50% + constant(safe-area-inset-bottom) / 2);
  top: calc(-50% + env(safe-area-inset-bottom) / 2);

當選中的currIndex變化，tabbar背景設(shè)置transform偏移

  transform: translateX(calc(var(--w) * var(--n)));
  //--w:tabbar寬度，--n對應(yīng)currIndex

3.2 tabbar背景凹凸圓角

偽元素+box-shadow實現(xiàn)凹凸圓角

修改偽元素背景顏色為transparent，設(shè)置box-shadow設(shè)置與頁面整體背景一致

.active-tabbar-box::before,
.active-tabbar-box::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30rpx;
  height: 30rpx;
  background: transparent;
}
.active-tabbar-box::before {
  left: -33rpx;
  border-radius: 0 30rpx 0 0;
  box-shadow: 0 -15rpx 0 0 var(--color);
}
.active-tabbar-box::after {
  right: -33rpx;
  border-radius: 30rpx 0 0 0;
  box-shadow: 0 -15rpx 0 0 var(--color);
}

4.實現(xiàn)代碼

<view class="tabbar-box">
  <block wx:for="{{menu}}" wx:key="list">
    <view class="menu-item {{currIndex==index && 'active'}}" catchtap="tabClick" data-index="{{index}}">
      <view class="iconfont {{item.icon}}"></view>
      <text>{{item.name}}</text>
    </view>
  </block>
  <view class="active-tabbar-box" style="--n:{{currIndex}}"></view>
</view>

Page({
  data: {
    currIndex: 0,
    menu: [{
        name: "三明治",
        icon: "icon-susua-2-53"
      },
      {
        name: "漢堡",
        icon: "icon-susuhanbao"
      },
      {
        name: "冰沙",
        icon: "icon-susubingsha"
      },
      {
        name: "可樂",
        icon: "icon-susukele"
      },
    ]
  },
  tabClick(e) {
    let {
      index
    } = e.currentTarget.dataset;
    this.setData({
      currIndex: index,
    })
  },
})

@import "../utils/icon-font.wxss";
page {
  --color: #222;
  background: var(--color);
  --bg: orange;
  --w: 175rpx;
  --t: 750rpx;
  --c: 120rpx;
  /* 注意：env()和constant()需要同時存在，且constant()在前 */
  padding-bottom: calc(constant(safe-area-inset-bottom) +140rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
}
.tabbar-box {
  background: #fff;
  border-radius: 10rpx 10rpx 0 0;
  position: relative;
  height: 120rpx;
  width: var(--t);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
.menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: var(--w);
  height: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.menu-item .iconfont {
  font-size: 40rpx;
  color: var(--color);
  transition: 0.5s all;
  position: relative;
  z-index: 9;
}
.menu-item text {
  position: absolute;
  font-size: 26rpx;
  font-weight: bold;
  color: #222;
  transition: 0.5s all;
  opacity: 0;
  transform: translateY(50rpx);
}
.menu-item.active .iconfont {
  transform: translateY(-60rpx);
}
.menu-item.active text {
  opacity: 1;
  transform: translateY(22rpx);
}
.active-tabbar-box {
  box-sizing: border-box;
  position: absolute;
  width: var(--c);
  height: var(--c);
  background: var(--bg);
  --left-pad: calc(var(--t) - (4 * var(--w)));
  left: calc((var(--left-pad) / 2) + (var(--w) / 2) - (var(--c) / 2));
  top: calc(-50% + constant(safe-area-inset-bottom) / 2);
  top: calc(-50% + env(safe-area-inset-bottom) / 2);
  border-radius: 50%;
  border: 10rpx solid var(--color);
  transition: 0.5s all;
}
.active-tabbar-box::before,
.active-tabbar-box::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30rpx;
  height: 30rpx;
  background: transparent;
}
.active-tabbar-box::before {
  left: -33rpx;
  border-radius: 0 30rpx 0 0;
  box-shadow: 0 -15rpx 0 0 var(--color);
}
.active-tabbar-box::after {
  right: -33rpx;
  border-radius: 30rpx 0 0 0;
  box-shadow: 0 -15rpx 0 0 var(--color);
}
.active-tabbar-box {
  transform: translateX(calc(var(--w) * var(--n)));
}