CanvasPod: Perform Animations without Code



ได้พบกับความมหัศจรรย์ยิ่ง ผมคิดว่าแรงบันดาลใจของผู้สร้างน่าจะมาจากการที่ Designer และ Developer คุยกันแล้วงงๆ ว่าอยากได้ Animation แบบไหน อีกอย่างคือการ Perform Animation ด้วย Code นั้น แม้ตอนนี้จะง่ายขึ้นเยอะ แต่ก็ไม่ได้ง่ายนัก ถ้าคิดไม่ออก

ดังนั้นถ้าเป็นไปได้ Designer ทำเองเลยได้ไหม ? ทำอย่างไรให้พวกเขามาช่วยเราทำได้ล่ะ ?

Canvas จะมาช่วยทำให้เราสามารถทำ Animations ในหลายๆ รูปแบบ โดยไม่ต้องเขียน Code แม้แต่บรรทัดเดียว ยกเว้นต้องการ Perform แบบ Manual (เช่นให้ User กดปุ่มแล้วทำ) แต่เราจะไม่ต้องเขียน Code ในเชิง Animations เลย โดยเทคนิคที่เขาใช้คือ User Defined Runtime Attributes พูดง่ายๆ ก็คือให้เรากำหนดตัวแปรอะไรสักอย่าง ที่จะนำไปใช้เรียกฟังก์ชั่นอะไรสักอย่างตอน Runtime โดยที่เราแค่เลือกว่าจะให้มันทำอะไร โดยที่ไม่ต้องยุ่งกับ Code ของฟังก์ชั่นนั้นๆ

นอกจากนี้ Library ยังเปิดเป็น Open Source ให้ทุกคนเข้ามาร่วมพัฒนาด้วย และคิดว่าคงจะมีคนต่อยอด Library ตัวนี้อีกเยอะ เท่าที่ผมได้ลองเล่นดู มันเจ๋งจริงๆ

โดย Library อยู่ที่นี่ครับ https://github.com/CanvasPod/Canvas
ใครที่ใช้ CocoaPods ก็จัดไปตามนี้เลย

$ vim podfile
platform :ios, '7.0'
pod 'Canvas', '~> 0.1'

$ pod install && open projectName.xcworkspace

ในนั้นจะมี Demo App ให้เพลิดเพลินไปกับ Animations ทั้งหมดที่เล่นได้ ถึงเวลาละ ไปดูวิธีใช้งาน Library ตัวนี้กัน ขั้นแรกก็สร้าง View อะไรมาก็ได้ ผมเลือก UIImageView ในการสาธิตแล้วกันนะ ใส่รูป ปรับกลางจอ เรียบร้อย


จากนั้นก็ให้เลือกไปที่ Editor > Embed In > View จะเป็นการสร้าง View ขึ้นมาครอบ UIImageView ที่เราได้สร้างไว้อีกที (ดูได้จากรูปที่สอง)


จากนั้นก็ทำการใส่ค่า Runtime Attributes โดยค่าสำคัญที่ต้องใส่มีทั้งหมด 3 ค่าคือ

  • type ชื่อของ Animations ที่จะเลือกใช้
  • duration ระยะเวลาที่ Animations นั้นๆ ทำงาน
  • delay ระยะเวลาที่จะหน่วงไว้ก่อน Animations นั้นๆ จะทำงาน
โดยให้เราเลือกที่ View ที่ UIImageView ถูก Embed อยู่และเปลี่ยน Custom Class เป็น CSAnimationView และตั้งค่าที่ช่อง User Defined Runtime Attributes

ลอง Run ดูเลยครับ เท่านี้เอง ชิวมากๆ คราวนี้เราจะดู Type ของ Animations แต่ละตัวได้จากไหน
ไปที่ Canvaspod.io ได้เลยครับ เลือกที่แทบ Animation ก็จะเห็น List ทั้งหมด และสิ่งที่จะพิมพ์ในช่อง Type คือ CamelCase ของชื่อเหล่านั้นเช่น
  • Bounce Left -> bounceLeft
  • Zoom Out -> zoomOut
  • Flash -> flash
แล้วถ้าเราอยากจะ Perform Animation แบบ Manual ล่ะ ? แบบอยากให้กดปุ่มแล้วค่อยให้ Aminations มันทำงาน ? ก็ทำได้เช่นกัน ขั้นก็สร้างปุ่มขึ้นมาสักอัน แล้วผูก IBAction กับฟังก์ชั่นให้เรียบร้อย ของผมชื่อ PerformAnimation: แล้วกันนะ


จากนั้นใน Code ก็ทำเท่านี้เองครับ สร้าง IBOutlet ของ UIView ที่ UIImageView ทำการ Embed อยู่แล้วจากนั้นก็สั่งให้ View นั้นเรียกฟังก์ชั่น startCanvasAnimation ในฟังก์ชั่นของการกดปุ่ม .. อ๊ะ อย่าลืม import <Canvas/CSAnimationView.h> นะครับ (ในกรณีที่ไม่ใช้ CocoaPods น่าจะ import "CSAnimationView.h" ได้เลยนะ)


ง่ายขึ้นเยอะไหมครับ การทำ Animation ใครอยากรู้ว่าเขาทำอย่างไร ก็ไปแงะ Code ดูกันได้เพราะเขา Open Source นี่นา นอกจากนั้น CanvasPods ยังทำอะไรได้อีกหลายอย่างนอกจากการทำ Animations โดยใช้เทคนิคของ Runtime Attributes เช่นเดียวกัน (เช่น Custom Fonts) ลองไปศึกษากันที่หน้าเว็บนะครับ 

Wow! ชีวิตง่ายขึ้นเยอะ 

Popular posts from this blog

12 วิธี การบริการและดูแลลูกค้าในร้าน Starbucks

"อีสุกอีใส" ประสบการณ์เมื่อต้องมาเป็นตอนอายุ 22

[Android Dev] การติดตั้ง Eclipse+AndroidSDK เพื่อพัฒนาโปรแกรมบน Android