javascript中如何使用运动函数

今天就跟大家聊聊有关javascript中如何使用运动函数，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

目前创新互联已为超过千家的企业提供了网站建设、域名、网站空间、绵阳服务器托管、企业网站设计、山海关网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

具体如下：

//封装匀速运动
//参数：
// 1、dom对象
// 2、样式属性（top，left，width，height，opacity等等）
// 3、起始位置，结束位置
// 4、速度：时间间隔，步长
// 5、方向：
//返回值
function moveObj(domObj,attr,startValue,endValue,timeSpace,step,direction) {
 let currValue = startValue;
 let myTimer = setInterval(function(){
 //1、改变数据
 currValue = currValue+direction*step;
 //2、判断边界
 // if(currValue>=endValue){//??
 // currValue = endValue;//??
 // window.clearInterval(myTimer);
 // }
 if(Math.abs(currValue-endValue)<step){
  currValue = endValue;
  window.clearInterval(myTimer);
 }
 //3、改变外观
 if(attr=="opacity"){
  domObj.style[attr] = currValue;
 }else{
  domObj.style[attr] = currValue+"px";
 }
 },timeSpace);
}
//封装匀速运动
//参数：
// 1、dom对象
// 2、样式属性（top，left，width，height，opacity等等）
// 3、结束位置
// 4、时长：
//返回值
function moveObj02(domObj,attr,endValue,timeLong) {
 let startValue = parseFloat(getStyle(domObj,attr));//??
 let direction= endValue-startValue>0?1:-1;//??
 let timeSpace = 10;
 let step = Math.abs(endValue-startValue)/(timeLong/timeSpace) // endValue-startValue/步子数;//
 let currValue = startValue;
 let myTimer = setInterval(function(){
 //1、改变数据
 currValue = currValue+direction*step;
 //2、判断边界
 if(Math.abs(currValue-endValue)<step){
  currValue = endValue;
  window.clearInterval(myTimer);
 }
 //3、改变外观
 if(attr=="opacity"){
  domObj.style[attr] = currValue;
 }else{
  domObj.style[attr] = currValue+"px";
 }
 },timeSpace);
}
//封装抛物线运动(右开口为例)
//参数：
// dom对象
// 起点
// 终点
// 总时长
//
//返回值：无
function parabola(domObj,startPoint,endPoint,timeLong,func){
 //一、初始化
 let offsetX = endPoint.x-startPoint.x;
 let offsetY = endPoint.y-startPoint.y;
 let p = (offsetY*offsetY)/(2*offsetX);
 let left1 = 0;
 domObj.style.left = startPoint.x+"px";
 domObj.style.top = startPoint.y+"px";
 let timeSpace = 10;
 let step = Math.abs(endPoint.x-startPoint.x)/(timeLong/timeSpace) // endValue-startValue/步子数;//
 //二、启动定时器
 let myTimer = setInterval(function(){
 //1、改变数据
 left1=left1+step;
 let top1=Math.sqrt(2*p*left1);
 //2、判断边界
 if(left1>=offsetX){
  left1 = offsetX;
  top1=Math.sqrt(2*p*left1);
  window.clearInterval(myTimer);
  if(func){
  func();
  }
 }
 //3、改变外观
 domObj.style.left = left1+startPoint.x+"px";
 domObj.style.top = top1+startPoint.y+"px";
 },timeSpace);
}
//淡入：
//参数：
// dom对象
// 时长；
//返回值：无
function fadeIn(domObj,timeLong){
 domObj.style.opacity = 0;
 moveObj02(domObj,"opacity",1,timeLong);
}
//淡出：
//参数：
// dom对象
// 时长；
//返回值：无
function fadeOut(domObj,timeLong){
 domObj.style.opacity = 1;
 moveObj02(domObj,"opacity",0,timeLong);
}
//淡入和淡出：
//参数：
// domObjIn：淡入的dom对象
// domObjOut：淡出的dom对象
// 时长；
//返回值：无
function fadeInOut(domObjIn,domObjOut,timeLong,func){
 domObjIn.style.opacity = 0;
 domObjOut.style.opacity = 1;
 let startValue = 0;
 let endValue = 1;
 let direction= 1;
 let timeSpace = 10;
 let step = Math.abs(endValue-startValue)/(timeLong/timeSpace) // endValue-startValue/步子数;//
 let currValue = startValue;
 let myTimer = setInterval(function(){
 //1、改变数据
 currValue = currValue+direction*step;
 //2、判断边界
 if(Math.abs(currValue-endValue)<step){
  currValue = endValue;
  window.clearInterval(myTimer);
  func&&func();
 }
 //3、改变外观
 domObjIn.style.opacity = currValue;
 domObjOut.style.opacity = 1-currValue;
 },timeSpace);
}
//多属性的运动
//参数：
// 1、dom对象
// 2、每个样式属性的结束值
// 4、时长：
//返回值
//调用示例：
/*
animate($("box"),{
 "width":600,
 "height":400,
 "left":50
},2000)
*/
function animate(domObj,endObj,timeLong) {
 // let startValue = parseFloat(getStyle(domObj,attr));//??
 let startObj = {}
 for(let key in endObj){
 startObj[key] = parseFloat(getStyle(domObj,key));
 }
 // let direction= endValue-startValue>0?1:-1;//??
 let directionObj = {};
 for(let key in endObj){
 directionObj[key] = endObj[key]>startObj[key]?1:-1;
 }
 let timeSpace = 10;
 // let step = Math.abs(endValue-startValue)/(timeLong/timeSpace) // endValue-startValue/步子数;//
 let stepObj = {};
 for(let key in endObj){
 stepObj[key] = Math.abs(endObj[key]-startObj[key] )/(timeLong/timeSpace);
 }
 //let currValue = startValue;
 let currObj = {};
 for(let key in endObj){
 currObj[key] = startObj[key];
 }
 let myTimer = setInterval(function(){
 //1、改变数据
 //currValue = currValue+direction*step;
 for(let key in endObj){
  currObj[key] = currObj[key]+directionObj[key]*stepObj[key];
 }
 //2、判断边界
 let firstKey = Object.keys(endObj)[0];
 if(Math.abs(currObj[firstKey]-endObj[firstKey])<stepObj[firstKey]){
  for(let key in endObj){
  currObj[key] = endObj[key];
  }
  window.clearInterval(myTimer);
 }
 //3、改变外观
 for(let key in endObj){
  if(key=="opacity"){
  domObj.style[key] = currObj[key];
  }else{
  domObj.style[key] = currObj[key]+"px";
  }
 }
 },timeSpace);
}

看完上述内容，你们对javascript中如何使用运动函数有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。

本文题目：javascript中如何使用运动函数
文章分享：https://www.cdcxhl.com/article6/poseig.html

成都网站建设公司_创新互联，为您提供App设计、网站内链、软件开发、搜索引擎优化、网站建设、虚拟主机

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联