动态形状的菜单显示效果-Dynamic Shape Overlays with SVG

Today we’d like to share another way of achieving morphing page transitions. This time, we’ll generate multiple SVG curves with JavaScript, making many different looking shapes possible. By controlling the individual coordinates of the several layers of SVG paths, the curved shapes animate to a rectangle (the overlay) with a gooey motion. We use some nice easing functions from glsl-easings and by tuning the curve, speed and the delay value, we can generate many interesting effects.
今天，我们分享页面实现变形转换的另一种方法，这一次，我们将用JavaScript生成多个SVG曲线，使许多不同形状的形状成为可能。通过控制SVG路径的几层的各坐标，曲线形状动画的一个矩形（覆盖）与糊糊的运动，使用一些功能从GLSL easings通过调整曲线、速度和延迟值，可以产生许多有趣的效果。

查看演示 下载资源