【JS进阶】Web API-JS原生animate(用例)

【JS进阶】Web API-JS原生animate(用例)

HTML代码

<div class="ball"></div>

CSS代码

.ball {
	width: 100px;
	height: 100px;
	background-color: black;
	border-radius: 50%;
}

JS代码

const ball = document.querySelector('.ball');
let prevX = 0, prevY = 0;  // 记录上一点位置

// 页面点击事件
window.addEventListener('click', function(e) {
	move(e.clientX, e.clientY);
})

function move(x, y) {
	const rad = Math.atan2(y - prevY, x - prevX);  // 计算弧度 
	const deg = (rad * 100) / Math.PI;  // 转换成角度
	ball.getAnimations().forEach((a) => a.cancel());  // 取消之前的动画
	ball.animate(
		[
			{
				transform: `translate(${prevX}px, ${prevY}px) rotate(${deg}deg)`,
				easing: 'ease-out'  // 时间函数
			},
			{
				transform: `translate(${prevX}px, ${prevY}px) rotate(${deg}deg) scaleX(1.5)`,
				offset: 0.6  // 相当于关键帧的“百分比”，范围0~1
			},
			{
				transform: `translate(${x}px, ${y}px) rotate(${deg}deg) scaleX(1.5)`,
				offset: 0.8
			},
			{
				transform: `translate(${x}px, ${y}px) rotate(${deg}deg)`,
			}
		],
		{
			duration: 1000,  // 动画执行时间
			fill: 'forwards',  // 确定元素动画最终位置(不设置这个，动画结束后又会回到初始位置)
		}
	);
	prevX = x;
	prevY = y;
}