问题
I've been trying to find a pure JavaScript ease implementation for some hours, but couldn't find any. The ones that came close didn't make any sense. All I could find was bunch of easing functions without implementation.
For example, functions like these:
function linear(time, begin, change, duration) {
return change * time / duration + begin;
}
function easeInQuad(t) {
return t*t
},
function easeOutQuad(t) {
return t*(2-t)
},
One of the things that trouble me is where does fps come in to play? It's directly related to the duration. I've seen no mention of it.
How would I implement the above easing functions in the following animation?
JSFiddle
var box = document.getElementById("box");
var fps = 60;
var duration = 2; // seconds
var start = 0; // pixel
var finish = window.innerWidth - box.clientWidth;
var distance = finish - start;
var increment = distance / (duration * fps);
var position = start;
function move() {
position += increment;
if (position >= finish) {
clearInterval(handler);
box.style.left = finish + "px";
return;
}
box.style.left = position + "px";
}
var handler = setInterval(move, 1000 / fps);
body {
background: gainsboro;
}
#box {
width: 100px;
height: 100px;
background: white;
box-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
position: absolute;
left: 0;
}
<div id="box"></div>
回答1:
You could use a time
variable and increment it for every frame and use the easing functions for the right position with the values you already have.
- Easing formulas: http://easings.net/
- Description: What is an easing function?
// formula http://easings.net/
// description https://stackoverflow.com/questions/8316882/what-is-an-easing-function
// x: percent
// t: current time,
// b: beginning value,
// c: change in value,
// d: duration
function easeInOutQuad(x, t, b, c, d) {
if ((t /= d / 2) < 1) {
return c / 2 * t * t + b;
} else {
return -c / 2 * ((--t) * (t - 2) - 1) + b;
}
}
function move() {
//position += increment;
time += 1 / fps;
position = easeInOutQuad(time * 100 / duration, time, start, finish, duration);
if (position >= finish) {
clearInterval(handler);
box.style.left = finish + "px";
return;
}
box.style.left = position + "px";
}
var box = document.getElementById("box"),
fps = 60,
duration = 2, // seconds
start = 0, // pixel
finish = window.innerWidth - box.clientWidth,
distance = finish - start,
increment = distance / (duration * fps),
position = start,
time = 0,
handler = setInterval(move, 1000 / fps);
body {
background: gainsboro;
}
#box {
width: 100px;
height: 100px;
background: white;
box-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
position: absolute;
left: 0;
}
<div id="box"></div>
回答2:
<canvas id='canvas' width=600 height=400></canvas>
<script>
var ctx = document.getElementById('canvas').getContext('2d');
var divx = 500;
var divtx = 0;
function animate() {
divx += (divtx - divx) / 20;
ctx.clearRect(0, 0, 600, 400);
ctx.fillRect(divx, 0, 100, 100);
window.requestAnimationFrame(animate);
}
animate();
</script>
来源:https://stackoverflow.com/questions/38497765/pure-javascript-animation-easing