init project

miniprogram/components/background/snowflake/index.json

@@ -0,0 +1,4 @@
+{
+	"component": true,
+	"usingComponents": {}
+}

miniprogram/components/background/snowflake/index.less

@@ -0,0 +1,52 @@
+/* components/background/snow/index.wxss */
+@keyframes fall {
+	from {
+		transform: translateY(-10px) rotate(0);
+	}
+
+	to {
+		transform: translateY(100vh) rotate(1800deg);
+	}
+}
+
+page {
+	width: 100%;
+	height: 100%;
+	position: fixed;
+}
+
+.snowflakes {
+	width: 100%;
+	height: 100%;
+	z-index: -1;
+	overflow: hidden;
+	position: absolute;
+
+	.snowflake {
+		width: 10px;
+		height: 10px;
+		display: block;
+		position: absolute;
+		animation: fall linear infinite;
+	
+		&::before,
+		&::after {
+			content: '';
+			position: absolute;
+			background: rgba(255, 122, 155, .8);
+		}
+		
+		&::before {
+			top: 45%;
+			left: 0;
+			width: 100%;
+			height: 10%;
+		}
+		
+		&::after {
+			left: 45%;
+			width: 10%;
+			height: 100%;
+		}
+	}
+}

miniprogram/components/background/snowflake/index.ts

@@ -0,0 +1,61 @@
+// components/background/snow/index.ts
+import Toolkit from "../../../utils/Toolkit";
+
+interface Snowflake {
+	x: number;
+	s: number;
+	speed: number;
+}
+
+Component({
+
+	data: {
+		snowflakes: [] as Snowflake[],
+		timer: undefined as number | undefined,
+		docWidth: 375,
+		docHeight: 667,
+	},
+
+	methods: {
+		createSnowflake() {
+			const snowflake = {
+				x: Toolkit.random(0, this.data.docWidth),
+				s: Toolkit.random(6, 20),
+				speed: Toolkit.random(14, 26)
+			};
+			this.setData({
+				snowflakes: [...this.data.snowflakes, snowflake]
+			});
+		}
+	},
+	lifetimes: {
+		attached() {
+			const systemInfo = wx.getWindowInfo();
+			this.setData({
+				docWidth: systemInfo.windowWidth,
+				docHeight: systemInfo.windowHeight,
+				timer: setInterval(() => {
+					this.createSnowflake();
+					console.log(this.data.snowflakes);
+					
+					if (40 < this.data.snowflakes.length) {
+						if (this.data.timer) {
+							clearInterval(this.data.timer);
+						}
+						this.setData({
+							timer: undefined
+						})
+					}
+				}, 2000)
+			});
+		},
+		detached() {
+			if (this.data.timer) {
+				clearInterval(this.data.timer);
+				this.setData({
+					timer: undefined
+				})
+			}
+		}
+	}
+})

miniprogram/components/background/snowflake/index.wxml

@@ -0,0 +1,9 @@
+<!--components/background/snow/index.wxml-->
+<view class="snowflakes" style="width: {{docWidth}}px; height: {{docHeight}}px;">
+	<view
+		class="snowflake"
+		wx:for="{{snowflakes}}"
+		wx:key="index"
+		style="left: {{item.x}}px; width: {{item.s}}px; height: {{item.s}}px; animation-duration: {{item.speed}}s;"
+	></view>
+</view>