优化 示例drop-card 通过dom的ref操作减少diff、过度动画替代帧动画

pages/template/drop-card/drop-card.uvue

 <template>
-  <view class="root">
-    <view class="card"
-      :style="{'top':Math.abs(x)/-60 + 90 +'px',transform:'scale('+(movePercent/10+0.80)+')','height':cardHeight+'px'}">
-      <image class="user-img" :src="userList[0]" :style="{'height':cardHeight+'px'}"></image>
-    </view>
-    <view class="card"
-      :style="{'top':Math.abs(x)/-30 + 45 +'px',transform:'scale('+(movePercent/10+0.90)+')','height':cardHeight+'px'}">
-      <image class="user-img" :src="userList[1]" :style="{'height':cardHeight+'px'}"></image>
-    </view>
-    <view @touchmove="touchmove" @touchstart="touchstart" @touchend="touchend"
-      :style="{'transform':'translate('+x+'px,'+y+'px) rotate('+x/-30+'deg)','height':cardHeight+'px'}" class="card">
-      <image class="user-img" :src="userList[2]" :style="{'height':cardHeight+'px'}"></image>
-      <view class="state">
-        <image class="state-icon like" :style="{'opacity':x < 0 ? 0 : movePercent * 10}" src="/static/template/drop-card/like.png" mode="widthFix"></image>
-        <image class="state-icon dislike" :style="{'opacity':x > 0 ? 0 : movePercent * 10}" src="/static/template/drop-card/dislike.png" mode="widthFix"></image>
+  <view class="root">
+    <template v-for="(item,index) in cardList" :key="index">
+      <view class="card" ref="card" @touchstart="touchstart($event as TouchEvent,index)" @touchmove="touchmove($event as TouchEvent,index)" @touchend="touchend" @touchcancel="touchend">
+        <image class="card-img" ref="card-img" :src="item"></image>
+        <template v-if="index == 2">
+          <view class="state">
+            <image class="state-icon like" ref="state-icon-like" src="/static/template/drop-card/like.png" mode="widthFix"></image>
+            <image class="state-icon dislike" ref="state-icon-dislike" src="/static/template/drop-card/dislike.png" mode="widthFix"></image>
+          </view>
+        </template>
       </view>
-    </view>
+    </template>
   </view>
 </template>
 <script lang="ts">
   let sX : number = 0,
-      sY : number = 0,
-      screenWidth : number = 1;
+    sY : number = 0,
+    screenWidth : number = 1,
+    nodesMap = new Map<string, INode[]>();
   export default {
     data() {
       return {
         x: 0,
-        y: 0,
-        cardHeight:1,
-        userList: [
-          '/static/template/drop-card/1.png',
-          '/static/template/drop-card/2.png',
-          '/static/template/drop-card/3.png'
-        ]
+        y: 0,
+        cardList: [
+          '/static/template/drop-card/1.jpg',
+          '/static/template/drop-card/2.jpg',
+          '/static/template/drop-card/3.jpg'
+        ] as string[],
+        NodesMap: new Map<string, INode[]>(),
       }
     },
-    computed: {
-      movePercent() : number {
-        return Math.abs(this.x) / screenWidth
-      },
-      likeOpacity() : number{
-        return this.x < 0 ? 0 : this.movePercent * 100
-      },
-      dislikeOpacity() : number{
-        return this.x > 0 ? 0 : this.movePercent * 100
-      }
-    },
-    onLoad() {
+    onReady() {
+      this.setStyle('card',2,'transitionTimingFunction','ease-in-out');
+      this.setStyle('card',2,'transitionProperty','transform');
+      
       uni.getSystemInfo({
         success: (e) => {
-          console.log('e',e);
-          screenWidth = e.screenWidth
-          this.cardHeight = e.screenHeight - 200
+          // console.log('e',e);
+          screenWidth = e.screenWidth;
+          let height = e.screenHeight - 200 + 'px'
+          for (var i = 0; i < 3; i++) {
+            this.setStyle('card',i,'height', height);
+            this.setStyle('card-img',i,'height', height);
+          }
         }
-      })
+      })
+    },
+    watch: {
+      x() {
+        this.onMove()
+      },
+      y() {
+        this.onMove()
+      }
+    },
+    computed: {
+      movePercent() : number {
+        return Math.abs(this.x) / (screenWidth/2*3)
+      },
+      likeOpacity() : number {
+        return this.x < 0 ? 0 : this.movePercent * 100
+      },
+      dislikeOpacity() : number {
+        return this.x > 0 ? 0 : this.movePercent * 100
+      }
     },
-    methods: {
-      changeUserList() {
-        let user:string = this.userList[this.userList.length - 1]
-        this.userList.unshift(user)
-        this.userList.pop()
-        this.x = 0;
-        this.y = 0;
+    methods: {
+      setStyle(refName:string,index:number,propertyName:string,propertyStyle:any):void{
+        let nodes:INode[]|null = nodesMap.get(refName)
+        if(nodes == null){
+          nodes = this.$refs.get(refName) as INode[]
+          nodesMap.set(refName,nodes)
+        }else{
+          // console.log('直接拿');
+        }
+        (nodes)[index].style.setProperty(propertyName,propertyStyle);
       },
-      touchstart(e : TouchEvent) {
+      onMove() {
+        this.setStyle('card',0,'transform', 'scale('+(this.movePercent/10+0.80)+')')
+        this.setStyle('card',1,'transform', 'scale('+(this.movePercent/10+0.90)+')')
+        this.setStyle('card',2,'transform', 'translateX('+this.x+'px) translateY('+this.y+'px) rotate('+this.x/-30+'deg)')
+        
+        this.setStyle('state-icon-like',0,'opacity', x < 0 ? 0 : movePercent * 10)
+        this.setStyle('state-icon-dislike',0,'opacity', x > 0 ? 0 : movePercent * 10)
+      },
+      changeCardList() {
+        let newArr = this.cardList.slice();
+        this.cardList[0] = newArr[2]
+        this.cardList[1] = newArr[0]
+        this.cardList[2] = newArr[1]
+        this.x = 0
+        this.y = 0
+      },
+      touchstart(e : TouchEvent,index:number) {
+        if(index != 2){
+          return 
+        }
         sX = e.touches[0].screenX;
         sY = e.touches[0].screenY;
       },
-      touchmove(e : TouchEvent) {
+      touchmove(e : TouchEvent,index:number) {
+        if(index != 2){
+          return 
+        }
         this.x += e.touches[0].screenX - sX;
         this.y += e.touches[0].screenY - sY;
         sX = e.touches[0].screenX;
         sY = e.touches[0].screenY;
       },
-      touchend() {
-        if (this.x > screenWidth / 6) {
-          let interval : number = 0;
-          interval = setInterval(() => {
-            this.x += 10
-            this.y += 3
-            if (this.x > screenWidth) {
-              clearInterval(interval)
-              this.changeUserList()
-            }
-          }, 6)
-        } else if (this.x < screenWidth * -1 / 6) {
-          let interval : number = 0;
-          interval = setInterval(() => {
-            this.x -= 10
-            this.y += 3
-            if (this.x < -screenWidth) {
-              clearInterval(interval)
-              this.changeUserList()
-            }
-          }, 6)
-        } else {
-          this.x = 0
-          this.y = 0
-        }
+      touchend() {
+        // console.log('touchend');
+        
+        // 设置释放之后飘走的方向 0回到坐标中心 1向右 2向左
+        let k:number = 0;
+        if (this.x > screenWidth / 6 ) {
+          k = 1
+        }else if(this.x < screenWidth * -1 / 6){
+          k = -1
+        }
+        // 设置动画时间
+        let time = 400;
+        this.setStyle('card',2,'transitionDuration',time.toFixed(0));
+        
+        this.x = screenWidth * 1.5 * k
+        this.y = Math.abs(screenWidth * 0.5 * k)
+        
+        setTimeout(()=>{
+          //关闭动画
+          this.setStyle('card',2,'transitionDuration',0);
+          // 更改卡片上的图片内容
+          if(k != 0){
+            this.changeCardList()
+          }
+        },time)
       }
     }
   }
@@ -109,36 +145,39 @@
   }
 
   .card {
-    width: 700rpx;
+    width: 700rpx;
     height: 750rpx;
     position: absolute;
     margin: 0 25rpx;
-    margin-top: 30px;
+    margin-top: 30px;
     border-radius: 10px;
-    color: #FFF;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+    color: #FFF;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+    z-index: 100;
   }
   
-  .user-img{
-    border-radius: 10px;
-  }
-  
-  .state {
-    top: 20rpx;
-    left: 20rpx;
-    width: 650rpx;
-    padding: 4px;
-    position: absolute;
-    flex-direction: row;
-    justify-content: space-between;
-  }
-  .state-icon {
-    width: 30px;
-    height: 30px;
-    border: 1px solid #FFF;
-    background-color: #FFF;
-    padding: 3px;
-    border-radius: 100px;
-    box-shadow: 0 0 1px #EBEBEB;
+  .card-img {
+    border-radius: 10px;
+  }
+
+  .state {
+    top: 20rpx;
+    left: 20rpx;
+    width: 650rpx;
+    padding: 4px;
+    position: absolute;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .state-icon {
+    width: 30px;
+    height: 30px;
+    border: 1px solid #FFF;
+    background-color: #FFF;
+    padding: 3px;
+    border-radius: 100px;
+    box-shadow: 0 0 1px #EBEBEB;
+    opacity: 0;
   }
 </style>
\ No newline at end of file