js-运动总结(常见运动效果)

匀速运动

加速运动

缓冲运动

碰撞运动

重力运动

多物体多值多链式运动框架

1. 匀速运动

速度isSpeed是个定值

function startmov(obj) {clearInterval(timer);var isSpeed = 10;timer = setInterval(function () {obj.style.left = obj.offsetLeft + isSpeed + 'px';},30);}

2. 变速运动

核心就是isSpeed每次执行发生改变

// 变速运动function starSpeedChangeMove(obj,target) {clearInterval(timer);var isSpeed;timer = setInterval(function () {isSpeed = (target - obj.offsetLeft) / 15;isSpeed = isSpeed > 0 ? Math.ceil(isSpeed) : Math.floor(isSpeed);obj.style.left = obj.offsetLeft + isSpeed + 'px';},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>Document</title><style>.wrapper{position : absolute;top: 200px;left: -400px;width: 400px;height: 100px;background: yellowgreen;}.demo{position: absolute;top: 0;left: 400px;width: 40px;height: 100px;background: yellow;}</style>
</head>
<body><div class="wrapper"><div class="demo"></div></div><script>var oDivDemo = document.getElementsByClassName('wrapper')[0];var timer = null;oDivDemo.onmouseenter = function () {starSpeedChangeMove(this,0);}oDivDemo.onmouseleave = function () {starSpeedChangeMove(this,-400);}function starSpeedChangeMove(obj,target) {clearInterval(timer);var isSpeed;timer = setInterval(function () {isSpeed = (target - obj.offsetLeft) / 15;isSpeed = isSpeed > 0 ? Math.ceil(isSpeed) : Math.floor(isSpeed);obj.style.left = obj.offsetLeft + isSpeed + 'px';},30);}</script>
</body>
</html>

3. 缓冲运动

顾名思义，所谓缓冲，就是说速度不同；在一定条件下，距离越大，速度越大；距离越小，速度也就越小。
也就是跟变速运动差不多代码

4.碰撞运动（弹性运动）

在发生碰撞的时候,我们把对应的x,y方向的速度乘以"摩擦系数"

// 弹性运动function starMove (obj, target) {clearInterval(obj.timer);var isSpeed = 20;var a, u = 0.8;  // u表示摩擦系数obj.timer = setInterval(function (){a = (target - obj.offsetLeft) / 15;isSpeed = isSpeed + a;isSpeed = isSpeed * 0.9;if(Math.abs(isSpeed) < 1 && Math.abs(target - obj.offsetLeft) < 1){clearInterval(obj.timer);}else{obj.style.left = obj.offsetLeft + isSpeed + 'px'; }},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>Document</title><style>*{margin: 0px;padding: 0px;list-style: none;}ul{position: relative;width: 600px;height: 80px;/* border: 1px solid #000; */margin : 100px auto 0;}ul li.nav{width: 148px;height: 78px;border: 1px solid #000;color : #000;text-align: center;line-height: 78px;float: left;}ul li.bg{position: absolute;top: 0px;left: 0px;width: 150px;height: 80px;background: rgb(214, 49, 49);z-index: -1;}</style>
</head>
<body><ul><li class="nav">ES6</li><li class="nav">Webpack</li><li class="nav">Vue</li><li class="nav">Node</li><li class="bg"></li></ul><script>var oLi = document.getElementsByTagName('li');var oBg = document.getElementsByClassName('bg')[0];var oLiArr = Array.prototype.slice.call(oLi, 0);oLiArr.forEach(function (ele, index){ele.onmouseenter = function (){starMove(oBg,this.offsetLeft);}});function starMove (obj, target) {clearInterval(obj.timer);var isSpeed = 20;var a, u = 0.8;  // u表示摩擦系数obj.timer = setInterval(function (){a = (target - obj.offsetLeft) / 15;isSpeed = isSpeed + a;isSpeed = isSpeed * 0.9;if(Math.abs(isSpeed) < 1 && Math.abs(target - obj.offsetLeft) < 1){clearInterval(obj.timer);}else{obj.style.left = obj.offsetLeft + isSpeed + 'px'; }},30);}</script>
</body>
</html>

5. 重力运动

// targetSpeedX,targetSpeedY 表示的是x,y速度矢量值function starMove (obj,targetSpeedX,targetSpeedY){clearInterval(obj.timer);var iSpeedX,iSpeedY,g = 10,     // 重力加速度u = 0.8;   // 碰撞时速度损失iSpeedX = (typeof targetSpeedX == 'undefined' ? 6 : targetSpeedX),iSpeedY = (typeof targetSpeedY == 'undefined' ? 8 : targetSpeedY);console.log(iSpeedY,iSpeedX);obj.timer = setInterval(function (){iSpeedY += g;var newLeft = obj.offsetLeft + iSpeedX,newTop = obj.offsetTop + iSpeedY;// 边界处理if(newTop >= document.documentElement.clientHeight - obj.offsetHeight){iSpeedY *= -1;iSpeedY *= u;iSpeedX *= u;newTop = document.documentElement.clientHeight - obj.offsetHeight;}if(newTop <= 0){iSpeedY *= -1;iSpeedY *= u;iSpeedX *= u;newTop = 0;}if(newLeft >= document.documentElement.clientWidth - obj.offsetWidth){iSpeedX *= -1;iSpeedX *= u;newLeft = document.documentElement.clientWidth - obj.offsetWidth;}if(newLeft <= 0){iSpeedX *= -1;iSpeedX *= u;newLeft = 0; }// 判断结束条件if(Math.abs(document.documentElement.clientHeight-obj.offsetHeight-newTop) < 1 && Math.abs(iSpeedY) < 1){clearInterval(obj.timer); }else{obj.style.left = newLeft + 'px';obj.style.top = newTop + 'px';}},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>Document</title><style>body{overflow: hidden;}.demo{position: absolute;left: 0px;top: 0px;width: 100px;height: 100px;border-radius: 50%;background: #000;}</style>
</head>
<body><div class="demo"></div><script>var oDiv = document.getElementsByClassName('demo')[0];// oDiv.onclick = function (){//     starMove(this,1,1); // }var lastX = oDiv.offsetLeft,lastY = oDiv.offsetTop;oDiv.onmousedown = function (e) {var event = e || window.event;var disX = event.clientX - this.offsetLeft,disY = event.clientY - this.offsetTop,that = this;var iSpeedX = 0,iSpeedY = 0;document.onmousemove = function (e) {var newLeft = e.clientX - disX,newTop = e.clientY - disY;iSpeedX = newLeft - lastX,iSpeedY = newTop - lastY,lastX = newLeft,lastY = newTop;that.style.left = newLeft + 'px';that.style.top = newTop + 'px';document.onmouseup = function () {document.onmousemove = null;document.onmouseup = null;//iSpeedX,iSpeedY 相当于是速度的方向差值  正负表示方向starMove(that,iSpeedX,iSpeedY);}}}// 模拟重力场   // targetSpeedX,targetSpeedY 表示的是x,y速度矢量值function starMove (obj,targetSpeedX,targetSpeedY){clearInterval(obj.timer);var iSpeedX,iSpeedY,g = 10,     // 重力加速度u = 0.8;   // 碰撞时速度损失iSpeedX = (typeof targetSpeedX == 'undefined' ? 6 : targetSpeedX),iSpeedY = (typeof targetSpeedY == 'undefined' ? 8 : targetSpeedY);console.log(iSpeedY,iSpeedX);obj.timer = setInterval(function (){iSpeedY += g;var newLeft = obj.offsetLeft + iSpeedX,newTop = obj.offsetTop + iSpeedY;// 边界处理if(newTop >= document.documentElement.clientHeight - obj.offsetHeight){iSpeedY *= -1;iSpeedY *= u;iSpeedX *= u;newTop = document.documentElement.clientHeight - obj.offsetHeight;}if(newTop <= 0){iSpeedY *= -1;iSpeedY *= u;iSpeedX *= u;newTop = 0;}if(newLeft >= document.documentElement.clientWidth - obj.offsetWidth){iSpeedX *= -1;iSpeedX *= u;newLeft = document.documentElement.clientWidth - obj.offsetWidth;}if(newLeft <= 0){iSpeedX *= -1;iSpeedX *= u;newLeft = 0; }// 判断结束条件if(Math.abs(document.documentElement.clientHeight-obj.offsetHeight-newTop) < 1 && Math.abs(iSpeedY) < 1){clearInterval(obj.timer); }else{obj.style.left = newLeft + 'px';obj.style.top = newTop + 'px';}},30);}</script>
</body>
</html>

6. 多物体多值多链式运动框架

多物体运动：
让每一个运动的物体拥有自己的定时器定时器独立
把定时器作为对象的属性让定时器独立

链式运动
上一个动作结束进入到下一个动作
解决：在运动函数上加一个参数，参数代表回调函数

参数说明:obj 对应元素,
json 对象，属性是改变的样式,比如 width height opacity
callback 回调函数可以进行多个动作发生
小技巧: opacity 改变的时候,可以把isSpeed扩大100倍,最后在缩小100倍

function startMove(obj, json, callback){clearInterval(obj.timer);obj.timer = setInterval(function (){var oBstop = true,isSpeed,iCur;for(var attr in json){if(attr == 'opacity'){iCur = parseFloat(getStyle(obj,attr)) * 100;}else{iCur = parseInt(getStyle(obj,attr));}isSpeed = (json[attr] - iCur) / 7;isSpeed = isSpeed > 0 ? Math.ceil(isSpeed) : Math.floor(isSpeed);if(attr == 'opacity'){obj.style.opacity = (isSpeed + iCur) / 100;}else{obj.style[attr] = (isSpeed + iCur) + 'px';}if(json[attr] != iCur){oBstop = false;}}if(oBstop){clearInterval(obj.timer);typeof callback == 'function' ? callback() : "";}},30);}

demo（具体用法）

<!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>Document</title><style>div{position : absolute;left: 0;width: 100px;height: 100px;background : red;opacity: 1;border : 1px solid #000;margin: 100px;}.top {top : 100px;}.buttom {bottom : 100px;}</style>
</head>
<body><div class="top">1</div><div class="buttom">2</div><script>var oDiv = document.getElementsByTagName('div');var timer = null;var targetObj = {width : 400,height : 400,opacity : 20,left : 200,top : 200}oDiv[0].onclick = function (){startMove(this,targetObj,function (){console.log('this == ', this);startMove(oDiv[1],targetObj);});console.log(222);}// 多物体多链式运动框架function getStyle (obj, attr) {if(obj.currentStyle){return obj.currentStyle[attr];}else{return window.getComputedStyle(obj,false)[attr];}}function startMove(obj, json, callback){clearInterval(obj.timer);obj.timer = setInterval(function (){var oBstop = true,isSpeed,iCur;for(var attr in json){if(attr == 'opacity'){iCur = parseFloat(getStyle(obj,attr)) * 100;}else{iCur = parseInt(getStyle(obj,attr));}isSpeed = (json[attr] - iCur) / 7;isSpeed = isSpeed > 0 ? Math.ceil(isSpeed) : Math.floor(isSpeed);if(attr == 'opacity'){obj.style.opacity = (isSpeed + iCur) / 100;}else{obj.style[attr] = (isSpeed + iCur) + 'px';}if(json[attr] != iCur){oBstop = false;}}if(oBstop){clearInterval(obj.timer);typeof callback == 'function' ? callback() : "";}},30);}</script>
</body>
</html>

js-运动总结(常见运动效果)相关推荐

向量表示运动抛物线_初学讲义之高中物理（四）常见运动类型
本章主要介绍几种较为常见的运动模型以及处理思路一.抛物运动抛物运动是一种较为简单的运动模型,在现实生活中非常常见,比如向空中抛球.向河里丢石子,等等.根据抛出方向的不同,抛物运动可以分为竖抛运动. ...
用Python实现一个实时运动的大挂钟效果
今天小千来给大家分享一篇用Python实现一个实时运动的大挂钟效果,最终的效果如下图所示,喜欢的话看下去~~ 本项目用到的库主要有pygame.math.datetime等,另外还用到一些数学知识,勾 ...
【原生JS组件】javascript 运动框架
大家都知道JQuerry有animate方法来给DOM元素进行运动,CSS3中也有transition.transform来进行运动.而使用原生的Javascript来控制元素运动,须要写非常多运动的 ...
js运动应用之运动框架
js运动应用之运动框架 <style>div{width:200px;height:200px;background-Color:yellow;float:left;font-size:1 ...
羽毛球常见运动损伤及如何预防
常见运动损伤形式: 1.球打到人 2.拍子打到人 3.猝死 4.妹子不开心 5.其他原因及预防措施: 一.球打到人 (a)被队友打到两种情况下,容易被队友的球打到.一.队友杀球,二.队友抽球. 杀 ...
JS任意元素的任意值运动
函数原型startMove(obj,name,iTag); 例如: startMove(obj,'width',400);//width运动到width:400px startMove(obj,'he ...
（43）JS运动之链式运动框架
链式运动框架就是一系列的运动分阶段进行,在普通的运动框架上加上一个参数function,这个function表示下一个要执行的动作,具体代码如下: <!DOCTYPE HTML> < ...
html小球碰撞源代码,JS实现小球的弹性碰撞效果
一.HTML代码(body部分) 上面body部分这样就算是完成了,下面我们给body中的div做一些小样式. 二.CSS小球样式部分 /*将body默认的margin和padding部分去掉*/ * ...
php接入微信运动计步功能,运动计步，微信运动究竟靠不靠谱？
很多朋友喜欢用微信运动,记录自己每天的运动步数,希望通过每天运动计步,达到减肥健身的效果.那么,微信运动到底靠谱吗 ? 能起到锻炼的效果吗 ? 在搞清这个问题之前,我们需要熟悉几个概念. 1.微信计步 ...

js-运动总结(常见运动效果)

1. 匀速运动

2. 变速运动

应用(伸缩栏)

3. 缓冲运动

4.碰撞运动（弹性运动）

应用(弹性导航栏)

5. 重力运动

应用(拖拽抛出效果)

6. 多物体多值多链式运动框架

demo（具体用法）

js-运动总结(常见运动效果)相关推荐

最新文章

热门文章