原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】


Posted in Javascript onFebruary 23, 2020

本文实例讲述了原生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);
}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
JS获取单击按钮单元格所在行的信息
Jun 17 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 #Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 #Javascript
原生javascript单例模式的应用实例分析
Feb 23 #Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 #Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 #Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 #Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 #Javascript
You might like
模仿OSO的论坛(五)
2006/10/09 PHP
超级实用的7个PHP代码片段分享
2012/01/05 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
办公室主任职责范文
2013/11/08 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis