Search code examples
javascripthtmlanimationsvgtransform

How to time a svg transformation with javascript

In this example, the svg-plus button transforms into a close button when clicked and vice versa with svg.setAttribute("transform","rotate(45)");.

Is it possible to time this transformation in such a way that it is not just a change from one state to another, but a smooth transition?

Here is the example:

function rotate() {
  var svg = document.getElementById("svgID");
  if (svg.getAttribute("transform") === "rotate(45)") {
    svg.setAttribute("transform", "rotate(0)");
  } else {
    svg.setAttribute("transform", "rotate(45)");
  }
}
#button {
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  box-shadow: none;
  border: none;
}
<button id="button" onclick="rotate()">
        <svg id="svgID"
        width="100%"
        height="100%"
        viewBox="0 0 142.40739 142.40991"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:svg="http://www.w3.org/2000/svg">
       <defs
          id="defs6" />
        <path
          id="rect234"
          style="display:inline;opacity:1;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:stroke fill markers"
          d="m 85.223081,28.929132 a 4.2333333,4.2333333 0 0 0 -4.233333,4.233333 v 62.801852 l -65.486442,-0.24339 a 4.107912,4.107912 0 0 0 -4.247803,3.96255 4.2333333,4.2333333 0 0 0 4.217313,4.249353 l 65.516932,0.24339 v 62.9295 a 4.107912,4.107912 0 0 0 3.978568,4.23333 4.2333333,4.2333333 0 0 0 4.233334,-4.23333 v -62.89901 l 60.21338,0.22376 a 4.107912,4.107912 0 0 0 4.2478,-3.96255 4.2333333,4.2333333 0 0 0 -4.21731,-4.248833 L 89.20165,95.994807 V 33.162465 a 4.107912,4.107912 0 0 0 -3.978569,-4.233333 z"
          transform="translate(-11.255471,-28.929132)" />
        </svg>
     </button>

svg transformation with setAttribute("transform",rotate(45)"):

svg transformation with setAttribute("transform",rotate(45)")

Solution

  • Method 1: requestAnimationFrame

    function anim(from, to, cb, duration=100) {
  let startms;
  const frame = ms => {
    const x = (ms - startms) ;
    if (x > duration) {
      return cb(to);
    }
    cb(x / duration * (to - from) + from)
    requestAnimationFrame(frame);
  }
  requestAnimationFrame(ms => {
    startms = ms;
    requestAnimationFrame(frame);
  })
}

function rotate() {
  var svg = document.getElementById("svgID");
  if (svg.getAttribute("transform") === "rotate(45)") {
    anim(45, 0, v=> svg.setAttribute("transform", `rotate(${v})`));
  } else {
    anim(0, 45, v=> svg.setAttribute("transform", `rotate(${v})`));
  }
}
    #button {
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  box-shadow: none;
  border: none;
}
    <button id="button" onclick="rotate()">
        <svg id="svgID"
        width="100%"
        height="100%"
        viewBox="0 0 142.40739 142.40991"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:svg="http://www.w3.org/2000/svg">
       <defs
          id="defs6" />
        <path
          id="rect234"
          style="display:inline;opacity:1;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:stroke fill markers"
          d="m 85.223081,28.929132 a 4.2333333,4.2333333 0 0 0 -4.233333,4.233333 v 62.801852 l -65.486442,-0.24339 a 4.107912,4.107912 0 0 0 -4.247803,3.96255 4.2333333,4.2333333 0 0 0 4.217313,4.249353 l 65.516932,0.24339 v 62.9295 a 4.107912,4.107912 0 0 0 3.978568,4.23333 4.2333333,4.2333333 0 0 0 4.233334,-4.23333 v -62.89901 l 60.21338,0.22376 a 4.107912,4.107912 0 0 0 4.2478,-3.96255 4.2333333,4.2333333 0 0 0 -4.21731,-4.248833 L 89.20165,95.994807 V 33.162465 a 4.107912,4.107912 0 0 0 -3.978569,-4.233333 z"
          transform="translate(-11.255471,-28.929132)" />
        </svg>
     </button>

    Method 2: animate

    function anim(el, from, to, duration=100) {
  const animation = [
    { transform: `rotate(${from}deg)` },
    { transform: `rotate(${to}deg)` }
  ];
  const timing = {
    fill: 'both',
    duration,
    iterations: 1
  };
  el.animate(animation, timing);
}

function rotate() {
  var svg = document.getElementById("svgID");
  if (svg.dataset.rotated === "1") {
    svg.dataset.rotated = "0";
    anim(svg, 45, 0);
  } else {
    svg.dataset.rotated = "1";
    anim(svg, 0, 45);
  }
}
    #button {
  margin: 0;
  padding: 0;
  background: none;
  outline: none;
  box-shadow: none;
  border: none;
}
    <button id="button" onclick="rotate()">
        <svg id="svgID"
        width="100%"
        height="100%"
        viewBox="0 0 142.40739 142.40991"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:svg="http://www.w3.org/2000/svg">
       <defs
          id="defs6" />
        <path
          id="rect234"
          style="display:inline;opacity:1;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:stroke fill markers"
          d="m 85.223081,28.929132 a 4.2333333,4.2333333 0 0 0 -4.233333,4.233333 v 62.801852 l -65.486442,-0.24339 a 4.107912,4.107912 0 0 0 -4.247803,3.96255 4.2333333,4.2333333 0 0 0 4.217313,4.249353 l 65.516932,0.24339 v 62.9295 a 4.107912,4.107912 0 0 0 3.978568,4.23333 4.2333333,4.2333333 0 0 0 4.233334,-4.23333 v -62.89901 l 60.21338,0.22376 a 4.107912,4.107912 0 0 0 4.2478,-3.96255 4.2333333,4.2333333 0 0 0 -4.21731,-4.248833 L 89.20165,95.994807 V 33.162465 a 4.107912,4.107912 0 0 0 -3.978569,-4.233333 z"
          transform="translate(-11.255471,-28.929132)" />
        </svg>
     </button>