Javascript 链式运动框架——逐行分析代码,让你轻松了解运动的原理
所谓链式运动,就是一环扣一环。我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动。
这个链式运动框架就是用来处理这些问题的。
我们先来看下之前的运动框架,以下是Javascript 代码
function getStyle(obj, name) {if (obj.currentStyle) {return obj.currentStyle[name];} else {return getComputedStyle(obj, null)[name];} }function startMove(obj, attr, iTarget) {clearInterval(obj.time);obj.time = setInterval(function() {var cur = 0;if (attr == 'opacity') {cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);} else {cur = parseInt(getStyle(obj, attr));}var speed = (iTarget - cur) / 6;speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);if (cur == iTarget) {clearInterval(obj.time);} else {if (attr == 'opacity') {obj.style.filter = 'alpha(opacity=' + cur + speed + ')';obj.style.opacity = (cur + speed) / 100;} else {obj.style[attr] = cur + speed + 'px';}}}, 30); }
实际上来说他就是相当于一个阶段型的运动框架,一个物体运动到某个地方就停下来了。
那么怎么能实现链式运动呢?
我们在加一个参数fnEnd ,这个是个函数,他会在运动结束的时候被调用。
当然这个函数可以传可以不传,所以需要做个判断。只有当传入的时候在调用即可。
原理就是: 一个运动完成 在开始下次的运动。
这样就能够完成链式运动,简单吧,让我们看看代码。
<style type="text/css">#div1{width: 100px; height: 100px; background: red;}</style>
<script src="js/move_lianshi.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">window.onload=function(){var oDiv=document.getElementById("div1");oDiv.onmouseover=function(){startMove(oDiv,'width',300,function(){startMove(oDiv,'height',300);});};}</script></head><body><div id="div1"></div></body>
Javascript:
function getStyle(obj, name) {if (obj.currentStyle) {return obj.currentStyle[name];} else {return getComputedStyle(obj, null)[name];} }function startMove(obj, attr, iTarget,fnEnd) {clearInterval(obj.time);obj.time = setInterval(function() {var cur = 0;if (attr == 'opacity') {cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);} else {cur = parseInt(getStyle(obj, attr));}var speed = (iTarget - cur) / 6;speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);if (cur == iTarget) {clearInterval(obj.time);if(fnEnd)fnEnd();} else {if (attr == 'opacity') {obj.style.filter = 'alpha(opacity=' + cur + speed + ')';obj.style.opacity = (cur + speed) / 100;} else {obj.style[attr] = cur + speed + 'px';}}}, 30); }
这样Div就会先变宽在变高。
我们现在这个运动框架还是会有局限性,那是什么呢?
那么就是不能同时运动,也就是说我想让Div 同时变大变宽 那又怎么办呢?
在下一次更新的时候,我们会解决这个问题,并且推出一个完美的运动框架,这个运动框架能够支持大多数的运动。
敬请期待~
转载于:https://www.cnblogs.com/IcemanZB/p/4191312.html
Javascript 链式运动框架——逐行分析代码,让你轻松了解运动的原理相关推荐
- Javascript 匀速运动停止条件——逐行分析代码,让你轻松了运动的原理
原文:Javascript 匀速运动停止条件--逐行分析代码,让你轻松了运动的原理 我们先来看下之前的匀速运动的代码,修改了速度speed后会出现怎么样的一个bug.这里加了两个标杆用于测试 < ...
- iOS端JSON转Model链式编程框架SuperKVC使用方法与原理
背景 在client编程中.字典转模型是一个极为常见的问题,苹果提供了KVC来实现NSDictionary到Model的注入,可是KVC仅仅能进行单层浅注入.且无法处理类型转换.key与属性名不正确应 ...
- 链式前向星核心代码解析 ← 数组模拟邻接表
[知识点] 在图论算法实现中,常使用C++标准库STL自带的vector来模拟邻接表存图.详见: https://blog.csdn.net/hnjzsyjyj/article/details/101 ...
- javascript链式语法
因为 jQuery 库的缘故,链式语法在前端界变得非常流行.实际上这是一种非常容易实现的模式.基本上,你只需要让每个函数返回 'this',这样其他函数就可以立即被调用.看看下面的例子. var bi ...
- element ui表单校验prop的链式写法----源码分析
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width=& ...
- 栈的链式存储框架搭建
栈的链式存储 链式栈的节点 typedef struct LINKNODE{struct LINKNODE* next; }Linknode; 链式栈 typedef struct LINKSTACK ...
- Javascript 拖拽的一些高级的应用——逐行分析代码,让你轻松了解拖拽的原理...
我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...
- 一种javascript链式多重继承的方式(__proto__原型链)
var a=function(){this.foo='bar';} a.prototype={b:1}; var aa=function(){} aa.prototype={c:2,__proto__ ...
- php之二叉树,数据结构之二叉树——链式存储结构(php代码实现)
/** * ClearBiTree() 清空二叉树 * CreateBiTree() 创建二叉树 * BiTreeEmpty() 判断二叉树是否为空 * BiTreeDepth() 返回二叉树的深度 ...
最新文章
- Docker中的Java内存消耗优化以及我们如何使用Spring Boot
- GoogleNet是怎么理解图像的?谷歌大神教你读懂「神经特征可视化」
- 历届试题 打印十字图
- 轻量级 Kubernetes K3s - Github热点
- Codeforces 1005D Polycarp and Div 3
- 和在线视频会议服务器,什么是视频会议服务器端和客户端?
- oracle-SQL-case when 改用 DECODE
- 嵌入式电路设计(linux soc电路设计)
- HDU2047 阿牛的EOF牛肉串【递推】
- linux 下安装 vim
- UE4+LiveLinkFace面部动作捕捉
- html5怎么把表格边框设为0,css表格边框怎么设置
- Kubernetes 网络插件(CNI)超过 10Gbit/s 的基准测试结果
- 增大mysql修改表空间_扩充数据库表空间
- 2019,我的影像记录
- 小说作者推荐:耳东兔子合集
- iframe嵌套微信公众号文章
- 校招前端笔试面试回顾
- [mysql安装教程]解决ERROR 2003 (HY000): Can‘t connect to MySQL server on ‘localhost:3306‘ (10061)问题
- Charles系列破解激活License
热门文章
- 阿里云 mysql 双主_mysql数据库一主两从
- CMake笔记-使用CMake GUI生成MinGW的Makefiles及编译hiredis
- HTTPS-客户端与服务器三次握手过程(含wireshark分析)
- 使用Spring Boot搭建HelloWorld Web页面(含HTTP协议分析)
- Micsorft文档阅读笔记-Run-Time Type Information解析及使用
- Qt中echo服务器的简单编写
- 数据结构相关代码-简介
- C/C++ OpenCV图像的载入,显示,输出
- vue和java bean_Java:JavaBean和BeanUtils
- ai可以滚轮缩放吗_AI侵入艺术天堂!艺术也可以“量产”了吗?