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日

相关文章

  • 巧用局部变量提升javascript性能

    当JavaScript代码执行时,会先根据作用域中的变量、函数、以及this等信息,创造出执行上下文,并形成可用的作用域链,接着才会开始执行代码。局部变量的定义在这个过程中扮演着重要的角色,局部变量能够有效地提升JavaScript代码的性能。 局部变量提升 JavaScript代码执行时,会遇到变量和函数的声明,JavaScript会预处理变量和函数声明,…

    JavaScript 2023年6月10日
    00
  • JS判断时间段的实现代码

    要实现JS判断时间段的功能,需要以下几个步骤: 获取当前时间:可以使用JavaScript中的Date()对象来获取当前时间。例如:var now = new Date() 得到当前时间在一天中的小时数:可以通过now.getHours()方法获取当前时间的小时数。 根据小时数来判断时间段:一般将一天24小时分为四个时间段,即早上、上午、下午和晚上四个时间段…

    JavaScript 2023年5月27日
    00
  • Javascript RegExp test() 方法

    JavaScript RegExp的test()方法 JavaScript的RegExp对象中的test()方法是一个布尔值,用于检查一个字符串是否匹配正则表达式。如果匹配,返回true否则false。 语法 test()方法的语法如下: .test(str) 其中,str是要检查的字符串。 示例1:使用test()检查字符串是否匹配正则表达式 const …

    JavaScript 2023年5月11日
    00
  • js实现随机抽奖

    下面是js实现随机抽奖的完整攻略: 目录 背景介绍 随机抽奖原理 实现过程 准备工作 代码逻辑 示例说明 示例一:随机抽取一名幸运儿 示例二:抽奖动画效果 背景介绍 随机抽奖是常见的一个功能,例如网站活动、抽奖游戏、公益机构等都有可能需要使用到此功能。本文将详细介绍如何使用JavaScript实现随机抽奖的功能。 随机抽奖原理 随机抽奖的实现原理比较简单,例…

    JavaScript 2023年6月11日
    00
  • Javascript使用正则验证身份证号(简单)

    首先,需要提供正则表达式来匹配身份证号码: var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 这个正则表达式可以匹配15位、18位身份证号码和17位数字加一个字母(大小写均可),字母可以为X或x。 接下来,可以使用 test() 方法对身份证号码进行验证。示例代码如下: function checkI…

    JavaScript 2023年6月10日
    00
  • 使用RequireJS库加载JavaScript模块的实例教程

    我来详细讲解如何使用RequireJS库加载JavaScript模块。 什么是RequireJS RequireJS是一个JavaScript模块加载器,它可以帮助我们实现依赖模块的异步加载。它采用了AMD规范,并提供了一种便捷的方式,使JavaScript开发人员可以更容易地组织和管理代码。 安装与配置 下载RequireJS 去RequireJS的官方网…

    JavaScript 2023年5月27日
    00
  • JS基础系列之正则表达式

    JS基础系列之正则表达式 正则表达式(Regular Expression)是一个描述字符模式的对象。一般用于字符串的匹配、查找、替换等。JavaScript 通过内置对象 RegExp 提供对正则表达式的支持。本文将提供一些正则表达式的基础知识和用法,让你轻松入门。 创建正则表达式 正则表达式可以采用字面量形式或者使用 RegExp 构造函数创建。其中字符…

    JavaScript 2023年6月10日
    00
  • TypeScript接口和类型的区别小结

    下面我将为您介绍关于“TypeScript接口和类型的区别”的详细攻略。 什么是TypeScript接口? TypeScript接口是一种抽象结构,用于描述对象的形状。它们描述了对象具有什么属性,以及属性的类型。接口定义了一个协议(规范),对象实现该协议则视为符合该接口需求。例如: interface Person { name: string; age: …

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