原生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);
}

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

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

(0)

相关推荐

  • 浅谈Javascript中匀速运动的停止条件

    我们先来看下之前的匀速运动的代码,修改了速度speed后会出现怎么样的一个bug.这里加了两个标杆用于测试 复制代码 代码如下: <style type="text/css">             #div1 {                 width: 100px;                 height: 100px;                 position: absolute;                 background: red;

  • 原生js封装运动框架的示例讲解

    昨天我们说了一下原生JS中常用的兼容性写法,今天我们来说一下运动框架. 正常情况下我们要写一个运动的效果会用到tween.js这么一个插件,这个东西不是一般人写出来的,因为里面涉及的运动效果都是经过一堆数学的函数运算出来的,我们平常人是写不出来的,所有我们就自己封装一个运动框架,有什么问题改起来也方便,下面我们就开始封装. 首先,我们先写一个div,设置一些简单的样式,我们就拿这个div举例子 如下代码: #div{ width: 100px; height: 100px; background

  • 原生JS实现图片无缝滚动方法(附带封装的运动框架)

    话说轮播图效果是前端er学习JS的必经之路啊,很多同学写的第一个JS效果应该就是它了,在各大网站我们都会经常见到,但是无缝滚动运动效果的轮播图,对于小白们来说还是有一定难度的. 我们来看看思路吧~ 首先我们要实现的效果有以下几点: 小圆点:点击小圆点显示与之对应的图片 向左和向右按钮:点击向左按钮图片向后运动,点击向右按钮图片向前运动 定时器:每隔 2s 自动播放 主要难点在于: 当图片运动到最后一张,点击向右的按钮时,应该显示第一张: 当前显示的是第一张,点击向左的按钮时,应该显示最后一张:

  • JS实现匀速与减速缓慢运动的动画效果封装示例

    本文实例讲述了JS实现匀速与减速缓慢运动的动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net JS匀速/减速运动</title> <style> *{ margin: 0; padding: 0; } .box1 { width

  • js指定步长实现单方向匀速运动

    本文实例为大家分享了js实现单方向匀速运动的具体代码,供大家参考,具体内容如下 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id='box'></div> <sc

  • JavaScript中的匀速运动和变速(缓冲)运动详细介绍

    一个div的运动其实就是它与浏览器边框的距离在变动.如果他变化的速率一定,那就是匀速运动:如果变化的速率不一定,那么就是变速运动.当,变化率与聚离浏览器边框的距离成比例的话,那么就可以说是div在做缓冲运动. 其实,很简单,就是用一个定时器(timer),每隔一段时间来改变div聚浏览器边框的距离. 比如匀速运动: 进入定时器:(每隔30ms做) if(是否到达终点) { 停止定时器} else do{ 改变距离} 改变距离的方法决定是匀速还是变速(缓冲)运动. 匀速的比如: 复制代码 代码如下

  • 使用JavaScript 实现对象 匀速/变速运动的方法

    实例1--控制一个对象的匀速移动和停止 HTML: 复制代码 代码如下: <input id="btn" type="button" value=" Move It ! "/>    <div id="d1">        <img id="i1" src="1.jpg" alt/>    </div> JS:实现向右运动 复制代码 代码

  • JS实现匀速运动的代码实例

    效果: 思路: 利用setInerval()计时器,进行运动.然后关键的一点是在最后停止的时候给它一个填充缝隙的判断. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        #div1        {            width: 100px;            height: 10

  • 原生JS封装animate运动框架的实例

    如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 50px; b

  • 原生javascript实现匀速运动动画效果

    本文向大家介绍一个javascript实现的动画.点击开始按钮div会往右移动,点击停止后,div停止移动,再点击则继续移动.请看下面代码: <html> <head> <meta charset="gb2312"> <head> <title>javascript实现的简单动画</title> <style type="text/css"> #mydiv { width:50px;

  • JS实现运动缓冲效果的封装函数示例

    本文实例讲述了JS实现运动缓冲效果的封装函数.分享给大家供大家参考,具体如下: 之前经常写运动函数,要写好多好多,后来想办法封装起来.(运动缓冲). /* 物体多属性同时运动的函数 obj:运动的物体 oTarget:对象,属性名为运动的样式名,属性值为样式运动的终点值 ratio:速度的系数 */ function bufferMove(obj, oTarget, fn,ratio = 8) { clearInterval(obj.iTimer); obj.iTimer = setInterv

  • 原生JS实现风箱式demo,并封装了一个运动框架(实例代码)

    声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构.话不多说,现在开始改demo的制作. 首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的框架. function getStyle(obj,attr) { if(obj.currentStyle){ return obj.currentStyle[attr];//为了获取IE下的属性值 }else{ return window.getComputedStyle(obj,null)[at

随机推荐