console
function animate({ timing, draw, duration }) {
let start = performance.now();
return new Promise(resolve => {
requestAnimationFrame(function animate(time) {
//timeFraction为时间段，值为0-1之间 （timeFraction goes from 0 to 1）
let timeFraction = (time - start) / duration;
if (timeFraction > 1) timeFraction = 1;
// 计算当前的动画状态（calculate the current animation state）
let progress = timing(timeFraction)
draw(progress); // draw it
if (timeFraction < 1) {
requestAnimationFrame(animate);
} else {
resolve(timing);
}
});
});
}
const train = document.querySelector('.ball');
// 沿着x轴匀速直线运动
const linear = () => {
const draw = (progress) => {
train.style.transform = `translate(${progress}px, 0)`;
}
// 沿着x轴匀速运动
animate({
duration: 1000,
timing(timeFraction) {
return timeFraction * 100;
},
draw,
});
};
// 重力
const gravity = () => {
const draw = (progress) => {
train.style.transform = `translate(0, ${500 * (progress - 1)}px)`;
};
// 沿着x轴匀速运动
animate({
duration: 1000,
timing(timeFraction) {
return timeFraction ** 2;
},
draw,
});
};
// 摩擦力(匀减速运动）
const friction = () => {
// 初始高度500px
const draw = (progress) => {
train.style.transform = `translate(0, ${500 * (progress - 1)}px)`;
};
// 沿着x轴匀速运动
animate({
duration: 1000,
timing(timeFraction) {
// 初始速度系数为2
return timeFraction * (2 - timeFraction);
},
draw,
});
};
// 平抛(x轴匀速，y轴加速)
const horizontalMotion = () => {
const draw = (progress) => {
train.style.transform = `translate(${500 * progress.x}px, ${500 * (progress.y - 1)}px)`;
};
// 有两个方向，沿着x轴匀速运动，沿着y轴加速运动
animate({
duration: 1000,
timing(timeFraction) {
return {
x: timeFraction,
y: timeFraction ** 2,
}
},
draw,
});
};
// 旋转 + 平抛(x轴匀速，y轴加速，旋转匀速)
const horizontalMotionWidthRotate = () => {
const draw = (progress) => {
train.style.transform = `translate(${500 * progress.x}px, ${500 * (progress.y - 1)}px) rotate(${2000 * progress.rotate}deg)`;
};
// 有两个方向，沿着x轴匀速运动，沿着y轴加速运动
animate({
duration: 2000,
timing(timeFraction) {
return {
x: timeFraction,
y: timeFraction ** 2,
rotate: timeFraction,
}
},
draw,
});
};
// 拉弓(x轴匀速 + y轴初始速度为负的匀加速)
const arrowMove = () => {
const back = (x, timeFraction) => {
return Math.pow(timeFraction, 2) * ((x + 1) * timeFraction - x);
}
const draw = (progress) => {
train.style.transform = `translate(${200 * progress.x}px, ${- 500 * progress.y}px)`;
};
animate({
duration: 1000,
timing(timeFraction) {
return {
x: timeFraction,
y: back(2, timeFraction),
};
},
draw,
});
};
// 贝塞尔
const bezier = () => {
const bezierPath = (x1, y1, x2, y2, timeFraction) => {
const x = 3 * x1 * timeFraction * (1 - timeFraction) ** 2 + 3 * x2 * timeFraction ** 2 * (1 - timeFraction) + timeFraction ** 3;
const y = 3 * y1 * timeFraction * (1 - timeFraction) ** 2 + 3 * y2 * timeFraction ** 2 * (1 - timeFraction) + timeFraction ** 3;
return [x, y];
}
const draw = (progress) => {
const [px, py] = bezierPath(0.2, 0.6, 0.8, 0.2, progress);
train.style.transform = `translate(${300 * px}px, ${-300 * py}px)`;
}
animate({
duration: 2000,
timing(timeFraction) {
return timeFraction * (2 - timeFraction);
},
draw,
});
}
// 缓动函数实现弹球
const bounceMove = () => {
const bounce = (timeFraction) => {
if (timeFraction < 1 / 2.75) {
return 7.5625 * timeFraction * timeFraction
} else if (timeFraction < 2 / 2.75) {
return 7.5625 * (timeFraction -= 1.5 / 2.75) * timeFraction + 0.75
} else if (amount < 2.5 / 2.75) {
return 7.5625 * (timeFraction -= 2.25 / 2.75) * timeFraction + 0.9375
} else {
return 7.5625 * (timeFraction -= 2.625 / 2.75) * timeFraction + 0.984375
}
}
const draw = (progress) => {
train.style.transform = `translate(${200 * progress.x}px, ${200 * (progress.y - 1)}px)`;
};
animate({
duration: 1000,
timing(timeFraction) {
return {
x: timeFraction,
y: bounce(timeFraction),
};
},
draw,
});
};
// 弹球
const asyncBounce = () => {
(async function () {
let damping = 0.7, // 衰变系数
duration = 1000,
height = 300;
while (height >= 1) {
const down = (progress) => {
train.style.transform = `translate(0, ${height * (progress - 1)}px)`;
};
await animate({
duration: duration,
timing(timeFraction) {
return timeFraction ** 2;
},
draw: down,
});
height *= damping ** 2;
duration *= damping;
const up = (progress) => {
train.style.transform = `translate(0, ${-height * progress}px)`;
}
await animate({
duration: duration,
timing(timeFraction) {
return timeFraction * (2 - timeFraction);
},
draw: up,
});
}
}());
};
// 椭圆
const ellipsis = () => {
const draw = (progress) => {
const x = 150 * Math.cos(Math.PI * 2 * progress);
const y = 100 * Math.sin(Math.PI * 2 * progress);
train.style.transform = `translate(${x}px, ${y}px)`;
}
animate({
duration: 2000,
timing(timeFraction) {
return timeFraction * (2 - timeFraction);
},
draw,
});
};
// 延时函数
// await animate({
// duration: 1000,
// timing: () => {},
// draw: () => {},
// });
<div id="container">
<div class="axisX"></div>
<div class="axisY"></div>
<div class="ball"></div>
<div class="button-container">
<div class="button" onClick="linear()">匀速直线</div>
<div class="button" onClick="gravity()">重力</div>
<div class="button" onClick="friction()">摩擦力</div>
<div class="button" onClick="horizontalMotion()">平抛</div>
<div class="button" onClick="horizontalMotionWidthRotate()">旋转+平抛</div>
<div class="button" onClick="arrowMove()">拉弓</div>
<div class="button" onClick="bezier()">贝塞尔曲线</div>
<div class="button" onClick="bounceMove()">缓动函数实现弹球</div>
<div class="button" onClick="asyncBounce()">弹球</div>
<div class="button" onClick="ellipsis()">椭圆</div>
</div>
</div>
body {
margin: 0;
padding: 0;
}
#container {
position: absolute;
width: 100%;
height: 100vh;
}
.axisX {
height: 2px;
background: black;
width: 100%;
position: absolute;
top: 60%;
transform: translate(0, -1px);
}
.axisY {
width: 2px;
background: black;
height: 100vh;
position: absolute;
left: 50%;
transform: translate(-1px, 0);
}
.ball {
position: absolute;
width: 40px;
height: 40px;
border-radius: 20px;
background: red;
top: calc(60% - 20px);
left: calc(50% - 20px);
}
.ball::before {
content: "";
position: absolute;
left: 10px;
top: 10px;
background: yellow;
width: 10px;
height: 10px;
border-radius: 5px;
}
.button-container {
position: absolute;
bottom: 50px;
left: 100px;
}
.button {
cursor: pointer;
border: 2px solid black;
padding: 10px 20px;
font-size: 20px;
display: inline-block;
}
.button:hover {
background: gray;
}