javascript动画之圆形运动,环绕鼠标运动作小球

JavaScript动画之圆形运动

在JavaScript中,通过使用CSS3的transform属性或canvas绘图API,可以实现圆形运动效果。接下来,我们以transform属性为例进行详细讲解。

示例1:物体沿圆形路径运动

  1. 首先,需要准备一个容器和一个要运动的物体。将其设置为圆形,如下所示:
<div id="container">
  <div id="ball"></div>
</div>

<style>
#container {
  width: 500px;
  height: 500px;
  border: 1px solid #ccc;
  border-radius: 50%;
  position: relative;
}

#ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: orange;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -25px;
}
</style>
  1. 然后,通过JavaScript代码来设置物体沿圆形路径运动的效果。
var container = document.getElementById('container');
var ball = document.getElementById('ball');

var radius = container.clientWidth / 2 - ball.clientWidth / 2; // 半径
var angle = 0; // 角度

setInterval(function() {
  var x = container.clientWidth / 2 + radius * Math.cos(angle);
  var y = container.clientHeight / 2 + radius * Math.sin(angle);

  ball.style.top = y - ball.clientHeight / 2 + 'px';
  ball.style.left = x - ball.clientWidth / 2 + 'px';

  angle += 0.01; // 每次增加的角度值,可根据实际情况调整
}, 16); // 每隔16毫秒执行一次
  1. 最后就可以看到物体沿圆形路径运动了。

示例2:环绕鼠标运动的小球

  1. 首先,准备一个容器和一个小球。
<div id="container2">
  <div id="ball2"></div>
</div>

<style>
#container2 {
  width: 500px;
  height: 500px;
  border: 1px solid #ccc;
  position: relative;
}

#ball2 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: orange;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
}
</style>
  1. 然后,通过JavaScript代码来设置小球环绕鼠标运动的效果。
var container2 = document.getElementById('container2');
var ball2 = document.getElementById('ball2');

container2.addEventListener('mousemove', function(ev) {
  var x = ev.clientX - container2.offsetLeft;
  var y = ev.clientY - container2.offsetTop;

  var left = x - ball2.clientWidth / 2;
  var top = y - ball2.clientHeight / 2;

  var r = Math.sqrt(Math.pow(container2.clientWidth / 2 - x, 2) + Math.pow(container2.clientHeight / 2 - y, 2)); // 小球到容器中心的距离
  var angle = Math.acos((x - container2.clientWidth / 2) / r);

  if (y > container2.clientHeight / 2) { // 鼠标在容器下半部分
    angle = Math.PI * 2 - angle;
  }

  ball2.style.left = left + r * Math.cos(angle) + 'px';
  ball2.style.top = top + r * Math.sin(angle) + 'px';
});
  1. 最后,运行代码,可以看到小球环绕鼠标运动的效果。

总结

通过以上两个示例,我们可以发现,实现圆形运动效果的核心代码是根据圆的参数方程计算物体的坐标,实现小球环绕鼠标运动的核心是根据三角函数计算物体的坐标。在实际开发中,可以根据具体场景选择使用哪种方式来实现圆形运动效果。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:javascript动画之圆形运动,环绕鼠标运动作小球 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • js中string之正则表达式replace方法详解

    JS中String之正则表达式replace方法详解 什么是正则表达式 正则表达式可以理解为是一种匹配文本模式的规则。使用正则表达式可以方便地进行文本操作,如查找、替换、匹配等。在JavaScript中,可以使用RegExp对象来表示正则表达式。 replace方法概述 字符串的replace()方法可以用来替换字符串中的文本。它可以接受两个参数,第一个参数…

    JavaScript 2023年5月28日
    00
  • JavaScript用200行代码制作打飞机小游戏实例

    这篇攻略将详细讲解如何使用 JavaScript 用 200 行代码制作一个简单的打飞机小游戏。我们将会使用 HTML5 Canvas 作为游戏画布,并构建游戏的逻辑和基本元素。整个游戏的框架代码只需要不到 200 行,但你可以根据需要自行扩展其功能。 1. 创建 HTML 画布 首先,在 HTML 代码中创建一个 Canvas 画布,并使用 CSS 样式设…

    JavaScript 2023年5月27日
    00
  • 微信小程序request请求封装,验签代码实例

    以下是一份“微信小程序request请求封装,验签代码实例”的完整攻略: 简介 在微信小程序中,我们需要使用request接口向后端服务器发送请求获取数据。然而,为了确保请求的安全性以及数据的完整性,我们需要对请求进行验签,防止被恶意篡改。因此,在此,我们需要对微信小程序的request请求进行封装,同时添加验签的功能。 步骤 安装crypto-js库 我们…

    JavaScript 2023年6月11日
    00
  • javascript URL编码和解码使用说明

    Javascript URL编码和解码使用说明 在Javascript编程中,url编码和解码是常见的操作。URL编码指将url中的特殊字符进行转义,以便于传输和处理;而URL解码则是将转义后的特殊字符还原回原来的字符。本文将详细介绍Javascript中URL编码和解码的使用方法。 URL编码 Javascript中URL编码通过encodeURIComp…

    JavaScript 2023年5月19日
    00
  • JS实现响应鼠标点击动画渐变弹出层效果代码

    这里为您详细讲解JS实现响应鼠标点击动画渐变弹出层效果的攻略。 实现思路 实现该效果的基本思路是通过 JavaScript 来控制 CSS 样式的变化,从而达到动画渐变弹出层的效果。 具体实现步骤如下:1. 创建一个静态 HTML 页面,包含需要点击的按钮和弹出层。2. 利用 CSS 设置弹出层的初始样式和动画样式。3. 使用 JavaScript 监听按钮…

    JavaScript 2023年6月10日
    00
  • js实现图片实时时钟

    实现图片实时时钟的完整攻略如下。 一、准备工作 引入jQuery库 “` 2. 在HTML页面中添加img标签,并设置id和src属性 3. 创建一个空的div容器,用于存放数字图片 4. 在css文件中设置图片的宽度和高度 #clock { width: 150px; height: 150px; } “` 二、代码实现 获取当前时间 var date…

    JavaScript 2023年5月27日
    00
  • JavaScript通过Date-Mask将日期转换成字符串的方法

    当我们需要将JS中的日期对象转换成字符串时,我们可以使用Date-Mask库。下面是详细的步骤。 1. 引入Date-Mask库 首先,在HTML文件中引入Date-Mask库,可以通过以下的代码将库引入到页面中: <script src="https://cdnjs.cloudflare.com/ajax/libs/date-mask/2.…

    JavaScript 2023年6月10日
    00
  • python的pip有什么用

    下面是关于“Python的pip有什么用”的详细攻略: 1. 什么是pip pip是Python语言中一个非常常用的包管理工具,用于安装和管理Python的第三方库。它可以自动下载、安装和更新Python库,大大方便了开发者的工作。pip已经是Python3.4及以后版本的标准库之一,不需要额外安装。 2. pip的使用 安装pip 如果你使用的Python…

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部