在圆形路径上制作圆圈动画

2023-12-09

我在屏幕中央有一个物体(图像)。现在我想为这个对象周围的一些圆圈设置动画。实现该任务的最佳想法是什么?我应该使用任何专用的JS动画库?

enter image description here


您可以使用一些简单的三角函数,如下所示:

在线演示在这里

Demo snapshot

function loop() {

    /// calc x and y position with radius of center +
    x = cx + radius * Math.cos(angle * Math.PI / 180);
    y = cy + radius * Math.sin(angle * Math.PI / 180);

    /// set satelite's center to that position
    $('#sat1').css({left:x - radiusSat, top:y - radiusSat});

    /// increase angle
    angle++;
    if (angle>360) angle = 0;

    /// loop
    requestAnimationFrame(loop);
}

该演示已扩展为支持所有五颗卫星。 您当然需要自己添加其他卫星。您可以通过增加角度增量来提高速度。

请注意参考号。您对帖子的新评论:此处的代码和示例显示了原则为了达到你所追求的结果你需要做什么。由于 SO 的目的不是生成免费代码/完整的解决方案,因此未提供此功能,但使用此处所示和演示的原则,您应该能够采用它们来做您希望它们做的事情。

还有其他方法可以移动卫星,例如使用 CSS3 变换/动画(这将为您提供更平滑的运动,因为您可以使用分数位置)、Canvas 元素、jQuery 路径等。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在圆形路径上制作圆圈动画 的相关文章

随机推荐

  • 在SVG线性渐变停止偏移中绑定Angular2值?

    我想在线性梯度停止偏移中使用绑定 angular2 值 但它给了我错误 有人可以告诉我如何在线性渐变的停止偏移中绑定 angular2 值 如下所示 测试组件 ts import Component EventEmitter ViewEnc
  • Angularjs 创建输入掩码

    我正在尝试创建一个指令来为我的输入创建自定义掩码 我知道还有其他库可以使用 但有时我需要根据公司需求进行自定义输入 例如 OS 012 08765 所以我宁愿创建自己的指令 到目前为止 我能够在我需要的模式上格式化数字 但不能在输入上格式化
  • 基本 PowerShell 功能无输出

    自从我开始使用 PowerShell 以来已经有一段时间了 到今天我可以说我已经完成了很多日常任务 不过 在学校每天都是新的一天 现在 当我开始使用函数时 我再次绊倒了 这是我的问题 即使使用许多初学者教程中的最简单的功能 它也无法在我的工
  • 如何使用导出Excel并打印数据表中选定的列?

    我想使用导出 Excel 并打印数据表 我使用以下代码 但无法对选定的列使用这两个选项 example DataTable dom Blfrtip buttons extend excel print exportOptions colum
  • 在 PHP 中生成随机密钥的最佳方法是什么?

    我正在寻找创建一个可重用的函数 它将生成一个随机密钥 其中包含选定长度的可打印 ACSII 字符 从 2 到 1000 我认为可打印的 ASCII 字符为 33 126 它们的密钥不需要完全唯一 如果在完全相同的毫秒内生成则唯一 所以uni
  • Prolog 在单独的数据库文本文件上插入、修改和删除事实

    我有一个包含很多事实的序言数据库文件knowledge pl 例如 father of joe paul father of joe mary mother of jane paul mother of jane mary male pau
  • 从 Mathematica 函数返回相等性

    我有一个返回等式的函数 我想打印它 例如 x y 或 2x 5 10 这些通常对数学没有任何意义 它不能进一步简化它 然而 有时两边是相等的 但我希望能够以未计算的形式打印相等 也就是说 我希望 Mathematica 打印 x x 而不是
  • 动态创建类方法

    我正在编写一个类方法来创建另一个类方法 似乎有一些奇怪的地方class eval and instance eval在类方法的上下文中进行操作 为了显示 class Test1 def self add foo self class eva
  • 为什么是!!更适合检查对象是否真实? [复制]

    这个问题在这里已经有答案了 一些 JavaScript 示例使用 检查对象是否可用 Check to see if Web Workers are supported if window Worker Yes I can delegate
  • 带有尺寸参数的不成比例气泡图

    我创建了一个气泡图 并输入了一些测试值 如下所示 this chart1 Series blueBubble Points AddXY 2 3 6 this chart1 Series redBubble Points AddXY 1 0
  • GitHub.com 的存储库大小限制

    最近我一直在使用 GitHub 我想知道 github com 上托管的文件的存储库大小限制是多少 已知限制 有多个适用的回购协议大小限制 软限位 截至 2023 年 根据docs 这是 5 GB 如果超出此限制 您可能会收到来自 GitH
  • PHP 5.3 方法重载(就像 Java 中一样)

    在 Java 中 我们有一个方法重载功能 这对于单例非常有用 例如 我有两个不同的 getInstance 方法 公共静态 它们的行为根据收到的参数而有所不同 public static Currency getInstance Strin
  • 将字符串转换为哈希中的符号的最佳方法

    将散列中的所有键从字符串转换为 Ruby 中的符号的 最快 最干净 直接 方法是什么 这在解析 YAML 时会很方便 my hash YAML load file yml 我希望能够使用 my hash key 而不是 my hash ke
  • 如何将 pandas 数据帧转换为 NumPy 数组?

    按照我之前得到的建议在这里提问我正在将 Pandas 数据框转换为数字 NumPy 数组 为此 我使用了numpy asarray 我的数据框 DataFrame label vector 0 0 1 0 0033524514 2 0 02
  • 为什么Visual C++中栈地址低于堆地址?

    众所周知 栈地址高于堆地址进程地址空间 但是当我在VS2010中编写程序验证时 遇到了一些麻烦 栈的地址低于堆 甚至低于Data Segment 程序如下 include stdafx h include malloc h static i
  • scipy.minimize——获取成本函数与迭代?

    有没有办法使用 scipy minimize 在每次迭代的基础上访问成本函数 而不使用回调并重新执行成本函数 options disp似乎打算这样做 但只会导致优化器打印终止消息 将其打印到标准输出并使用就可以了contextlib red
  • R phylo对象:如何连接节点标签和节点编号

    R 中的 phylo 对象可以具有内部节点标签 phylo obj node label 但许多 R 函数使用节点编号而不是节点标签 甚至 phylo 对象本身也使用节点号来描述边 phylo obj edge 并且似乎没有内部节点标签到这
  • 使用 terminfo 仅重置前景色

    通过使用 ANSI 序列Esc 39m在终端中 可以清除前景色而不改变其他属性 如粗体 下划线或背景颜色 例如 echo e e 31 1mRed and bold e 39m Bold only 我想从 terminfo 功能中检索此序列
  • 将 JSON 转换为 Parquet

    我有一些 JSON 格式的 TB 日志数据 我想将它们转换为 Parquet 格式 以便在分析阶段获得更好的性能 我已经成功地通过编写一个mapreduce java作业来做到这一点 该作业使用镶木地板先生 and 镶木地板阿夫罗 我唯一不
  • 在圆形路径上制作圆圈动画

    我在屏幕中央有一个物体 图像 现在我想为这个对象周围的一些圆圈设置动画 实现该任务的最佳想法是什么 我应该使用任何专用的JS动画库 您可以使用一些简单的三角函数 如下所示 在线演示在这里 function loop calc x and y