Javascript动画学习，打开坤世界的大门-CSDN博客

本文链接：https://blog.csdn.net/m0_70031574/article/details/131554209

- 目录
  
  概要
  
  整体架构流程
  
  今日分享：动坤
  
  圆周运动
  
  小结

概要

JavaScript：

语言基础：JavaScript是一种面向对象的动态语言。采用弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言；采用事件驱动，不需要经过Web服务器就可以对用户的输入做出响应
DOM操作：JavaScript可以通过浏览器提供的Document Object Model（文档对象模型）来操作HTML文档的结构和内容，实现动态改变、添加或删除元素。
事件处理：JavaScript可以通过事件处理机制响应用户的交互操作，例如点击、鼠标移动、键盘输入等，可以编写相应的处理函数来处理这些事件。
表单验证：JavaScript可以通过表单验证来对用户输入的数据进行校验，例如检查必填字段、格式验证、长度限制等。
动画效果：JavaScript可以使用定时器和CSS样式操作来实现网页元素的动态效果，例如淡入淡出、移动、旋转等。
前端框架：JavaScript有许多流行的前端框架，如React、Angular和Vue等，用于简化开发过程、提高效率和代码可维护性。
使用JavaScript脚本语言可以使文字实现多种特效，例如改变文字大小和颜色。

整体架构流程

HTML结构：首先，在HTML文件中定义页面的结构和内容，包括标签、元素和布局。
JavaScript引入：在HTML文件中引入JavaScript代码，可以通过内联脚本标签 <script> ，或者外部文件引入 <script src="filename.js"></script>。
事件绑定：使用JavaScript代码为HTML元素绑定事件处理函数，通过事件驱动来响应用户的交互操作，例如点击、鼠标移动、键盘输入等。
事件处理函数：定义事件处理函数，实现具体的逻辑操作，例如表单验证、数据处理、页面更新等。
DOM操作：通过JavaScript对文档对象模型（DOM）进行操作，即通过选择元素、修改属性、添加或删除节点等方式，实现页面的动态改变。
数据交互：使用JavaScript的AJAX技术与服务器进行数据交互，发送HTTP请求并异步获取数据，然后根据返回的数据更新页面内容。
动态效果：通过JavaScript代码实现页面的动画效果，可以使用定时器、CSS样式操作、动画库等方式达到所需的效果。
框架使用：如果使用了前端框架（如React、Angular、Vue等），则需要按照框架的规范和API进行开发，包括组件的定义、数据绑定、状态管理等。
浏览器渲染：最后，浏览器会解析HTML、CSS和JavaScript代码，将它们渲染到页面上，并在用户操作时执行相应的JavaScript代码。

今日分享：动坤

在css静态图像的基础上，使用js的@keyframes规则和定时器，就可以得到这样的可旋转可做圆周运动的坤坤

@keyframes jump {

from{

transform: scale(0.5);

opacity: 0.5;

}to{

transform: scale(2);

}

}

let radius = 100; // 圆周运动半径

let speed = 0.002; // 运动速度

let angle = 0; // 初始角度

let dsq= setInterval(()=>{

let x=f.clientWidth/2+radius*Math.cos(angle)

let y=f.clientHeight/2+radius*Math.sin(angle)

z.style.left=x+'px'

z.style.top=y+'px'

//更新角度

angle+=speed

},1)

圆周运动

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>圆周运动</title>

<style>

.r1{

width: 500px;

height: 500px;

border: 1px solid red;

position: relative;

border-radius: 50%;

}

.r1>div{

position: absolute;

}

.b1{

width: 100px;

height: 100px;

background-color: skyblue;

border-radius: 50%;

top: 200px;

left: 0px;

}

.b2{

width: 100px;

height: 100px;

background-color: rebeccapurple;

border-radius: 50%;

top: 200px;

left: 100px;

}

.r2{

width: 300px;

height: 300px;

border: 1px solid rgb(0, 255, 26);

border-radius:50%;

left:100px;

top: 100px;

}

.r3{

width: 100px;

height: 100px;

left: 200px;

top: 200px;

border: 1px solid rebeccapurple;

border-radius: 50%;

}

button{

width: 80px;

height: 40px;

background-color: green;

border: none;

color: white;

font-size: large;

border-radius: 10px;

cursor: pointer;

box-shadow: 0 8px 5px gray;

margin-left: 20px;

margin-top: 20px;

margin-bottom: 20px;

}

button:active{

transform: translate(5px,5px);

}

</style>

</head>

<body >

<div class="r1">

<div id="b1" class="b1" ></div>

<div id="b2" class="b2"></div>

<div class="r2"></div>

<div class="r3"></div>

</div>

<button οnclick="start1(),start2()" >开始</button>

<hr>

</body>

<script>

let r=200,x0=250,y0=250

let b1=document.getElementById('b1')

let x=50,y=50

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)

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.00000000000000000000000000000001);

}

let rr=100

let b2=document.getElementById('b2')

let x1=150,y1=50

function start2(){

//定时器

let sbr1=setInterval(()=>{

x1++

y1=-Math.sqrt(Math.pow(rr,2)-Math.pow(x1-x0,2))+y0

b2.style.top=y1-50+'px'

b2.style.left=x1-50+'px'

if(x1==350&&y1==250){

clearInterval(sbr1)

let xbr1=setInterval(()=>{

x1--

y1=Math.sqrt(Math.pow(rr,2)-Math.pow(x1-x0,2))+y0

b2.style.top=y1-50+'px'

b2.style.left=x1-50+'px'

if(x1==150&&y1==250){

clearInterval(xbr1)

start2()

}

})

}

},0.00000000000000001);

}

</script>

</html>