Vizible’s Blog

OpenLaszlo : Simple Animation

Posted in Programming by wearetherock on October 24, 2008
  1. <canvas>
  2.    <window resizable=“true” width=“250” height=“100”>
  3.       <text id=“msg” text=“Hello Laszlo”                            
  4.             resize=“true” align=“center”
  5.             fontsize=“${immediateparent.width/7}”                  
  6.             height=“${immediateparent.height}”/>                  
  7.       <animatorgroup process=“sequential” repeat=“Infinity”>        
  8.           <animatorgroup process=“simultaneous”>                    
  9.              <animator attribute=“width” to=“500” duration=“1500”/>
  10.              <animator attribute=“height” to=“150” duration=“1500”/>
  11.           </animatorgroup>                                          
  12.           <animatorgroup process=“simultaneous”>                    
  13.              <animator attribute=“width” to=“250” duration=“1500”/>
  14.              <animator attribute=“height” to=“100” duration=“1500”/>
  15.           </animatorgroup>                                          
  16.       </animatorgroup>
  17.    </window>
  18. </canvas>

Animation เพิ่มและลดขนาดของ window
สร้าง window มีความ กว้างความสูง 250×100 ภายในมีข้อความ Hello Laszlo ซึ่งข้อความนี้จะขยายขนาดตามความกว้าง ความสูงของ window (immediateparent.height) , ใน window มีการนิยาม animationgroup ซึ่งเป็น tag สำหรับสร้าง animation โดยกำหนดเป็นแบบต่อเนื่อง (sequential) วนซ้ำไม่หยุด (animationgroup นอกจะควบคุม animationgroup ใน) process = simulaneous หมายความว่า ให้ animator สองอันภายในทำงานพร้อมๆกัน ดังนั้นความกว้างความสูงของ window จะเพิ่ม/ลด พร้อมๆ กัน (ตาม to=”xx”)

ตัวอย่างโค้ดและรูปภาพจาก Manning: Laszlo in Action

Advertisements
Tagged with: , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: