實現效果

• 使用三角形，四邊形等拼成一個愛心的圖形。
• 愛心的圖形一段時間會有高光閃過。
• 點擊愛心圖形會使拼成一個心字。

[video(video-iyxwCynj-1739523100465)(type-csdn)(url-https://live.csdn.net/v/embed/463437)(image-https://i-blog.csdnimg.cn/img_convert/f7241e2160bdcd185b786f980e4f9ff3.jpeg)(title-多邊形動畫效果顯示)]

實現思路

三角形，四邊形可以用clip-path: polygon();畫出來，確定幾個頂點可以畫出任意圖形。
高光需要在每個多邊形添加動畫延遲然後加上統一的動畫。
愛心變成心字只需要確定更改後的多邊形頂點位置，再使用transition變換即可。

問題點

暫無

整體代碼

重要屬性如下

• clip-path: polygon繪製多邊形
• transition圖形變換
• animation動畫
• transition-duration變換時間
• animation-delay動畫延遲

<view class="chartsMain">
	<view class="container" :class="animationStarted && 'font'">
		<view class="triangle" id="triangle1"></view>
		<view class="triangle" id="triangle2"></view>
		<view class="triangle" id="triangle3"></view>
		<view class="triangle" id="triangle4"></view>
		<view class="triangle" id="triangle5"></view>
		<view class="triangle" id="triangle6"></view>
		<view class="triangle" id="triangle7"></view>
		<view class="triangle" id="triangle8"></view>
		<view class="triangle" id="triangle9"></view>
		<view class="triangle" id="triangle10"></view>
		<view class="triangle" id="triangle11"></view>
		<view class="triangle" id="triangle12"></view>
		<view class="triangle" id="triangle13"></view>
		<view class="triangle" id="triangle14"></view>
		<view class="triangle" id="triangle15"></view>
		<view class="triangle" id="triangle16"></view>
		<view class="triangle" id="triangle17"></view>
		<view class="triangle" id="triangle18"></view>
		<view class="triangle" id="triangle19"></view>
		<view class="triangle" id="triangle20"></view>
	</view>
</view>

<button class="blueBtn cu-btn bg-blue shadow lg" @tap="toggleAnimation" :disabled="isMoveing">來點動畫</button>

<script>
	export default {
		data() {
			return {
				animationStarted: false,
				isMoveing: false,
			}
		},
		methods: {
			toggleAnimation() {
				if (this.isMoveing) return
				this.animationStarted = !this.animationStarted
				this.isMoveing = true
				setTimeout(() => {
					this.isMoveing = false
				}, 600)
			}
		}
	}
</script>

<style>
	.body {
		text-align: center;
	}
	.chartsMain {
		width: 750rpx;
		padding: 15rpx 0;
		background: #fff;
		margin-bottom: 24rpx;
		border-top: 2rpx solid #f2f2f2;
	}

.container {
	position: relative;
	width: 484rpx;
	height: 484rpx;
	margin: 0 auto;
	outline: 1rpx dashed;
  }

  .triangle {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transition: 1s ease-in-out;
	animation: opacity 1s ease-in 2s infinite;
  }

  #triangle1 {
	background-color: rgb(251, 53, 49);
	clip-path: polygon(75rpx 143rpx, 149rpx 80rpx, 182rpx 134rpx);
	transition-duration: 0ms;
	animation-delay: 0ms;
  }
  #triangle2 {
	background-color: rgb(237, 114, 110);
	clip-path: polygon(149rpx 80rpx, 242rpx 131rpx, 182rpx 134rpx);
	transition-duration: 10ms;
	animation-delay: 10ms;
  }
  #triangle3 {
	background-color: rgb(251, 53, 49);
	clip-path: polygon(75rpx 143rpx, 149rpx 240rpx, 125rpx 266rpx);
	transition-duration: 20ms;
	animation-delay: 20ms;
  }
  #triangle4 {
	background-color: rgb(238, 61, 82);
	clip-path: polygon(75rpx 143rpx, 182rpx 134rpx, 206rpx 173rpx, 149rpx 240rpx);
	transition-duration: 30ms;
	animation-delay: 30ms;
  }
  #triangle5 {
	background-color: rgb(239, 21, 29);
	clip-path: polygon(182rpx 134rpx, 242rpx 131rpx, 206rpx 173rpx);
	transition-duration: 40ms;
	animation-delay: 40ms;
  }
  #triangle6 {
	background-color: rgb(232, 94, 74);
	clip-path: polygon(206rpx 173rpx, 242rpx 131rpx, 242rpx 232rpx);
	transition-duration: 50ms;
	animation-delay: 50ms;
  }
  #triangle7 {
	background-color: rgb(238, 58, 86);
	clip-path: polygon(125rpx 266rpx, 149rpx 240rpx, 161rpx 258rpx);
	transition-duration: 60ms;
	animation-delay: 60ms;
  }
  #triangle8 {
	background-color: rgb(239, 21, 29);
	clip-path: polygon(149rpx 240rpx, 206rpx 173rpx, 242rpx 232rpx, 161rpx 258rpx);
	transition-duration: 70ms;
	animation-delay: 70ms;
  }
  #triangle9 {
	background-color: rgb(211, 74, 98);
	clip-path: polygon(125rpx 266rpx, 161rpx 258rpx, 242rpx 368rpx);
	transition-duration: 80ms;
	animation-delay: 80ms;
  }
  #triangle10 {
	background-color: rgb(216, 44, 54);
	clip-path: polygon(161rpx 258rpx, 242rpx 232rpx, 242rpx 368rpx);
	transition-duration: 90ms;
	animation-delay: 90ms;
  }
  #triangle11 {
	background-color: rgb(251, 53, 49);
	clip-path: polygon(409rpx 143rpx, 335rpx 80rpx, 302rpx 134rpx);
	transition-duration: 100ms;
	animation-delay: 100ms;
  }
  #triangle12 {
	background-color: rgb(237, 114, 110);
	clip-path: polygon(335rpx 80rpx, 242rpx 131rpx, 302rpx 134rpx);
	transition-duration: 110ms;
	animation-delay: 110ms;
  }
  #triangle13 {
	background-color: rgb(251, 53, 49);
	clip-path: polygon(409rpx 143rpx, 335rpx 240rpx, 359rpx 266rpx);
	transition-duration: 120ms;
	animation-delay: 120ms;
  }
  #triangle14 {
	background-color: rgb(238, 61, 82);
	clip-path: polygon(409rpx 143rpx, 302rpx 134rpx, 278rpx 173rpx, 335rpx 240rpx);
	transition-duration: 130ms;
	animation-delay: 130ms;
  }
  #triangle15 {
	background-color: rgb(239, 21, 29);
	clip-path: polygon(302rpx 134rpx, 242rpx 131rpx, 278rpx 173rpx);
	transition-duration: 140ms;
	animation-delay: 140ms;
  }
  #triangle16 {
	background-color: rgb(216, 44, 54);
	clip-path: polygon(278rpx 173rpx, 242rpx 131rpx, 242rpx 232rpx);
	transition-duration: 150ms;
	animation-delay: 150ms;
  }
  #triangle17 {
	background-color: rgb(238, 58, 86);
	clip-path: polygon(359rpx 266rpx, 335rpx 240rpx, 323rpx 258rpx);
	transition-duration: 160ms;
	animation-delay: 160ms;
  }
  #triangle18 {
	background-color: rgb(239, 21, 29);
	clip-path: polygon(335rpx 240rpx, 278rpx 173rpx, 242rpx 232rpx, 323rpx 258rpx);
	transition-duration: 170ms;
	animation-delay: 170ms;
  }
  #triangle19 {
	background-color: rgb(211, 74, 98);
	clip-path: polygon(359rpx 266rpx, 323rpx 258rpx, 242rpx 368rpx);
	transition-duration: 180ms;
	animation-delay: 180ms;
  }
  #triangle20 {
	background-color: rgb(232, 94, 74);
	clip-path: polygon(323rpx 258rpx, 242rpx 232rpx, 242rpx 368rpx);
	transition-duration: 190ms;
	animation-delay: 190ms;
  }

  .font #triangle1 {
	background-color: rgb(251, 53, 49);
	clip-path: polygon(42rpx 273rpx, 77rpx 192rpx, 96rpx 234rpx);
  }
  .font #triangle2 {
	background-color: rgb(237, 114, 110);
	clip-path: polygon(42rpx 273rpx, 96rpx 234rpx, 87rpx 336rpx);
  }
  .font #triangle3 {
	background-color: rgb(251, 53, 49);
	clip-path: polygon(40rpx 330rpx, 42rpx 273rpx, 87rpx 336rpx);
  }
  .font #triangle4 {
	background-color: rgb(238, 61, 82);
	clip-path: polygon(40rpx 330rpx, 87rpx 336rpx, 57rpx 348rpx);
  }
  .font #triangle5 {
	background-color: rgb(239, 21, 29);
	clip-path: polygon(135rpx 192rpx, 228rpx 285rpx, 202rpx 324rpx);
  }
  .font #triangle6 {
	background-color: rgb(232, 94, 74);
	clip-path: polygon(202rpx 324rpx, 228rpx 285rpx, 306rpx 306rpx);
  }
  .font #triangle7 {
	background-color: rgb(238, 58, 86);
	clip-path: polygon(202rpx 324rpx, 306rpx 306rpx, 252rpx 358rpx);
  }
  .font #triangle8 {
	background-color: rgb(239, 21, 29);
	clip-path: polygon(252rpx 358rpx, 306rpx 306rpx, 354rpx 368rpx);
  }
  .font #triangle9 {
	background-color: rgb(211, 74, 98);
	clip-path: polygon(306rpx 306rpx, 362rpx 308rpx, 354rpx 368rpx);
  }
  .font #triangle10 {
	background-color: rgb(216, 44, 54);
	clip-path: polygon(354rpx 368rpx, 362rpx 308rpx, 430rpx 354rpx);
  }
  .font #triangle11 {
	background-color: rgb(251, 53, 49);
	clip-path: polygon(362rpx 308rpx, 348rpx 221rpx, 406rpx 290rpx);
  }
  .font #triangle12 {
	background-color: rgb(237, 114, 110);
	clip-path: polygon(362rpx 308rpx, 406rpx 290rpx, 430rpx 354rpx);
  }
  .font #triangle13 {
	background-color: rgb(251, 53, 49);
	clip-path: polygon(406rpx 290rpx, 453rpx 315rpx, 430rpx 354rpx);
  }
  .font #triangle14 {
	background-color: rgb(238, 61, 82);
	clip-path: polygon(226rpx 152rpx, 236rpx 136rpx, 266rpx 140rpx);
  }
  .font #triangle15 {
	background-color: rgb(239, 21, 29);
	clip-path: polygon(226rpx 152rpx, 266rpx 140rpx, 282rpx 165rpx);
  }
  .font #triangle16 {
	background-color: rgb(216, 44, 54);
	clip-path: polygon(266rpx 140rpx, 298rpx 125rpx, 282rpx 165rpx);
  }
  .font #triangle17 {
	background-color: rgb(238, 58, 86);
	clip-path: polygon(226rpx 152rpx, 282rpx 165rpx, 260rpx 200rpx);
  }
  .font #triangle18 {
	background-color: rgb(239, 21, 29);
	clip-path: polygon(338rpx 108rpx, 405rpx 108rpx, 418rpx 186rpx);
  }
  .font #triangle19 {
	background-color: rgb(211, 74, 98);
	clip-path: polygon(405rpx 108rpx, 453rpx 144rpx, 418rpx 186rpx);
  }
  .font #triangle20 {
	background-color: rgb(232, 94, 74);
	clip-path: polygon(418rpx 186rpx, 453rpx 144rpx, 456rpx 165rpx);
  }

  @keyframes opacity {
	0% {
	  opacity: 1;
	}
	25% {
	  opacity: 0.6;
	}
	50% {
	  opacity: 0.8;
	}
	75% {
	  opacity: 0.8;
	}
	100% {
	  opacity: 1;
	}
  }
</style>