JavaScript

超轻量级php框架startmvc

JavaScript运动框架 链式运动到完美运动(五)

更新时间:2020-05-13 06:54:01 作者:startmvc
基于前几篇的运动框架基础,本文主要讲解一下链式运动,就是运动完后接着再运动,比如

基于前几篇的运动框架基础,本文主要讲解一下链式运动,就是运动完后接着再运动,比如很多网站中,一个方框的出现和退出:出现时先变宽再变高,退出时先变矮再变窄退出! 之前的模型是:

startMove(obj, json);

现在改为:

startMove(obj, json, fn);

也就是在第一次运动结束的时候执行fn(); fn是传过来的一个参数,这个参数是个函数,定时器清理之后手动运行fn();如果想采用链式运动,那就是在fn中再调用startMove(obj, json, fn),再在里面的fn中调用startMove(obj, json, fn),可以一直玩下去


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>运动框架(五):链式运动到完美运动</title>
 <style type="text/css">
 div {
 width: 100px;
 height: 100px;
 background: orange;
 margin: 10px;
 float: left;
 }
 </style>
</head>
<body>
 <div id="div1"></div>

 <script type="text/javascript">
 var oDiv = document.getElementById('div1');
 oDiv.onmouseover = function() {
 startMove(oDiv, {width:300,opacity:30}, function() {
 startMove(oDiv, {height:500});
 });
 };
 oDiv.onmouseout = function() {
 startMove(oDiv, {height:100}, function() {
 startMove(oDiv, {width:100,opacity:100});
 })
 };

 function getStyle(obj, attr) {
 if (obj.currentStyle) {
 return obj.currentStyle[attr];
 } else {
 return getComputedStyle(obj, null)[attr];
 }
 }

 function startMove(obj, json, fn) {
 clearInterval(obj.timer);
 obj.timer = setInterval(function() {
 var bStop = true;
 for (var attr in json) {
 var cur = 0;
 if (attr === 'opacity') {
 cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
 } else {
 cur = parseInt(getStyle(obj, attr));
 }
 if (cur != json[attr]) {
 bStop = false;
 }
 var speed = (json[attr] - cur)/10;
 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
 cur += speed;
 if (attr === 'opacity') {
 obj.style.filter = 'alpha(opacity:' + cur + ')';
 obj.style.opacity = cur/100;
 } else {
 obj.style[attr] = cur + 'px';
 }

 }
 if (bStop) {
 clearInterval(obj.timer);
 if (fn) fn();
 }

 }, 30);
 }
 </script>
</body>
</html>


最后提取出来的完美运动框架如下,motionFrame.js:


function getStyle(obj, attr) {
 if (obj.currentStyle) {
 return obj.currentStyle[attr];
 } else {
 return getComputedStyle(obj, null)[attr];
 }
}

function startMove(obj, json, fn) {
 clearInterval(obj.timer);
 obj.timer = setInterval(function() {
 var bStop = true;
 for (var attr in json) {
 var cur = 0;
 if (attr === 'opacity') {
 cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
 } else {
 cur = parseInt(getStyle(obj, attr));
 }
 if (cur != json[attr]) {
 bStop = false;
 }
 var speed = (json[attr] - cur)/10;
 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
 cur += speed;
 if (attr === 'opacity') {
 obj.style.filter = 'alpha(opacity:' + cur + ')';
 obj.style.opacity = cur/100;
 } else {
 obj.style[attr] = cur + 'px';
 }

 }
 if (bStop) {
 clearInterval(obj.timer);
 if (fn) fn();
 }

 }, 30);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

js 运动框架 链式运动 完美运动