USING SMIL TO ANIMATE IMAGES CREATED BY SVG

XỬ DỤNG SMIL LÀM DI ĐỘNG NHỮNG HÌNH VẼ BẰNG SVG

SMIL( Synchronized Multimedia Integration Language ) đọc giống chữ smile ,dùng làm chuyển động các hình vẽ bằng SVG (Scalable Vector Graphic) rất hửu hiệu và thích thú.

Khi chúng ta chưa biết rành JavaScript dùng để di chuyển các hình vẽ bằng SVG thì nên chọn xử dụng SMIL vì SMIL rất đơn giản,dể̃ học và dễ nhớ.

SMIL được tiêu chuẫn hóa W3C từ năm 1998 với version 1.0 và đến tháng 12 năm 2005 thì có version 2.1.

SMIL có 5 built-in animation types hay còn gọi 5 animation elements :

• animate
• animateMotion
• animateTransform
• animateColor
• set

Trong bài nầy chúng ta tìm hiểu cách xử dụng phần hấp dẫn nhất,đó làanimateMotion.

 Các elements khác còn lại chúng ta sẽ tìm hiểu trong những bài kế tiếp.

Cách vẽ và làm di chuyển hình con cá trên 3 cạnh của một tam giác.

Đây là hình sẽ xuất hiện và con cá sẽ di chuyển theo 3 cạnh của tam giác khi mở ra bằng Browser Google

Để  con cá có thể nằm trên cạnh hình tam gíác,cần phải viết thêm trong tag g như sau :

              g transform="translate(-160,-160)"

Tuỳ theo tọa độ chúng ta chọn để vẽ con cá,tọa độ của translate sẽ thay đổi theo.Do đó chúng ta phải tự dò tìm những tọa độ đó để được thích hợp.

* Tiếp theo viết code của animateMotion để con cá di chuyển theo 3 cạnh hình tam gíac.

  Muốn có nút GO và nút STOP phải viết thêm trong animateMotion tag và dưới đó như sau.

Làm cho 4 vật chuyển động trên một quỷ đạo.

Vật số 1 là hình vòng tròn.

Vật số 2 là hình ellipse.

Vật số 3 là hình chữ nhật.

Vật số 4 là hình con cá.

animateMotion phải ở trong tags của mỗi vật

Tốc độ di chuyển của mỗi vật khác nhau tuỳ chúng ta chọn.

Muốn vật nào ra quỷ đạo chậm trể hơn vật đầu tiên thí dụ 5 sec thì viết begin=” 5 “