SIMPLEST EXAMPLE OF JAVASCRIPT ANIMATION COMPARED WITH ANIMATION BY SVG-SMIL

SO SÁNH CÁCH LÀM DI ĐỘNG HÌNH BẰNG JAVASCRIPT VỚI SVG-SMIL QUA THÍ DỤ ĐƠN GIẢN NHẤT
Hình vẽ được xem như một cái xe. Muốn xe chạy thì phải có tài xế, muốn hình vẽ di động phải có JavaScript function hay SVG-SMIL

Thí dụ viết javaScript code như bảng code nầy để làm di chuyển hình vẽ của một quả banh, chúng ta nhận thấy khá phức tạp và khó nhớ mặc dầu chọn cách viết đơn giản nhất.

Muốn viết được bảng code nầy, chúng ta cần phải học :

Javascript function, DOM (Document Object Model ), i ++ ( increment used in javaScript ) , setTimeout(), clearTimeout() .

Trường hợp chưa biết gì hết về javaScript,DOM nhưng muốn làm di động môt hình vẽ chúng  ta chon phương pháp của SVG-SMIL rất đơn giản và rất dễ nhớ như bảng code thí dụ ớ dưới cùng.

Phần trên là JavaScript code làm di chuyển hình quả banh màu đỏ.
Phần dưới cùng là SVG-SMIL làm di chuyển hình một cụm hoa màu vàng.
Cả hai phần có thể viết chung trong một trang của Notepad và được ngăn cách bởi một tag hr

1- Cắt nghĩa cách viết JavaScript code.

Trước hết phải có một hình ở dạng gif chứa sẵn trong My documents.

Gắn cho hình một identification là id=”banh” , viết src =”tên của hình chứa trong My documents” và không quên xác định độ lớn với vị trí của hình .

Tạo ra một variable tồn trử trong memory gọi là var object .

Dùng document.getElementById (“…”) của DOM để đem id của hình là ”banh” chứa vào trong var object như sau.

       

var object = document.getElementById("banh");

  Làm hình di chuyển tức làm thay đổi vị trí .Vị trí gọi là location viết tắt loc  Khi hình bắt đầu xuất hiện trên monitor thì vị trí khởi hành là loc= 0

Trong JavaScript nếu thấy viết loc++ có nghĩa là increment (tăng dần từng đơn vị) Increment viết tắt  i++ gọi operator ,là một trong nhiều loại operator dùng trong JavaScript.

Có thể thay thế loc++ bằng loc=loc+1  vẫn cho kết quả như nhau.

Khi hình quả banh đã được chứa trong var object rồi thì di chuyển object tức là di chuyển quả banh.Với JavaScript, memory chỉ nhận var object chứ không nhận hình quả banh cho nên phải tạo var object để làm chỗ chứa quả banh.

Nếu muốn đặt object bên phía trái thì viết như sau.

                                                               object.style.left = loc;

 Chúng ta có thể đặt vị trí của object phía bên phải hoặc phía trên cao,

                                                        object.style.right = loc;

                                                        object.style.top = loc;

Nếu chọn object.style.left = loc; và muốn quả banh khi nào chạy tới vị trí lớn hơn hay bằng 200 pixels rồi quả banh trở về vị trí lúc khởi hành thì chúng ta phải viết : if (loc >=200) { loc = 0 }

 setTimeout (name of function,delay time in milliseconds).

Viết xong function doMove() nhưng phải được ” called “ thì nó mới hoạt động.Do đó phải dùng một timer function tên là setTimeout() hay setInterval() để “call “nó.

Nếu dùng setInterval(doMove,20) hoặc setInterval(“doMove()”,20) thi sau khi chờ đợi 20 milliseconds, browser mới calls function doMove() , rồi lại phải chờ đợi 20 milliseconds nữa mới calls tiếp và cứ tiếp tục giống như vậy cho đến khi chúng ta muốn STOP .

Khi chọn setInterval(doMove,20) để call function doMove() th̀̀ì hình sẽ di chuyển ngay.

Muốn hình chỉ di chuyển khi nào chúng ta click chữ START thì phải viết thêm một function nưã.

Đó là :

    function preMove(){

    t=setInterval(doMove)}

 clearTimeout (  ), clearInterval( ).

Sau khi được “called”, function doMove() làm hình quả banh di chuyển tới lui cho đến khi nào chúng ta muốn dừng lại.

Muố́n dừng lại phải dùng clearTimeout( ) hoặc clearInterval( ).

Chọn một identification goị là t cho setTimeout () như sau.

                                           t=setTimeout(doMove)

Rồi  viết clearTimeout(t) kẹp trong span tag như đã thấy trong bảng script trên.

Muốn dừng trái banh,chúng ta click vào chữ STOP.

 2- Cắt nghĩa viết animation code theo phương pháp SVG-SMIL

Phương pháp SVG (Scalable Vector Graphics) chỉ giúp chúng ta vẽ hình mà thôi.

Muốn hình chuyển động phải dùng phương pháp SMIL(Synchronized Multimedia Integration Language) animation.

SMIL là ngôn ngữ cách biệt (separate) với SVG nhưng kết hợp (integrated) với SVG.

SVG code vi phải lồng trong XML nên không cần HTML nữa.

Trước khi viết code phải mở đầu bằng những chữ như sau để nêu rõ tên của tiêu chuẫn quốc tế W3 kẹp trong tags mà code phải hòan toàn tuân theo .

                                  svg xmlns="http://www.w3.org/2000/svg "

                                   xmlns:xlink=http://www.w3.org/1999/xlink

Những giòng chữ nầy gọi là delaration statement.

Nếu không ghi rõ encoding thì default sẽ tự động cho UTF-8

Trường hợp không vẽ hình nhưng muốn đem hình có sẳn trong My document vào SVG thì viết :

xlink : href = " tên của hình.gif  " thí dụ xlink : href = " hoadai1.gif  "

SMIL có nhiều cách khác nhau làm hình di động trong đó có phương pháp animateMotion.

Tại sao trong bài nầy chúng ta chọn animateMotion ? Chúng ta chọn phương pháp nầy khi nào muốn hình chuyển động khắp nơi trên màng hình monitor hay chuyển động trên mọi quỷ đạo có hình dạng khác nhau.
Bài kế tiếp : 
HOW TO CREATE A PATH ANIMATION  BY SVG-SMIL