ANIMATION OF CSS-PICTURES BY JAVASCRIPT

LÀM CHUYỂN ĐỘNG HÌNH VẼ CSS
Method 1- Xử dụng parseInṭ() và hình vẽ là khung chử nhật.

Explanation.

 1- Trước tiên áp dụng phương pháp CSS vẽ một hình chữ nhật có vị tŕi, kích thước và màu sắc như sau. 
Có thể thay thế chữ rectangle bằng chữ khác tuỳ ý nhưng bắt buộc phải có dấu # đứng bên cạnh.

#rectangle{position:relative;left:0px;width:100px;

height:80px;background:white;border:2px solid red;}

2- Khi nào hình vẽ theo phương pháp css hoặc svg hoặc canvas thì cần phải làm initialization để hình được lưu giử trong memory.Nếu hình không được initialized thi hình biến mất. Do đó bắt buộc phải có một  function init() và window.onload=init  như sau để  “ to get a javascript reference to the css elements stored in initialization files”

  var object;

  var x=0;

  function init(){

  object=document.getElementById('rectangle')     

  object.style.left='0px';}

  window.onload=init;

3- Muốn cho hình chuyển động thì viết :

  function doMove(){

  object.style.left=parseInt(object.style.left)+1+'px';

  t=setTimeout(doMove,20)}

  

setTimeout(doMove,20) là function cũng là method của window object dùng để call function doMove() sau khi chờ đợi một thời gian gọi là delaytime 20 milliseconds.

Nếu không ấn định delaytime thì program sẽ tự động chọn 4 millisecondṣ (ms) là số tối thiểu.

setTimeout() : calls the function only once after a specified time period elapses.

setInterval( doMove,3) : keep calling the function after every delaytime of 3 milliseconds.

setTimeout() and setInterval() are also called JavaScript Timer.

object.style.left  nghĩa là vị trí tức là position của hình được đặt bên trái viết theo phương pháp DOM (Document Object Model ).Ba chử nối kết nhau bằng dấu chấm.

Khi nói đến vị trí thì nên hiểu trong đó có hàm chứa  một con số về kích thước nên phải dùng parseInt() để lấy ra con số chứa trong đó.Ở đây đơn vị đo lường kích thước là pixel viết tắt px .
Con số +1 gọi là increment 1 pixel. 
function doMove() chỉ họat động được khi có increment chứ không phải parseInt() làm function hoạt động.

4- Muốn hình dừng lại tại vị trí lúc khởi hành là 0 pixel thì viết như sau.

function stop(){

  clearTimeout(t);object.style.left='0px';}

5- Phần còn lại sau cùng, chúng ta viết những gì muốn viêt trên bức hình và viết hai nút START và STOP .

                    --------------------------------------------------

Muốn xử dụng setInterval () thì viết lại phần dưới như sau.

 function doMove(){

 object.style.left=parseInt(object.style.left)+1+'px';

 }

 

  function start(){

  t=setInterval(doMove,3)

 }

 

  function stop(){

  clearInterval(t);object.style.left='0px';

 }

 

  setInterval(doMove,3) sẽ call function doMove(){…}

  span onclick="start()" sẽ call function start(){…}

  span onclick="stop()"  sẽ call functiom stop(){…}

Method 2- Xử dụng increment và hinh vẽ là một ellipse.

Method 3-Xử dụng increment và "0==direction, direction=1"để đổi chiều.

 

 Phần ngoài script tag viết giống như method 2 

Phần trong script tag phải viết giống như sau đây thì sẽ có animation bouncing.Nếu viết sai sẽ không có animation.

  var object;

  function init(){

  object=document.getElementById('ellipse')    

  object.style.top='50px';}                            

  window.onload=init;

   var loc=50;

  var direction=0

  function doMove(){

  object.style.top=loc;

   if(0==direction){loc+=1; if(loc>150){direction=1;}}                 

   else {loc-=1; if(loc<10){direction=0;}}

   t=setTimeout(doMove,10);}

EXPLANATION.

Trong memory chúng ta đã đặt điều kiện  var direction=0;

0 là  đi xuống theo trục y.

1 là  đi lên theo trục y.

Nếu muốn thoả mãn điều kiện đó thì viết if(0==direction) và ra lịnh function vận hành như sau :{loc+=1;if(loc>150){direction=1;}

if(0==direction){loc+=1;if(loc>150){direction=1;}}.

 

Khi vượt quá 150px, nếu chúng ta muốn đổi sang direction=1, thì function không còn theo điều kiện đã đặt ra nữa nên vận hành theo lệnh sau else.

else {loc-=1;if(loc<10){direction=0;}}

Vì đi lên nên khỏang cách trên trục y thu ngắn dần ,do đó phải viết loc-=1.Khi nào ngắn hơn 10px chung ta muốn đổi sang chiều đi xuống direction=0 .

MUỐN HÌNH DI CHUYỂN THEO TRỤC X.

Trong bảng code trên,chỗ nào có chữ top thì thay thế bằng chữ left.
Di chuyển từ trái sang phải thì víết direction=1.
Di chuyển từ phải sang trái thì viết direction=-1