#前端 #css #demo #codepen
Shattering Images by Szenia Zadvornykh
一个独特的图片破碎效果,是需求时调研发现的。
技术分析:
- 使用Delaunay三角剖分算法将图片分割成若干个三角形片段
- 每个三角形创建一个Fragment对象。
- 每个Fragment对象包含一个小的canvas元素,该元素只绘制对应的三角形片段。
- 通过对每个Fragment的canvas应用动画效果,实现整个图片的破碎效果。
- 动画效果使用gsap库(TweenMax和TimelineMax)来实现
Shattering Images by Szenia Zadvornykh
一个独特的图片破碎效果,是需求时调研发现的。
技术分析:
- 使用Delaunay三角剖分算法将图片分割成若干个三角形片段
- 每个三角形创建一个Fragment对象。
- 每个Fragment对象包含一个小的canvas元素,该元素只绘制对应的三角形片段。
- 通过对每个Fragment的canvas应用动画效果,实现整个图片的破碎效果。
- 动画效果使用gsap库(TweenMax和TimelineMax)来实现