HỌC HÌNH CHUYỂN ĐỘNG THEO CSS

DI CHUYỂN HÌNH THEO CSS.

 

    CSS (Cascading Style Sheets)  là phương pháp viết code tuỳ theo tưng mục có tên khác nhau gọi là style để chứa trong HTML cuả trang Web (Web contents).

Thí dụ phải  dúng chữ style khi muốn quy định color, font, size,

Phương pháp CSS phát minh năm 1996 rất phức tạp.

Phương pháp SVG phát minh năm 1999 ngắn gọn  hớn CSS.

          ----------------------------

Bài nầy áp dụng phương pháp CSS .

Nhưng phương pháp SVG/SMIL dễ nhớ hơn .

            -------------------------

//1-Phần đầu tiên viêt style như sau thì hình xuất hiện

 <html>

     <head></head>

     <body>

      <img id="image"  style="position:relative;left:120;;top:200;width:140;height:160"

      src="ball.gif">

//2- Tiếp theo viết như sau để nối với function

// làm di chuyển hình đã được chứa trong script.

//Trong script chúng ta phải chứa hình và vị trí khởi

//đâu goi la loc=0, thời gian di chuyển và vị trí dừng lại

     <script>

      var object=document.getElementById("image")

      var loc=0;  

  function doMove(){

          loc+=1; //  cho tốc độ di chuyền

      object.style.left=loc;

       t=setTimeout(doMove,10); //cho thời gian di chuyển.

      if (loc>=600) // tới vị trí nầy thì dưng lại.

      return object.style.left=loc=0}

     // khi về vị trí 0 pixel r̀ồi thì sẽ tiêp tục chạy lại

     </script>

   // muốn bắt đâu di chuyền thi click function.

   //muốn chấm dứt thỉ xóa thời gian di chuyển

  <span onclick="doMove()">START</span>

     <span onclick="clearTimeout(t)">STOP</span>

    </body></html>

------

NHẬN XÉT .

1-Dùng phương pháp CSS mặc dầu phức tạp hơn phương pháp sVG/SMIL nhưng với CSS chúng tá co thể thay đổi kich thước –resize-của hinh tuỳ thích.Thí dụ quả banh vẽ tròn nhưng tôi bóp thành méo   

2-Trương hơp không muốn dùng style cua CSS thì viết như sau. Hinh vần xuất hiện nhưng không thay đổi kích thước và không chuyển động. Quan trọng của CSS là phải nhớ dung chữ style trong html. 

Thí dụ viết như sau.

    <html><body>

     <img id="image" src="ball.gif">

     </body> </html>

Hinh xuất hiện với kích thước đã vẽ và không thễ làm di chuyển đước.

CO ĐỨC TIN NÊN THOÁT CHẾT NHIỀU LÂN

 Tác giã Trần Quân

  (Aka Gary Hart)

---------------------------

     Đức tin - Faith-La foi

Đức tin là một khái niệm cốt lõi trong hầu hết các tôn giáo.

(Faith is a core concept in most religions.

La foi est un concept fondamental dans la plupart des religions.)

Niềm tin sâu sắc vào các giáo lý của một tôn giáo, dựa trên sự xác tín tâm linh thay vì bằng chứng

(strong belief in the doctrines of a religion, based on spiritual conviction rather than proof )

(croyance profonde dans les doctrines d’une religion, fondée sur une conviction spirituelle plutôt que sur des preuves)

Đức tin không chỉ là niềm tin vào một thực thể siêu nhiên mà còn là động lực thúc đẩy con người vượt qua thử thách và tìm kiếm ý nghĩa cuộc sống.

Nếu không có đức tin, người vô tín ngưỡng Không sao,thế giới hiện này có đến 8.3 tỷ người, nhưng chẳng có người nào giống người nào.

(Đã có bao nhiêu người từng sống trên Trái Đất?

(Ước tính khoảng 100–107 tỷ người kể từ khi loài người xuất hiện, theo mô hình của Carl Haub (2011). ).\

Có thể định nghĩa đức tin là niềm tin hoặc lòng tin vào một hệ thống tín ngưỡng tôn giáo cụ thể.

 Những người theo tôn giáo thường nghĩ về đức tin là sự tự tin dựa trên mức độ nhận thức của sự bảo đảm, trong khi những người khác nghi ngờ tôn giáo có xu hướng nghĩ rằng ,đơn giản là niềm tin mà  KHÔNG CẦN PHẢI CÓ.

 Kitô giáo là tôn giáo lớn nhất thế giới, với khoảng 2,4 tỷ tín đồ, chiếm khoảng 31% dân số toàn cầu. Hồi giáo là tôn giáo phát triển nhanh nhất, với khoảng 1,9 tỷ tín đồ, chiếm khoảng 25% dân số thế giới.

Ấn Độ giáo .Số lượng giáo đồ: 900 triệu người

Đạo giáo (tiếng Trung: 道教) (Đạo nghĩa là con đường, đường đi, giáo là sự dạy dỗ), 400 triệu người

Đạo Phật .Số lượng giáo đồ: 365 triệu (tín đồ chính thức); 1,2-1,6 tỷ (tính cả tín đồ không chính thức).

Quốc gia chính: Đông Á và Ấn Độ, một số nước Đông Nam Á.

Nho giáo.Số lượng giáo đồ: 150 triệu người

Tôn giáo truyền thống Châu Phi .Số lượng giáo đồ: 100 triệu người. Quốc gia chính: Châu Phi.

Thần đạo .Số lượng giáo đồ: 30 triệu. Quốc gia chính: Nhật Bản.

Thần đạo có rất nhiều các Thần Thánh, có đến 8 triệu thần (神 kami). Tuy một số các vị thần này được nhân cách hóa, đa phần các thần liên quan đến thiên nhiên như linh hồn của đất, trời, Mặt Trăng, cây cỏ, hoa lá .

Tổng công , phụ thêm nhiều tôn giáo khác, khá nhỏ khắp địa cầu.

Có vào khoảng 2 + tỷ người có đức tin.

Cô vào khoảng 2 tỷ người có lắm lúc nhắc đến một vị lãnh tụ tôn giáo khi gặp hoạn nạn, hiểm nguy

Số còn lại hơn 3.5-tỷ không theo một tôn giáo nào và không hề nghĩ đến một tôn giáo nào lúc nguy biến.

Còn hơn 0.5 tỷ người, thống kê không biết đến.

Thông thường , phải gặp nghịch cảnh đau đớn tột độ, cầu xin, được toại nguyện, rồi mới tin.

Tiểu để có quá nhiều thân hữu, ở trong trường hợp này.

Lúc đau ốm nghiệt ngã, bạn hữu ốm sức khỏe đã tàn, đến thăm, tận tình chỉ dạy tiểu đệ, nên theo tôn giáo nào, Vì sao ?

Một người , suốt đời không bao giờ gặp rắc rối, đen tối là một người hết sức mày mắn,  kiếp trước đã khổ tu, kiếp này được hưởng, Ngu đệ tin vậy.

1-Cuộc đời tiểu đệ gập muôn vàn đau đớn, khó khăn về nhiều phương diện.

Nhờ cầu Nguyện, may mà còn thoi thóp.Tiểu đệ, gặp nhiều dịp phải đi vào cõi chết, nhưng thoát được, nên tin .

Vượt biên , gặp mưa to gió lớn, trôi giạt.

Ghe nhỏ (18 người ) đến được bãi cát, quì gối cầu nguyện

Nhờ vậy đến được bến bờ,và may không gặp hải tặc.

Cuộc đời này có những đấng cao siêu, nếu gõ cửa sẽ được giúp .

2-Tiếu ngạo giang có hai đoàn,  mỗi đoàn 12 người,  

Đoàn đã tham gia vụ tổng thống Thiệu tham nhũng, theo lịnh của Trần  văn  Huong, tham những ở Đó thành Saigon, DK NHIEU. Vụ Ông già Bến Tranh. Có tiếp xúc mới được biết bà NT Mai Anh ( vợ tt Thieu) có một khả năng đối đáp tinh tế, khôn ngoan tuyệt vời.

Gần 12 năm tiểu ngạo. Nếu không có sự che chở, tiểu đệ đã chết ở Pleiku, Kontum, quận Hồng Ngự (Châu Đốc), quận Ba tơ (Q Ngai ), quân Đồng Hà (QTri) v..v...

Mới đây, tiêu để tránh khỏi một tai nạn xe hơi, một cách kỳ lạ.

Suốt ngày hôm sau, tiểu đệ quì lạy và tụng niệm.

Quì lạy để cảm ơn trên Sống được làm Người, diệu kỳ thay.

Ra hải ngoại lại tiếp tục kiếp giang hồ, phải bayđến nơi làm việc, ghé nhiều rồi đổ xuống Macedonesia, khá gần Philippines. Cứ ba tháng lại bay về nghĩ và phục trình 2 tuần rồi lại one the road, Fly again. Bay mãi rất nhiều năm (trên 20). Đúng là kiếp con rệp.

Tại sao chúng ta lại rất dễ dàng quên đi những mục tiêu cao cả của mình:

rèn luyện sức khỏe , ăn uống lành mạnh hơn, không sân si, thiền để tịnh tâm hoặc theo đuổi những ước mơ…….

 Theo nhiều kinh điển. Được sinh ra làm Người, đó là một phép lạ.

Làm được người tốt, có học hiệu cao, phẩm hạnh tốt là nhờ tiền kiếp có nhiều công tu luyện. Có được sự sống, nhờ cha mẹ chịu khó cây cuốc, làm việc. Có sức khỏe, đến được trường học, đêm ngủ có mái che trên đầu, có đủ phương tiện căn bản để thân thể chiụ được khi khí hậu, thời tiết thay đổi. Đó là sự nhiệm mầu.

 Mời các Ti Huynh đến Bangladesh, Ân độ, Nigeria   .. để nhìn thấy thực trạng của cuộc sống con người.

 Tiểu đệ có đến Niegaran nên đã thấy người dân Nigeria đang sống trong những điều kiện, vùng rộng đang cư ngụ quá bẩn thỉu, thiếu vệ sinh cao độ,những xóm chòi mục nát, hôi hám bẩn thỉu vô cùng tận................không tưởng tượng nổi.

Nigeria là một quốc gia ở Tây Phi. Nước này có chung biên giới trên đất liền với Cộng hòa Benin ở phía tây, Chad và Cameroon ở phía đông, và Niger ở phía bắc. Bờ biển của nước này nằm bên Vịnh Guinea ở phía nam và nước này giáp hồ Chad ở phía đông bắc.Le Nigeria est un pays situé en Af

Con người sống trên đời có bát cơm ăn, một ngày một bữa đã là số có Phước.

Tôn giáo dạy ta điều gì?

Sống chính trực, có ích cho xã hội: Một người con thành tài, có đạo đức, được xã hội tôn trọng, là niềm tự hào lớn nhất của cha mẹ.

 Ngược lại, người con làm ăn bừa bãi, phạm ph́áp, vô đạo đức, làm cha mẹ phải cúi đầu, che mặt trước láng giềng, hàng xóm – chó là sự bất hiếu lớn nhất.
Hòa hợp gia đình: Anh em ruột thịt yêu thương, giúp đỡ nhau, không tranh chấp tài sản, không để cha mẹ phải canh chừng, lo lắng. Một gia đình con cháu hòa hợp, vợ chồng kính trọng nhau chính là món quà hiếu thảo to lớn nhất dành cho người già.

Khi ra hải ngoại , sống cần tôn trọng luật lệ của nước Người, nên tránh dùng trí óc để dành được lợi ích to lớn, kém đạo đức; thu góp tiền bạc một cách bất chính.

Cần sống ngay, sông thẳng, dù có đói nghèo, rách nát. Chúng ta đến xứ Người để mong có chút không khí TỪ ĐÓ để thờ.

 Bất kỳ tôn giáo nào, cũng chỉ đây điều hay lẽ phải.

Theo ngụ ý, người có đức tin, sóng mạnh và khoẻ hơn.

Tôn giáo, cứu giúp loài người .

Ngu đệ tin như vậy.

GARY HART / USA / OCT / 23 / 2026-

 

HỌC PROGRAM PHÒNG THỦ CHÔNG ĐẠN Đ̣ICH.

 Sau khi học cách vẽ hình theo theo SXG và cách làm hình di chuyển theo SMIL, chúng ta áp dụng kiến thức để viết program như sau gọi là “Phong Thủ Chống Đạn Địch “.

           Program gồm có 5 phần.

1-Vẽ đạn hinh tron của địch màu xanh va làm di chuyển tới mục tiêu theo animate attributeName của SMIL.

2-Vẻ radar hình ellipse có mãu vàng và làm ellipse rung chuyển (rotate) từ zero tỡi 360 độ.

3-Vẽ cần phát sóng radar maù đỏ quay tử zero tới 360 độ.

4-Viết tọa đế của nut START và STOP.

5-Vẽ sau cùng hinh võng tròn có mảu đỏ làm đạn chận đạn địch            

           ĐÂY PROGRAM RẤT DỄ DÀNG.

           Copy, post vào Notepad, mở với Google

  <html xmlns="http://www.w3.org/1999/xhtml">

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

       width="5000"  height="3000">  

    //1-vẽ đạn của địch mau xanh

  <g id="bullet" transform="translate(250,150)">   

<circle cx="0" cy="30" r="15" stroke="green" fill="blue">

     <animate attributeName="cx" dur="2" from="290" to ="50" begin="B.click" end="S.click" repeatCount="indefinite"/>

   </circle>

</g>

    // 2-vẽ radar màu vang hinh ellipse chuyển động.

     <g id="radar" transform="translate(175,150)">

     <ellipse cx="0" cy="0" rx="40" ry="35" stroke="red" fill="yellow">   

     <animateTransform  attributeName="transform" type="rotate"

      dur="1" from="0" to ="360" begin="B.click" end="S.click" repeatCount="indefinite"/>

     </ellipse>  

   //3-vẽ cần phát sóng của radar. 

     <line x1="0" y1="0" x2="150" y2="0" stroke="red" stroke-width="2">

     <animateTransform  attributeName="transform" type="rotate"

       dur="2" from="0" to ="360" begin="B.click" end="S.click"   repeatCount="indefinite"/>

     </line>

     // 4-chọn toạ độ cho Start va Stop

     <g id="B">

     <text x="-40" y="10" font-size="20">START</g>

     <g id="S">

     <text x="35" y="15" font-size="20">STOP</g>               

     // 5-vẽ đạn ngăn chận địch

     <circle cx="0" cy="40" r="12" stroke="blue" fill="red">

     <animateMotion dur="4" from ="60,100" to ="150,-120" begin="B.click" end="S.click" repeatCount="indefinite"/>

     </circle>

   </g></svg></html>

Chú Ý.

Nhớ điều chỉnh thời gian  duration và tọa độ của đạn bẵn lên chận đạn của địch.

                        

LÝ DO HỌC VẼ HÌNH BẰNG SVG

 I- LÝ THUYẾT SƠ BỘ.

SVG (Scalable Vector Graphics) là ngôn ngữ ( language ) dùng để vẽ hình hai chiều trong Browser bằng cách viết code của tọa đố x,y trong SVG và được xem như XML

SVG đã thành tiêu chuẩn quốc tế W3 từ năm 1999.

Do đó nếu Browser nào không hổ trợ SVG thì không thể vẽ gì được.

Dung cãch goị là Transform cua SVG và dùng Browser Google rất tốt như hinh vẽ nầy gồm có vòng tròn di chuyển trên 3 cạnh của hình tam gỉac.

Dưới đây có 4 bài hương dần vẽ căn bản cần học trươc.

SVG có những tiện lợi là dễ thực hành, đơn giản, dễ nhớ và chúng ta làm hình vẽ di động rất dể dàng với SMIL ( Synchronized Multimedia Integration Language ) , 

Với SVG,chúng ta có thể vẽ được 3 loại hình là : Vector Graphics Shapes, Images, Text.

 Hình  SVG có thể được thu nhỏ hay phình lớn tuỳ theo kích thước ấn định nhưng hình không bị nhòa như hình bitmap vẽ bằng html 5 Canvas.

Trước khi vẽ chúng ta cần biễt Transform cua SVG là gỉ?

SVG có một đặc điểm rất hay gọi là transform attribute. Dùng đặc điểm nầy chúng ta có thể thay đổi vị trí của tọa độ, thay đổi hình dạ̣ng và thay đổi độ lớn hay độ nhỏ của hình vẽ mà không cần phải vẽ lại hình khác.

        Transform attribute của SVG gồm có.

1-Transform=” translate(x,y)” để chuyển đổi vị trí toạ độ nếu hình vẽ bị che khuất.

  Thí dụ transform=” translate(175, 150)”.Nếu không xác định y thì default sẽ cho 0

2-Transform=” scale (x,y)” để thay đổi hình vẽ lớn hơn hay nhỏ hơn tùy ý của người vẽ.

  Thí dụ transform="scale(0.5)”.Nếu chỉ chọn một con số cho scale mà thôi thì tòan bộ thành phần của hình sẽ theo scale của con số đó.

3-Transform=”rotate(angle,cx,cy)” để xoay chuyển hình vẽ theo góc độ và thay đổi tâm (center ) của hình.

   Thí dụ transform=” rotate(45,100,100)”.Nếu không xác định cx và cy thì default sẽ rotate chung  quanh vị trí đã có ( rotates around the origin)

4-Transform=”skewX(angle)” làm hình nghiên vào trục X.

  Thí dụ transform=”skewX(5)”.Khỏang cách giữa hình và trục là tan của góc ( the distance of skew is the tan of the angle)

5- Transform=”skewY(angle)” làm hình nghiên với trục Y

  Thí dụ transform=” skewY(5)"

II-THỰC TẬP.

Gồm có 4 bài căn bản cần nhớ.

1-Vẽ vòng tròn theo ý muốn rồi cho di chuyển tới lui giữa hai tọa độ.

2-Vè vòng tròn di chuyển trên một quỹ đạo là 3 cạnh của hình tam giac.

3-Vẽ vòng trôn di chuyển trên quỹ đạo là hinh ellipse.

4-Vẽ cần phát sóng điện quay 360 độ để viết program phòng th̉ủ. 

I–BÀI SỘ 1-

         VẼ MỘT VONG TRÒN THEO Ý MUỐN.

 Trước hết phải ấn đính kích thước đo bằng pixel của khung hình để ve goị là Viewport .

 cx và cy là toạ độ của tâm vòng tron. r là bán kính.

Tô vòng tròn màu đỏ viền vòng tròn màu xanh có bề day của viền theo ý múôn.

  a-Đây là program vẽ một vòng tròn.    

 <svg  xmlns="http://www.w3.org/2000/svg"      width="100%" height="100%">    

 <circle  cx="200" cy="50" r="50" fill="red" stroke="blue" stroke-width ="10">

</circle>

 </svg>

  Hình vòng tròn xuất hiện trong viewport..

 Viewport có hai trục tọa độ x và y là khung sẽ chứa hình vẽ.

Width  nằm ngang trên trục x và Height  nằm thẳng đứng trân trục y nhưng hương xuống dưới trục x.

Muốn y vượt lên trên trục x thi phải viết thêm dấu trừ cạnh chữ y.Thí dụ:  -y

Thí dụ y= ”-160”. vật sẽ vượt lên trên trục x  tới 160 trên trục y. Đơn vị tính trên hai trục là pixel.Tất cả hình vẽ nằm trong viewport có độ lớn tự động được tính bằng pixel .

b- Đây program làm vòng tròn di chuyển tới lui. 

<svg  xmlns="http://www.w3.org/2000/svg"       width="100%" height="100%">     

<g>

<circle  cx="200" cy="50" r="50" fill="red" stroke="blue" stroke-width ="10">

<animateMotion dur="3" from="100,90" to="400,90" repeatCount="indefinite"/>

</animateMotion>

</circle>

</g>

</svg> 

Muốn làm vong trõn của SVG chuyễn đông thi phải dùng phương pháp goị là SMIL ( Synchronized Multimedia Integration Language ).

Phương pháp ầy xuât hiện năm 1998

Hình vẽ giông như chiếc xe. SMIL giống như tài xế.

Viết tái xế trong xe nghĩa là viết chữ animateMotion.  

BÀI SỔ 2-

 VONG TRON CHẠY TRÊN 3 CẠNH  HÌNH TAM GIÁC.

Đây là program.

Vẽ riêng quỹ đaọ hinh tam giác có id=”uphill” như sau.

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

     width="100%" height="100%">     

  <g> // code nầy sẽ xuất hịên hình tam giác.

  <path id="uphill" d="M 80 200,L 160 100,320 250  Z"

  stroke="darkgreen" stroke-width="4" fill="none"/>

  </g>

  //viết riêng code của vỏng tr̀on dưới code của hình tam giac như sau.

  <g transform="translate(-160,-160)"> //nhớ có dấu trừ.  

  <circle cx="160" cy="155" r="35" stroke="blue" stroke-width "10" fill="red"/>

  <animateMotion dur="10" rotate="auto" repeatCount="indefinite">

  <mpath xlink:href="#uphill"/>// nhớ có dấu #

  </animateMotion>

  </g></svg>

BÀI SỐ 3-

VÒNG TRÒN DI CHUYỂN TRÊN QUỸ ĐẠO ELLIPSE

Đây program lam vòng tròn di chuyển trên ellipse.

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

         width="100%" height="100%">     

     <g> // phương pháp nầy chỉ dùng vẽ ellipse.

       <path id ="ellipse"

            d="M 225,275

            a 100, 50 0 1,1  0,0.00099"Z

       cx ="200" cy="160" rx = "120" ry = "70"

       stroke="black" stroke-width="5" fill="none"/>

     </g>

     <g transform="translate(x,y)">// không cho tọa độ thi default

     // phai có transform thi quà cầu mới nằm trên ellipse.

     <circle cx="6" cy="3" r="35" stroke="blue" stroke-width ="10" fill="red"/>

     <animateMotion dur="10" rotate="auto" repeatCount="indefinite">

     <mpath xlink:href="#ellipse"/>//phải có mpath trong animate Motion

     </animateMotion>

     </circle>

     </g></svg>

  

Chú ý cách vẽ ellipse như sau.

Phải có chữ  path id. Chữ d="M 225,275  nghĩa là di huyển ngòì bút vẽ tới địa điểm M có tóa độ 225,275 .Rồi di chuyển ngoì bút tới đặc điểm của hình vẽ là  : a 100, 50 0 1,1  0,0.00099" Z .

Chử a nghĩa lả arc ,đường cong. Chư Z nghĩa la closepath.

Khi chọn vẽ theo phương pháp path thi phải có đu nhừng chữ d , a, M , Z. Nễu thiếu hình không xuất hiện.

100, 50 là độ dai của hai trục ellipse.

 Con sô O là góc quay của ellipse.

Hai con số 1, 1 có nghĩa như sau.

Co số 1 đầu tiên lam cho ellipse lớn hơn hoặc bằng 180.

Con số 1 tiểp theo làm cho ellipse ở phần dương, nằm trên trục hoành

Nếu thay bằng con sổ O thi ellipse sẽ ở phần âm ,sẽ ở dưới trục hoành.

Con số 0,0.00099 Z làm cho ellipse khép kín. 

Nếu muốn ellipse không khép kín thì viết  O,OO9 Z họăć 0,1Z hay 0,25Z

BAI SỐ 4-

LÀM CẦN PHÁT SÓNG ĐỊÊN QUAY 360 ĐỘ

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

         width="100%" height="100%">     

         // vẽ cần phát sóng cho quay tròn như sau.

 <g transform="translate(200,200)"> //để làm xê dịch toạ đố

<line x1="100" y1="50" x2="0" y2="0" stroke="red" stroke-width="5">

     <animateTransform  attributeName="transform" type="rotate"

       dur="2" from="0" to ="360" begin="B.click" end="S.click"   repeatCount="indefinite"/>

  </line>  

       // xác định nũt START và Nút STOP như sau.  

     <g id="B">

        <text x="200" y="100" font-size="20">START</g>

      <g id="S">

        <text x="300" y="100" font-size="20">STOP</g> 

     </g> </svg>

CHÚ Ý.

Y1 càng lớn thì cân càng dài.

Nếu x2=0 nhưng y2 không bằng 0 thì cái gốc của cần phải chạy vòng tròn không cố định một chổ.

Nhớ attributeName là vật phải có tên rõ ràng thí dụ x, y, transform.

Trong bài nầy dùng attributeName là transform để transform chuyển động.Nêu dùng cho x thì x chuyển động.

 

------------------

 CẪ̀U CHÚC HỌC NHANH XÂY DỰNG VN HÙNG MẠNH.