Khả năng ảnh động của SVG thành phần ‘animate’

Một phần của tài liệu tìm hiểu svg và ứng dụng (Trang 139 - 143)

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:

Một phần của tài liệu tìm hiểu svg và ứng dụng (Trang 139 - 143)

Tải bản đầy đủ (PDF)

(195 trang)