前端动画

auto-animate

自动添加动画

3D 拖动交互东湖

tweet 效果展示

const trackAnimationProgress = (animation, cb, precision = 5) => {
	let progress = 0;
 
	const updateValue = () => {
		if (animation && animation.currentTime) {
			let newProgress = animation.effect.getComputedTiming().progress * 1;
			if (animation.playState === "finished") newProgress = 1;
			newProgress = Math.max(0.0, Math.min(1.0, newProgress)).toFixed(
				precision
			);
 
			if (newProgress != progress) {
				progress = newProgress;
				cb(progress);
			}
		}
		requestAnimationFrame(updateValue);
	};
 
	requestAnimationFrame(updateValue);
};
 
document.querySelectorAll(".subject").forEach(($subject) => {
	trackAnimationProgress($subject.getAnimations()[0], (progress) => {
		// Do something with progress
	});
});

lottie