为了账号安全,请及时绑定邮箱和手机立即绑定

JS动画效果

vivian Web前端工程师
难度初级
时长 2小时 8分
学习人数
综合评分9.60
537人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.4 逻辑清晰
东北口音诶~
有报错啊,getConmputedStyle(obj,false)[attr];报错说不是一个方法
跟智能社的一样……
定义变量flag的时候,位置应该是放在setInterval()这个计时器了。解决了调用回调函数与目标值无法完全匹配的Bug,至此,这个运动框架已经相对完美。问答里已分享。
在问答里分享了修改后仍旧远非完美的的运动框架。
3.最后来说说我们这个“完美”框架。如果你百分之一百的复制老师的这个完美代码,你还是会发现,根本就无法执行这个回调函数!然后评论里的方法是这样的:
if(json[attr] != curStyle){flag= false;}else{flag=true;}
这样操作之后,首先在逻辑上也不错,也确实解决了无法执行回调函数的bug,但是!!!这样操作之后,会发现,物体运动达不到完全吻合的目标值,会出现一丢丢误差。
2.关于opactiy这节。IE浏览器下。因为样式表里,filter:alpha(opacity=#);
所以定义startMove这个函数,最后返回值应该是:obj.style.filter= 'alpha(opacity='+(curStyle+rate)+')';
老师写成了 obj.style.filter="alpha(opacity:"+(cur+speed)+")"。所以你在IE下肯定是执行不了的!
首先作为一个新手,感谢老师的分享。但是,我这里加了一个但是,你就知道话锋一转了,我是来吐槽的。只要有一点纰漏,整个框架就无法执行了。对新手来说,这感觉让我很绝望。下面总结一下小bug。
1.链式运动这节,假设DOM有多个元素。getLi=documen.getElementsByTagName('li');然后我们用startMove(this,属性,目标值,function(){startMove(this,属性,目标值)}),执行第一个函数的时候是没有问题的,但是当执行回调函数的时候就报错了。因为这个回调函数this的值域变了。评论里用的方法是定义一个变量=this,然后引用这个变量。
谢谢老师的讲解,不过去淘宝发现这个是用css animation 做出来的:)
卧槽,这期老师换了?
做的列子分享给我们下
我知道了,“var flag = true;”应该写在for(var attr in json)的上一行,这样就ok了
一旦把flag设置成false就没有地方再将flag重新设置成true,所以感觉定时器就没有关
nice! 回掉函数会用了!
课程须知
1.您至少已经具备JavaSript的知识。2.您已经具备一些开发经验。
老师告诉你能学到什么?
1.使用定时器实现简单动画。2.如何一步步封装库。2.培养编程的思想。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消