Snap SVG requestAnimationFrame

Date: 2018-04-13

https://jsfiddle.net/607t26dn/16/

var s = Snap("500px", "500px");
s.appendTo(document.body);
s.attr({
    viewBox: "0 0 100 100",
    style: "display: block;"
});
var header = s.rect(0, 0, 100, 100);
header.attr({
    fill: "white",
    stroke: "green"
});
var verticalLine = s.line(50, 10, 50, 90).attr({id: "vertical", stroke: "black", strokeWidth: "1px"});
var horizontalLine = s.line(10, 50, 90, 50).attr({id: "horizontal", stroke: "black", strokeWidth: "1px"});
var circle = s.circle(50, 50, 10).attr({stroke: "red", fill: "none"});
var group = s.group(verticalLine);
group.circle(50,50,1).attr({stroke: "none", fill: "green"});

function animLoop(render, element) {
    var then = Date.now();
    function loop(now) {
        var interval = now - then;
        if (160 <= interval || render(interval) !== false)
            requestAnimationFrame(loop, element);
        then = now;
    }
    loop(then);
}

var deg = 0;
 function step(interval) {
   deg += (0.03) * interval;
   group.transform('r'+deg+',50,50');   
 };
animLoop(step, s);

 

10910cookie-checkSnap SVG requestAnimationFrame