tabbar加动效

custom-tab-bar/index.js

@@ -57,11 +57,16 @@ Component({
      */
     methods: {
         switchTab(e) {
-            const data = e.currentTarget.dataset;
-            const url = data.path;
-            wx.switchTab({
-                url
-            });
+            if (e.currentTarget.dataset.index != this.data.selected) {
+                this.setData({
+                    selected: ''
+                })
+                const data = e.currentTarget.dataset;
+                const url = data.path;
+                wx.switchTab({
+                    url
+                });
+            }
         }
     }
 })

custom-tab-bar/index.less

@@ -1,55 +1,165 @@
 .tab-bar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: white;
-  display: flex;
-  box-sizing: border-box;
-  padding: 14rpx 0rpx;
-  padding-bottom: calc(env(safe-area-inset-bottom) + 14rpx);
-  box-shadow: rgba(0, 0, 0, 0.35) 0px 30rpx 20rpx 20rpx;
-
-  .tab-bar-item {
-    position: relative;
-    flex: 1;
-    text-align: center;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: white;
     display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    padding-bottom: 10rpx;
-
-    .noticeTips {
-      position: absolute;
-      left: 100rpx;
-      top: -12rpx;
-      width: 28rpx;
-      padding: 4rpx 0rpx;
-      border-radius: 40rpx;
-      color: white;
-      font-size: 16rpx;
-      text-align: center;
-      background-color: #FF0000;
-    }
-
-    image {
-      width: 48rpx;
-      height: 48rpx;
-    }
-
-    view {
-      font-size: 28rpx;
-      margin-top: 10rpx;
-    }
-  }
-
-  .mask {
-    position: absolute;
-    top: 0rpx;
-    width: 100%;
-    height: 100%;
-    z-index: 9;
-    background: rgba(0, 0, 0, 0.7);
-  }
+    box-sizing: border-box;
+    padding: 14rpx 0rpx;
+    padding-bottom: calc(env(safe-area-inset-bottom) + 14rpx);
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 30rpx 20rpx 20rpx;
+
+    .tab-bar-item {
+        position: relative;
+        flex: 1;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        padding-bottom: 10rpx;
+
+        .noticeTips {
+            position: absolute;
+            left: 100rpx;
+            top: -12rpx;
+            width: 28rpx;
+            padding: 4rpx 0rpx;
+            border-radius: 40rpx;
+            color: white;
+            font-size: 16rpx;
+            text-align: center;
+            background-color: #FF0000;
+        }
+
+        image {
+            width: 48rpx;
+            height: 48rpx;
+        }
+
+        view {
+            font-size: 28rpx;
+            margin-top: 10rpx;
+        }
+    }
+
+    .mask {
+        position: absolute;
+        top: 0rpx;
+        width: 100%;
+        height: 100%;
+        z-index: 9;
+        background: rgba(0, 0, 0, 0.7);
+    }
+}
+
+.bounce {
+    animation: elasticity 1.2s linear;
+}
+/* Q弹动画关键帧 */
+@keyframes elasticity {
+    0% {
+        transform: matrix3d(0.92, 0, 0, 0, 0, 0.92, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    3.4% {
+        transform: matrix3d(0.938, 0, 0, 0, 0, 0.933, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    4.7% {
+        transform: matrix3d(0.945, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    6.81% {
+        transform: matrix3d(0.95, 0, 0, 0, 0, 0.956, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    9.41% {
+        transform: matrix3d(0.942, 0, 0, 0, 0, 1.084, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    10.21% {
+        transform: matrix3d(0.971, 0, 0, 0, 0, 1.113, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    13.61% {
+        transform: matrix3d(1.062, 0, 0, 0, 0, 1.166, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    14.11% {
+        transform: matrix3d(1.07, 0, 0, 0, 0, 1.165, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    17.52% {
+        transform: matrix3d(1.104, 0, 0, 0, 0, 1.12, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    18.72% {
+        transform: matrix3d(1.106, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    21.32% {
+        transform: matrix3d(1.098, 0, 0, 0, 0, 1.035, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    24.32% {
+        transform: matrix3d(1.075, 0, 0, 0, 0, 0.98, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    25.23% {
+        transform: matrix3d(1.067, 0, 0, 0, 0, 0.969, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    29.03% {
+        transform: matrix3d(1.031, 0, 0, 0, 0, 0.948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    29.93% {
+        transform: matrix3d(1.024, 0, 0, 0, 0, 0.949, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    35.54% {
+        transform: matrix3d(0.99, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    36.74% {
+        transform: matrix3d(0.986, 0, 0, 0, 0, 0.989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    41.04% {
+        transform: matrix3d(0.98, 0, 0, 0, 0, 1.011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    44.44% {
+        transform: matrix3d(0.983, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    52.15% {
+        transform: matrix3d(0.996, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    59.86% {
+        transform: matrix3d(1.003, 0, 0, 0, 0, 0.995, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    63.26% {
+        transform: matrix3d(1.004, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    75.28% {
+        transform: matrix3d(1.001, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    85.49% {
+        transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    90.69% {
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    100% {
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
 }

custom-tab-bar/index.wxml

@@ -1,6 +1,6 @@
 <view class="tab-bar">
   <view class="mask" wx:if="{{mask}}"></view>
-  <view wx:for="{{listTab}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}"
+  <view wx:for="{{listTab}}" wx:key="index" class="tab-bar-item {{selected === index?'bounce':''}}" data-path="{{item.pagePath}}" data-index="{{index}}"
     bindtap="switchTab">
     <view class="noticeTips" wx:if="{{item.pagePath=='/pages/message/index'&&userInfo.mCount>0}}">
       {{userInfo.mCount}}</view>

custom-tab-bar/index.wxss

@@ -48,3 +48,87 @@
   z-index: 9;
   background: rgba(0, 0, 0, 0.7);
 }
+.bounce {
+  animation: elasticity 1.2s linear;
+}
+/* Q弹动画关键帧 */
+@keyframes elasticity {
+  0% {
+    transform: matrix3d(0.92, 0, 0, 0, 0, 0.92, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  3.4% {
+    transform: matrix3d(0.938, 0, 0, 0, 0, 0.933, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  4.7% {
+    transform: matrix3d(0.945, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  6.81% {
+    transform: matrix3d(0.95, 0, 0, 0, 0, 0.956, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  9.41% {
+    transform: matrix3d(0.942, 0, 0, 0, 0, 1.084, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  10.21% {
+    transform: matrix3d(0.971, 0, 0, 0, 0, 1.113, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  13.61% {
+    transform: matrix3d(1.062, 0, 0, 0, 0, 1.166, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  14.11% {
+    transform: matrix3d(1.07, 0, 0, 0, 0, 1.165, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  17.52% {
+    transform: matrix3d(1.104, 0, 0, 0, 0, 1.12, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  18.72% {
+    transform: matrix3d(1.106, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  21.32% {
+    transform: matrix3d(1.098, 0, 0, 0, 0, 1.035, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  24.32% {
+    transform: matrix3d(1.075, 0, 0, 0, 0, 0.98, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  25.23% {
+    transform: matrix3d(1.067, 0, 0, 0, 0, 0.969, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  29.03% {
+    transform: matrix3d(1.031, 0, 0, 0, 0, 0.948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  29.93% {
+    transform: matrix3d(1.024, 0, 0, 0, 0, 0.949, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  35.54% {
+    transform: matrix3d(0.99, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  36.74% {
+    transform: matrix3d(0.986, 0, 0, 0, 0, 0.989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  41.04% {
+    transform: matrix3d(0.98, 0, 0, 0, 0, 1.011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  44.44% {
+    transform: matrix3d(0.983, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  52.15% {
+    transform: matrix3d(0.996, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  59.86% {
+    transform: matrix3d(1.003, 0, 0, 0, 0, 0.995, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  63.26% {
+    transform: matrix3d(1.004, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  75.28% {
+    transform: matrix3d(1.001, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  85.49% {
+    transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  90.69% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  100% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+}

pages/childClassify/index.less

@@ -66,7 +66,7 @@
     height: 100vh;
     box-sizing: border-box;
     padding: 20rpx;
-    padding-top: 90rpx;
+    padding-top: 102rpx;
     padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
 
     .worksBox {

pages/childClassify/index.wxss

@@ -59,7 +59,7 @@
   height: 100vh;
   box-sizing: border-box;
   padding: 20rpx;
-  padding-top: 90rpx;
+  padding-top: 102rpx;
   padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
 }
 .classBox .worksList .worksBox {