代碼
提交代碼
<script src="https://wiki-code.oss-cn-beijing.aliyuncs.com/html5/js/snap.svg-min.js"></script>
<svg id="demo1" width="1000" height="1000"></svg>
<script>
let svg = Snap('#demo1');
let circle = svg.select('.circle'); //如果SVG中已有實(shí)際圖形元素,直接選擇器初始化
// 1S內(nèi)矩形圍繞矩形的中心旋轉(zhuǎn)100次,完成旋轉(zhuǎn)一周,動(dòng)畫(huà)效果是緩出
let rect = svg.paper.rect({x: 200, y: 200, width: 200, height: 200, fill: '#f00'});
Snap.animate(0, 100, (val) => {
let m = new Snap.Matrix();
m.rotate((val/100)*360, 300, 300); // 注意,旋轉(zhuǎn)中心是矩形的中心
rect.transform(m); // 在rect節(jié)點(diǎn)應(yīng)用matrix
}, 1000, mina.easeout(), () => {
});
</script>
運(yùn)行結(jié)果