uniapp多边形动画
实现效果[*]使用三角形，四边形等拼成一个爱心的图形。
[*]爱心的图形一段时间会有高光闪过。
[*]点击爱心图形会使拼成一个心字。
实现思路
三角形，四边形可以用clip-path: polygon();画出来，确定几个顶点可以画出任意图形。
高光需要在每个多边形添加动画延迟然后加上统一的动画。
爱心变成心字只需要确定更改后的多边形顶点位置，再使用transition变换即可。
问题点
暂无
整体代码
重要属性如下
[*]clip-path: polygon绘制多边形
[*]transition图形变换
[*]animation动画
[*]transition-duration变换时间
[*]animation-delay动画延迟
<view >
<view:>
<viewid="triangle1"></view>
<viewid="triangle2"></view>
<viewid="triangle3"></view>
<viewid="triangle4"></view>
<viewid="triangle5"></view>
<viewid="triangle6"></view>
<viewid="triangle7"></view>
<viewid="triangle8"></view>
<viewid="triangle9"></view>
<viewid="triangle10"></view>
<viewid="triangle11"></view>
<viewid="triangle12"></view>
<viewid="triangle13"></view>
<viewid="triangle14"></view>
<viewid="triangle15"></view>
<viewid="triangle16"></view>
<viewid="triangle17"></view>
<viewid="triangle18"></view>
<viewid="triangle19"></view>
<viewid="triangle20"></view>
</view>
</view>
<button@tap="toggleAnimation" :disabled="isMoveing">来点动画</button>
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]