3.18.1 Giới thiệu
SVG hỗ trợ khả năng thay đổi ảnh đồ hoạ véc-tơ theo thời gian. Nội dung
SVG cĩ thể thay đổi động theo các cách sau:
• Dùng thành phần “ảnh động” của SVG. Phân đoạn tài liệu SVG cĩ thể mơ tả các thay đổi dựa theo thời gian cho các thành phần của tài liệu. Bằng cách dùng các thành phần ảnh động khác nhau, chúng ta cĩ thể định nghĩa các chuyển động theo đường, hiệu ứng sáng và mờ đi, các đối tượng lớn lên, nhấp nháy, quay và thay đổi màu….
• Dùng SVG DOM. Mỗi thuộc tính và trang định kiểu cĩ thể được truy
cập bằng script, và SVG đưa ra một tập các giao diện DOM hỗ trợ tạo
ảnh động bằng script. Kết quả là bất kỳ loại ảnh động nào đều cĩ thể được tạo ra. Khả năng định giờ (timer) bằng ngơn ngữ viết script, như
ECMAScript, cĩ thể được dùng để kích hoạt và kiểm sốt ảnh động.
• SVG được thiết kế để các phiên bản trong tương lai của SMIL dùng nội dung SVG tĩnh hay động như những thành phần phương tiện truyền thơng.
139
• Trong tương lai, phiên bản mới của SMIL sẽ được mơ-đun hố và các thành phần của nĩ cĩ thể được dùng kết hợp với văn phạm SVG và văn phạm XML khác để đạt được các hiệu ứng động.
3.18.2 Các thành phần ảnh động 3.18.2.1 Tổng quan 3.18.2.1 Tổng quan
Các thành phần ảnh động của SVG được hợp tác phát triển với nhĩm phát
triển SYMM (W3C Synchronized Multimedia Working Group – nhĩm phát triển đa phương tiện đồng bộ W3C), và các nhà phát triển SMIL 1.0 (Synchronized
Multimedia Integration Languge1.0 Specification – ngơn ngữ tích hợp đa phương
tiện khơng đồng bộ).
Nhĩm phát triển SYMM hợp tác với nhĩm phát triển SVG đã tạo ra bản đặc tả
ảnh động SMIL (SMIL Animation) cung cấp một tập tính năng năng ảnh động
XML cho mục đích chung. SVG kết hợp các tính năng động được định nghĩa trong đặc tả SMIL Animation, đồng thời bổ sung một số mở rộng đặc trưng SVG.
3.18.2.2 Mối quan hệ của ảnh động SVG với SMIL Animation
SVG là một “ngơn ngữ chủ” (host language) của SMIL Animation. Do đĩ nĩ cĩ các ràng buộc và các tính năng bổ sung được cho phép bởi đặc tả SMIL
Animation. Ngồi các quy tắc đặc trưng SVG được đề cập tường minh trong phần
đặc tả này, cịn cĩ các định nghĩa chuẩn cho các thành phần ảnh động của SVG và
các thuộc tính nằm trong đặc tả SMIL Animation.
SVG hỗ trợ các thành phần ảnh động sau, được định nghĩa trong đặc tả SMIL Animation:
• ‘animate’: cho phép các thuộc tính vơ hướng nhận các giá trị khác
140
• ‘set’: hình thức tốc kí thuận tiện cho ‘animate’, rất hữu ích trong việc
chỉ định các giá trị thuộc tính khơng phải dạng số cho các thuộc tính,
chẳng hạn như thuộc tính ‘visibility’.
• ‘animateMotion’: dịch chuyển một thành phần dọc theo một đường.
• ‘animateColor’: thay đổi giá trị màu của các thuộc tính đặc biệt theo
thời gian.
Ngồi ra, SVG bổ sung thêm các mở rộng tương thích với SMIL Animation:
• ‘animateTransform’: thay đổi giá trị của một trong các thuộc tính của
phép biến đổi trong SVG theo thời gian, chẳng hạn như thuộc tính
‘transform’.
• Thuộc tính ‘path’: SVG cho phép bất kỳ tính năng nào của cú pháp dữ
liệu đường của SVG được chỉ định trong thuộc tính ‘path’ của thành
phần ‘animateMotion’ (SMIL Animtion chỉ cho phép một tập con cú pháp dữ liệu đường trong thuộc tính ‘path’).
• Thành phần ‘mpath’: SVG cho phép một thành phần
‘animateMotion’ chứa một thành phần con ‘mpath’, tham chiếu đến
một thành phần ‘path’ để định nghĩa một đường di chuyển.
• Thuộc tính ‘keyPoint’: SVG bổ sung thuộc tính ‘keyPoint’ cho thành
phần ‘animateMotion’ cung cấp khả năng điều khiển chính xác về tốc độ của ảnh động trên đường di chuyển.
• Thuộc tính ‘rotate’: SVG bổ sung thuộc tính ‘rotate’ cho thành phần
‘animateMotion’ để điều khiển một đối tượng tự động quay sao cho
trục x (x-axis) cùng hướng (hoặc ngược hướng) với vec-tơ tiếp tuyến của đường di chuyển.
141
Để tương thích với các khía cạnh khác của ngơn ngữ, SVG dùng tham chiếu
URI thơng qua thuộc tính ‘xlink:href’ để xác định các thành phần là đích của hoạt
ảnh.
SMIL Animation yêu cầu “ngơn ngữ chủ” phải định nghĩa đầy đủ ý nghĩa cho “thời điểm bắt đầu tài liệu” (document start) và “thời điểm kết thúc tài liệu”
(document end). Bởi vì một thành phần ‘svg’ đơi khi là gốc của cây tài liệu XML và
đơi khi cũng là một thành phần của văn phạm XML, nên “thời điểm bắt đầu tài
liệu” của một phân đoạn tài liệu SVG cho trước sẽ được định nghĩa là thời gian
ngay lúc sự kiện ‘SVGLoad’ của thành phần ‘svg’ được kích hoạt. “Thời điểm kết thúc tài liệu” của phân đoạn tài liệu SVG là thời điểm mà phân đoạn tài liệu giải
phĩng và khơng cịn được xử lý bởi tác nhân người dùng. Tuy nhiên, các thành phần ‘svg’ được lồng trong một tài liệu SVG sẽ khơng tạo thành phân đoạn tài liệu trong ngữ cảnh này, khơng định nghĩa một “thời điểm bắt đầu tài liệu” riêng. Tất cả các giá trị thời gian trong phân đoạn tài liệu SVG lồng được tính tốn một cách
tương đối với thời gian tài liệu của thành phần ‘svg’ gốc.
Trong SVG, thuật ngữ thời gian trình diễn (presentation time) chỉ định một vị trí trên thước đo thời gian tương đối so với “thời điểm bắt đầu tài liệu” của phân đoạn tài liệu được cho.
3.18.3 Ví dụ ảnh động:
Ví dụ minh họa một tam giác di chuyển dọc theo một đường di chuyển
(motion path).
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="5cm" height="3cm" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" >
<desc>Example animMotion01 - demonstrate motion animation computations</desc>
<rect x="1" y="1" width="498" height="298"
fill="none" stroke="blue" stroke-width="2" /> <!-- Draw the outline of the motion path in blue, along
142
with three small circles at the start, middle and end. -->
<path id="path1" d="M100,250 C 100,50 400,50 400,250" fill="none" stroke="blue" stroke-width="7.06" /> <circle cx="100" cy="250" r="17.64" fill="blue" /> <circle cx="250" cy="100" r="17.64" fill="blue" /> <circle cx="400" cy="250" r="17.64" fill="blue" /> <!-- Here is a triangle which will be moved about the motion path.
It is defined with an upright orientation with the base of
the triangle centered horizontally just above the origin. -->
<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
fill="yellow" stroke="red" stroke-width="7.06" > <!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
<mpath xlink:href="#path1"/> </animateMotion>
</path> </svg>
Kết quả trên trình duyệt tại thời điểm 0s, 3s, 6s: