如果想要在场景中实现动画效果,需要使场景以一定的时间间隔进行渲染。
示例浏览地址:https://ithanmang.gitee.io/threejs/home/201806/20180623/02-add-animation.html
1 setInterval
在H5 和 jsAPI接口之前使用的方法是 setInterval 方法
- setInterval
作用:在播放动画时,按照一定的时间间隔就调用传入的方法或对象。 - 格式如下:
setInterval( function,interval[arg1,...argn] )
或者setInterval( object,methodName,interval[arg1,...argn] )
第一种是默认语法,第二种是专家模式中使用的语法。
参数:function,是一个函数名或者是一个匿名函数、object,指示一个对象,methodName是参数object中的方法名、interval 是时间间隔参数,单位是毫秒。
看下面的示例:在页面显示当前系统时间
/**
* 动态添加 html 元素到div
*/
function showTime(){
var time = new Date();
var hour = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
document.getElementById('dynamicTime').innerHTML = "<h1> 当前系统时间 "+hour+" : "+minutes+" : "+seconds+" </h1>"
}
/**
* 参数 function : showTime
* 间隔 interval : 1000 毫秒
*/
setInterval(showTime, 1000);
效果
当然这种效果使用 setTimeout 方法也能实现。
- clearInterval
与 setInterval 对应的方法清除对 setInterval 方法的调用效果。
使用如下,clearInterval(参数 ),这个参数是 setInterval 返回的。
<script>
var i = 10;
function fun(){
console.log('每隔一毫秒调用一次!'+i);
document.getElementById('dynamicTime').innerHTML = "<h1>倒计时:"+i+"</h1>";
if (i == -1)