前端动画实现 - 笔记开发者社区

前端动画实现 - 笔记

/**
 * 入参说明：
 * draw 动画绘制函数（例如：() => { ctx.draw ()... }）
 * easing 缓动函数（数学）（例如：(x) => y）
 * duration 动画持续时间（例如：2000）
 * @returns 一个可以表示动画是否完成的 Promise 对象，同时，由于动画可以是连续的，所以 Promise.then 就能让动画按顺序被调用
function animate ({easing, draw, duration}) {
    // 动画开始的时间戳
    // Q：为什么使用 performance.now () 而非 Date.now ()？
    // A：因为 performance.now () 会以恒定速度自增，精确到微秒级别，不易被篡改。
    let start = performance.now();
    return new Promise(resolve => {
        requestAnimationFrame(function animate(time) {
            // (time - start) 算出距离动画开始，时间已经过去了多少，然后根据过去了多少时间 ÷ 规定的动画持续时间，算出目前动画进度（百分比）
            // 注意：这是不算上缓动函数修正的百分比（原始百分比）
            // 例如：动画开始时间为 start = 1666，现在的时间为 time = 2666，想让动画持续的时间为 duration = 2000，那么 timeFraction 就是 0.5，即 50%
            let timeFraction = (time - start) / duration;
            // 如果 timeFraction > 1，即原始百分比已经大于 100%，即动画照理来说应该是已经结束了的，那么就将原始百分比设为 100%，即 timeFraction = 1
            if (timeFraction > 1) timeFraction = 1;
            //progress 是动画的实际进程（通过缓动函数计算后的真实百分比），这个值应该也是要小于 100% 的，你可以把 easing 函数理解为一个纯数学函数，接受 [0, 1]-> 输出 [0, 1]，建立真实时间到动画百分比的映射关系
            let progress = easing(timeFraction);
            // 给 draw 函数传入 progress（动画目前应该到达的进度），那么 draw 函数就可以根据这个进度指示，来绘制相应的图像（可以类比 CSS animation 中的 keyframe 百分比）
            draw(progress);
            // 如上所述，当 timeFrction（原始百分比）< 1 时，说明动画还为完成，则继续调用 rAF，否则说明动画已结束，将此 Promise 解决 (resolve) 掉
            if (timeFraction < 1) {
                requestAnimationFrame(animate);
            } else {
                resolve();
}

const ball = document.querySelector( '.ball');
const draw = (progress) => {
    ball.style.transform = `translate(${progress * 100}px, 0)`;
    // 这里的 * 100 实际上就是一个比例尺，将 [0, 1] 映射到 [0, 100] px
// 沿着 x 轴匀速运动
animate({
    duration: 1000,
    easing(timeFraction) {
        // 这就是一个匀速运动函数，相当于 (x) => x
        return timeFraction;
});

const draw = (progress) => {
    ball.style.transform = `translate(0, ${(progress - 1) * 500}px)`;
    // 这里的 500 就是比例尺
// 沿着 x 轴匀速运动
animate({
    duration: 1000,
    easing(timeFraction) {
        // 这个函数通过 t^2，模拟了重力的最显著特点
        return timeFraction ** 2;
        // 也可以模拟的真实一点：0.5 * 9.8 * (timeFraction ** 2)，当然，这样的话 draw 函数内部就也要做相应的调整了
});

// 初始高度 500px
const draw = (progress) => {
    ball.style.transform = `translate(${500 * progress.x}px),${500 * (progress.y - 1)}px)`;
// 匀减速运动
animate({
    duration: 1000,
    easing(t) {
        // v0 = 2，a = 2
        return 2 * t - (t ** 2);
});

const draw = (progress) => {
    ball.style.transform = `translate(translate(${500 * progress.x}px), ${500 * (progress - 1)}px)`;
// 有两个方向，沿着 x 轴匀速运动，沿着 y 轴加速运动
animate({
    duration: 1000,
    easing(t) {
        return {
            x: t,
            y: t ** 2
});

const draw = (progress) => {
    ball.style.transform = `translate(o,${500 * (progress - 1)}px rotate(${2000 * progress.rorate}deg))`;
// 有两个方向，沿着 x 轴匀速运动，沿着 y 轴加速运动
animate({
    duration: 1000,
    easing(t) {
        return {
            x: t,
            y: t ** 2,
            rotate: t // 匀速旋转
});

const draw = (progress) => {
    ball.style.transform = `translate(o,${500 * (progress - 1)}px rotate(${2000 * progress.rorate}deg))`;
// 有两个方向，沿着 x 轴匀速运动，沿着 y 轴加速运动
animate({
    duration: 1000,
    easing(t) {
        return {
            x: t,
            y: t ** 2,
            rotate: t // 匀速旋转
});

const bezierPath = (x1, y1, x2, y2, t) => {
    const x = 3 * t * ((1 - t) ** 2) * x1 + 3 * (t ** 2) * (1 - t) * x2 + (t ** 3) * 1;
    const y = 3 * t * ((1 - t) ** 2) * y1 + 3 * (t ** 2) * (1 - t) * y2 + (t ** 3) * 1;
    return [x, y];
}

async function autoDamping() {
    let damping = 0.7, // 衰减系数
        duration = 1000,
        height = 300; 
    // 当衰减到一定边界值时停止动画
    while(height > 1) {
        const down = (progress) => {
        	ball.style.transform = `translate(0, ${height * (progress - 1)}px)`;
        await animate({
        	duration: duration,
        	easing(t) {
          		return t ** 2;
        	draw: down,
        height *= damping ** 2; // ** 2 可以使动画效果更加柔和
      	duration *= damping;
		const up = (progress) => {
        	ball.style.transform = `translate(0, ${-height * progress}px)`;
        await animate({
        	duration: duration,
        	easing(t) {
          		return 2 * t - (t ** 2);
        	draw: down,
}

const draw = (progress) => {
    const x = 150 * Math.cos(Math.PI * 2 * progress);
    const y = 100 * Math.sin(Math.PI * 2 * progress);
    ball.style.transform = `translate(${x}px, ${y}px)`;
animate({
	duration: 2000,
    easing(t) {
  		return 2 * t - (t ** 2);
  	draw,
});

前端动画实现 - 笔记

前端动画实现 - 笔记

# 前端动画实现 - 笔记

# 动画的基本原理

# 什么是动画

# 动画的历史

# 计算机动画原理

# 前端动画分类

# CSS 动画

# SVG 动画

# SMIL

# JS、CSS

# JS 笔画的原理

# JS 动画

# 如何做选择

# 前端动画实现

# JS 动画函数封装

# JS 执行动画的核心思想

# 简单动画

# 匀速运动

# 重力效果

# 摩擦力（匀速减速运动）

# 平抛运动（x 轴匀速，y 轴加速）

# 旋转 + 平抛

# 拉弓效果

# 贝塞尔曲线

# 复杂动画

# 弹跳小球

# 椭圆运动

# 相关实践

# 动画资源

# 工作实践

# 动画的优化

# 用户体验