uniapp多边形动画

实现效果

• 使用三角形，四边形等拼成一个爱心的图形。
• 爱心的图形一段时间会有高光闪过。
• 点击爱心图形会使拼成一个心字。

实现思路

三角形，四边形可以用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>