js动画笔记

js动画有一个物体变大变小,就是他的style属性在变化。可以用原生js做到,也可以用jquery做,我们今天说的js原生动画基础。这里动画效果,我们会用到定时器这个东西。我们先说一下定时器的用法。在js中定时器有这个函数
setInterval(function(){},time)周期的调用一段代码,后面的time就是周期的时间。
clearInterval()取消setInterva设置的重复执行的代码。
setTimeout(function(){},time)在指定的延迟时间之后调用一个函数或执行一段代码。
clearTimeout()方法可取消setTimeout()方法设置的timeout
语法
var intervallId = window.setInterval(function,delay[])
var intervalID = window.setInterval(code, delay);
delay是每次延时的毫秒数。
intervalID 是此重复操作的唯一辨识符,可以作为参数传给clearInterval()。
func 是你想要重复调用的函数。
code 是另一种语法的应用,是指你想要重复执行的一段字符串构成的代码(使用该语法是不推荐的,不推荐的原因和eval()一样)。
delay 是每次延迟的毫秒数 (一秒等于1000毫秒),函数的每次调用会在该延迟之后发生。和setTimeout一样,实际的延迟时间可能会稍长一点。
clearIntercal要清楚的就是上面setInterval的id
window.clearInterval(intervalID)
定时器大概就是这样,下面具体自己细节就这样。
现在就可以开始动画了。
我们可以定义一个移动函数:
function startMove(itarget){
var odiv = document.getElementById(‘odiv’);
/给一个目标值,然后判断本来的值是大于还是小于如果小于就加一个像素,如果大的话就减一个像素,这个就是最简单的动画,/
if(odiv.offsetWidth > itarget){
odiv.style.width = odiv.offsetWidth - 1 +’px’;
}else{
//就是加了
}
){},1000)

}
这是第一个动画基础。
后面还有传参多物体运动
缓冲动画是与根据与目标的值距离的,然后以他为速度
还会用到math.floor()和math.ceil()这两个函数
同时动使用json

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值