html – Smooth rolling and ball movement

Question:

There is a div , I make it look like it rolls. I do it with translate and rotate .

How to achieve a smoothness and greater reality at the end of the ball's path so that it stops smoothly?

And how to calculate the number of degrees, since movement along the x-axis will always be at different distances?

var deg = 0;

var append = function() {
  deg = deg + 90;
  $("#telo").css({
    "-moz-transform": " translate(350px,0) rotate(" + deg + "deg) ",
    "-ms-transform": "translate(350px,0) rotate(" + deg + "deg) ",
    "-webkit-transform": "translate(350px,0) rotate(" + deg + "deg) ",
    "-o-transform:": "translate(350px,0) rotate(" + deg + "deg) ",
    "transform": " translate(350px,0) rotate(" + deg + "deg) "
  });
  $("#t").append(" |" + deg + "| ")
}

var interval = 0;

$("#btn0").click(function() {
  interval = setInterval(append, 100);
})


$("#btn1").click(function() {
  clearInterval(interval);
})
div#telo {
  /*transform: translate3d(0, 0, 0);
   -webkit-transform: translate3d(0, 0, 0);*/
  position: absolute;
  width: 95px;
  height: 95px;
  background-color: #22dd66;
  bottom: 100px;
  margin-left: 25px;
  transition: .7s ease;
  -webkit-transition: .7s ease;
  -moz-transition: .7s ease;
  -o-transition: .7s ease;
  border-radius: 60px;
  text-align: center;
  color: white;
}
.k {
  width: 10px;
  height: 20px;
  display: block;
  margin: 0 auto;
  background: #333;
}
div#planka {
  position: absolute;
  width: 350px;
  height: 3px;
  background-color: red;
  bottom: 100px;
  margin-left: 50px;
  z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<div id="telo">
  <div class="k"></div>
</div>

<div id="t">1</div>

<button id="btn0">Start()</button>
<button id="btn1">Stop()</button>

<div id="planka"></div>

Answer:

Calculating degrees and distances

The ball diameter is 95px . In one revolution of the ball, its center moves to the length of a circle with the same diameter: 3,14 х 95px = 298,3px .

One turn is a 360deg turn. Therefore the working equation is:

alpha / 360 = x / 298,3

If the rotation is set to alpha degrees, then during the rotation the ball will roll by alpha * 298,3 / 360 pixels. If the distance is set in x pixels, then during the travel time the ball will rotate x * 360 / 298,3 degrees.

Smooth running

I think the best way is to use not linear as the transition-timing-function , but ease-in at the start and ease-out at the stop.

Scroll to Top