什么是JavaScript
首先在制作圆周运动动画时,我们需要了解一种前端语言JavaScript
JavaScript是一种广泛使用的编程语言,用于为网页添加交互性和动态功能。它可以在网页上执行各种操作,如验证表单、创建动画效果、处理用户输入等。JavaScript是一种脚本语言,可以直接嵌入到HTML代码中,并由Web浏览器解释和执行。它是现代Web开发中不可或缺的一部分。
JavaScript的特点是什么
JavaScript的特点包括:
1. 简单易学:相对于其他编程语言,JavaScript语法简单、易于理解和学习。
2. 客户端脚本语言:JavaScript主要用于前端开发,可以直接在网页上运行,为用户提供交互性和动态功能。
3. 跨平台性:JavaScript可以在各种操作系统和设备上运行,包括桌面计算机、移动设备和嵌入式系统。
4. 动态性:JavaScript是一种动态类型的语言,变量的类型可以在运行时自动确定,使得开发更加灵活。
5. 强大的功能和库:JavaScript拥有丰富的内置功能和各种第三方库,可以实现复杂的任务和功能,如DOM操作、表单验证、动画效果等。
6. 与HTML和CSS的无缝集成:JavaScript可以与HTML和CSS紧密结合,实现网页的完整交互和样式控制。
7. 支持面向对象编程:JavaScript支持面向对象编程的特性,如封装、继承和多态,使得代码的组织和复用更加便捷。
总的来说,JavaScript是一种强大而灵活的编程语言,为Web开发提供了丰富的功能和交互性。
了解完JavaScript的概念以及特点之后,我们可以使用该编程语言首先前端网页的动态化。
使用三件套实现圆圈的圆周运动
使用JavaScript完成动作函数设置,css完成区域显示,html则为上述两种技术提供了基本的框架处理。
下面是成果展示
实现思路
首先用css和html构成基本圆形框架。使用border-radius实现方块区域圆形化,border-color实现颜色不统一(便于观察),利用top和left属性控制边框的距离。在实现构造的同时,注意子类和父类的相对关系。
下面是头部和身体部分代码实现
<!DOCTYPE html>
<head>
<style>
.r1{
width:500px;
height:500px;
border:1px solid red;
border-radius:50%;
position:relative;
}
.r1>div{
position: absolute;
}
.r2{
width:300px;
height:300px;
border:1px solid yellowgreen;
border-radius:50%;
top:100px;
left:100px;
}
.r3{
width:100px;
height:100px;
border-radius: 50%;
border:1px solid green;
top:200px;
left:200px;
}
.b1{
width:100px;
height:100px;
background-color: blue;
border-radius: 50%;
top:200px;
left:0px;
}
.b2{
width:100px;
height:100px;
background-color: rebeccapurple;
border-radius: 50%;
top:200px;
left:100px;
}
</style>
</head>
<body>
<div class="r1">
<div class="b1" id="b1">
</div>
<div class="b2" id="b2">
</div>
<div class="r2"></div>
<div class="r3"></div>
</div>
</body>
</html>
结果展示
基本图形与框架已经完成,那么该给外面的小球完成一个圆周动作设置。这个时候我们可以使用JavaScript的自定义函数以及setinterval完成设置。
在设置圆周运动过程中,我们知道圆的公式为(x-a)^2+(y-b)^2=r^2。利用这个思路,控制好top与left距离,便可以完成圆周运动的动作设置。(tips:x与y的距离不能忽略半径的影响。因为left是圆到最左边的距离,而圆心的距离比其多出一个半径,同理top和y的关系也是如此,所以最后的x与y要减去半径)
代码展示
<script>
//r表示运动轨迹的半径,x0,y0表示圆形坐标
let r=200,x0=250,y0=250;
//获取b1蓝色小球
let b1=document.getElementById('b1')
//定义x,y表示小球的运动轨迹
let x=50,y=0;
function start1(){
let sbr= setInterval(() => {
x++
y=-Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
b1.style.top=y-50+'px'
b1.style.left=x-50+'px'
}, 0.001);
}
</script>
结果展示
然而,上述结果的小球跑出一半就脱离轨道直线运动,这是什么原因造成的呢?
分析:上述JavaScript代码中关于圆的轨迹运动没有考虑到下半部分的情况,导致圆运动一半轨迹后直接直线运动。
解决方法:需要手写个下半部分轨迹的运动方法,为了保持小圆球能够持续运动,我们还应该讲手写的函数进行递归调用。在写函数过程中,将下半部分与上半部分更好的结合,我们需要舍弃小球直线运动的函数,这时候需要使用clearinterval来进行清除(即取消上半圆的定时器)取消过程中,应当加限制条件限制下半圆的多余运动部分
代码展示:
<script>
//r表示运动轨迹的半径,x0,y0表示圆形坐标
let r=200,x0=250,y0=250;
//获取b1蓝色小球
let b1=document.getElementById('b1')
//定义x,y表示小球的运动轨迹
let x=50,y=0;
function start1(){
let sbr= setInterval(() => {
x++
y=-Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
b1.style.top=y-50+'px'
b1.style.left=x-50+'px'
if(x==450&&y==250){
//取消上半圆的定时器
clearInterval(sbr)
//开启下半圆的定时器,setInterval定时器
let xbr=setInterval(() => {
x--
y=Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
b1.style.top=y-50+'px'
b1.style.left=x-50+'px'
if(x==50&&y==250){
clearInterval(xbr)
start1()
}
});
}
}, 0.001);
}
</script>
全代码展示
<!DOCTYPE html>
<head>
<style>
.r1{
width:500px;
height:500px;
border:1px solid red;
border-radius:50%;
position:relative;
}
.r1>div{
position: absolute;
}
.r2{
width:300px;
height:300px;
border:1px solid yellowgreen;
border-radius:50%;
top:100px;
left:100px;
}
.r3{
width:100px;
height:100px;
border-radius: 50%;
border:1px solid green;
top:200px;
left:200px;
}
.b1{
width:100px;
height:100px;
background-color: blue;
border-radius: 50%;
top:200px;
left:0px;
}
.b2{
width:100px;
height:100px;
background-color: rebeccapurple;
border-radius: 50%;
top:200px;
left:100px;
}
</style>
</head>
<body>
<div class="r1">
<div class="b1" id="b1">
</div>
<div class="b2" id="b2">
</div>
<div class="r2"></div>
<div class="r3"></div>
</div>
<button onclick="start1()">开始</button>
</body>
<script>
//r表示运动轨迹的半径,x0,y0表示圆形坐标
let r=200,x0=250,y0=250;
//获取b1蓝色小球
let b1=document.getElementById('b1')
//定义x,y表示小球的运动轨迹
let x=50,y=0;
function start1(){
let sbr= setInterval(() => {
x++
y=-Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
b1.style.top=y-50+'px'
b1.style.left=x-50+'px'
if(x==450&&y==250){
//取消上半圆的定时器
clearInterval(sbr)
//开启下半圆的定时器,setInterval定时器
let xbr=setInterval(() => {
x--
y=Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
b1.style.top=y-50+'px'
b1.style.left=x-50+'px'
if(x==50&&y==250){
clearInterval(xbr)
start1()
}
});
}
}, 0.001);
}
</script>
</html>
最终效果
综合来看,该运动难点在于对路径的设置,其中设计到大量关于距离参数的设置,笔者在绘制运动过程中,常常忽略了半径对轨迹的影响, 以至于小球轨迹飘忽不定
由于作者水平有限,欢迎各位大佬批评指出错误
跪求支持三连!~~~