代碼
提交代碼
<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中已有實際圖形元素,直接選擇器初始化
// 1S內(nèi)矩形圍繞矩形的中心旋轉100次,完成旋轉一周,動畫效果是緩出
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); // 注意,旋轉中心是矩形的中心
rect.transform(m); // 在rect節(jié)點應用matrix
}, 1000, mina.easeout(), () => {
});
</script>
運行結果