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.mzph.cn/bicheng/56536.shtml

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

相关文章

弹性力学试题解答答案

一、名词解释 圣维南原理&#xff1a;分布于弹性体上一小块面积&#xff08;或体积&#xff09;内的荷载所引起的物体中的应力&#xff0c;在离荷载作用区稍远的地方&#xff0c;基本上只同荷载的合力和合力矩有关&#xff1b;荷载的具体分布只影响荷载作用区附近的应力分布。…

基于springboot学生成绩管理系统

作者&#xff1a;计算机学长阿伟 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、ElementUI等&#xff0c;“文末源码”。 系统展示 【2024最新】基于JavaSpringBootVueMySQL的&#xff0c;前后端分离。 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;…

CPO:隐含于CoT与ToT两者间的推理平衡

自OpenAI推出o1以来&#xff0c;随着reasoning scaling law的大行其道‌&#xff0c;很多研究者都将目光聚焦在“reasoning”之上&#xff0c;而在仅reasoning维度上&#xff0c;确实存在着非常深邃且让人着迷的可探索空间&#xff0c;毕竟这意味着围绕system2展开的下一轮认知…

利用Excel数据合并到Word功能,官方名为“Word邮件合并”

### 利用Excel数据合并到Word功能&#xff0c;官方名为“Word邮件合并”简介 #### 引言 在日常办公场景中&#xff0c;我们经常需要将Excel中的数据批量插入到Word文档中&#xff0c;比如制作员工工资条、邀请函或是客户信息表等。传统的手工操作不仅耗时耗力&#xff0c;还容易…

Javascript 构造http请求

构造HTTP请求有多种方式&#xff0c;此种为使用javascript 构造http请求的方法 构造HTTP请求_vscode post 请求-CSDN博客 web/static/js/user/login.js ; var user_login_ops {init:function(){this.eventBind();},eventBind:function(){$(".login_wrap .do-login"…

博科测试IPO上市丨为行业提供智能测试综合解决方案

近年来&#xff0c;汽车制造、大型基础设施建设以及新能源开发等领域&#xff0c;对高精度、高效率的测试解决方案需求迫切。为推动行业发展&#xff0c;博科测试通过多年的技术积累以及自主创新&#xff0c;围绕伺服液压测试和汽车测试试验领域&#xff0c;积累了多项核心技术…

Java枚举封装状态值与类型转换

前言 在许多应用中&#xff0c;我们需要处理具有固定数量的状态或选项的数据。例如&#xff0c;在库存管理系统中&#xff0c;产品可以有不同的状态&#xff0c;如“入库”、“出库”等。通过使用 Java 的枚举&#xff08;enum&#xff09;&#xff0c;我们可以有效地表示这些…

Golang | Leetcode Golang题解之第486题预测赢家

题目&#xff1a; 题解&#xff1a; func PredictTheWinner(nums []int) bool {return total(nums, 0, len(nums) - 1, 1) > 0 }func total(nums []int, start, end int, turn int) int {if start end {return nums[start] * turn}scoreStart : nums[start] * turn total…

AI 视频工具合集

&#x1f423;个人主页 可惜已不在 &#x1f424;这篇在这个专栏AI_可惜已不在的博客-CSDN博客 &#x1f425;有用的话就留下一个三连吧&#x1f63c; 目录 前言: 正文: ​ 前言: AI 视频&#xff0c;科技与艺术的精彩融合。它借助先进的人工智能技术&#xff0c;为影像创…

SLAM评估工具evo学习

参考链接 官方github&#xff1a;https://github.com/MichaelGrupp/evo 一、 指令分析 1.1 tum数据集&#xff0c;evo_ape指令 evo_ape {kitti,tum,euroc,bag} -h evo_ape tum -h(1) 终端输入&#xff1a; evo_ape tum -h (2) 终端打印&#xff1a; usage: evo_ape tum …

Android Framework AMS(07)service组件启动分析-1(APP到AMS流程解读)

该系列文章总纲链接&#xff1a;专题总纲目录 Android Framework 总纲 本章关键点总结 & 说明&#xff1a; 说明&#xff1a;本章节主要解读应用层service组件启动的2种方式startService和bindService&#xff0c;以及从APP层到AMS调用之间的打通。关注思维导图中左侧部分即…

ISO 21434标准下汽车软件开发的网络安全核心要求

ISO 21434《道路车辆——汽车网络安全工程》是一个针对汽车网络安全的国际标准&#xff0c;它对汽车软件开发提出了明确的要求&#xff0c;以确保车辆在整个生命周期内的网络安全。 以下是ISO 21434网络安全标准对汽车软件开发的主要共同要求&#xff1a; 1. 安全意识与设计 …

microsoft edge浏览器卡死问题

win11经常遇到microsoft edge浏览器卡死的情况&#xff0c;有时候是一会没用浏览器就全部卡死&#xff0c;有时候是锁屏或者电脑休眠浏览器就不能用&#xff0c;找了很多的办法都没好使&#xff0c;用以下方法好使了&#xff1a; edge浏览器中打开 edge://settings/system 把 …

Cornerstone3D Tools对影像进行交互(中篇)-注释类工具使用

&#x1f3c4;‍♀️ 前言 这里是关于Cornerstone3D Tools对影像进行交互&#xff08;中篇 &#xff09;- 注释类工具的使用介绍。在 Cornerstone3D Tools对影像进行交互(上篇)-基础交互工具及同步器 一文中主要介绍了一下基础交互类工具的使用&#xff0c;感兴趣的小伙伴可以…

【优先算法】--双指针1

“一念既出&#xff0c;万山无阻。”加油陌生人&#xff01; 目录 1.双指针--移动零 2.双指针-复写零 ok&#xff0c;首先在学习之前&#xff0c;为了方便大家后面的学习&#xff0c;我们这里需要补充一个知识点&#xff0c;我这里所谓的指针&#xff0c;不是之前学习的带有…

Linux系统移植

目录 一、简介 嵌入式Linux系统移植组成部分: 二、搭建交叉开发环境 选择交叉开发环境的原因: 1.Ubuntu和Windows下的文件互传 2.Ubuntu 下 NFS和 SSH服务开启 3.Ubuntu 交叉编译工具链安装 3.1修改环境变量 3.2安装相关库 三、bootloader的选择和移植 编译U-boot 总…

中大型企业网络架构和建设方案

1. 需求分析 &#xff08;1&#xff09;用户需求&#xff1a; 员工访问&#xff1a;支持内部员工通过有线和无线网络访问企业资源。 远程访问&#xff1a;支持远程办公员工通过VPN安全访问企业内部资源。 合作伙伴和客户访问&#xff1a;允许外部合作伙伴和客户通过受控渠道访问…

Linux 外设驱动 应用 2 KEY 按键实验

2 按键 2.1 按键介绍 按键是指轻触式按键开关&#xff0c;也称之为轻触开关。按键开关是一种电子开关&#xff0c;属于电子元器件类&#xff0c;最早出现在日本&#xff0c;称之为&#xff1a;敏感型开关&#xff0c;使用时以满足操作力的条件向开关操作方向施压开关功能闭合…

东方通 TongWebV7 Docker 部署与 Spring Boot 集成指南

东方通 TongWebV7 Docker 部署与 Spring Boot 集成指南 文章目录 东方通 TongWebV7 Docker 部署与 Spring Boot 集成指南一 TongWeb V7二 Spring Boot JAR 配置文件三 修改 maven 依赖四 docker compose 启动项目五 查看 docker 信息 本文详细讲解了如何在 Docker 环境中将东方…

【笔记】Day2.5.1查询运费模板列表(未完

&#xff08;一&#xff09;代码编写 1.阅读需求&#xff0c;确保理解其中的每一个要素&#xff1a; 获取全部运费模板&#xff1a;这意味着我需要从数据库中查询所有运费模板数据。按创建时间倒序排序&#xff1a;这意味着查询结果需要根据模板的创建时间进行排序&#xff0…