曲线运动,圆周运动

最新推荐文章于 2021-08-03 19:12:09 发布
最新推荐文章于 2021-08-03 19:12:09 发布
阅读量350 收藏 1
点赞数
分类专栏： 知识点

Math.sin()—-Math.cos()

曲线运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";}
        #wrap{width: 400px;margin: 30px auto;}
        #box{width: 400px;height: 400px;background: #333;position: relative;}
        #ball{width: 10px;height: 10px;position: absolute;background: red;top: 0;left: 0}
        #ball1{width: 10px;height: 10px;position: absolute;background: pink;top: 0;left: 0}
        #x{width: 100%;border: 1px dashed red;position: absolute;top: 50%;}
        #y{height: 100%;border: 1px dashed green;position: absolute;top: 0;}
    </style>
</head>
<body>
    <div id="wrap">
        <input type="button" value="start" onclick="cstart()">
        <input type="button" value="stop" onclick="cstop()">
        <div id="box">
            <div id="ball"></div>
            <div id="ball1"></div>
            <span id="x"></span>
            <span id="y"></span>
        </div>
    </div>
    <script type="text/javascript">
        /*
            三角函数 参数---弧度
                Math.sin()
                Math.cos()
                Math.PI --- π 圆周率

            角度    弧度
            90° --- π/2
            180°--- π
            1°  --- π/180°   ===>
            180°/π--- 1
            deg ---- deg*π/180°
            x -- 0.09   180*0.09/π
         */
        //alert(Math.PI);
        //alert(Math.sin(Math.PI/2));
        //alert(Math.cos(Math.PI/2));

        //画 sin曲线
        var ball = document.getElementById("ball");
        var ball1 = document.getElementById("ball1");
        var x = 0;
        var y = 0;
        var xspeed = 2;
        //弧度
        var yspeed = 0.09;  //5°

        var y1 = 0;
        var xspeed1 = 2;
        //弧度
        var yspeed1 = 0.09;

        var timer = null;
        function draw(){
            //每次让x值加2
            x += xspeed;
            y += yspeed;
            var cleft = x;
            var ctop = 200 + Math.sin(y)*-50;
            ball.style.left = cleft+"px";
            ball.style.top = ctop+"px";

            y1 += yspeed1;
            var cleft1 = x;
            var ctop1 = 200 + Math.cos(y1)*-50;
            ball1.style.left = cleft1+"px";
            ball1.style.top = ctop1+"px";
            if(x>=400){
                x=0;
            }
        }
        timer = setInterval(draw,1000/30);
        function cstart(){
            if(timer)clearInterval(timer);//不能让计时器累加
            timer = setInterval(draw,1000/30);
        };
        function cstop(){
            clearInterval(timer);
        }
    </script>
</body>
</html>

曲线运动 ===例子

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>运用-曲线运动</title>
        <style type="text/css">
            * { margin: 0; padding: 0;}
            a {text-decoration: none;}
            ul,li { list-style: none;}
            body { font-family: "Microsoft yahei"; position: relative;}
            #box {position: relative; width: 100%; height: 900px; background: #fafafa;}
            #box div {position: absolute; top: 0; left: 0;opacity: 0; transition: opacity 1s;}
        </style>
    </head>
<body>
    <div id="box"></div>
<script type="text/javascript">
    var box = document.getElementById("box");
    setInterval(draw,200);
    function draw(){
        var ball = document.createElement("div");
        var size =  randomNum(10,50);
        var color = randomColor();
        ball.style.width = size+"px";
        ball.style.height = size+"px";
        ball.style.borderRadius = size/2+"px";
        ball.style.background = color;

        box.appendChild(ball);
        var x=0,y=0;
        var xspeed = randomNum(7,10);
        var yspeed = changeDeg(randomNum(4,6));
        var range = randomNum(50,400);
        var timer = setInterval(function(){
            x +=xspeed;
            y +=yspeed;
            var cleft = x;      //x轴的起点
            var ctop = (400-size/2)+Math.sin(y)*-range;  //y轴的起点+曲线的跳动的大小Math.sin(y)*-range
            ball.style.left = cleft+'px';
            ball.style.top = ctop+'px';
            ball.style.opacity = 1;
            if(cleft+size>=box.offsetWidth){
                clearInterval(timer);
                box.removeChild(ball);
            }
        },30)
    };
    function randomNum(start,end){
        return Math.floor(Math.random()*(end-start+1)+start);
    };
    function randomColor(){
        var r = Math.floor(Math.random()*256);
        var g = Math.floor(Math.random()*256);
        var b = Math.floor(Math.random()*256);
        var a = Math.random().toFixed(1);
        return "rgba("+r+","+g+","+b+","+a+")";
    };
    function changeDeg(deg){
        return deg*Math.PI/180;
    };
</script>
</body>
</html>

图片展示:
曲线运动

圆周运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";}
        #wrap{width: 400px;margin: 30px auto;}
        #box{width: 400px;height: 400px;background: #333;position: relative;}
        #ball{width: 10px;height: 10px;position: absolute;background: red;top: 0;left: 0}
        #ball1{width: 10px;height: 10px;position: absolute;background: pink;top: 0;left: 0}
    </style>
</head>
<body>
    <div id="wrap">
        <input type="button" value="start" onclick="cstart()">
        <input type="button" value="stop" onclick="cstop()">
        <div id="box">
            <div id="ball"></div>
            <div id="ball1"></div>
        </div>
    </div>
    <script type="text/javascript">
        var ball = document.getElementById("ball");
        var ball1 = document.getElementById("ball1");
        var x = 0,y = Math.PI;  //===控制起点  结合图
        var xangle = changeDeg(1);//弧度
        var yangle = changeDeg(1);
        var timer = null;
        function draw(){
            x += xangle;
            y += yangle;        //[-1,1]==>循环
            var cleft = 200-5 + Math.sin(x)*50;   //  圆心  +  半径
            var ctop = 200-5 + Math.cos(y)*50;
            ball.style.left = cleft+"px";
            ball.style.top = ctop+"px";

            var cleft1 = 200-5 + Math.sin(x)*200;
            var ctop1 = 200-5 + Math.cos(y)*200;
            ball1.style.left = cleft1+"px";
            ball1.style.top = ctop1+"px";
        }
        timer = setInterval(draw,1000/30);

        function cstart(){
            if(timer)clearInterval(timer);
            timer = setInterval(draw,1000/30);
        };
        function cstop(){
            clearInterval(timer);
        }

        function changeDeg(deg){  //角度转换为弧度
            return deg/180*Math.PI;
        }
    </script>
</body>
</html>

圆周运动===>例子

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>运用-圆周运动</title>
        <style type="text/css">
            * { margin: 0; padding: 0;}
            a {text-decoration: none;}
            ul,li { list-style: none;}
            body { font-family: "Microsoft yahei"; position: relative;}
            #box {position: relative; width: 100%; height: 900px; background: #fafafa;}
            #box div {position: absolute; top: 0; left: 0;opacity: 0; transition: opacity 1s;}
        </style>
    </head>
<body>
    <div id="box"></div>
<script type="text/javascript">
    var box = document.getElementById("box");
    setInterval(draw,200);
    // draw()
    var range = 50;//
    function draw(){
        var ball = document.createElement("div");
        var size =  randomNum(10,20);//球球的大小
        var color = randomColor();
        var Width = box.offsetWidth;// 在页面占据的宽度
        var Height = box.offsetHeight;// 在页面占据的高度

        ball.style.width = size+"px";
        ball.style.height = size+"px";
        ball.style.borderRadius = size/2+"px";
        ball.style.background = color;

        box.appendChild(ball);
        var x=0,y=0,r=0;
        var xspeed = changeDeg(4);  //转动的速度  xspeed==yspeed时==>圆周运动
        var yspeed = changeDeg(4);
        /*
                        xspeed,yspeed转动的速度相等时==>圆周运动
                        xspeed!=yspeeds时==> 螺旋运动
                        xspeed>yspeeds时==>  垂直方向
                        xspeed<yspeeds时==>  水平方向
         */
        range += 10;
        r = range; // 半径自增
        var timer = setInterval(function(){
            x +=xspeed;
            y +=yspeed;
            var cleft = (Width/2-size/2)+Math.cos(x)*-r;  //  圆心  +  半径
            var ctop = (box.offsetHeight/2-size/2)+Math.sin(y)*-r;
            ball.style.left = cleft+'px';
            ball.style.top = ctop+'px';
            ball.style.opacity = 1;
            if(cleft+size>=Width||ctop+size>=Height){
                clearInterval(timer);
                box.removeChild(ball);
            }
        },30)
        // range %= Width/2;
        // console.log(range);
    };
    function randomNum(start,end){
        return Math.floor(Math.random()*(end-start+1)+start);
    };
    function randomColor(){
        var r = Math.floor(Math.random()*256);
        var g = Math.floor(Math.random()*256);
        var b = Math.floor(Math.random()*256);
        var a = Math.random().toFixed(1);
        return "rgba("+r+","+g+","+b+","+a+")";
    };
    function changeDeg(deg){//角度转换为弧度
        return deg*Math.PI/180;
    };
</script>
</body>
</html>

图片展示:
圆周运动

补充:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>圆圈</title>
        <style type="text/css">
            * { margin: 0; padding: 0;}
            a {text-decoration: none;}
            ul,li { list-style: none;}
            body { font-family: "Microsoft yahei"; position: relative;}
            #box {position: relative; width: 100%; height: 900px; background: #fafafa;}
            #box div {position: absolute; top: 0; left: 0;opacity: 0; transition: opacity 1s;}
        </style>
    </head>
<body>
    <div id="box"></div>
<script type="text/javascript">
    var box = document.getElementById("box");
    //setInterval(draw,200);
    var num = 10;
    for(var i=0;i<num;i++){
        draw();
    }
    //console.log(1);
    // draw();
    var range = 50;//
    function draw(){
        var ball = document.createElement("div");
        var size =  randomNum(10,20);//球球的大小
        var color = randomColor();
        var Width = box.offsetWidth;// 在页面占据的宽度
        var Height = box.offsetHeight;// 在页面占据的高度

        ball.style.width = size+"px";
        ball.style.height = size+"px";
        ball.style.borderRadius = size/2+"px";
        ball.style.background = color;

        box.appendChild(ball);
        var x=0,y=0,r=0;
        var turnSpeed = randomNum(1,6)  //转动的速度
        var xspeed = changeDeg(turnSpeed);  //转动的速度相等时  ==>圆周运动
        var yspeed = changeDeg(turnSpeed);    //
        /*
                        xspeed,yspeed转动的速度相等时==>圆周运动
                        xspeed!=yspeeds时==> 螺旋运动
                        xspeed>yspeeds时==>  垂直方向
                        xspeed<yspeeds时==>  水平方向
         */
        range += 10;
        r = 100; // 控制半径
        var timer = setInterval(function(){
            x +=xspeed;
            y +=yspeed;
            // Math.方法相同===来回运动
            var cleft = (Width/2-size/2)+Math.cos(x)*-r;  //  圆心  +  半径
            var ctop = (box.offsetHeight/2-size/2)+Math.sin(y)*-r;
            ball.style.left = cleft+'px';
            ball.style.top = ctop+'px';
            ball.style.opacity = 1;
            if(cleft+size>=Width||ctop+size>=Height){
                clearInterval(timer);
                box.removeChild(ball);
            }
        },30)
        // range %= Width/2;
        // console.log(range);
    };
    function randomNum(start,end){
        return Math.floor(Math.random()*(end-start+1)+start);
    };
    function randomColor(){
        var r = Math.floor(Math.random()*256);
        var g = Math.floor(Math.random()*256);
        var b = Math.floor(Math.random()*256);
        var a = Math.random().toFixed(1);
        return "rgba("+r+","+g+","+b+","+a+")";
    };
    function changeDeg(deg){//角度转换为弧度
        return deg*Math.PI/180;
    };
</script>
</body>
</html>
维克多噗噗
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一张图片绕圆心做圆周运动
06-05
一个动作类CCRoundBy，使精灵绕某个圆心做圆周运动，配合CCMoveTo可以做螺旋运动
使用jQuery实现的图片的圆周运动
王子健的播客
08-20 389
这个是小demo是使用jQuery实现的滑稽图片的圆周运动，并且中央图片的透明度会随着点击而发生变化， 圆周的速度会随这点击的次数而增加。 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;title&amp;amp;gt;index.html&amp;amp;lt
使用jQuery实现图片的圆周运动
qq_33980346的博客
08-20 458
这个是小demo是使用jQuery实现的滑稽图片的圆周运动，并且中央图片的透明度会随着点击而发生变化，圆周的速度会随着点击次数的增加而加快。 index.html #input_1 { background-image: url(‘./img/huaji.jpg’); background-size: 100%; margin-left:...
web前端：less转css，实现transition过渡动画：使用cubic-belizer立体贝塞尔斜率曲线速度动画；实现transform：rotate、translate、skew、scale
cevent的博客
12-29 679
1.less实现：transition-timing-function：贝塞尔斜率曲线运动 *{ margin: 0; padding: 0; height: 100%; body{ width: 60%; height: 75%; border: 1px solid; //margin:上左右下 margin: 15% auto 0; &:hover #wrap{
Egret里用矢量挖圆形的洞
weixin_33805992的博客
08-11 279
  项目里需要用到，但是不是用在新手引导上，下面的代码可以绘制一个圆的四分之一，用四个即可拼出一个圆。 1 private createShape(): egret.Shape { 2 let magicNum = 1 - 0.55228475; 3 let radius = 100; 4 let shape = new egret.Shape(); ...
2018高中物理第五章曲线运动圆周运动练习新人教版必修2201808202107
09-10
这篇资料主要涵盖了高中物理中关于曲线运动特别是圆周运动的相关知识点。圆周运动是物体沿着圆形轨迹进行的运动，常见的例子包括地球自转、车辆轮胎的旋转等。以下是相关知识点的详细解释： 1. **角速度与线速度**...
2015_2016学年高中物理第5章曲线运动圆周运动课件新人教版必修2
09-09
高中物理第五章主要探讨的是曲线运动，特别是圆周运动的概念和相关物理量。在这个章节中，学生需要理解和掌握以下几个核心知识点： 1. **匀速圆周运动**：这是物体沿着圆形路径以恒定速度移动的情况。在这种运动中...
物理必修二曲线运动教案ppt
02-18
简介：在曲线运动中：当力矢量与速度矢量间的夹角等于90°时，作用力仅改变物体速度的方向，不改变速度的大小：例如匀速圆周运动；当夹角小于90°时，作用力不仅改变物体运动速度的方向，并且增大速度的量值；当夹角...
大学物理圆周运动曲线运动学习教案.pptx
11-20
大学物理圆周运动曲线运动学习教案.pptx
高中物理圆周运动最全讲义及典型习题及答案.doc
04-17
- 加速度大小不变，但方向时刻指向圆心，因此匀速圆周运动是变加速曲线运动。 - 匀速圆周运动中，物体所受合外力全部用来提供向心力。 这些知识点构成了高中物理中圆周运动的基础理论框架，理解和掌握这些概念有...
css中transition过渡曲线
m0_59006402的博客
07-18 1444
transition的四个参数: transition(属性渐变):CSS属性 持续时间 运动方式 延迟时间 要变化的属性，比如元素变宽则是width，文字颜色要变色这是color；除了以上属性外，还有css3中大放异彩的css3变形，比如放大缩小，旋转斜切，渐变等。该取值还有个强大的“all”取值，表示上表所有属性； ...
css沿曲线进行动画,css3动画曲线运动
weixin_36077932的博客
08-03 2072
Title.box{width: 50px;height: 120px;margin-top: 500px;margin-left: 500px}.box2{width: 50px;height: 120px;background: black;}.box{ animation: top1 1s ease-out forwards}.box2{ animation: right1 1s ease...
CSS3动画-抛物线运动
热门推荐
行之
03-05 1万+
CSS3动画之抛物线今天来说下CSS3动画，目标是让一个方块做抛物线运动。主要用到的CSS3属性有animation，transform，@keyframes，transition等。 GPU硬件加速。
css3动画曲线运动
06-21 912
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{width: 50px;height: 120px;ma...
CSS3中如何使元素曲线运动
Mr_li13的博客
02-26 6645
问题？CSS3中如何使元素曲线运动 原理：因为在css属性中是没有曲线运动的属性，我们就需要用到一个jquery插件jquery.path.js 下载：点击打开下载链接 例子：在观望中有许多的曲线运动例子，直接复制过来用即可，以下也是本人复制过来的。大家可以借鉴一下 div{ width: 80px; height: 80px; bo
JavaScript运动详解：匀速运动、变速运动和曲线运动
小秋博客
10-19 2762
责编：陈秋歌，关注前端开发领域，寻求报道或者投稿请发邮件chenqg#csdn.net。 欢迎加入“CSDN前端开发者”微信群，参与热点、难点技术交流。请加群主微信「Rachel_qg」,申请入群，务必注明「公司+职位」。另可申请加入CSDN前端开发QQ群：465281214。 除了拖拽，运动也是JavaScript动画的一个基本操作。通过CSS属性transition和animat...
Material Design之定制动画--触摸反馈，循环揭露，转场动画,共享元素和曲线运动
千里之外
01-16 4097
先贴下官网的API https://developer.android.com/training/material/animations.html 触摸反馈： 在按钮属性中添加 android:background="?android:attr/selectableItemBackground" 则点击按钮的时候会有水波纹（有边界），波纹不超过设置的控
【寒江雪】实现物体的匀速圆周运动
寒江雪的博客
07-13 1130
让物体做圆周运动 圆心在原点，半径为1的匀速圆周运动 curAngle += angleSpeed * Mathf.Deg2Rad; float x = Mathf.Cos(curAngle); float y = Mathf.Sin(curAngle); 圆心在原点，半径可变的匀速圆周运动 curAngle += angleSpeed * Mathf.Deg2Rad; f...
学习笔记之egret中使用P2物理引擎创建类半圆弧地面
qq_32319799的博客
04-23 545
前白：突然间的感想，开始自己的笔记记录，内容比较初级，目的也就是记录一下自己的学习旅程，路过的大佬希望手下留情。 需求：大概就是一个不断掉落小球，然后落在一个半圆里面 加个旁白：自己也是第一次使用物理引擎，有不足之处多指教 前文：P2的形状也就那么几个，要弄个半圆弧，没有直接能用的，只能自己去变通，弄个类半圆弧，看起来像是半圆就好了。这里用的就是p2.Heightfield这个类。具体如何实现看下...
曲线运动和滚动的概念区别
最新发布
05-21
曲线运动是物体按照一定的曲线路径运动，例如自由落体运动、圆周运动等。在曲线运动中，物体的路径不是直线，而是一条弧线或者曲线，物体的速度、加速度和动能等物理量都不断地改变。 滚动是物体沿着某个表面滑动并...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值