变形动画：points（多边形）

这是最“稳”的 morph：只要两边的 points 有相同数量的数字，就能直接做平滑过渡（本库会把字符串里的数字逐个插值）。

规则：points 其实就是一串数字：x1 y1 x2 y2 ...。你想从 A 变到 B，就确保 A/B 的点数量一致（比如都 12 个点）。

Morph (points) code example

JavaScript

HTML

CSS

const star = '160 35 185 75 230 80 195 110 206 155 160 132 114 155 125 110 90 80 135 75'; const blob = '160 50 205 60 235 95 220 130 190 165 160 175 130 165 100 130 85 95 115 60'; xjs('#poly').animate({ points: [star, blob], duration: 1200, easing: 'ease-in-out' });

.shape { fill: rgba(255,159,67,0.14); stroke: rgba(255,159,67,0.55); stroke-width: 2; }

功能说明：
- 这里的 points 是“数字模板字符串”。本库会识别其中的数字并逐个插值。
- 适合：图标变形、加载态、装饰动效（尤其是多边形/折线）。

duration 1200ms

loop 2

Previous
—

SVG

Next
—