рони,
Вот, на скорую руку... Мало свободного времени.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
hr {
width: 300px; height: 2px; background-color: #000080;
margin-top: 160px;
}
.hr-rotate {
-webkit-animation: spin 5s ease-in-out;
-moz-animation: spin 5s ease-in-out;
-o-animation: spin 5s ease-in-out;
animation: spin 5s ease-in-out;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
}
.hr-set {
-webkit-animation: set 1s ease-in-out forwards;
-moz-animation: set 1s ease-in-out forwards;
-o-animation: set 1s ease-in-out forwards;
animation: set 1s ease-in-out forwards;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
}
</style>
<style id="spin">
</style>
<style id="set">
</style>
</head>
<body>
Начальный угол<input id = "setAngle" type="range" min="0" max="75" value="45" step = "15" list="tickAngle">
<datalist id="tickAngle">
<option value="0">0</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
<option value="60">60</option>
<option value="75">75</option>
</datalist>
<br>
Тормоза <input id = "setВrake" type="range" min="10" max="50" value="20" step = "10" list="tickBrake">
<datalist id="tickBrake">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</datalist>
<input id="go" name="" type="button" value="go">
<hr >
<script>
var maxAngle = "0", prevAngle = "0",
line = document.querySelector('hr');
go.onclick = function() {
line.classList.remove('hr-set');
maxAngle = setAngle.value;
if(maxAngle =="0") return;
var brake = +setВrake.value,
currAngle = +maxAngle,
limit = 0,
sign = 1,
keys = "@keyframes spin {";
while(currAngle > 0.9) {
limit++;
currAngle = currAngle *(100 - brake) / 100;
}
currAngle = +maxAngle;
for(var i = 0; i <= limit; i++) {
keys += (i *100 / limit) + "%{transform: rotateZ(" + sign * currAngle +"deg)}";
sign = - sign;
currAngle = currAngle *(100 - brake) / 100;
}
keys += "}";
spin.innerHTML = keys;
line.classList.add('hr-rotate');
setTimeout("line.classList.remove('hr-rotate');", 6000);
}
setAngle.onchange = function() {
line.classList.remove('hr-set');
prevAngle = maxAngle;
maxAngle = this.value;
set.innerHTML = "@keyframes set { 0% { transform: rotateZ("+prevAngle +"deg); } 100% { transform: rotateZ(" + maxAngle + "deg); }}";
line.classList.add('hr-set');
}
</script>
</body>
</html>