炫酷不止一面：探索JavaScript动画的奇妙世界(下)

在这里插入图片描述

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

  • IV. JavaScript动画的优化和性能考虑
  • V. 一些有趣的JavaScript动画示例和案例分析
    • 动态图形和形状变换
    • 页面滚动和平滑滚动效果
  • VI. JavaScript动画的未来发展和趋势
    • Web动画API的发展
    • VR和AR中的JavaScript动画应用
    • 响应式设计和移动端动画

IV. JavaScript动画的优化和性能考虑

当使用 JavaScript 进行动画开发时，以下是一些优化和考虑性能的建议：

  1. 减少重绘和重排：重绘和重排是导致页面性能下降的主要因素之一。为了减少重绘和重排，可以尽量减少对 DOM 的操作，例如合并多次修改为一次，或者使用position:fixed定位来避免布局计算。

  2. 使用硬件加速：硬件加速可以利用图形硬件的能力来加速动画的渲染。可以通过使用translate3d、rotateZ等 CSS 属性来开启硬件加速。这样可以将动画的计算交由 GPU 处理，提高渲染性能。

  3. 合理使用requestAnimationFrame：requestAnimationFrame是一种用于定时循环操作的机制，它可以根据屏幕的刷新率来进行优化。通过将动画的更新逻辑放在requestAnimationFrame回调中，可以确保动画在每一帧都能够以最高效率进行更新。

  4. 图片和资源的优化：对于动画中使用的图片和其他资源，应该进行优化以减少加载时间和内存消耗。可以使用合适的图片格式（如 WebP）、压缩图片大小、使用雪碧图（CSS Sprite）等技术。

此外，还可以考虑使用缓存、懒加载、代码压缩等其他优化策略来提高 JavaScript 动画的性能。最佳的性能优化策略会根据具体的项目需求和场景而有所不同，需要根据实际情况进行评估和调整。

V. 一些有趣的JavaScript动画示例和案例分析

动态图形和形状变换

以下是一些有趣的 JavaScript 动画示例和案例分析，其中包括动态图形和形状变换：

  1. 图形动画：使用 JavaScript 可以创建各种图形动画，例如绘制一个不断变化形状的图形。
// 获取 HTML 元素
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");// 绘制初始图形
ctx.beginPath();
ctx.arc(50, 50, 25, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.stroke();// 动画循环
function animate() {// 更新图形的位置和形状ctx.beginPath();ctx.arc(50 + Math.cos(Date.now() / 100) * 10, 50 + Math.sin(Date.now() / 100) * 10, 25, 0, 2 * Math.PI);ctx.fillStyle = "red";ctx.fill();ctx.strokeStyle = "black";ctx.lineWidth = 2;ctx.stroke();// 递归调用自身以实现连续动画requestAnimationFrame(animate);
}animate();

在上面的示例中，使用requestAnimationFrame函数来定时更新图形的位置和形状，实现连续的动画效果。通过改变arc函数的参数，图形会不断改变形状，产生动态的效果。

  1. 形状变换动画：可以使用 JavaScript 实现各种形状的变换动画，例如将一个正方形逐渐变为圆形。
// 获取 HTML 元素
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");// 绘制初始形状（正方形）
ctx.beginPath();
ctx.rect(50, 50, 100, 100);
ctx.fillStyle = "red";
ctx.fill();
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.stroke();// 动画循环
function animate() {// 计算形状的变形程度var progress = Date.now() / 1000;// 更新形状的路径ctx.beginPath();ctx.arc(50 + 50 * Math.cos(progress * 2 * Math.PI), 50 + 50 * Math.sin(progress * 2 * Math.PI), 50, 0, 2 * Math.PI);ctx.fillStyle = "red";ctx.fill();ctx.strokeStyle = "black";ctx.lineWidth = 2;ctx.stroke();// 递归调用自身以实现连续动画requestAnimationFrame(animate);
}animate();

在上面的示例中，使用requestAnimationFrame函数来定时更新形状的路径，实现从正方形逐渐变为圆形的动画效果。通过改变progress的值，可以控制形状的变形程度，产生不同的动画效果。

这些示例只是一些基本的动画案例，你可以根据自己的需求和创意进行进一步的扩展和修改。

页面滚动和平滑滚动效果

以下是一些有趣的 JavaScript 动画示例和案例分析，其中包括页面滚动和平滑滚动效果：

  1. 页面滚动动画：通过使用 JavaScript，可以实现页面滚动时的动画效果，例如滚动到特定元素时的淡入淡出效果。
// 获取页面元素
var element = document.getElementById("myElement");// 监听页面滚动事件
window.addEventListener("scroll", function() {// 检查元素是否进入视口if (isElementInViewport(element)) {// 应用动画效果element.classList.add("animated");} else {// 移除动画效果element.classList.remove("animated");}
});function isElementInViewport(element) {var boundingClientRect = element.getBoundingClientRect();var viewportHeight = window.innerHeight || document.documentElement.clientHeight;var viewportTop = window.pageYOffset || document.documentElement.scrollTop;var viewportBottom = viewportTop + viewportHeight;return (boundingClientRect.bottom >= viewportTop &&boundingClientRect.top <= viewportBottom);
}

在上面的示例中，使用scroll事件监听页面滚动，并在元素进入视口时应用动画效果。isElementInViewport函数用于检查元素是否在视口中。通过监听滚动事件并根据元素的位置来应用和移除动画效果，可以实现页面滚动时的动态效果。

  1. 平滑滚动效果：可以使用 JavaScript 实现平滑滚动效果，使页面在滚动时更加流畅。
// 获取页面元素
var element = document.getElementById("myElement");// 监听滚动事件
window.addEventListener("scroll", function() {// 计算滚动速度var scrollSpeed = window.pageYOffset / (Date.now() - lastScrollTime);lastScrollTime = Date.now();// 根据滚动速度调整元素的位置element.style.top = scrollSpeed * 10 + "px";
});var lastScrollTime = Date.now();

在上面的示例中，使用scroll事件监听页面滚动，并计算滚动速度。根据滚动速度来调整元素的位置，实现平滑滚动效果。通过实时计算滚动速度并应用于元素的位置，可以使滚动效果更加平滑和流畅。

这些示例只是一些基本的动画案例，你可以根据自己的需求和创意进行进一步的扩展和修改。

VI. JavaScript动画的未来发展和趋势

Web动画API的发展

Web 动画 API（也称为 Web Animations API）是一组用于在 Web 上创建和控制动画的 JavaScript API。它允许开发人员以更直观和高效的方式在 Web 页面上实现动画效果。

Web 动画 API 的发展可以追溯到早期的 Web 动画技术，如使用setTimeout和CSS属性来实现简单的动画。然而，这些方法通常比较繁琐，并且难以实现复杂的动画效果。

随着 HTML5 和 CSS3 的发展，新的动画特性被引入到 Web 中，例如CSS的transition和animation属性。这些属性使得在 Web 上创建简单的动画变得更加容易，但仍然缺乏对动画的更高级控制。

为了满足对更复杂动画控制的需求，Web 动画 API 应运而生。它提供了一系列 API，使得开发人员能够更精细地控制动画的属性、时间轴、关键帧等。

最初的 Web 动画 API 规范是由 W3C 提出的，并在 2014 年开始受到关注。随着时间的推移，Web 动画 API 不断发展和改进，增加了更多功能和特性。

其中一些重要的发展包括：

  • 关键帧动画：允许定义动画的关键帧，从而实现更复杂的动画效果。
  • 动画序列：支持将多个动画组合成一个序列，实现更复杂的动画场景。
  • 动画效果控制：提供了对动画的速度、延迟、循环等效果的控制。
  • 事件监听：允许监听动画的开始、结束和迭代等事件，以便进行交互和回调处理。

Web 动画 API 的发展使得在 Web 上创建复杂和引人入胜的动画效果变得更加容易。它为开发人员提供了更强大的工具，同时也提高了用户体验和 Web 应用的交互性。

需要注意的是，Web 动画 API 的发展仍在进行中，新的特性和规范可能会不断推出。如果你对 Web 动画 API 的最新发展感兴趣，建议关注相关的规范和文档以获取最新信息。

VR和AR中的JavaScript动画应用

JavaScript 在虚拟现实（VR）和增强现实（AR）中也有广泛的应用，可以用于创建动画效果和交互体验。

  1. VR 场景中的动画：在 VR 应用中，可以使用 JavaScript 来控制 3D 场景中的对象动画。通过使用 Three.js 或 A-Frame 等库，可以创建和控制三维场景中的动画效果，例如物体的移动、旋转、缩放等。
// 创建一个 Three.js 场景
const scene = new THREE.Scene();// 创建一个球体对象
const sphere = new THREE.SphereGeometry(0.5, 32, 32);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const sphereMesh = new THREE.Mesh(sphere, material);
scene.add(sphereMesh);// 动画循环
function animate() {requestAnimationFrame(animate);// 使球体旋转sphereMesh.rotation.x += 0.01;sphereMesh.rotation.y += 0.01;
}animate();

在上面的示例中，使用 JavaScript 创建了一个简单的 VR 场景，其中包含一个旋转的球体。通过requestAnimationFrame函数来定时更新球体的旋转角度，实现动画效果。

  1. AR 场景中的动画：在 AR 应用中，可以使用 JavaScript 来创建和控制虚拟对象的动画。例如，可以使用 ARKit 或 ARCore 等 AR 库，结合 JavaScript 来实现对象的动画效果。
// 获取 AR 场景中的锚点
const anchor = new ARKit.Anchor({ transform: new ARKit.Transform({ position: new ARKit.Vector3(0, 0, -0.5) }) });// 创建一个虚拟对象并添加到锚点上
const box = new ARKit.Model({ geometry: new ARKit.SphereGeometry(0.2), material: new ARKit.Material({ color: ARKit.Color.Red() }) });
box.parent = anchor;// 动画循环
function animate() {requestAnimationFrame(animate);// 使对象旋转box.rotation.x += 0.01;box.rotation.y += 0.01;
}animate();

在上面的示例中，使用 JavaScript 创建了一个简单的 AR 场景，其中包含一个旋转的虚拟球体。通过requestAnimationFrame函数来定时更新球体的旋转角度，实现动画效果。

这些只是一些简单的示例，实际的 VR 和 AR 应用可能涉及更复杂的动画和交互效果。JavaScript 提供了丰富的动画 API 和库，可以根据具体需求进行扩展和定制。

响应式设计和移动端动画

响应式设计和移动端动画是 Web 开发中常用的技术，用于提供更好的用户体验。

  1. 响应式设计：响应式设计是一种设计方法，使网站能够根据用户设备的屏幕大小和分辨率自动调整布局和内容展示。它可以确保网站在不同的设备上（如桌面电脑、平板电脑和手机）都能够正常显示，并提供良好的用户体验。
/* 媒体查询是响应式设计的核心 */
@media (max-width: 600px) {/* 在小屏幕上应用特定的样式 */body {font-size: 14px;}
}@media (min-width: 601px) and (max-width: 900px) {/* 在中等屏幕上应用特定的样式 */body {font-size: 16px;}
}@media (min-width: 901px) {/* 在大屏幕上应用特定的样式 */body {font-size: 18px;}
}

在上面的示例中，使用@media媒体查询来根据屏幕大小定义不同的样式。通过设置不同的字体大小，网站可以在不同的屏幕大小上自适应地显示内容。

  1. 移动端动画：移动端动画是指在移动设备上使用的动画效果，可以增强用户界面的交互性和吸引力。常见的移动端动画包括页面过渡动画、按钮点击动画、加载动画等。
@keyframes fadeIn {0% { opacity: 0; }100% { opacity: 1; }
}.page {opacity: 0;animation: fadeIn 1s ease-in-out;
}@keyframes rotate {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }
}.button {animation: rotate 2s linear infinite;
}

在上面的示例中，使用@keyframes定义了两个关键帧动画fadeIn和rotate。然后将这些动画应用于元素上，通过指定动画名称、持续时间和动画效果（如ease-in-out或linear）来实现动画效果。

总之，响应式设计可以使网站适应不同的设备和屏幕大小，提供良好的用户体验；而移动端动画可以增强用户界面的视觉效果和交互性。这些技术结合使用可以创建出在移动设备上表现出色的网站和应用。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/209289.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

proftpd安全加固：限制用户FTP登录

proftpd安全加固：限制用户FTP登录

其实无所谓安全加固&#xff0c;因为proftp默认就是限制用户FTP登录的&#xff0c;这里有点凌乱得研究和实验了proftpd如何进行限制的&#xff0c;以及可能的放开限制。懂了这些才能更好的进行防护配置。 RootLogin指令其实主要作用就是启用ROOT访问。通常&#xff0c;proftpd在…
阅读更多...
【Fastadmin】一个完整的轮播图功能示例

【Fastadmin】一个完整的轮播图功能示例

目录 1.效果展示&#xff1a; 列表 添加及编辑页面同 2.建表&#xff1a; 3.使用crud一键生成并创建控制器 4.html页面 add.html edit.html index.php 5.js页面 6.小知识点 1.效果展示&#xff1a; 列表 添加及编辑页面同 2.建表&#xff1a; 表名&#xff1a;fa_x…
阅读更多...
【LabVIEW学习】5.数据通信之TCP协议，控制电脑的一种方式

【LabVIEW学习】5.数据通信之TCP协议，控制电脑的一种方式

一。tcp连接以及写数据&#xff08;登录&#xff09; 数据通信--》协议--》TCP 1.tcp连接 创建while循环&#xff0c;中间加入事件结构&#xff0c;创建tcp连接&#xff0c;写入IP地址与端口号 2.写入tcp数据 登录服务器除了要知道IP地址以及端口以外&#xff0c;需要用户名与密…
阅读更多...
中通单号查询，中通快递物流查，备注需要的单号记录

中通单号查询，中通快递物流查，备注需要的单号记录

批量查询中通快递单号的物流信息&#xff0c;并对需要的单号记录进行备注。 所需工具&#xff1a; 一个【快递批量查询高手】软件 中通快递单号若干 操作步骤&#xff1a; 步骤1&#xff1a;运行【快递批量查询高手】软件&#xff0c;第一次使用的朋友记得先注册&#xff0c…
阅读更多...
快速幂（C语言）

快速幂（C语言）

前言 快速幂算法一般用于高次幂取模的题目中&#xff0c;比如求3的10000次方对7取模。这时候有些同学会说&#xff1a;这还不简单&#xff1f;我直接调用pow函数然后对结果%7不得了么&#xff1f;可是3的10000次方这么庞大的数字&#xff0c;真的能储存在计算机里么&#xff1f…
阅读更多...
c#学习相关系列之as和is的相关用法

c#学习相关系列之as和is的相关用法

一、子类和父类的关系 public class Program{static void Main(string[] args){Animal animal new Dog();// Dog dog (Dog)new Animal(); 编译成功&#xff0c;运行报错Dog dog (Dog)animal;Dog dog new Dog();Animal animal dog; //等价于Animal animal new Dog();}}pub…
阅读更多...
企业计算机服务器中了eking勒索病毒怎么办，eking勒索病毒解密数据恢复

企业计算机服务器中了eking勒索病毒怎么办，eking勒索病毒解密数据恢复

随着计算机网络技术的不断发展与应用&#xff0c;企业的生产运营效率得到了极大提升&#xff0c;但网络安全威胁一直存在&#xff0c;网络威胁的技术也在不断更新&#xff0c;给企业的数据安全带来了严重威胁。在本月&#xff0c;云天数据恢复中心陆续接到很多企业的求助&#…
阅读更多...
C++ Qt开发：Qt的安装与配置

C++ Qt开发：Qt的安装与配置

Qt是一种C编程框架&#xff0c;用于构建图形用户界面&#xff08;GUI&#xff09;应用程序和嵌入式系统。Qt由Qt公司&#xff08;前身为Nokia&#xff09;开发&#xff0c;提供了一套跨平台的工具和类库&#xff0c;使开发者能够轻松地创建高效、美观、可扩展的应用程序。其被广…
阅读更多...
Python---random库

Python---random库

目录 基本随机数函数(): rand.seed() random() 扩展随机数函数(): random库包含两类函数&#xff1a;基本随机数函数&#xff0c;扩展随机数函数 基本随机数函数:seed(),random() 扩展随机数函数&#xff1a;randint,getrandbits(),uniform(),randrange(),choice(),shuff…
阅读更多...
ECS云主机容量大于2TB，初始化Linux数据盘（parted）

ECS云主机容量大于2TB，初始化Linux数据盘（parted）

本文为您介绍当容量大于2TB时&#xff0c;如何在Linux环境下适用parted分区工具初始化数据盘。 操作场景 本文以“CentOS 7.6 64位”操作系统为例&#xff0c;介绍当磁盘容量大于2TB时&#xff0c;如何使用parted分区工具在Linux操作系统中为数据盘设置分区&#xff0c;操作回…
阅读更多...
SAP UI5 walkthrough step6 Modules

SAP UI5 walkthrough step6 Modules

在SAPUI5 中&#xff0c;资源通常用作Modules&#xff0c;这个我们将用Message Toast 来实现告警功能 修改controller.js webapp/controller/App.controller.js sap.ui.define(["sap/ui/core/mvc/Controller","sap/m/MessageToast" ], (Controller, Mes…
阅读更多...
js 复制粘贴板，当clipboardjs 不好使怎么办？

js 复制粘贴板，当clipboardjs 不好使怎么办？

最近项目中做一个很常见的复制粘贴的功能耽误了比较长的时间特此记录&#xff0c;在往常这个功能直接用 clipboard 做就行了&#xff0c;但是这次却发现复制功能不好使了&#xff0c;虽然走了复制成功的回调&#xff0c;但是粘贴板并没有复制的内容。代码如下 <div v-for&q…
阅读更多...
人工智能教程（三）：更多有用的 Python 库

人工智能教程（三）：更多有用的 Python 库

目录 前言 推荐 JupyterLab 入门 复杂的矩阵运算 其它人工智能和机器学习的 Python 库 前言 在本系列的上一篇人工智能教程&#xff08;二&#xff09;&#xff1a;人工智能的历史以及再探矩阵中&#xff0c;我们回顾了人工智能的历史&#xff0c;然后详细地讨论了矩阵。在…
阅读更多...
【数据结构和算法】--- 栈

【数据结构和算法】--- 栈

目录 栈的概念及结构栈的实现初始化栈入栈出栈其他一些栈函数 小结栈相关的题目 栈的概念及结构 栈是一种特殊的线性表。相比于链表和顺序表&#xff0c;栈只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的…
阅读更多...
概率论之 证明 正态分布的上a 分位点的对称的性质

概率论之 证明 正态分布的上a 分位点的对称的性质

公式(Z(a) -Z(1-a)) 表示正态分布的上(a)分位点与下(1-a)分位点在分布曲线上关于均值的对称性。 左侧 (Z(a))&#xff1a; 这是分布曲线上累积概率为(a)的那个点。也就是说&#xff0c;这是一个使得这个点及其左侧的面积占据整个曲线下方(a)的位置。 右侧 (Z(1-a))&#xff1…
阅读更多...
Kubernetes(K8s 1.27.x) 快速上手+实践，无废话纯享版

Kubernetes(K8s 1.27.x) 快速上手+实践，无废话纯享版

文章目录 1 基础知识1.1 K8s 有用么&#xff1f;1.2 K8s 是什么&#xff1f;1.3 k8s 部署方式1.4 k8s 环境解析 2 环境部署2.1 基础环境配置2.2 容器环境操作2.3 cri环境操作2.4 harbor仓库操作2.5 k8s集群初始化2.6 k8s环境收尾操作 3 应用部署3.1 应用管理解读3.2 应用部署实…
阅读更多...
微前端 前置知识2--- monorepo架构

微前端 前置知识2--- monorepo架构

目录 前言 pnpm vs npm pnpm设计思想 硬连接 软链接 &#xff08;符号链接&#xff09; 原理 pnpm 指令 monorepo架构 介绍 配置monorepo pnpm --filter 前言 我们采用的是微前端一个主应用&#xff0c;和多个子应用&#xff0c;我们肯定不会一个一个去install安装…
阅读更多...
12.5单端口RAM，JS计数器，流水线乘法器，不重叠序列检测器（状态机+移位寄存器），信号发生器，交通灯

12.5单端口RAM，JS计数器，流水线乘法器，不重叠序列检测器（状态机+移位寄存器），信号发生器，交通灯

单端口RAM timescale 1ns/1nsmodule RAM_1port(input clk,input rst,input enb,input [6:0]addr,input [3:0]w_data,output wire [3:0]r_data );reg [6:0]mem[127:0];integer i;always (posedge clk or negedge rst) beginif(!rst) beginfor (i0; i<127 ; ii1) beginmem[i]…
阅读更多...
Linux--权限问题（1）

Linux--权限问题（1）

前文 Linux--初识和基本的指令&#xff08;1&#xff09;-CSDN博客 Linux--初识和基本的指令&#xff08;2&#xff09;-CSDN博客 Linux--初识和基本的指令&#xff08;3&#xff09;-CSDN博客 目录 前文 前言 1.剩余指令部分 1.1 打包和压缩的其它指令 2.权限部分 2.1权…
阅读更多...
Qt基础-程序打包发布方法

Qt基础-程序打包发布方法

本文讲解Qt程序打包发布方法。 一、使用Qt自带的windeployqt 生成可运行的包 准备将Qt生成的exe拷入到单独的文件夹，并进行命名，本文命名为packDemorun，并将文件放到D盘（自己随意放置） 1、找到Qt自带的命令终端 2、启动命令终端 3、输入：cd /d D:\packDemorun，进入文…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023