VÒNG TRÒN VÀ SAO CHỚP SÃNG DI CHUYÊN TRÊN QUỶ ĐẠO
Bài viết gôm có hai programs
dễ so sánh và dễ hiểu.
Dùng kiến thức vẽ hình theo phương pháp SVG (Scalable Vector Gaphics).
SVG phát minh năm 1998 bởi nhóm chuyên
viên tiêu chuẩn quốc tế “W3C SVG Working
Group”
Dùng kiến thức làm hình SVG chớp sáng và di chuyển
theo phương phãp SMIL(Synchronized Multimedia Integration
Language).
SMIL là phần nối tiêp của SVG (extension of SVG ).
************************
1-Vẽ dễ
dàng vòng tròn chớp sang bằng cách thay đổi màu rồi cho chạy trên quỷ
đạo ellipse.
2- Vẽ ngôi sao hơi phức tạp vi quá lớn cần phải thu nhò bằng cách dùng transform="scale(...)"đế ngôi sao có thể chạy trên quỷ đạo ellipse.
Theo SVG, ngôi sao được
xếp vào nhóm goị là polygon.
3-Vẽ quỷ
đạo ellipse theo phương pháp của
SVG
--------------------------------------
Program 1-Vòng tròn chớp sáng chạy trên ellipse
<svg xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%">
<g>
<circle
cx="50" cy="50" r="20"
fill="red"
stroke="blue" stroke-width="18" transform="translate(-45,-50)"> //phải có dấu nầy > //Nếu viết dấu nẩy /> thì phần sau không hoạt động
<animateMotion
path
="M 275,275 a150, 75, 0,1,1, 0,009 z"//không có chữ d
stroke="blue" stroke-width="3" fill="none"
rotate="auto"
dur="10s" repeatCount="indefinite"/> //phải
có rotate="auto" để di
chuyển theo quỷ đạo path.
</animateMotion> //quỷ đạo viết trong animateMotion
<animate attributeName="stroke"
begin="1s" from="yellow"
to="purple" dur="3s"
repeatCount="indefinite"/>
</animate>
</circle>
</g>
<g>
<path
id="ellipse"
d="M
275,275 a150, 75, 0,1,1, 0,009 z"// phải có chữ d thì
hình mới xuất hiện
stroke="blue" stroke-width="3"
fill="none"/
</g></svg>
GHI CHÚ.
1-Quỷ đạo theo SVG goị là path.
Phải viết path sau cùng thi hình vòng
trỏn mới xuất hiện.
Lý do quỷ đạo sẽ che lẫp hình vòng tròn nếu
viết path trước khi viết hình vòng
tròn.
2-Phái dung transform
=”translate(x,y)" để điều chỉnh vị trí của vong tròn phải nằm trên quỷ đạo.
Điều chỉnh x, y bằng cách trừ bớt hay cộng thêm
khi nhìn hình xuất hiện
3-Muốn di chuyển trên path phải dùng animateMotion và phải kèm theo rotate="auto" để cho object di chuyển trên quỷ đạo gọi là path.
Program 2-Ngôi sao chớp sáng chạy trên ellipse.
<svg xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%">
<g>
<polygon points="90,5 30,120 165,50 15,50 150,120"
fill="red"
stroke="purple" stroke-width="10"
transform="scale(0.2)"
</polygon> // phải có polygon chận tại đây thì mau thay đổi
<animateMotion
//quỷ
đạo viết trong animateMotion
path ="M
275,275 a150, 75, 0,1,1, 0,009 z"//không có chữ d
stroke="blue"
stroke-width="3" fill="none"
rotate="auto"
dur="10s" repeatCount="indefinite"/>//phải
có rotate="auto" để di
chuyển theo quỷ đạo. path
</animateMotion>
<animate attributeName="stroke"
begin="1s" from="yellow"
to="purple"
dur="3s" repeatCount="indefinite"/>
</animate>
</polygon> // có
hay không có polygon tại đây cũng OK.
</g>
<g>
<path id="ellipse"
d="M 275,275 a150, 75, 0,1,1, 0,009
z"// phải
có chữ d thì hình mới hiện
stroke="blue"
stroke-width="3" fill="none"/
</g>
</svg>
***************************
TẠO NÚT START VÀ STOP
Muốn tạo nút Start và Stop thì viết program như sau.
Click nút START ngôi sao chạy chớp liên tục. Click nút STOP ngôi sao trở về vị trí gốc lúc khởi hành.
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%">
<g id ="B">
<text x="250"
y="150" font-size ="25" fill="blue" >START</g>
<g id = "S">
<text x="350"
y="150" font-size ="25" fill="red"
>STOP</g>
<g>
<polygon points="90,5 30,120 165,50 15,50 150,120"
fill="red"
stroke="purple" stroke-width="10" transform="scale(0.2)" </polygon>
<animate attributeName="stroke" begin="B.click"
from="yellow"
repeatCount="indefinite"
to="blue" dur="3s" end="S.click"/>
</animate>
<animateMotion
path ="M 275,275
a150, 75, 0,1,1, 0,009 z" stroke="blue"
stroke-width="3"
fill="none"
rotate="auto" begin="B.click"
dur="10s" repeatCount="indefinite" end="S.click"/>
</animateMotion>
</polygon>
</g>
<g>
<path
id="ellipse"
d="M 275,275 a150, 75, 0,1,1, 0,009
z"
stroke="blue"
stroke-width="3" fill="none"/
</g></svg>
