DOM animation

window object

  • show the page url → window.location.href
  • show user agent → window.navigator.userAgent
  • show the width and height of the page → window.outerWidth/window.outerHeight
  • window is a global variable, also can use outerWiidth instead of window.outerWidth

setInterval(callback function, time)

  • window.clearInterval(callback function, time)
  • window.setInterval(the name of setInterval you want to cancel)
  • window.setTimer(callback function, time)
  • parseFloat()
h3 the world will end in 
  span#countdown 500
  |  seconds !
var countdown = document.querySelector("#countdown");

var countItDown = function() {
  //parseFloat(): turn string into number
  //stop negative timing, stop this animation when it come to zero
  var currentTime = parseFloat(countdown.textContent);
  if (currentTime > 0) {
    countdown.textContent = currentTime - 1;
  } else {
    //window.clearInterval(): stop excute the function
    window.clearInterval(timer);
  };

};

//call this function on a interval
//在一定期間内執行function
//window.setInterval(callback function, time)
//the functino will execute every 1 second
var timer = window.setInterval(countItDown, 1000);
//add: window.setTimerout: only excute 1 time

Display

the world will end in 500 seconds !

高效能的動畫語法:requestAnimationFrame()

搭配new Date().getTime()設定速率
img#pic(src="https://goo.gl/o3iBL0")
var pic = document.querySelector("#pic");
pic.style.width = "10px"
  //make the speed slow down
var startTime = new Date().getTime();
var makeItBig = function() {
  var currentTime = new Date().getTime();
  //10 the start width
  //20 speed
  //currentTime-startTime: the millisecond passed
  var newWidth = (10 + ((currentTime - startTime) / 1000) * 20);
  pic.style.width = newWidth + "px";
  //"10px" is a string
  //pic.style.width=parseFloat(pic.style.width)+1+"px";
  //call animation
  if (newWidth < 300) {
    window.requestAnimationFrame(makeItBig);
  }

};

makeItBig();

//method: setInterval
//30frames of 1 second
//window.setInterval(makeItBig,1000/30);
Display

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *