Hiểu biết sâu sắc về Lottie để nâng cao kỹ năng của nhà thiết kế

Một thư viện được tạo ra bởi Airbnb
Bắt đầu với Lottie 🎈

hình ảnh chuyển động
Bạn có muốn làm điều đó không?

Bạn đã nghe đến Lottie , thư viện nổi tiếng do Airbnb tạo ra chưa?

Trước tiên, hãy cùng tìm hiểu về Lottie. Đây là công nghệ xuất dữ liệu cho các hiệu ứng chuyển động dưới dạng JSON, cho phép áp dụng chúng dưới dạng mã thực tế trên web và trong ứng dụng . Việc tìm hiểu công nghệ này sẽ cho phép bạn triển khai các hiệu ứng chuyển động mà không cần dựa vào GIF hoặc video.

Khóa học này sẽ cung cấp cho bạn mọi kiến thức cần thiết về Lottie. Trước tiên, chúng ta sẽ thiết lập môi trường sử dụng Lottie, sau đó học cách chuyển đổi hoạt ảnh được tạo trong After Effects thành mã bằng Bodymovin và triển khai các tương tác khác nhau bằng JavaScript.

Được thực hiện với Lottie
hình ảnh động

_{Bạn có thể xem thêm các ví dụ được thực hiện bằng lottie tại liên kết đó.}

_{Ví dụ - Màn hình chạy hoạt ảnh Roti khi nhấp vào}

_{Ví dụ - Chạy hoạt ảnh Roti dựa trên độ sâu cuộn}

_{Ví dụ - Hoạt ảnh được tạo và xuất ra bằng After Effects}

Ai sẽ được lợi khi lắng nghe?

_{Đứng yên
Không còn nữa
Không hài lòng
Nhà thiết kế đam mê}

_{Tôi đã làm việc trên nó
Hoạt hình thành mã
Tôi muốn áp dụng nó vào web
Nhà thiết kế có năng lực}

_{Lottie.js
Trong một thời gian ngắn
Tôi muốn học
Nhà xuất bản web}

Xin chào,
Nhà thiết kế sản phẩm viết mã
Đây là cơ sở thiết kế .

Tôi là một nhà thiết kế sản phẩm kiêm lập trình viên. Tôi đồng cảm sâu sắc với những thách thức mà các nhà thiết kế phải đối mặt và những lĩnh vực họ muốn triển khai.

Điều chúng ta đang cố gắng học không phải là điều gì đó quá khó khăn. Nó chỉ là một điều gì đó có vẻ khó khăn và bị né tránh, nhưng nếu bạn quyết tâm, ai cũng có thể làm được. Hãy học Roti và tạo ra những thiết kế hấp dẫn.

Xin lưu ý rằng khóa học này không hướng dẫn bạn cách tạo hoạt ảnh ấn tượng bằng After Effects. Khóa học tập trung vào cách xuất hoạt ảnh dưới dạng mã, áp dụng chúng lên web và triển khai tương tác bằng JavaScript. Khóa học này ngắn gọn và tập trung vào những kiến thức cơ bản.

Chúng ta hãy học theo thứ tự nhé!

Tổng cộng có 9 video bài giảng được chuẩn bị, chia thành hai phần: cơ bản và nâng cao.
Về cơ bản, bạn sẽ học cách phân tích mã Lottie và chia nhỏ thành các tệp HTML, CSS, JS và JSON dễ sử dụng. Bạn cũng sẽ học cách sử dụng các tính năng tích hợp sẵn của Lottie.

_{Tách mã phức tạp, không có tổ chức thành các tệp}

Trong các trường hợp nâng cao, bạn có thể thực hiện nhiều tương tác khác nhau, chẳng hạn như di chuột, cuộn và nhấp chuột, thông qua JavaScript. Đây là điểm khác biệt lớn nhất so với GIF: bạn có thể trực tiếp điều khiển khung hình theo ý muốn.

_{Triển khai mã tương tác trực tiếp trong JavaScript}

Những câu hỏi thường gặp 💬