06-ArcGIS For JavaScript-requestAnimationFrame动画渲染

文章目录

    • 概述
    • setInterval()与setTimeout()
    • requestAnimationFrame()
    • requestAnimationFrame在ArcGIS For JavaScript的应用
    • 结果

概述

本节主要讲解与时间相关的三个方法setTimeout()、setInterval()和requestAnimationFrame(),这三个方法都属于浏览器的window对象的方法,这三个函数能够更好的服务于2Dcanvas动画、WebGL动画等方面。

setInterval()与setTimeout()

setInterval()函数为周期定时器,可以选择每过一个固定时间段调用一次指定函数。如下,每100毫秒调用一次回调函数:

setInterval(function(){console.log("It is setInterval");
}, 100);

setTimeout()为倒计时定时器,例如可以指定100毫秒后调用回调函数,然后结束当前定时。

setTimeout(function(){console.log("It is setTimeout");
}, 100);

这两个方法都是可以人为的指定回调函数被调用的时间。
如果不想使用该定时器的时候,可以选择取消。方法如下:

clearInterval();  //取消setInterval()设置的定时
clearTimeout();  //取消setTimeout()设置的定时器

requestAnimationFrame()

requestAnimationFrame主要用途是按帧对网页进行重绘,让各种网页动画效果(DOM动画、Canvas动画、SVG动画、WebGL动画)能够有一个统一的刷新机制,从而节省系统资源,提高系统性能,改善视觉效果。

调用方式如下:

function callback(){console.log(requestAnimationFrame)requestAnimationFrame(callback)
}
requestAnimationFrame(callback)

requestAnimationFrame在ArcGIS For JavaScript的应用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css" /><script src="https://js.arcgis.com/4.30/"></script><style>html,body,#viewDiv {margin: 0;padding: 0;height: 100%;width: 100%;}</style><script>require(["esri/geometry/Mesh","esri/views/SceneView","esri/Map","esri/Graphic","esri/symbols/MeshSymbol3D","esri/symbols/FillSymbol3DLayer","esri/geometry/Point","esri/core/reactiveUtils"], (Mesh, SceneView, Map, Graphic, MeshSymbol3D, FillSymbol3DLayer, Point, reactiveUtils) => {let waterHeight = 422;async function createMeshGLTF(glbUrl, point, i = [0, 0, 0], r = 1, n = 0) {const s = await Mesh.createFromGLTF(point, glbUrl, {vertexSpace: "georeferenced"}), o = i.map(h => h * r);return s.scale(r),s.offset(o[0], o[1], o[2]),s.rotate(0, 0, n),new Graphic({geometry: s,symbol: new MeshSymbol3D({symbolLayers: [new FillSymbol3DLayer]})})}let map = new Map({basemap: 'satellite'})let view = new SceneView({container: "viewDiv",map})let animatingPinpoint = true;view.when(async function () {let sailBoat = await createMeshGLTF("./pinpoint.glb", new Point({x: -1354454634895185e-8,y: 4307521548889681e-9,z: waterHeight,spatialReference: {wkid: 102100}}));view.graphics.add(sailBoat);view.extent = sailBoat.geometry.extent;function setupCameraHeadingListener() {reactiveUtils.watch(() => Math.round(view.camera.heading), e => {const i = sailBoat.geometry;i.transform.rotationAngle = -e + 20,i.transform.rotationAxis = [0, 0, 1]}, {initial: !0})}let startTime = Date.now() / 1000;function animatePinpoint(graphic) {let startTime = null;animatingPinpoint = true;const animate = (elapsedTime) => {if (!startTime) {startTime = elapsedTime;}const timeDif = (elapsedTime - startTime) / 1000;const scale = 1 + Math.abs(Math.sin(timeDif * 2));const geometry = graphic.geometry;geometry.transform ??= new MeshTransform();geometry.transform.scale = [scale, scale, scale];if (animatingPinpoint) {requestAnimationFrame(animate);}}requestAnimationFrame(animate);}function stopAnimatingPinpoint() {animatingPinpoint = false;}animatePinpoint(sailBoat);setupCameraHeadingListener();})})</script>
</head><body><div id="viewDiv"></div>
</body></html>

结果

在这里插入图片描述

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

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

相关文章

Java每日面试题(集合)(day18)

目录 常见的集合有哪些&#xff1f;Collection和Collections有什么区别&#xff1f;ArrayList 和 Array&#xff08;数组&#xff09;的区别&#xff1f;ArrayList 和 LinkedList 的区别是什么&#xff1f;Arraylist 和 Vector 的区别HashMap和Hashtable的区别哪些集合类是线程…

计算机丢失mfc100u.dll的5种常用解决方法分享

1.mfc100u.dll的重要性 系统运行中的应用 mfc100u.dll 文件在 Windows 系统中扮演着至关重要的角色&#xff0c;尤其是在运行基于 MFC 库开发的应用程序时。以下是 mfc100u.dll 在系统运行中的应用和重要性分析&#xff1a; 系统稳定性与兼容性的关键 mfc100u.dll 文件确保…

map和set(一)

首先模拟一下key形式类 使用的结构是搜索二叉树 结点中有左孩子和右孩子 还有一个存储的值 template <class K>struct BSTnode//搜索二叉树不支持修改 中序遍历是有序的{K _key;BSTnode<K>* _left;BSTnode<K>* _right;BSTnode(const K& key):_key(key…

adum1201数字隔离器中文资料与应用

ADuM1201是ADI公司推出的一款数字隔离器&#xff0c;其典型应用有工业自动化、通讯电源管理、医疗设备以及汽车等领域。本文将对ADuM1201数字隔离器进行详细的介绍和应用分析&#xff0c;以帮助读者更好地了解和使用该产品。 一、ADuM1201数字隔离器概述 1、基本参数 ADuM120…

卷积神经网络细节问题及知识点

一、Batch Normalization Batch Normalization&#xff08;BN&#xff0c;批归一化&#xff09; 是深度学习中的一种技术&#xff0c;主要用于加速神经网络的训练过程&#xff0c;同时提高网络的稳定性和收敛速度。它通过对每一层的输出进行归一化&#xff0c;减少梯度消失和梯…

Ubuntu安装Mysql并实现远程登录【ubuntu 24.04/mysql 8.0.39】

一、安装MySQL sudo apt update # 更新软件源 sudo apt install mysql-server -y # 安装 mysql --version # 查看版本 sudo systemctl status mysql # 查看运行状态 netstat -tln # 以数字ip形式显示mysql的tcp监听状态二、设置MySQL的root密码 sudo mysql -u root # 使…

第二十三篇:网络拥塞了,TCP/IP如何解决的?

一.显示拥塞通知 当发生网络拥塞时&#xff0c;发送主机应该减少数据包的发送量。作为IP上层协议&#xff0c;TCP虽然也能控制网络拥塞&#xff0c;不过它是通过数据包的实际损坏情况来判断是否发生拥塞。然而这种方法不能在数据包损坏之前减少数据包的发送量。 为了解决这个…

pytorch与卷积神经网络实战笔记

课程视频链接 CNN卷积神经网络算法原理 全神经网络的整体结构 输入层&#xff08;x1, x2, x3…&#xff09;->隐藏层&#xff08;全连接&#xff09;->输出层&#xff0c;整体就类似于一个函数&#xff0c;输入x&#xff0c;经过函数module(x)得到输出y的过程&#xf…

笔试算法总结

文章目录 题目1题目2题目3题目4 题目1 使用 StringBuilder 模拟栈的行为&#xff0c;通过判断相邻2个字符是否相同&#xff0c;如果相同就进行删除 public class Main {public static String fun(String s) {if (s null || s.length() < 1) return s;StringBuilder builde…

闲谈Promise

预备知识 回调函数&#xff1a;当一个函数作为参数传入另一个函数中&#xff0c;并且它不会立刻执行&#xff0c;当满足一定条件之后&#xff0c;才会执行&#xff0c;这种函数称为回调函数。比如&#xff1a;定时器。异步任务&#xff1a;与之对应的概念是同步任务&#xff0…

【Axure原型分享】标签管理列表

今天和大家分享通过标签管理列表的原型模板&#xff0c;包括增删改查搜索筛选排序分页翻页等效果&#xff0c;这个模板是用中继器制作的&#xff0c;所以使用也很方便&#xff0c;初始数据我们只要在中继器表格里填写即可&#xff0c;具体效果可以观看下方视频或者打开预览地址…

Cesium.js(SuperMap iClient3D for Cesium)进行三维场景展示和图层动画

1&#xff09;&#xff1a;参考API文档&#xff1a;SuperMap iClient3D for Cesium 开发指南 2&#xff09;&#xff1a;官网示例&#xff1a;support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#layer 3&#xff09;&#xff1a;SuperMap iServer&…

电鳗带来灵感,防潮电源诞生,全打印技术的魅力

大家好&#xff01;今天来了解一项受电鳗启发的防潮完全可打印电源的研究——《A moisture-enabled fully printable power source inspired by electric eels》发表于《PNAS》。随着可穿戴电子设备的发展&#xff0c;对安全、一次性且具成本效益的电源需求大增。传统电池存在不…

LibreOffice SDK是LibreOffice软件的开发工具包

LibreOffice SDK是LibreOffice软件的开发工具包&#xff0c;它提供了一系列工具和库&#xff0c;使得开发者可以基于LibreOffice进行扩展或开发新的应用程序。以下是对LibreOffice SDK的详细介绍&#xff1a; 一、下载与安装 下载地址&#xff1a; 可以在LibreOffice的官方网站…

利用 Llama 3.1模型 + Dify开源LLM应用开发平台,在你的Windows环境中搭建一套AI工作流

文章目录 1. 什么是Ollama&#xff1f;2. 什么是Dify&#xff1f;3. 下载Ollama4. 安装Ollama5. Ollama Model library模型库6. 本地部署Llama 3.1模型7. 安装Docker Desktop8. 使用Docker-Compose部署Dify9. 注册Dify账号10. 集成本地部署的 Llama 3.1模型11. 集成智谱AI大模型…

RUM性能优化之图片加载

作者&#xff1a;三石 在现代Web开发中&#xff0c;图片作为内容表达的核心元素&#xff0c;其加载效率直接影响到页面的整体性能和用户体验。随着高清大图和动态图像的普及&#xff0c;优化图片加载变得尤为重要。RUM作为一种主动监测技术&#xff0c;能够帮助开发者从真实用户…

【CubeMLP】核心方法解读

abstract&#xff1a; 多模态情绪分析和抑郁估计是利用多模态数据预测人类心理状态的两个重要研究课题。以前的研究主要集中在开发有效的融合策略&#xff0c;以交换和整合来自不同模式的心智相关信息。一些基于mlp的技术最近在各种计算机视觉任务中取得了相当大的成功。受此启…

如何解决 Vim 中的 “E212: Can‘t open file for writing“ 错误:从编辑到权限管理(sudo)

个人名片 &#x1f393;作者简介&#xff1a;java领域优质创作者 &#x1f310;个人主页&#xff1a;码农阿豪 &#x1f4de;工作室&#xff1a;新空间代码工作室&#xff08;提供各种软件服务&#xff09; &#x1f48c;个人邮箱&#xff1a;[2435024119qq.com] &#x1f4f1…

C语言 | Leetcode C语言题解之第468题验证IP地址

题目&#xff1a; 题解&#xff1a; char * validIPAddress(char * queryIP) {int len strlen(queryIP);if (strchr(queryIP, .)) {// IPv4int last -1;for (int i 0; i < 4; i) {int cur -1;if (i 3) {cur len;} else {char * p strchr(queryIP last 1, .);if (p…

在Leaflet中使用divIcon进行自定义标绘实战

前言 之前在一些地理信息和旅游博主的信息介绍中&#xff0c;对于一些景点的信息时空分布。总是被他们的地图制作所深深吸引。与常规的地图文字标绘不同的是&#xff0c;在传统的地图标绘中&#xff0c;我们习惯于将文字信息直接标注到对应的位置点旁边。当然&#xff0c;这样其…