AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

只会用插件可不行，这些前端动画技术同样值得收藏-JavaScript篇（上）

2024-07-02 52
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 只会用插件可不行，这些前端动画技术同样值得收藏-JavaScript篇（上）

前言

上篇文章我们详细的讲述了CSS中的原生动画技术，了解了过渡与动画属性。那么本文将与大家分享原生JS中的动画方案，有兴趣的同学请接着往下看

JS实现动画的形式有定时器，动画帧以及动画API技术

settimeout/setinterval

早期的JS中动画帧和动画API的概念尚不存在，开发者通常使用定时器生成对应动画

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        position: relative;
      }
      .box {
        width: 200px;
        height: 200px;
        top: 50px;
        position: absolute;
        background: lightblue;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <button id="play_pause">暂停/继续</button>
    <button id="direct">改变方向</button>
    <script>
      class MyAnimate {
        // 计时器id
        timer = null;
        // 创建计时器，动画开始
        startAnimate(fn, frame = 60) {
          // frame-帧数，默认60帧
          const { timer } = this;
          if (timer) {
            this.stopAnimate();
          }
          this.timer = setInterval(fn, 1000 / frame);
        }
        // 销毁计时器，动画结束
        stopAnimate() {
          const { timer } = this;
          if (timer) {
            clearInterval(timer);
            this.timer = null;
          }
        }
      }
      let speed = 3;
      const box = document.querySelector(".box");
      const play_pause_btn = document.querySelector("#play_pause");
      const direct_btn = document.querySelector("#direct");
      const animate = new MyAnimate();
      play_pause_btn.addEventListener("click", playPauseHandler);
      direct_btn.addEventListener("click", directHandler);
      // 动画开始、停止
      function playPauseHandler() {
        if (animate.timer) return animate.stopAnimate();
        animate.startAnimate(mainAnimate);
      }
      // 动画方向修改
      function directHandler() {
        speed = -speed;
      }
      // 尽量保持一个动画函数
      function mainAnimate() {
        moveBox(speed);
      }
      function moveBox(speed = 1) {
        const { style, offsetLeft } = box;
        style.left = `${offsetLeft + speed}px`;
      }
    </script>
  </body>
</html>

我使用上面的代码实现了一个简单的匀速运动，其中按钮一控制运动和暂停，按钮二控制运动的方向，其中speed用于控制速度，frame控制帧数，下面是动画效果

requestAnimationFrame

requestAnimationFrame早在2011就由W3C提出了，它是一种用于在浏览器中执行动画效果的方法，我们在前文讲述事件循环时提到过，它属于宏任务的一种，但是在settimeout之前执行，在执行完微任务后，会执行requestAnimationFrame调度动画帧，然后浏览器会进行重绘和重排。相对于定时器，这样做可以使requestAnimationFrame中的dom操作得到优化，提高性能

基本用法

我们使用动画帧的方式来实现一下上面的效果

let speed = 3;
let animate = null;
const box = document.querySelector(".box");
const play_pause_btn = document.querySelector("#play_pause");
const direct_btn = document.querySelector("#direct");
play_pause_btn.addEventListener("click", playPauseHandler);
direct_btn.addEventListener("click", directHandler);
 
// 动画开始、停止
function playPauseHandler() {
    if (!!animate) {
        cancelAnimationFrame(animate)
        return animate = null
    }
    mainAnimate();
}
// 动画方向修改
function directHandler() {
    speed = -speed;
}
// 尽量保持一个动画函数
function mainAnimate() {
    moveBox(speed)
    animate = requestAnimationFrame(mainAnimate);
}
function moveBox(speed = 1) {
    const { style, offsetLeft } = box;
    style.left = `${offsetLeft + speed}px`;
}

时间戳参数

requestAnimationFrame的钩子函数中会回传一个参数，这个参数是当前页面运行的时间戳，它是相对于页面加载的某个参考点来计算的，因此第一次的值会大于0。

这个时间戳是什么？

浏览器提供了一个性能监控的api：performance，其中performance.now()函数会返回当前时间戳，这个时间戳是以页面打开时间（performance.timing.navigationStart）为起点的

我们将浏览器的生命周期看成是一条时间轴，里面有许多时间节点，当执行requestAnimationFrame时相当于进入了时间轴的某个时间点，每一段时间会调用一个回调函数，当然当运行cancelAnimationFrame时相当于跳出了这个时间轴，当下次再进入时间轴时接着调用回调，流程可以参考下图

运行下面的代码可以打印出动画帧的时间戳

<!DOCTYPE html>
<html lang="CH">
 
<head>
    <meta charset="UTF-8" />
    <title></title>
</head>
 
<body>
    <button onclick="playPauseHandler()">暂停/继续</button>
    <script>
        let animate
        // 动画开始、停止
        function playPauseHandler() {
            if (animate) {
                cancelAnimationFrame(animate)
                return animate = null
            }
            startAnimate()
        }
        // 尽量保持一个动画函数
        function mainAnimate(timeStamp) {
            console.log(timeStamp);
            startAnimate()
        }
        function startAnimate() {
            animate = requestAnimationFrame(mainAnimate);
        }
    </script>
</body>
 
</html>

帧数与时间戳计算

基于上面的知识点和代码，我们可以利用performance和动画帧实现一个动画计时和帧数计算，请思考下面的代码

let animate, temp = 0, firstStamp = 0;
// 动画开始、停止
function playPauseHandler() {
    if (animate) {
        cancelAnimationFrame(animate)
        return animate = null
    }
    firstStamp = performance.now()// 重置时间戳
    startAnimate()
}
function mainAnimate(timeStamp = 0) {
    console.info(`FPS（每秒帧数）：${1000 / (timeStamp - temp)}`)
    console.info(`timeStamp（时间戳）：${timeStamp - firstStamp}`)
    startAnimate()
}
function startAnimate() {
    temp = performance.now()// 通过时间差计算帧数
    animate = requestAnimationFrame(mainAnimate);
}

效果如下

自动暂停

基于上面的知识点，我们还可以将其应用到实际场景中，如果有一个动画需要限制其运行时间，比如一秒（限制时间可以更好的使用贝塞尔曲线），那么我们可以参考下面的代码

let animate, firstStamp = 0;
const box = document.querySelector(".box"),
    totalStamp = 1000//动画执行一秒
// 动画开始、停止
function playPauseHandler() {
    if (animate) {
        cancelAnimationFrame(animate)
        return animate = null
    }
    firstStamp = performance.now()
    startAnimate()
}
function mainAnimate(timeStamp = 0) {
    if (totalStamp >= (timeStamp - firstStamp)) {// 当超出限定的帧数时，暂停动画
        moveBox()
    }
    startAnimate()
}
function startAnimate() {
    animate = requestAnimationFrame(mainAnimate);
}
function moveBox(speed = 3) {
    const { style, offsetLeft } = box;
    style.left = `${offsetLeft + speed}px`;
}

效果如下：

我们在每一次点击开始动画都会将firstStamp重置，以保证动画的周期始终是一秒

JS中的贝塞尔曲线

上述的动画使用的运动方式都是匀速运动，为了让动画更平滑，提升视觉观感，我们同样可以在JS中使用贝塞尔曲线

概念

在高中和大学，我们可能接触到了导数，也大致了解过速度与加速度的关系，贝塞尔曲线的变化是线性的，为了保证动画的可预测和可控性，贝塞尔曲线长度通常是有限的

下面两张图分别是使用德卡斯特里奥算法生成的二次和三次贝塞尔曲线的动画，动画来源于贝塞尔曲线

公式

下面是贝塞尔曲线的JS实现方式，我们假设起始点坐标是0,0，结束坐标是1,1。

二次贝塞尔

p0和p2坐标是（0,0）和（1,1）

// 假设起始点坐标是0,0，结束坐标是1,1。
// 二次贝塞尔
function quadraticBezier(_x, _y, t) {
    const mt = 1 - t;
    const t2 = t * t;
    const x = 2 * mt * t * _x + t2;
    const y = 2 * mt * t * _y + t2;
    return [x, y];
}
const point1 = quadraticBezier(1, 0, .5)// 当p1在（1,0）时，若生成的贝塞尔曲线的长度为l，那么t=0.5就表示0.5*l，此时这个点在曲线上的坐标为[0.75, 0.25]
console.log(point1);// [0.75, 0.25]

三次贝塞尔

与二次类似，假设初始点和末尾点固定为（0,0）和（1,1）

// 三次贝塞尔
function cubicBezier(_x1, _y1, _x2, _y2, t) {
    const cx = 3 * _x1;
    const cy = 3 * _y1;
    const bx = 3 * (_x2 - _x1) - cx;
    const by = 3 * (_y2 - _y1) - cy;
    const ax = 1 - cx - bx;
    const ay = 1 - cy - by;
    const x = (ax * Math.pow(t, 3)) + (bx * Math.pow(t, 2)) + (cx * t);
    const y = (ay * Math.pow(t, 3)) + (by * Math.pow(t, 2)) + (cy * t);
    return [x, y];
}
const point2 = cubicBezier(0, 1, 1, 0, .5)// 与二次同理，t在曲线上的坐标为[0.5, 0.5]
console.log(point2);

N次贝塞尔

通过上述的推导，我们可以总结出一个N次贝塞尔的函数

// 计算阶乘
function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  }
  return n * factorial(n - 1);
}
// 计算组合数
function combination(n, k) {
  return factorial(n) / (factorial(k) * factorial(n - k));
}
// N次贝塞尔，x和y坐标使用二阶数组传递
function NBezier(points, t) {
  const n = points.length - 1;
  const result = [0, 0];
  for (let i = 0; i <= n; i++) {
    const coefficient =
      combination(n, i) * Math.pow(1 - t, n - i) * Math.pow(t, i);
    result[0] += coefficient * points[i][0];
    result[1] += coefficient * points[i][1];
  }
  return result;
}
const pointN = NBezier(
  [
    [0, 1],
    [0.3, 0.4],
    [1, 0],
  ],
  0.5
);
console.log(pointN); //  [0.4, 0.45]

贝塞尔曲线+动画

动画类

将贝塞尔引入JS之前，我们先基于上面的动画帧实现一个动画类便于后续的使用

class Animate {
  id = null; // 动画索引
  duration = Infinity; // 帧数控制
  isActive = false; // 激活控制
  constructor(fn) {
    this.fn = fn;
  }
  start(duration) {
    if (this.isActive) return;
    this.duration = duration ?? Infinity;
    this.isActive = true;
    this.animate();
  }
  stop() {
    this.isActive = false;
    cancelAnimationFrame(this.id);
  }
  animate(timer) {
    if (this.isActive && this.duration-- > 0) {
      this.fn(timer);
      this.id = requestAnimationFrame(this.animate.bind(this));
    }
  }
}
const box = document.querySelector(".box")
const animate = new Animate(() => {
    moveBox(3)
})
// 动画开始、停止
function playPauseHandler() {
    if (animate.isActive) {
        return animate.stop()
    }
    animate.start()
}
function moveBox(speed = 3) {
    const { style, offsetLeft } = box;
    style.left = `${offsetLeft + speed}px`;
}

在动画中使用贝塞尔

接着，我们将贝塞尔的函数代入到动画帧中，使用我们上面说到的贝塞尔公式和动画帧可以实现JS动画缓动的效果

<!DOCTYPE html>
<html lang="CH">
 
<head>
    <meta charset="UTF-8" />
    <title>cubicBezier</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            position: relative;
        }
 
        .box {
            width: 200px;
            height: 200px;
            top: 50px;
            position: absolute;
            background: lightblue;
        }
    </style>
</head>
 
<body>
    <div class="box"></div>
    <button onclick="playPauseHandler()">play</button>
    <script src="./animate.js"></script>
    <script src="./bezier.js"></script>
    <script>
        const box = document.querySelector(".box")
        let startTime
        const limit = 1000// 限制动画时间1000毫秒
        const speed = 100// 动画跨度
        const animate = new Animate((t) => {
            const progress = t - startTime// 当前动画相对起始时间的时间戳
            const percentage = progress / limit// 动画进度百分比，相当于贝塞尔曲线的t参数
            if (progress <= limit) {
                const acceleration = getAcceleration(percentage)
                moveBox(acceleration * speed)
            }
        })
 
        // 动画开始
        function playPauseHandler() {
            startTime = performance.now()// 初始化动画起始时间
            animate.start()
        }
        function moveBox(speed = 3) {
            const { style } = box;
            style.left = `${speed}px`;
        }
        // 获取贝塞尔加速度变化，progress表示时间轴进度
        function getAcceleration(progress) {
            const res = cubicBezier(0, 2, 1, -1, progress)
            return res[1]
        }
    </script>
</body>
 
</html>

上述代码的效果如下

CSS的效果如下

总结

本文主要介绍了两种JS实现动画的方式，分别是使用定时器和动画帧，其中动画帧的使用效果要优于定时器，它是在重绘和重排之前运行，节省了性能；接着我们详细了解了贝塞尔曲线的实现以及应用，在动画帧中使用了贝塞尔曲线，用于实现缓动效果

以上就是文章全部内容了，谢谢你看到最后，希望文章对你有帮助，如果觉得文章不错的话，还望三连支持一下博主，感谢！

文章标签：
JavaScript
前端开发
API
监控
算法
关键词：
前端javascript
前端技术
前端动画
前端插件
前端技术JavaScript
DieHunter1024
目录
相关文章
德国都芳最好
|
3天前
|
前端开发 JavaScript 测试技术
前端测试技术中，如何提高集成测试的效率？
前端测试技术中，如何提高集成测试的效率？
德国都芳最好
12 2
土木林森
|
3天前
|
移动开发 前端开发 JavaScript
惊！这些前端技术竟然能让你的网站在移动端大放异彩！
随着互联网技术的发展，移动设备成为主要的上网工具。本文介绍了几种关键的前端技术，包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计，帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
土木林森
11 3
德国都芳最好
|
3天前
|
数据采集 前端开发 安全
前端测试技术
前端测试是确保前端应用程序质量和性能的重要环节，涵盖了多种技术和方法
德国都芳最好
7 2
土木林森
|
9天前
|
编解码 前端开发 JavaScript
前端界的黑科技：掌握这些技术，让你的网站秒变未来感十足！
【10月更文挑战第31天】前端技术日新月异，黑科技层出不穷，让网页更加美观、交互更加丰富。本文通过响应式布局与媒体查询、前端框架与组件化开发等案例，展示这些技术如何让网站充满未来感。响应式布局使网站适应不同设备，前端框架如React、Vue则提高开发效率和代码质量。
土木林森
20 3
土木林森
|
9天前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术：掌握这些，让你的网页秒变交互神器！
【10月更文挑战第31天】前端开发藏有众多宝藏技术，如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求，提高代码可读性；Web Components则允许创建可重用、封装良好的自定义组件，提升代码复用性和独立性。此外，CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践，让网页秒变交互神器。
土木林森
16 2
进步`于辰
|
8天前
|
移动开发 前端开发 JavaScript
前端实训，刚入门，我用原生技术（H5、C3、JS、JQ）手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面，开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面，涉及多种特效实现，如动态图片切换和人物聚合效果。作品源码已上传至CSDN，视频效果可在CSDN预览。
进步`于辰
13 0
前端实训，刚入门，我用原生技术（H5、C3、JS、JQ）手写【网易游戏】页面特效
想飞的雪糕
|
28天前
|
存储 人工智能 前端开发
前端大模型应用笔记（三）：Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用，通过使用Transformer模型，实现了更智能的搜索功能，如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue，使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程，并展示了实际效果和待改进点。
想飞的雪糕
118 2
你都不懂
|
28天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
你都不懂
36 0
想飞的雪糕
|
28天前
|
人工智能 自然语言处理 运维
前端大模型应用笔记（一）：两个指令反过来说大模型就理解不了啦？或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下，自然语言指令解析的困境及解决方案。通过增加一个LLM解析层，将复杂的指令拆解为多个明确的步骤，明确操作类型与对象识别，处理任务依赖关系，并将自然语言转化为具体的工具命令，从而提高指令解析的准确性和执行效率。
想飞的雪糕
34 6
想飞的雪糕
|
28天前
|
存储 弹性计算 算法
前端大模型应用笔记（四）：如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备（如1核处理器和1GB内存）上实现高效向量存储和检索的方法，旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景，推荐Annoy作为多数情况下的首选方案，并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法，即使在资源受限的环境中也能实现高效的向量检索。
想飞的雪糕
43 1

热门文章

最新文章

  • 1
    《JavaScript应用程序设计》一一2.9 方法API的设计
  • 2
    javascript类型系统之Array
  • 3
    Andorid Freemarker与template.js使用
  • 4
    YY游戏云的angular js实践总结
  • 5
    走在JS上的全栈之路(一)
  • 6
    JavaScript值得注意的小知识点
  • 7
    js: 删除node的所有child
  • 8
    HTML6 无 JavaScript 的单页应用引起一片哗然
  • 9
    js正则表达式语法
  • 10
    JS中document对象详解
  • 1
    告别‘老司机’时代，AJAX与Fetch API让你的前端与Python后端无缝对接！
    59
  • 2
    现代前端开发中的响应式设计原则与实践
    88
  • 3
    现代前端开发中的响应式设计实践与优化
    60
  • 4
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    133
  • 5
    前端项目部署问题总结
    61
  • 6
    前端框架与库 - React生命周期与Hooks
    48
  • 7
    前端性能优化都有那些方案 ？
    71
  • 8
    高级前端常见的面试题？
    99
  • 9
    前端框架与库 - React基础：组件、Props、State
    70
  • 10
    技术心得：前端点击按钮，导入excel文件，上传到后台，excel接收和更新数据
    49

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    阿里云OSS设置跨域访问