From 7962d1a61e8783bf63ddb70e40114e3c9f7fb7e0 Mon Sep 17 00:00:00 2001
From: yanyilin <yanyilin@dcloud.io>
Date: Sat, 26 Aug 2023 18:09:14 +0800
Subject: [PATCH] =?UTF-8?q?update:=20css=20transform=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                  |  16 ++-
 pages/CSS/transform/rotate.uvue             |  88 ++++++++++++
 pages/CSS/transform/scale.uvue              |  80 +++++++++++
 pages/CSS/transform/transform.uvue          |  57 --------
 pages/CSS/transform/translate.uvue          |  80 +++++++++++
 pages/tabBar/CSS.uvue                       |  27 +++-
 pages/template/drop-card/drop-card@old.uvue | 144 ++++++++++++++++++++
 7 files changed, 427 insertions(+), 65 deletions(-)
 create mode 100644 pages/CSS/transform/rotate.uvue
 create mode 100644 pages/CSS/transform/scale.uvue
 delete mode 100644 pages/CSS/transform/transform.uvue
 create mode 100644 pages/CSS/transform/translate.uvue
 create mode 100644 pages/template/drop-card/drop-card@old.uvue

diff --git a/pages.json b/pages.json
index 627e446b..d00b15c7 100644
--- a/pages.json
+++ b/pages.json
@@ -595,9 +595,21 @@
       }
     },
     {
-      "path": "pages/CSS/transform/transform",
+      "path": "pages/CSS/transform/translate",
       "style": {
-        "navigationBarTitleText": "Transform"
+        "navigationBarTitleText": "Translate"
+      }
+    },
+    {
+      "path": "pages/CSS/transform/scale",
+      "style": {
+        "navigationBarTitleText": "Scale"
+      }
+    },
+    {
+      "path": "pages/CSS/transform/rotate",
+      "style": {
+        "navigationBarTitleText": "Rotate"
       }
     },
     {
diff --git a/pages/CSS/transform/rotate.uvue b/pages/CSS/transform/rotate.uvue
new file mode 100644
index 00000000..ef7510a9
--- /dev/null
+++ b/pages/CSS/transform/rotate.uvue
@@ -0,0 +1,88 @@
+<template>
+<!-- #ifdef APP -->
+<scroll-view class="page">
+<!-- #endif -->
+
+	<view class="trace">
+		<view class="base reserve">
+			<text class="reserve-text">rotate(20deg)</text>
+			<text class="reserve-text">转变前位置</text>
+		</view>
+		<view class="base reserve">
+			<text class="reserve-text">rotateX(50deg)</text>
+			<text class="reserve-text">转变前位置</text>
+		</view>
+		<view class="base reserve">
+			<text class="reserve-text">rotateY(50deg)</text>
+			<text class="reserve-text">转变前位置</text>
+		</view>
+		<view class="base reserve">
+			<text class="reserve-text">rotateZ(50deg)</text>
+			<text class="reserve-text">转变前位置</text>
+		</view>
+	</view>
+
+	<view class="base transform" style="transform: rotate(20deg)">
+		<text>rotate(20deg)</text>
+		<text>转变后位置</text>
+	</view>
+	<view class="base transform" style="transform: rotateX(50deg)">
+		<text>rotateX(50deg)</text>
+		<text>转变后位置</text>
+	</view>
+	<view class="base transform" style="transform: rotateY(50deg)">
+		<text>rotateY(50deg)</text>
+		<text>转变后位置</text>
+	</view>
+	<view class="base transform" style="transform: rotateZ(50deg)">
+		<text>rotateZ(50deg)</text>
+		<text>转变后位置</text>
+	</view>
+
+<!-- #ifdef APP -->
+</scroll-view>
+<!-- #endif -->
+</template>
+
+<script lang="uts">
+export default {
+	data() {
+		return {
+		}
+	},
+	methods: {
+	},
+}
+</script>
+
+<style>
+.page {
+	flex: 1;
+	align-items: center;
+}
+.trace {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	align-items: center;
+}
+.base {
+	margin: 10px;
+	width: 150px;
+	height: 150px;
+	align-items: center;
+	justify-content: center;
+}
+.reserve {
+	border: 1px dotted #588;
+	background-color: #DDD;
+}
+.reserve-text {
+	color: #CCC;
+}
+.transform {
+	border: 1px solid #00F;
+	background-color: rgba(0,255,255,0.5);
+}
+</style>
diff --git a/pages/CSS/transform/scale.uvue b/pages/CSS/transform/scale.uvue
new file mode 100644
index 00000000..41688f02
--- /dev/null
+++ b/pages/CSS/transform/scale.uvue
@@ -0,0 +1,80 @@
+<template>
+<!-- #ifdef APP -->
+<scroll-view class="page">
+<!-- #endif -->
+
+	<view class="trace">
+		<view class="base reserve">
+			<text class="reserve-text">scaleX(0.6)</text>
+			<text class="reserve-text">转变前位置</text>
+		</view>
+		<view class="base reserve">
+			<text class="reserve-text">scaleY(0.8)</text>
+			<text class="reserve-text">转变前位置</text>
+		</view>
+		<view class="base reserve">
+			<text class="reserve-text">scale(0.8,0.8)</text>
+			<text class="reserve-text">转变前位置</text>
+		</view>
+	</view>
+
+	<view class="base transform" style="transform: scaleX(0.6)">
+		<text>scaleX(0.6)</text>
+		<text>转变后位置</text>
+	</view>
+	<view class="base transform" style="transform: scaleY(0.6)">
+		<text>scaleY(0.6)</text>
+		<text>转变后位置</text>
+	</view>
+	<view class="base transform" style="transform: scale(1.2,1.2)">
+		<text>scale(1.2,1.2)</text>
+		<text>转变后位置</text>
+	</view>
+
+<!-- #ifdef APP -->
+</scroll-view>
+<!-- #endif -->
+</template>
+
+<script lang="uts">
+export default {
+	data() {
+		return {
+		}
+	},
+	methods: {
+	},
+}
+</script>
+
+<style>
+.page {
+	flex: 1;
+	align-items: center;
+}
+.trace {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	align-items: center;
+}
+.base {
+	margin: 10px;
+	width: 150px;
+	height: 150px;
+	align-items: center;
+	justify-content: center;
+}
+.reserve {
+	border: 1px dotted #588;
+	background-color: #DDD;
+}
+.reserve-text {
+	color: #CCC;
+}
+.transform {
+	border: 1px solid #00F;
+	background-color: rgba(0,255,255,0.5);
+}
+</style>
diff --git a/pages/CSS/transform/transform.uvue b/pages/CSS/transform/transform.uvue
deleted file mode 100644
index 25338cb5..00000000
--- a/pages/CSS/transform/transform.uvue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <!-- #ifdef APP -->
-  <scroll-view style="flex: 1">
-    <!-- #endif -->
-    <view>
-      <view class="baseStyle" style="transform: translateX(120%)"
-        >translateX(120%)</view
-      >
-      <view class="baseStyle" style="transform: translateY(-30rpx)"
-        >translateY(-30rpx)</view
-      >
-      <view class="baseStyle" style="transform: translate(120%, 50%)"
-        >translate(120%,50%)</view
-      >
-      <view class="baseStyle" style="transform: scaleX(0.8)">scaleX(0.8)</view>
-      <view class="baseStyle" style="transform: scaleY(0.8)">scaleY(0.8)</view>
-      <view class="baseStyle" style="transform: scale(0.8, 0.8)"
-        >scale(0.8,0.8)</view
-      >
-      <view class="baseStyle" style="transform: rotate(20deg)"
-        >rotate(20deg)</view
-      >
-      <view class="baseStyle" style="transform: rotateX(50deg)"
-        >rotateX(50deg)</view
-      >
-      <view class="baseStyle" style="transform: rotateY(50deg)"
-        >rotateY(50deg)</view
-      >
-      <view class="baseStyle" style="transform: rotateZ(50deg)"
-        >rotateZ(50deg)</view
-      >
-    </view>
-    <!-- #ifdef APP -->
-  </scroll-view>
-  <!-- #endif -->
-</template>
-
-<script lang="ts">
-export default {
-  data() {
-    return {}
-  },
-  methods: {},
-}
-</script>
-
-<style>
-.baseStyle {
-  background-color: cadetblue;
-  margin: 10rpx;
-  width: 300rpx;
-  height: 300rpx;
-  align-items: center;
-  flex: 1;
-  justify-content: center;
-}
-</style>
diff --git a/pages/CSS/transform/translate.uvue b/pages/CSS/transform/translate.uvue
new file mode 100644
index 00000000..7b29b20b
--- /dev/null
+++ b/pages/CSS/transform/translate.uvue
@@ -0,0 +1,80 @@
+<template>
+<!-- #ifdef APP -->
+<scroll-view class="page">
+<!-- #endif -->
+
+	<view class="trace">
+		<view class="base reserve">
+			<text class="reserve-text">translateX(80%)</text>
+			<text class="reserve-text">转变前位置</text>
+		</view>
+		<view class="base reserve">
+			<text class="reserve-text">translateY(50px)</text>
+			<text class="reserve-text">转变前位置</text>
+		</view>
+		<view class="base reserve">
+			<text class="reserve-text">translate(-50%, 50%)</text>
+			<text class="reserve-text">转变前位置</text>
+		</view>
+	</view>
+
+	<view class="base transform" style="transform: translateX(80%)">
+		<text>translateX(80%)</text>
+		<text>转变后位置</text>
+	</view>
+	<view class="base transform" style="transform: translateY(50px)">
+		<text>translateY(50px)</text>
+		<text>转变后位置</text>
+	</view>
+	<view class="base transform" style="transform: translate(-50%, 50%)">
+		<text>translate(-50%,50%)</text>
+		<text>转变后位置</text>
+	</view>
+
+<!-- #ifdef APP -->
+</scroll-view>
+<!-- #endif -->
+</template>
+
+<script lang="uts">
+export default {
+	data() {
+		return {
+		}
+	},
+	methods: {
+	},
+}
+</script>
+
+<style>
+.page {
+	flex: 1;
+	align-items: center;
+}
+.trace {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	align-items: center;
+}
+.base {
+	margin: 10px;
+	width: 150px;
+	height: 150px;
+	align-items: center;
+	justify-content: center;
+}
+.reserve {
+	border: 1px dotted #588;
+	background-color: #DDD;
+}
+.reserve-text {
+	color: #CCC;
+}
+.transform {
+	border: 1px solid #00F;
+	background-color: rgba(0,255,255,0.5);
+}
+</style>
diff --git a/pages/tabBar/CSS.uvue b/pages/tabBar/CSS.uvue
index 453bf93f..4fed04ee 100644
--- a/pages/tabBar/CSS.uvue
+++ b/pages/tabBar/CSS.uvue
@@ -318,17 +318,32 @@
 						] as Page[],
 					},
 					{
-						id: 'animate',
-						name: '动画',
+						id: 'transform',
+						name: 'transform',
 						open: false,
 						pages: [
 							{
-								name: 'transition',
-								url: '/pages/CSS/transition/transition',
+								name: 'translate',
+								url: '/pages/CSS/transform/translate',
+							},
+							{
+								name: 'scale',
+								url: '/pages/CSS/transform/scale',
 							},
 							{
-								name: 'transform',
-								url: '/pages/CSS/transform/transform',
+								name: 'rotate',
+								url: '/pages/CSS/transform/rotate',
+							},
+						] as Page[],
+					},
+					{
+						id: 'transition',
+						name: 'transition',
+						open: false,
+						pages: [
+							{
+								name: 'transition',
+								url: '/pages/CSS/transition/transition',
 							},
 						] as Page[],
 					},
diff --git a/pages/template/drop-card/drop-card@old.uvue b/pages/template/drop-card/drop-card@old.uvue
new file mode 100644
index 00000000..a8d15960
--- /dev/null
+++ b/pages/template/drop-card/drop-card@old.uvue
@@ -0,0 +1,144 @@
+<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>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+  let sX : number = 0,
+      sY : number = 0,
+      screenWidth : number = 1;
+  export default {
+    data() {
+      return {
+        x: 0,
+        y: 0,
+        cardHeight:1,
+        userList: [
+          '/static/template/drop-card/1.jpg',
+          '/static/template/drop-card/2.jpg',
+          '/static/template/drop-card/3.jpg'
+        ]
+      }
+    },
+    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() {
+      uni.getSystemInfo({
+        success: (e) => {
+          console.log('e',e);
+          screenWidth = e.screenWidth
+          this.cardHeight = e.screenHeight - 200
+        }
+      })
+    },
+    methods: {
+      changeUserList() {
+        let user:string = this.userList[this.userList.length - 1]
+        this.userList.unshift(user)
+        this.userList.pop()
+        this.x = 0;
+        this.y = 0;
+      },
+      touchstart(e : TouchEvent) {
+        sX = e.touches[0].screenX;
+        sY = e.touches[0].screenY;
+      },
+      touchmove(e : TouchEvent) {
+        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
+        }
+      }
+    }
+  }
+</script>
+<style>
+  .root {
+    flex: 1;
+    position: relative;
+  }
+
+  .card {
+    width: 700rpx;
+    height: 750rpx;
+    position: absolute;
+    margin: 0 25rpx;
+    margin-top: 30px;
+    border-radius: 10px;
+    color: #FFF;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  }
+  
+  .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;
+  }
+</style>
\ No newline at end of file
-- 
GitLab