Stylie - CSS สร้างเว็บแอนิเมชันฟรี

หากคุณต่อสู้กับไวยากรณ์ CSS3 และต้องการ วิธีง่ายๆในการสร้างภาพเคลื่อนไหว Stylie เป็นเครื่องมือที่ยอดเยี่ยมในการบันทึก.

นี่เป็นหนึ่งในหลาย ๆ ฟรี เครื่องกำเนิดรหัส ด้วยการเน้นไปที่เอฟเฟกต์ภาพเคลื่อนไหว CSS ล้วนๆ Stylie ให้บริการฟรีและโอเพนซอร์สทั้งหมดโฮสต์ใน GitHub และสนับสนุนโดยห้องสมุดคีย์เฟรมชื่อ Rekapi.

ไลบรารี Rekapi ใช้ JavaScript, ดังนั้นมันจึงเป็นทางเลือกของ CSS บริสุทธิ์ และโชคดีที่เว็บแอป Stylie รองรับทั้งสองวิธีคุณจึงทำได้ รหัสการส่งออกใน CSS หรือจาวาสคริปต์อย่างแท้จริง.

ตามค่าเริ่มต้นหน้าแรกจะโหลดตัวอย่างแอนิเมชั่นต่อเนื่องพร้อมแอนิเมชั่นเชิงเส้น คุณสามารถเล่นกับสิ่งนี้ได้โดยการแก้ไข การตั้งค่าเริ่มต้น ใน แท็บโมชั่น หรือโดยการแก้ไข แท็บ Keyframes.

ในรายการคีย์เฟรมคุณสามารถ เพิ่มคีย์เฟรมใหม่, แก้ไขระยะเวลารวมของพวกเขา, และ เปลี่ยนลักษณะภาพเคลื่อนไหว, รวมถึงการเคลื่อนไหวตามแกน X / Y.

ครั้งแรกนี้จะมีลักษณะ สับสนอย่างมาก, โดยเฉพาะอย่างยิ่งถ้าคุณไม่เคยทำภาพเคลื่อนไหวเฟรมหลักมาก่อน อย่างไรก็ตามยิ่งคุณเล่นกับแอปพลิเคชั่นนี้มาก.

คุณจะได้เป็นตัน ตัวเลือกการผ่อนคลายที่แตกต่างกัน เพื่อยุ่งกับและพวกเขาทั้งหมดง่ายสุดในการปรับแต่ง.

กราฟเคลื่อนไหว มันยากกว่าที่จะเรียนรู้ แต่มันช่วยให้คุณควบคุมการเคลื่อนไหวของคุณได้ง่ายขึ้น Stylie ยังช่วยให้คุณ บันทึกผลการเคลื่อนไหวที่กำหนดเอง และ ใช้ซ้ำเหล่านี้ ในแท็บ Keyframes สำหรับภาพเคลื่อนไหวอื่น ๆ.

ถ้าฉันสามารถบ่นเกี่ยวกับสิ่งหนึ่งมันเป็นของแอปบนเว็บ ขาดการออกแบบที่ตอบสนอง.

ฉันไม่สามารถให้แอปทั้งหมดพอดีกับหน้าจอ MacBook Pro 13 "ของฉันแม้จะเบราว์เซอร์ขยายใหญ่สุดแล้วก็ตามนี่อาจเป็นปัญหาได้เนื่องจากหน้าเว็บไม่มีแถบเลื่อนแนวตั้ง ที่ต่ำกว่าในบานหน้าต่างการตั้งค่า.

แต่นอกเหนือจากความรำคาญเล็กน้อยนี้ฉันได้มันทำงานได้ดีบนหน้าจอขนาดใหญ่ของฉัน และ คุณภาพการส่งออก ไม่เหมือนที่คุณพบในเว็บ.

ลองดูที่แอพ Stylie เพื่อดูว่ามันทำงานอย่างไรและลองเล่นซอกับตัวเลือกบางอย่าง เมื่อคุณสร้างภาพเคลื่อนไหวของคุณคุณสามารถ ส่งออก CSS หรือ JavaScript และใช้มันสำหรับโครงการใด ๆ ที่คุณต้องการ.

หากคุณมีปัญหาในการเรียนรู้เกี่ยวกับอินเทอร์เฟซคุณสามารถดูบทแนะนำสั้น ๆ นี้ซึ่งยาวประมาณ 9 นาทีและครอบคลุมคุณสมบัติหลักทั้งหมด.