原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
作者:巴啦啦小能量 发布时间:2024-04-25 13:15:33
标签: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程序设计有所帮助。
来源:https://blog.csdn.net/mlonly/article/details/85238590
0
投稿
猜你喜欢
- 学会了FSO提取文件值,也学会了将信息输入到文件中,那下面就再来应用应用下。不知道你有没有这样的习惯:看到一个文件,不自觉的右键选择用记事本
- #!/usr/bin/perluse strict;use warnings;use re 'debug';sub test
- 我正在参加天池上的一个竞赛,刚开始用的是DenseNet121但是效果没有达到预期,因此开始尝试使用模型融合,将Desenet和Xcepti
- 代码如下:DECLARE @c INT DECLARE @c2 INT SELECT @c = COUNT(1) FROM dbo.Spli
- 我就废话不多说了,大家还是直接看代码吧!'''Created on 2018-4-4'''k
- 目录1、首先下载安装pymysql模块。2、导入库4、注意:不要忘记了在数据库中创建该数据库5、连接mysql数据库6、测试程序能否能连接上
- python条件语句使用 if 表达式,难度不高,需要注意的是嵌套用法,以及如何设置对应的条件。if 条件判断语句python 语句是按固定
- 把列表传递给函数后, 函数就能直接访问列表中的内容咯。假设有一组专家,我们想邀请他们参加研讨会。def send_invitation(ex
- 最近分别用vue和Android实现了一个券码复制功能,长按券码会在上方弹出一个拷贝的icon提示,点击icon将券码内容复制到剪贴板。现将
- Microsoft? SQL Server? 2000 提供了两种主要机制来强制业务规则和数据完整性:约束和触发器。触发器是一种特殊类型的存
- 下面我讲讲关于这套系统的加载流程 定义根目录,定义include目录 加载核心文件 配置文件'config.inc.php'
- apscheduler 模块安装apscheduler 模块pip install apschedulerapscheduler 模块介绍A
- 本文实例讲述了Python简单实现子网掩码转换的方法。分享给大家供大家参考,具体如下:这里实现将子网掩码长度转换为具体的子网掩码地址:def
- 最近pytorch出了visdom,也没有怎么去研究它,主要是觉得tensorboardX已经够用,而且用起来也十分的简单pip insta
- 1.奇偶校验我们约定一串编码里1的个数是偶数个,那么这串编码里携带的信息就是对的,否则就是错的。我们可以在开头对这串编码加一位校验码实现奇偶
- 在小编学习python中的模拟点击之前,我们想要对某一项操作进行自动指令的重复,可以选择大家熟知的按键精灵。那么对比python的模拟点击,
- 相对于http协议,http是的特点就是他的安全性,http协议的通信内容用普通的嗅探器可以捕捉到,但是https协议的内容嗅探到的是加密后
- 阅读上一篇:W3C优质网页小贴士(二) 注意字体大小网页设计者中有这么一种倾向:他们认为小字体能让网页看起来更漂亮,并能提供更多空间给每个网
- Mysql my.ini 配置文件详解 #BEGIN CONFIG INFO #DESCR: 4GB RAM, 只使用InnoDB, ACI
- # 有时候我们提前知道了一个数组的大小,需要给每个元素赋值,此时append好像不管用。我们需要定义一个定# # 长的数组,python中代