微信小程序?qū)崿F(xiàn)tabbar凹凸圓選中動(dòng)畫效果實(shí)例
更新時(shí)間：2022年09月21日 16:02:47 作者：蘇蘇就是小蘇蘇呀
小程序日益增多的情況下,UI風(fēng)格顯得越來越重要,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)tabbar凹凸圓選中動(dòng)畫效果的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
1.實(shí)現(xiàn)效果
2.實(shí)現(xiàn)原理
2.1 引入阿里巴巴矢量圖標(biāo)
可參考文章：微信小程序引入外部icon（阿里巴巴矢量圖標(biāo)）[1]^{[1]}[1]
2.2 css函數(shù)var
css的var函數(shù)[2]^{[2]}[2]：var() 函數(shù)用于插入自定義的屬性值，如果一個(gè)屬性值在多處被使用，該方法就很有用。
語法：
var(custom-property-name, value)
| 值 | 描述 |
|---|---|
| custom-property-name | 必需。自定義屬性的名稱，必需以 -- 開頭。 |
| value | 可選。備用值，在屬性不存在的時(shí)候使用。 |
eg:
page {
--color: #222;
background: var(--color);
--bg: orange;
--w: 175rpx;
}2.3 ios底部安全距離
蘋果官方推薦：使用env()，constant()來進(jìn)行底部安全距離適配。
iOS11 新增特性，Webkit 的一個(gè) CSS 函數(shù)，用于設(shè)定安全區(qū)域與邊界的距離，有四個(gè)預(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，小程序總默認(rèn)為viewport-fit=cover
- IOS11.2之前使用constant()函數(shù)，IOS11.2之后使用env()
- env()和constant()需要同時(shí)存在，并且constant()在前，順序不能改變
2.4 css屬性transition
CSS3 transition 屬性[3]^{[3]}[3]：transition 屬性設(shè)置元素當(dāng)過渡效果。注：始終指定transition-duration屬性，否則持續(xù)時(shí)間為0，transition不會(huì)有任何效果。
語法：
transition: property duration timing-function delay;
| 值 | 描述 |
|---|---|
| transition-property | 指定CSS屬性的name，transition效果 |
| transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
| transition-timing-function | 指定transition效果的轉(zhuǎn)速曲線 |
| transition-delay | 定義transition效果開始的時(shí)候 |
2.5 box-shadow
CSS3 box-shadow 屬性[4]^{[4]}[4]：可以設(shè)置一個(gè)或多個(gè)下拉陰影的框。 boxShadow 屬性把一個(gè)或多個(gè)下拉陰影添加到框上。該屬性是一個(gè)用逗號(hào)分隔陰影的列表，每個(gè)陰影由 2-4 個(gè)長(zhǎng)度值、一個(gè)可選的顏色值和一個(gè)可選的 inset 關(guān)鍵字來規(guī)定。省略長(zhǎng)度的值是 0。
語法：
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 說明 |
|---|---|
| h-shadow | 必需的。水平陰影的位置。允許負(fù)值 |
| v-shadow | 必需的。垂直陰影的位置。允許負(fù)值 |
| blur | 可選。模糊距離 |
| spread | 可選。陰影的大小 |
| color | 可選。陰影的顏色。在CSS顏色值尋找顏色值的完整列表 |
| inset | 可選。從外層的陰影（開始時(shí)）改變陰影內(nèi)側(cè)陰影 |
2.6 border-radius
CSS3 border-radius 屬性:[5]^{[5]}[5]border-radius 允許你設(shè)置元素的外邊框圓角。當(dāng)使用一個(gè)半徑時(shí)確定一個(gè)圓形，當(dāng)使用兩個(gè)半徑時(shí)確定一個(gè)橢圓。這個(gè)(橢)圓與邊框的交集形成圓角效果。
語法
border-radius: 1-4 length|% / 1-4 length|%;
注：每個(gè)半徑的四個(gè)值的順序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
eg:
view{
margin: 50px auto;
border-radius: 15rpx 50rpx;
width: 200rpx;
height: 100rpx;
border: 1px solid orange;
}3.實(shí)現(xiàn)步驟
3.1 實(shí)現(xiàn)底部tabbar
- flex橫向布局并居中，實(shí)現(xiàn)4個(gè)tabbar，fixed定位居于底部，并設(shè)置ios底部安全距離
- 設(shè)置currIndex參數(shù)，表示當(dāng)前選中tabbar的索引，currIndex==index設(shè)置激活樣式
- 為當(dāng)前選中的tabbar添加選中背景，背景基于整個(gè)底部欄設(shè)置absolute定位，根據(jù)tabbar寬，背景度，頁面總寬得出定位left偏移距離，top設(shè)置為底部欄高度的-50%
- left偏移距離的計(jì)算：
- 使用var函數(shù)計(jì)算：
page {
--w: 175rpx;//tabbar寬度
--t: 750rpx;//總寬度
--c: 120rpx;//選中背景寬度
/* 注意：env()和constant()需要同時(shí)存在，且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偏移距離的計(jì)算： top設(shè)置為底部欄高度的-50%，需要配合ios底部安全距離使用，即：
top: calc(-50% + constant(safe-area-inset-bottom) / 2); top: calc(-50% + env(safe-area-inset-bottom) / 2);
- 當(dāng)選中的currIndex變化，tabbar背景設(shè)置transform偏移
transform: translateX(calc(var(--w) * var(--n))); //--w:tabbar寬度，--n對(duì)應(yīng)currIndex
3.2 tabbar背景凹凸圓角
- 偽元素+box-shadow實(shí)現(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.實(shí)現(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()需要同時(shí)存在，且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)));
}參考鏈接:
[1].微信小程序引入外部icon（阿里巴巴矢量圖標(biāo)）
[2].CSS的var函數(shù)
總結(jié)
到此這篇關(guān)于微信小程序?qū)崿F(xiàn)tabbar凹凸圓選中動(dòng)畫效果的文章就介紹到這了,更多相關(guān)小程序tabbar凹凸圓選中動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
顯示行號(hào)的文本輸入框...2006-08-08
JS+cookie實(shí)現(xiàn)購物評(píng)價(jià)五星好評(píng)功能
這篇文章主要為大家詳細(xì)介紹了JS+cookie實(shí)現(xiàn)購物評(píng)價(jià)五星好評(píng)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
js隨機(jī)名言2008-09-09
去除Array中的null值，反復(fù)測(cè)試個(gè)不錯(cuò)的方法可以完美去除，在此與大家分享下，需要的朋友不要錯(cuò)過2013-11-11
這篇文章主要介紹了JavaScript判斷瀏覽器版本的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
其實(shí)這個(gè)example也很簡(jiǎn)單， 就是根據(jù)where后的條件批量修改element的屬性，此處為Img元素2010-05-05
JavaScript表單即時(shí)驗(yàn)證 驗(yàn)證不成功不能提交
這篇文章主要為大家詳細(xì)介紹了JavaScript表單即時(shí)驗(yàn)證，驗(yàn)證不成功不能提交，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
js取float型小數(shù)點(diǎn)后兩位數(shù)的方法
js中取小數(shù)點(diǎn)后兩位方法最常用的就是四舍五入函數(shù)了，前面我介紹過js中四舍五入一此常用函數(shù)，這里正好用上，下面我們一起來看取float型小數(shù)點(diǎn)后兩位一些方法總結(jié)2014-01-01
JavaScript學(xué)習(xí)筆記之DOM基礎(chǔ) 2.4
DOM(Document Object Model)，即“文檔對(duì)象模型”?；谡Z義的邏輯結(jié)構(gòu)，DOM將網(wǎng)頁內(nèi)的元素與內(nèi)容呈現(xiàn)為一個(gè)清晰、易讀的樹狀模型，下面小編把最近整理有關(guān)javascript筆記之DOM基礎(chǔ)分享給大家，有需要的朋友可以參考下2015-08-08
這篇文章主要給大家介紹了關(guān)于使用JS獲取當(dāng)前地理位置的2種方法,獲取當(dāng)前位置在實(shí)際場(chǎng)景中非常有用,比如定位用戶的位置,為其推薦周邊的商家和服務(wù)等,需要的朋友可以參考下2023-11-11