原生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学习笔记9 prototype封装继承
Jan 11 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
jquery表单提交带错误信息提示效果
Mar 09 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
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
PHP6 mysql连接方式说明
2009/02/09 PHP
php对数组排序的简单实例
2013/12/25 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
JS location几个方法小姐
2008/07/09 Javascript
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
requireJS使用指南
2016/04/27 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
Promise扫盲贴
2019/06/24 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
python计算列表内各元素的个数实例
2018/06/29 Python
Python中extend和append的区别讲解
2019/01/24 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
Champion官网:美国冠军运动服装
2017/01/25 全球购物
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
中学教师管理制度
2014/01/14 职场文书
毕业生求职信的经典写法
2014/01/31 职场文书
聘用意向书
2014/07/29 职场文书
影视广告专业求职信
2014/09/02 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
处罚决定书范文
2015/06/24 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python