原生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 相关文章推荐
JS 文件传参及处理技巧分析
May 13 Javascript
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
Sep 10 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
JS 日期与时间戮相互转化的简单实例
Jun 22 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 Javascript
vue实现简易的双向数据绑定
Dec 29 Vue.js
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
PHP四舍五入精确小数位及取整
2014/01/14 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
Angular封装搜索框组件操作示例
2019/04/25 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
TensorFlow实现iris数据集线性回归
2018/09/07 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
django Admin文档生成器使用详解
2019/07/22 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
python 异步async库的使用说明
2020/05/04 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
保安拾金不昧表扬信
2014/01/15 职场文书
单位员工收入证明样本
2014/10/09 职场文书
2014年度工作总结报告
2014/12/15 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python
python数字图像处理之图像的批量处理
2022/06/28 Python