精华内容
下载资源
问答
  • 匀速运动

    2019-01-21 10:24:00
    匀速运动 function startMove(target){ clearInterval( timer ); timer = setInterval( function(){ var speed = target - oDiv.offsetLeft>0 ? 7: -7; if...
    匀速运动
    function startMove(target){
              clearInterval( timer );
              timer = setInterval( function(){
                  var speed = target - oDiv.offsetLeft>0 ? 7  : -7;
                  if( Math.abs( target - oDiv.offsetLeft ) <  7 ){
                       oDiv.style.left = target + "px";
                       clearInterval( timer );
                  }else{
                       oDiv.style.left = oDiv.offsetLeft +  speed + "px";
                  }
              },30 )
         }
     
    匀速透明运动
    var alpha = 30;// 操作透明度的变化
    function startMove(target){
              clearInterval( timer );
              timer = setInterval( function(){
                  var speed = target-alpha>0 ? 1 : -1;
                  if( target == alpha ){
                       clearInterval( timer );
                  }else{
                       alpha += speed;
                       oDiv.style.opacity =  alpha/100;
                  }
              },30 )
         }

    转载于:https://www.cnblogs.com/tis100204/p/10297447.html

    展开全文
  • 本文实例讲述了javascript匀速运动实现方法。分享给大家供大家参考,具体如下: 匀速运动步骤: 1. 清除定时器 2. 开启定时器 3. 运动是否完成:a、运动完成,清除定时器;b、运动未完成继续 匀速运动停止条件:距离...
  • 在读书的时候,学物理的时候有提到匀速运动。Js代码也可以实现匀速运动,你信不信?下面就来一个简单的匀速运动的代码实例。 匀速运动实例 <!DOCTYPE html> <html> <head> <meta charset=...

    前言

    在读书的时候,学物理的时候有提到匀速运动。Js代码也可以实现匀速运动,你信不信?下面就来一个简单的匀速运动的代码实例。

    匀速运动实例

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#box {
    				width: 100px;
    				height: 100px;
    				background-color: #009F95;
    				position: absolute;
    				left: 100px;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div id="box"></div>
    		<button id="start">开始</button>
    		<script type="text/javascript">
    			var oStart = document.getElementById("start")
    			var oBox = document.getElementById("box")
    			var timer = null
    			oStart.onclick = function() {
    				clearInterval(timer)
    				timer = setInterval(function(){
    					var attrValue = parseInt(getStyle(oBox,"left"))+10
    					oBox.style.left = attrValue+"px"
    					// 添加一个目标点,在500的时候停下来
    					// 解决回退问题思路:让前面先把attrValue 设置成500
    					if(attrValue == 500){
    						clearInterval(timer)
    					}
    				},100)
    			}
    
    			function getStyle(obj, attr) {
    				return window.getComputedStyle ? window.getComputedStyle(obj)[attr] : obj.currentStyle[attr]
    			}
    		</script>
    	</body>
    </html>
    

    匀速运动函数封装

    /**
     * 功能:做匀速运动
     * @param {Object} obj 需要运动的对象 
     * @param {Object} step  步长
     * @param {Object} target  停止的目标点
     * @param {Object} direction  移动的方向,支持left和top
     * @param {Object} speed    运动的频率
     * @param {Object} callback  回调函数
     */
    function move(obj, step, target, direction, speed, callback) {
    	// 给spped默认值
    	var spped = spped || 100
    	// 第一次清除 undefined 不会报错
    	clearInterval(obj.timer)
    	obj.timer = setInterval(function() {
    		var attrValue = parseInt(getStyle(obj, direction)) + step
    		if((step > 0 && attrValue > target) || (step < 0 && attrValue < target)) {
    			attrValue = target
    		}
    		obj.style[direction] = attrValue + "px"
    		if(attrValue == target) {
    			clearInterval(obj.timer)
    			console.log(callback)
    			// 如果运行完成,需要做一些操作,callback函数是等到运行结束以后,再执行
    			callback && callback()
    		}
    	}, speed)
    }
    

    匀速运动的简单应用

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			li{
    				list-style: none;
    				width: 50px;
    				height: 50px;
    				background-color: #009F95;
    				position: absolute;
    			}
    		</style>
    	</head>
    
    	<body>
    		<ul>
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    		</ul>
    		// js文件是应用上面函数封装的方法,小伙伴们可以封装自己的tool.js
    		<script type="text/javascript" src="../js/tool.js" ></script>
    		<script type="text/javascript">
    			// 需求:移入li做匀速运动
    			var aLi = document.getElementsByTagName("li")
    			for (var i = 0; i < aLi.length; i++) {
    				aLi[i].style.top = i * 60+"px"
    			    aLi[i].onmouseover = function(){
    			    	var This = this
    			    	move(this,10,500,"left",10,function(){
    			    		move(This,-10,0,"left",10)
    			    	})
    			    }
    			}
    		</script>
    	</body>
    
    </html>
    
    展开全文
  • 一,匀速运动匀速运动,又称为匀速直线运动,是指物体在一条直线上运动,并且物体在任何时间间隔内通过的位移都是相等的。从上面可知,匀速运动需要具备2个条件,及速度大小相同和速度方向一致匀速运动是一种加速度...

    一,匀速运动

    匀速运动,又称为匀速直线运动,是指物体在一条直线上运动,并且物体在任何时间间隔内通过的位移都是相等的。

    从上面可知,匀速运动需要具备2个条件,及速度大小相同和速度方向一致


    匀速运动是一种加速度为0的运动,匀速运动只有一种,那就是匀速直线运动。

    至于匀速圆周运动,巨阙来说应该是匀速圆周运动或者军角度运动,应为他的加速度不为0(加速度,意思是速度不断的变动,递增或者递减)


    在匀速运动中,速度是有正反方向的,正数为正方向,负数为负方向。


    再次强调,CANVAS采用的是W3C坐标,Y轴正反方向是向下的

    图1:



    语法:

    obj.x+=vx;

    obj.y+=vy;

    obj.x表示X轴的坐标

    obj.y表示Y轴的坐标

    vx表示x轴方向的速度大小,

    vy表示V轴方向的速度大小

    在线demo:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    
    <body>
        <canvas id="canvas" width="800" height="800"></canvas>
        <script src="../assit/arrow.js"></script>
        <script src="../assit/tools.js"></script>
        <script src="../assit/ball.js"></script>
        <script>
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function() {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");
    
            //实例化一个小球,中心坐标为10,25 半径颜色都去默认值
            var ball = new Ball(10, 30);
            var centerX = cnv.width / 2;
            var centerY = cnv.height / 2;
            var VX=1;//速度
    
            ball.y = centerX;
    
            (function frame() {
                window.requestAnimationFrame(frame);
                cxt.clearRect(0, 0, cnv.width, cnv.height);
    
                ball.x += VX;
                ball.fill(cxt);
                //角度递增
    
    
            })();
        }
        </script>
    </body>
    
    </html>

    问:对于非X轴或者非Y轴的运动怎么处理?

    对于非X轴方向或者非Y轴方向的运动,都是采用“分解速度的方法”来实现。速度分解的方法特别简单,只要使用三角函数就可以了

    二,速度的合成和分解

    假设我们要求小球沿着任意方向进行匀速运动,而不是X,Y轴,这时候就需要考虑综合X轴和Y轴的合力了。

    图2:

    语法:

    vx=speed*Math.cos(angle*Math.PI/180);

    vy=speed*Math.sin(angle*Math.PI/180);

    obj.x+=vx;

    obj.y+=vy;

    obj.x表示物体X方向的坐标

    obj.y表示物品Y方向的坐标

    vx表示X轴方向的速度大小

    vy表示Y轴方向的速度大小

    speed表示初始速度的大小

    angle表示该速度的方向和X轴正方向的夹角

    在线demo:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    
    <body>
        <canvas id="canvas" width="800" height="800"></canvas>
        <script src="../assit/arrow.js"></script>
        <script src="../assit/tools.js"></script>
        <script src="../assit/ball.js"></script>
        <script>
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function() {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");
    
            //实例化一个小球,中心坐标为10,25 半径颜色都去默认值
            var ball = new Ball(10, 30);
            var centerX = cnv.width / 2;
            var centerY = cnv.height / 2;
            var speed=1;//速度
    
            ball.y = centerX;
            //速度与X轴方向角度为30度
            var vx=speed*Math.cos(30*Math.PI/180);
            var vy=speed*Math.sin(30*Math.PI/180);
    
            (function frame() {
                window.requestAnimationFrame(frame);
                cxt.clearRect(0, 0, cnv.width, cnv.height);
    
                ball.x += vx;
                ball.y += vy;
                ball.fill(cxt);
                //角度递增
    
    
            })();
        }
        </script>
    </body>
    
    </html>

    配合atan2函数和三角函数速度分解来实现箭头跟随鼠标效果,关于atan2函数,详情请预览

    在线demo:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    
    <body>
        <canvas id="canvas" width="800" height="800"></canvas>
        <script src="../assit/arrow.js"></script>
        <script src="../assit/tools.js"></script>
        <script src="../assit/ball.js"></script>
        <script>
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function() {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");
    
            var arrow=new Arrow(cnv.width/2,cnv.height/2);
            var mouse=tools.getMouse(cnv);
            var speed=1.5;
            var angle=0;
    
            
    
            (function frame() {
                window.requestAnimationFrame(frame);
                cxt.clearRect(0, 0, cnv.width, cnv.height);
    
                //计算出鼠标和箭头的夹角
                var dx=mouse.x-cnv.width/2;
                var dy=mouse.y-cnv.height/2;
                angle=Math.atan2(dy,dx);
                var vx=Math.cos(angle)*speed;
                var vy=Math.sin(angle)*speed;
                arrow.x+=vx;
                arrow.y+=vy;
                arrow.angle=angle;
                arrow.fill(cxt);
    
    
            })();
        }
        </script>
    </body>
    
    </html>

    展开全文
  • 匀速运动洪泛区截面的研究。 范围被评估为基金份额的函数。
  • 运动原理—匀速运动

    2019-11-12 19:53:50
    匀速运动 运动的原理: 让某件物品沿着某种方向随着时间的变化改变位置 一个div的运动其实就是它与浏览器边框的距离在变动。如果他变化的速率一定,那就是匀速运动;如果变化的速率不一定,那么就是变速运动。当变化...

    匀速运动

    运动的原理:
    让某件物品沿着某种方向随着时间的变化改变位置

    一个div的运动其实就是它与浏览器边框的距离在变动。如果他变化的速率一定,那就是匀速运动;如果变化的速率不一定,那么就是变速运动。当变化率与距离浏览器边框的距离成比例的话,那么就可以说是div在做缓冲运动
    其实很简单,就是用一个定时器(timer),每隔一段时间来改变div距离浏览器边框的距离。

    比如匀速运动:
    进入定时器:(每隔30ms做)
    if(是否到达终点)
    { 停止定时器}
    else{ 改变距离}

    改变距离的方法决定是匀速还是变速(缓冲)运动。

    为什么是30毫秒呢?
    因为电影播放每秒24帧,人眼就识别不出卡顿了,但是对于电脑来说,处理速度相对较快,需要每秒30帧以上才会显得流畅

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>匀速运动+边界设定</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            #box {
                width: 100px;
                height: 100px;
                background: rgb(248, 53, 255);
                position: absolute;
                border-radius: 50%;
                top: 50px;
            }
    
            #btn {
                width: 50px;
                height: 30px;
                border: 1px solid #ccc;
                text-align: center;
                font: 12px 30px "";
                color: #fff;
                background: cornflowerblue;
                border-radius: 4px;
            }
        </style>
    </head>
    
    <body>
        <div id="box"></div>
        <input type="button" id="btn" value="走你" />
    </body>
    <script>
        var obox = document.getElementById("box");
        var obtn = document.getElementById("btn");
        var speed = 5;
        // 计时器变量
        var timer;
        // 边界设定
        var target = 1000;
    
        obtn.onclick = function () {
            // 函数防抖;保证多次点击时同一时间只有一个定时器响应
            clearInterval(timer);
            timer = setInterval(function () {
                // 当元素的offsetLeft超出一定距离或到达一个边界值后,停止计时器
                if (obox.offsetLeft >= target) {
                    clearInterval(timer);
                } else {
                    // 让页面中的obox元素的left值,每30毫秒,在自身left的基础上增加5像素
                    obox.style.left = obox.offsetLeft + speed + "px";
                }
            }, 30)
        }
    </script>
    
    </html>
    
    展开全文
  • 匀速运动与缓速运动

    2020-04-12 13:11:59
    1.匀速运动 匀速运动的步骤: 1.开启定时器之前,清楚原本的定时器 clearInterval(ele.timeID); 2.获取当前位置 var currentLeft = ele.offsetLeft;; 3.开启定时器 ele.timeID = setInterval(function(){ },50); 4....
  • javaScript 匀速运动

    2020-08-12 14:18:55
    js匀速运动 从一开始的状态到另外一个状态 匀速运动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, ...
  • 运动框架:1》匀速运动2》缓冲运动3》多物体运动4》任意值运动5》链式运动6》同时运动 1》匀速运动 2》缓冲运动 3》多物体运动 4》任意值运动 5》链式运动 6》同时运动 1 运动框架_匀速运动 一、运动框架 鼠标移入,...
  • JS匀速运动

    千次阅读 2016-06-11 22:27:53
    所谓的匀速运动就是速度不变的,比如无缝滑动展示图片就是匀速运动.这种运动的特点就是简单,呆板,不炫丽.例子: div匀速运动.效果如图: 要注意的地方: 1.有些时候不能精确的停在某个位置,所以当距离目标位置很近的...
  • 匀速运动的效果想必大家都有见到过吧,在本文为大家介绍下使用JS是如何实现的,感兴趣的朋友不要错过
  • js匀速运动

    2017-10-20 22:19:00
    匀速运动 封装匀速运动原理:设置定时器,将传入的ele,设定一个速度,使用定时器获取当前时间的一个位置,加上速度值,给回节点,当节点到达目标位置,判断给他清除定时器。 匀速效果地址:...
  • 主要介绍了JS实现匀速运动的代码实例,有需要的朋友可以参考一下
  • 匀速运动升级

    2019-01-03 16:57:00
    js匀速运动 <style> * { margin: 0; padding: 0; } .box { width: 100px; height: 100px; background-color: pink; ...
  • 主要介绍了浅谈Javascript如何实现匀速运动的方法及相关代码,需要的朋友可以参考下
  • 如果他变化的速率一定,那就是匀速运动;如果变化的速率不一定,那么就是变速运动。当,变化率与聚离浏览器边框的距离成比例的话,那么就可以说是div在做缓冲运动。 其实,很简单,就是用一个定时器(timer),每隔...
  • 主要为大家详细介绍了原生javascript实现匀速运动动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 匀速运动案例

    2018-06-16 19:15:00
    编辑本博客 通过setInterval做动画 动画运动到一定位置需要用clearInterval(inter)将定时器进行清理 <!DOCTYPE html> <html lang="en"> <head>...匀速运动案例<...
  • 运动框架  1.在开始运动时,关闭已有...匀速运动的停止条件  运动终止条件:距离足够近 Demo代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,689
精华内容 675
关键字:

匀速运动