关于链式和多属性运动的另一种情况
来源：6-2 完美运动框架
Fishzz
2018-06-18 23:59
老师已经给我们介绍了一个完美的运动框架
多物体运动>链式运动>多属性运动
假设链式步骤{}1,2,3.多属性同时运动a,b,c
老师的框架运行结构1:{a,b}>2:{a,b,c}>3:{a,b,c}
但是存在一种情况:对于一个物体而言,两条属性同时变化,而当第一个属性完成后接着一个链式第三个属性.此时第二个属性和第三个属性继续同步完成.
即: 1:{ 1.1:{a}>1.2:{c} , b }
时间轴例:
{aaaaaaa}>{cccccccc}
{bbbbbbbbbbbbbbb}
应该如何修改框架实现此种情况.
写回答
关注
1回答
-
- vylss
- 2018-06-26 18:56:16
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { margin: 0px; } li { width:200px; height:50px; list-style-type:none; margin-bottom:10px; background-color:brown; filter:alpha(opacity=30); opacity:0.3; } </style> <script type="text/javascript"> window.onload = function(){ var li = document.getElementsByTagName('li'); for(var i=0;i<li.length;i++){ li[i].timer=null; li[i].onmouseover = function(){ startMove(this,{'width':400},function(obj){//这里的obj参数由startMobe方法调用回调那里传回来，方便解决这行的函数找不到对象的问题 startMove(obj,{'height':300,'opacity':100});//用了json同时实现高和透明度的修改 }); } //鼠标移开 li[i].onmouseout = function(){ startMove(this,{'width':200,'height':50,'opacity':30});//用了json同时实现宽高透明度的修改 } } } var alpha=30; function startMove(obj,json,fn){ clearInterval(obj.timer); var curStyle=0; obj.timer = setInterval(function(){ var flag=true;//flag如果放在外面的话在计时器里面被修改之后就不会再变回true的值了，如果在计时器里面，每次计时都会把flag重新赋值true for(var attr in json){ curStyle=(attr=='opacity')?Math.round(parseFloat(getStyle(obj,attr))*100):parseInt(getStyle(obj,attr));//这里把if（）｛｝else｛｝的判断是不是opacity写成一句了 var speed = (json[attr]-curStyle)/10; speed = (attr=='opacity')?speed:(speed>0?Math.ceil(speed):Math.floor(speed)); if(curStyle!=json[attr]){//如果不能同时满足所有当前的属性值等于目标值就给flag赋值false flag=false; } obj.style[attr]=(attr=='opacity')?(curStyle+speed)/100:(curStyle+speed+'px'); if(flag){ clearInterval(obj.timer); if(fn){ fn(obj);//这里把obj做成参数主要是方便处理回调函数fn的对象问题 } } } },30) } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return window.getComputedStyle(obj,false)[attr]; } } </script> </head> <body> <li id="li"></li> <li></li> <li></li> <li></li> <li></li> <li></li> </body> </html>--------------------------------------------------------------------------------------
花了大半天写好的，不知道有没有你想要的“第二个属性和第三个属性继续同步完成”
JS动画效果
通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装
113920 学习 · 1495 问题
相似问题