svg 低面图形的变形动画

1.目标——低面图形变形(难度:4.0

本期我们的目标是将三角面组成的低面图案,通过动画,变成另外一个低面图案.每个三角面的位置,形状和大小颜色都会连续变化,逐渐变成另外一个图案的三角面!

2.分析需求——庖丁解牛

 

1.低面图形通过美术工具TriangulateImage5AI来制作,请参考19低面图形

2.两个低面图形的三角面数量很可能不同(相同为巧合),需要重复图形三角面达到最大数量

3.三角面的颜色和顶点变换,需要提取数值,做字符串和数值之间的转换

4.本例使用JS插值而不是SMIL动画,兼容最新的主流浏览器

。。。

。。。

更多内容欢迎大家扫码订阅《躁动的web动画》,有更多精彩动画的教程和源代码,每周更新

猜你喜欢

转载自blog.csdn.net/konglingbin66/article/details/82759714
SVG
今日推荐