“Phải làm gì để đáp ứng trải nghiệm người dùng? Tương tác thế nào sẽ sáng tạo và thú vị nhất?” Đây là một câu hỏi thường gặp khi thiết kế giao diện và Web Animation là một cách để khiến giao diện trở nên thú vị hơn. Những hiệu ứng sống động từ animation gần như đóng góp đáng kể vào sự thành công của một website. Bằng chứng rằng chỉ với một vài icon nhấp nháy, menu linh hoạt, hình ảnh chuyển động cũng đã đủ khiến người truy cập thêm tò mò, thích thú.
Tuy nhiên, để tạo ra các animation này không hề dễ. Chính vì vậy, có rất nhiều thử việc được tạo ra nhằm hỗ trợ tạo ra các animation đẹp mắt mà bạn không cần phải code quá nhiều hay sử dụng các loại file nặng như gift. Thư viện https://lottiefiles.com/ này hỗ trợ bạn tạo animation dựa trên các phần tử html mà bạn đã tạo ra.
LottieFiles là đơn vị cung cấp bộ libraries để đọc file JSON và translate nó thành animation trên rất nhiều các nền tảng khác nhau (ví dụ: Web, iOS, Android, Flutter, React Native…).
Ngoài ra thì nhờ bộ Plugin của Lottie Files mà mình export được animation từ After effects thành file JSON sau đó mang đi sử dụng thoải mái trên nhiều nền tảng. Lợi thế lớn nhất của file JSON là cực kì nhẹ, work được ở nhiều nền tảng thiết bị nhờ bộ libraries Lottie Files cung cấp, nhưng anh em Dev lại có thể resize thoải mái mà không sợ bị vỡ pixel như Gif. Tưởng tượng vui thế này, coi file PNG Sequence là 1 con khủng long, file GIF sẽ là 1 chú voi, thì file Json chỉ nhỏ xinh tương đương chú cún con thôi. Chính vì vậy khi đưa vào Code sẽ giúp cải thiện performance của Mobile App, Web rất nhiều.
Nếu bạn có kinh nghiệm với Ae:
Sau khi thiết kế ra bản animation của mình trên After Effect, mọi người dùng Plugin Lottie Files hoặc BodyMovin trên After Effect để render animation ra file JSON, preview nhanh animation, upload file JSON lên thư viện cá nhân trên Lottie Files hoặc scan QR code để xem animation nhanh trên điện thoại cho nó ngầu…những plugin này giúp đưa các file JSON vào trong design của mình để preview xem trực tiếp luôn
Mọi người có thể upload trực tiếp file JSON lên Lottie Editor, ở đây mình preview, edit được màu sắc các layer, background color, animation speed,… hoặc Convert file JSON sang GIF… Còn nhiều tính năng khác thì Ae muốn nghiên cứu sâu thì lên đấy mà vọc vạch
Với tính năng và tiện ích xịn, LottieFiles ngày một phổ biến hơn rất nhiều. Thư viện animation Lottie Files hiện nay khá phong phú và đa dạng. Mọi người có thể tải free bất kì animation nào từ thư viện này, hoặc chính bản thân có thể đóng góp vào thư viện bằng cách upload animation của mình lên, share free hoặc bán nếu thích
