jQuery Object Animation with Circular Path

by Ravindra Athreya

HTML

<body>
    <button onclick="driveTo(270);">270</button>
    <button onclick="driveTo(180);">180</button>
    <button onclick="driveTo(90);">90</button>
    <button onclick="driveTo(0);">0</button>
    <div class="wrapper">
        <div class="road"></div>
        <div class="car"></div>
    </div>
    <input id="pre_value" type="hidden" value="0">
</body>

CSS

.wrapper{
    position: relative;
    width: 400px;
    height: 400px;
}
.road{
    position: absolute;
    top: 0;
    left: 0;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    border: 10px solid grey;
}
.car{
    background: #98bf21;
    position: absolute;
    left: 170px;
    height: 50px;
    width: 50px;
    border-radius: 50px;
}

JavaScript

$(document).ready(function(){
    driveTo(360);
  });

  function driveTo(new_value){
      var speedFactor = 5;
      pre_value = document.getElementById("pre_value").value;

      if (new_value > pre_value) {
        var diffToZero = pre_value;
        var speedToZero = diffToZero * speedFactor;
        var diff = 360 - new_value;
        var speed = diff * speedFactor;
        console.log("When New_Value > Pre_Value // pre_value: "+pre_value+" new_value: "+new_value+" speed: "+speed+" diff: "+diff);

        var arc_params = {
               	center: [180,180],
                   radius: 180,
                   start: pre_value,
                   end: 0,
                   dir: -1
              	}
    	  $(".car").animate({path : new $.path.arc(arc_params)},speedToZero,"linear")
        var arc_params = {
               	center: [180,180],
                   radius: 180,
                   start: 360,
                   end: new_value,
                   dir: -1
              	}
    	  $(".car").animate({path : new $.path.arc(arc_params)},speed,"linear")
      }
      else{
        var diff = pre_value - new_value;
        var speed = diff * speedFactor;
        var arc_params = {
               	center: [180,180],
                   radius: 180,
                   start: pre_value,
                   end: new_value,
                   dir: -1
              	}
    	  $(".car").animate({path : new $.path.arc(arc_params)},speed,"linear")
      }
    document.getElementById("pre_value").value = new_value;
  }



  /*
   * jQuery css bezier animation support -- Jonah Fox
   * version 0.0.1
   * Released under the MIT license.
   */

  ;(function($){

    $.path = {};

    var V = {
      rotate: function(p, degrees) {
        var radians = degrees * Math.PI / 180,
          c = Math.cos(radians),
          s = Math.sin(radians);
        return [c*p[0] - s*p[1], s*p[0] + c*p[1]];
      },
      scale: function(p, n) {
        return [n*p[0], n*p[1]];
      },
    ...