原生JavaScript运动功能系列(四):多物体多值链式运动
多物体多值链式运动
这篇博客的内容本来是安排在上一篇博客的内容里面的,但是后来考虑篇幅的问题,就单独拿出来了,所以就不过多就多物体多值运动的原理解析了,如果对代码不是很理解的话可以回到前面的博客查看我的具体分析,整个运动系列的前面的博客连接我都放到了最上面。所以这么博客直接进入链式运动分析。
所谓的链式运动就是一次触发后,多个动画函数自动连续调用执行。聪明的你应该想到了解决方法,解决链式调用最直接的方法当然非回调函数莫属了,在这篇博客不讨论回调机制的负面问题,后面会有相关博客来解析回调机制的负面内容,这篇博客我们就用回调函数来实现链式运动,毕竟在绝大多是不是特别复杂的动画设计中还是使用回调函数比较方便。所以,回调函数也不是解决链式运动的唯一方案,写完这篇博客我就会基于仿写jQuery的队列来实现。
回调这种很简单的机制,也没有太多需要分析的,直接上示例代码,我再基于代码来做一些解释。
//css
div{
width:100px;
height:100px;
background:red;
position: absolute;
left: 0px;
opacity: 1;
}
#top{
top: 100px;
}
#bottom{
top: 300px;
}
//html
<div id="top"></div>
<div id="bottom"></div>
//js
var oDivArray = document.getElementsByTagName('div');
var timer = null;
var targetObj = {
width:400,
height:400,
opacity:50,
left:300,
top:200
}
oDivArray[0].onclick = function(){
startMove(this,targetObj,function(){
startMove(oDivArray[1],targetObj);
});
}
function getStyle(obj,attr){
if(window.getComputedStyle){
return window.getComputedStyle(obj,false)[attr];
}else{
return obj.currentStyle[attr];
}
}
function startMove(obj,json,callback){
clearInterval(obj.timer);
var iSpeed,iCur;
obj.timer = setInterval(function(){
var bStop = true;
for(var attr in json){
if(attr == 'opacity'){
iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
iCur = parseInt(getStyle(obj,attr));
}
iSpeed = (json[attr]-iCur)/7;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if(attr == 'opacity'){
obj.style.opacity=(iCur+iSpeed)/100;
}else{
obj.style[attr]=iCur+iSpeed+'px';
}
if(iCur != json[attr]){
bStop= false;
}
}
if(bStop){
clearInterval(obj.timer);
typeof callback == 'function' ? callback() : '';
}
},30);
}
相对于上一篇博客的多值运动代码只多了66行这一行代码,方法多出一个callback回调函数的形参(因数divisor这个参数等下再讲),在触发动画函数时传入一个回调函数来触发以下动画就Ok了,简单的我都不知道怎么说了。所以下面来凑内容,前面我提取动画函数时,第三个参数提取的是divisor(因数)来改变动画速度的参数,其实这个参数实质上没有多大意义(就改变速度而言),如果你使用jQuery的animate这个动画方法,这个方法的第三个形参是“easing”,用来设置不同运动点的速度,甚至还可以基于插件来实现改变运动轨迹,而第二个参数用来规定动画执行时间,这是我在前面提取方法是有意的将因数提取出来的原因,就是为了后面来实现更jQuery一样的功能,但这是后话了,这个设计比较复杂,需要一些时间来完成。
所以,在运动系列博客的第一部分,也就是实现轮播图插件这个过程,暂时不会提取divisor这个参数了。运动系列的博客第二部分会基于我自己的仿写jQuery来实现这些功能,这是我对这个系列博客的规划。希望大家多多支持啦。
原生JavaScript运动功能系列(四):多物体多值链式运动的更多相关文章
- 原生JavaScript运动功能系列(五):定时定点运动
原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 原生JavaS ...
- js动画--链式运动
前面几节我们只是讲述了一种运动,这节课我将讲述链式运动:就以一个动作接着一个动作完成. 对于这个实现,我们只需要改变一下就可以实现了,设置一个回调函数. var timer; window.onloa ...
- 原生JavaScript运动功能系列(三):多物体多值运动
多物体同时出发运动函数实现 多属性同步运动变化实现 一.多物同时触发运动函数实现 前面两个动画示例基本理解了动画的核心:位置变化和速度变化,操作的核心就是定时器分段叠加属性值.但是动画还是基于单个元素 ...
- 原生JavaScript运动功能系列(二):缓冲运动
匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...
- javascript学习-原生javascript的小特效(原生javascript实现链式运动)
以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...
- Javascript 链式运动框架——逐行分析代码,让你轻松了解运动的原理
所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascrip ...
- javascript链式运动框架案例
javascript链式运动框架 任务描述: 当鼠标移入红色矩形时,该矩形宽度逐渐增加至400px,之后高度逐渐增加至400px; 当鼠标移出红色矩形时,该矩形高度逐渐减小至200px,之后宽度逐渐减 ...
- HTML+JavaScript实现链式运动特效
在学习js的过程中,发现这家伙做特效真是不错,尽管说眼下水平还不够,只是也能写点简单的效果. 今天分享一个简单的运动框架.然后利用这个框架实现简单的链式运动特效. 1.move.js 在运动框架中.主 ...
- JavaScript运动_封装模板(支持链式运动、完美运动)
最近自学到了JS运动部分,自己整理了一些js模板,望采纳. 1.支持链式运动的模板: 先解释一下函数中的几个参数含义: 1)obj: 要操作的对象 2)target: 属性要到达的目标值 3)attr ...
随机推荐
- Git回滚代码暴力法
Git回滚有多种方式,这里使用的是[强制提交到远程分支] 效果为:如回滚前的提交记录是 1.2.3.4,使用这种方法回滚到2,那么提交记录就变成了1.2. 操作方法: 需要在本地的Git仓库,右键选择 ...
- 【LOJ#6072】苹果树(矩阵树定理,折半搜索,容斥)
[LOJ#6072]苹果树(矩阵树定理,折半搜索,容斥) 题面 LOJ 题解 emmmm,这题似乎猫讲过一次... 显然先\(meet-in-the-middle\)搜索一下对于每个有用的苹果数量,满 ...
- 【转】Ubuntu 64位系统安装交叉编译环境一直提醒 没有那个文件或目录
安装交叉编译环境搞了一个晚上 一直提示 root@zqs-pc:~# arm-linux-gcc/usr/local/arm/4.3.2/bin/arm-linux-gcc: 行 3: /usr/lo ...
- for循环是怎么工作的
for...in 是Python程序员使用最多的语句,for 循环用于迭代容器对象中的元素,这些对象可以是列表.元组.字典.集合.文件,甚至可以是自定义类或者函数,例如: 作用于列表 >> ...
- 【linux】vim常用操作及vim插件的安装使用
vim是linux下一个非常好用的文本编辑器,在linux下开发的人员要熟练掌握vim常用命令. 1. 打开在第n行 vim +143 filename.txt 2. 只读模式打开 vim -R / ...
- hdu 2159 FATE (二维完全背包)
Problem Description 最近xhd正在玩一款叫做FATE的游戏,为了得到极品装备,xhd在不停的杀怪做任务.久而久之xhd开始对杀怪产生的厌恶感,但又不得不通过杀怪来升完这最后一级.现 ...
- 生命不息,折腾不止 ~ 旧PC改造之家庭影音
前言引入 之前把在校园陪伴多年的旧电脑由Win装成了Linux,的确不卡了,基本上日常办公也够了(大项目还是吃不消,日常捣鼓倒是够了),然后把真正的工作游戏本也改成了Linux,那么旧电脑又变成闲置机 ...
- react案例->新闻移动客户端--(react+redux+es6+webpack+es6的spa应用)
今天分享一个react应用,应在第一篇作品中说要做一个react+redux+xxx的应用.已经做完一部分,拿出来分享.github地址为:点我就可以咯~ 这里实现了一个新闻移动站的spa.本来想写p ...
- 第三十八篇-logcat的使用
很多時候,程序有问题时都需要debug,一般会设置几个信息点,查看程序是否运行,之前学过Toast,可以广播,但是终归是不太方便,今天学习一下logcat的用法. logcat里面是一些日志,内容太多 ...
- vue中显示静态图片怎么引用
有多种方法解决这个问题: 首先,如果使用的是img标签那么可以这样 data () { return { img: require('path/to/your/source') } } 然后在temp ...