uniapp多边形动画

实现效果

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

实现思路

三角形，四边形可以用clip-path: polygon();画出来，确定几个顶点可以画出任意图形。
高光需要在每个多边形添加动画延迟然后加上统一的动画。
爱心变成心字只需要确定更改后的多边形顶点位置，再使用transition变换即可。
问题点

暂无
整体代码

重要属性如下

• clip-path: polygon绘制多边形
  
• transition图形变换
  
• animation动画
  
• transition-duration变换时间
  
• animation-delay动画延迟
  

1. <view >
2.         <view  :>
3.                 <view  id="triangle1"></view>
4.                 <view  id="triangle2"></view>
5.                 <view  id="triangle3"></view>
6.                 <view  id="triangle4"></view>
7.                 <view  id="triangle5"></view>
8.                 <view  id="triangle6"></view>
9.                 <view  id="triangle7"></view>
10.                 <view  id="triangle8"></view>
11.                 <view  id="triangle9"></view>
12.                 <view  id="triangle10"></view>
13.                 <view  id="triangle11"></view>
14.                 <view  id="triangle12"></view>
15.                 <view  id="triangle13"></view>
16.                 <view  id="triangle14"></view>
17.                 <view  id="triangle15"></view>
18.                 <view  id="triangle16"></view>
19.                 <view  id="triangle17"></view>
20.                 <view  id="triangle18"></view>
21.                 <view  id="triangle19"></view>
22.                 <view  id="triangle20"></view>
23.         </view>
24. </view>
26. <button  @tap="toggleAnimation" :disabled="isMoveing">来点动画</button>

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

热心回复！