Review 2 design tools for making life of a developer easier !

สวัสดีค่ะ iOS Developer ทุกท่าน
หากคุณเคยประสบกับปัญหาการทำ Animation/Motion
ตามที่ทีมดีไซน์วางไว้ ไม่เหมือนสักที! วันนี้เรามีทางออกให้กับคุณ

โดยในบทความนี้ จะมารีวิว 2 เครื่องมือ ที่ทำให้ชีวิตนักพัฒนาอย่างเราง่ายขึ้นเยอะ
และยังทำให้แอพของเราดูแพงขึ้นได้อีกด้วย

1. Lottie for iOS, MacOS (and Android and React Native)

Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with bodymovin and renders the vector animations natively on mobile and through React Native!

จาก บทความ ของ พี่เติ้ล Hanii พี่ Designer ของเรา
ได้พูดถึงการใช้งานของ Tool ตัวนี้ ที่สามารถ Export ไฟล์ Motion ออกมาจากโปรแกรม After Effect ให้เป็น .json file และนำมาให้ developer ใช้งานกันนั้น

ในบทความนี้ ทางผู้เขียนก็จะมาขออธิบาย ในส่วนของ Developer
ว่าเราต้องทำอย่างไรกันบ้าง

1. รอ
2. รอ
..
99. รอ
100. รอ …

รอจนกว่า พี่ดีไซน์ของเรา จะ export .json file มาให้ แฮ่ ….

หลังจากที่ได้ file มาแล้ว ก็นำ file .json ที่ได้ ไปยัดไว้ใน Xcode project navigator ของเราเลย ก็จะเห็นผลลัพธ์ของ file ที่โปรแกรม After Effect Export มาให้เรา
มีรูปแบบประมาณนี้

หืมมม อะไรจะยั้วเยี้ยะขนาดนั้นน 0.0

จากนั้นเราก็ใส่คำสั่ง ในการดึง Animation ในไฟล์ออกมาใช้งาน ดังนี้

func showAnimation() {
var animation = LOTAnimationView(name: "Heart") animation.contentMode = .scaleAspectFit 
viewImage.addSubview(animation)
animation.play(completion: { finished in
    // Do Something or loop an animation
})
}

ก็จะได้ผลลัพท์ก็จะประมาณนี้

ในตัวอย่างนี้ พยายามจะลองอ้างอิงตาม Animation จากการ กด love บน twitter นะคะ ><

จะเห็นได้ว่า ขั้นตอนของ Developer นั้นง่ายนิดเดียว เพียงแค่เรียก ใช้งานจากข้อมูลใน file .json นั้นเอง แอพเราก็จะดูแพงขึ้นมาทันที

แต่ !

ระหว่างที่ผู้เขียน และพี่ทีมดีไซน์ ได้ทำการทดลองใช้ tool ตัวนี้อยู่นั้น
ก็บังเอิญพบกับปัญหาที่ว่า ก่อนที่ designer จะ Export มาให้เรา มันเห็น Animation ได้ปกติ แต่พอทาง dev นำมาใช้งานนั้น Animation กลับไม่ออกซะงั้น O.o

เอาแล้วไง บัคผี มันมาแล้ววว ==”

ทางพี่ดีไซน์เลยรีเควส อยากจะได้ โปรแกรมอะไรสักอย่าง
เพื่อมาทดสอบ Animation เอง ก่อนทีจะส่งให้ทาง Dev ใช้งานอีกที

โอเค๊.. ได้เลยพี่…

จึงเป็นที่มาของโปรแกรม LottiePreview นี้ของผู้เขียนนั้นเอง

ดาว์นโหลดได้ที่ https://github.com/pimpapare/LottiePreviewApp ขายของกันเฉย ฮ่าา

โปรแกรมนี้เอาไว้ให้ Designer ได้ทดสอบ .json file ก่อนส่งให้ Dev ใช้งานนั้นเอง

สรุป

เจ้าตัวโปรแกรมนี้ ถือว่าใช้งานง่ายเลยทีเดียว (เพราะในฝั่ง Dev แค่ดึงข้อมูลจาก .json file มาใช้) จากแต่เดิม เรามีแค่ปุ่ม action ที่เอาไว้กดไปมา
แต่ตอนนี้ เราอาจจะเพิ่มลูกเล่น ให้มี animation สำหรับการกดปุ่มได้
หรืออาจจะเพิ่มลูกเล่น ในหน้าของ intro ให้มีภาพประกอบแบบ animation ได้
เท่านี้แอพเราดูแพงขึ้นมาได้ทันที

2. PaintCode

PaintCode is a vector drawing app that turns your drawings into Objective-C, Swift or C# drawing code in real time. The application window is divided into sections that provide you with quick & easy access to everything you’ll need.

เป็นอีกหนึ่ง tool ที่ทางพี่ดีไซน์ Sansern Wutthirat แนะนำมา
แล้วทางผู้เขียนคิดว่า เห้ย มันเวิร์คดีแหะ …

ก่อนอื่นเลย ขอเกริ่นถึงที่มากันก่อน
เริ่มโดยทางผู้เขียน โดน requirement ของ พี่ทีมดีไซน์
ให้ทำ UITextfield ตามแบบนี้ !

จริงๆจะใช้รูปเอาก็ได้ แต่ถ้าในกรณีที่ Device เป็น iPad แล้วมันยืดยาวละ …..คุณพระ O.O

Dev ตึ้บเลยทีเดียว …
แต่ค่อยยังชัวร์แหะ ที่พี่ทีมดีไซน์ ได้แนะนำ tool ตัวนี้ ให้เรามาลองใช้

มันคือ tool ที่เอาไว้วาด Vector จากโปรแกรม Paintcode
แล้ว export เป็นไฟล์ .swift ให้ Dev เอาไปใช้งานได้เลยทันที นั้นเอง

ตัวอย่างโค้ดจากไฟล์ ที่พี่ดีไซน์นำมาให้นั้นเอง ในตัวอย่างนี้คือ การทำ custom UITextfield นะคะ

ส่วนเรื่องโค้ดที่ทาง Dev ต้องทำเพิ่มเติมต่อ ก็แค่นี้เอง
สร้าง Class ให้ implement Element ที่เราต้องการทำ
และใน Element ของเรานั้น ให้ทำการ กำหนดให้เป็นตัวของ Class นี้อีกที

import UIKit
class CustomeTextfield: UITextField {
  override func draw(_ rect: CGRect) {
    StyleTextFeid.drawBgTextFeild()
  }
}

เราก็จะได้ผลลัพธ์ประมาณนี้

เพียงแค่นี้ UI บน App ของเราก็จะเหมือนตามที่ทีมดีไซน์วางไว้แล้ววว

เป็นการทำ View ที่ทาง Dev แทบจะไม่ต้องทำอะไรเลยจริงๆ 😂

สรุป

Tool ตัวนี้ ตอบโจทย์เรื่องของการ Custom View ได้อย่างมาก เพราะมันช่วยลดเวลาของ Dev สำหรับการเขียนโค้ด และช่วยให้ตรงใจกับทีมดีไซน์ที่สุด (เพราะทีมดีไซน์ ต้อง Export โค้ดส่วนนี้มาให้เราเอง o.o ) ดังนั้น ถ้าใครที่ต้องทำแอพที่มีการ Custom View และลูกเล่นเยอะ แนะนำให้ใช้ตัวนี้เลยได้เลยค่ะ เพราะเราจะได้ผลลัพธ์ที่ต้องการตามแบบ เป๊ะเป๊ะ