Hiểu biết sâu sắc về Lottie để nâng cao kỹ năng của nhà thiết kế
Bạn không còn cần phải dựa vào Gifs và Video nữa. Chúng ta sẽ tìm hiểu cách xuất hoạt ảnh được tạo trong After Effects dưới dạng mã và triển khai các tương tác khác nhau thông qua JavaScript. Bạn cũng có thể tạo một trang web hấp dẫn.
Cách xuất hoạt ảnh được thực hiện trong After Effects dưới dạng tệp Lottie
Cách triển khai chuyển động của đầu ra tệp JSON bằng Lottie trên web bằng JavaScript
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?
Lottie cho phép bạn tạo ra các hình ảnh động chất lượng cao Bạn có thể làm điều đó một cách thoải mái.
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 💬
H. Học làm bánh roti có lợi ích gì?
Bạn có thể áp dụng các hoạt ảnh được tạo bằng After Effects vào các ứng dụng web và ứng dụng. Yếu tố này giúp nâng cao chất lượng thiết kế của bạn.
H. Tôi là một nhà thiết kế nhưng không biết chút gì về code. Liệu điều này có giúp ích không?
Chỉ cần biết Lottie là gì và cách thức hoạt động của nó cũng có thể giúp việc cộng tác với các nhà phát triển trở nên thú vị hơn rất nhiều. Tuy nhiên, kiến thức cơ bản về HTML/CSS và JavaScript sẽ cho phép bạn sử dụng nó hiệu quả hơn nữa.
H. Tôi có cần chuẩn bị gì trước khi tham dự buổi thuyết trình không?
Các công cụ được sử dụng trong khóa học này là After Effects, Visual Studio và Illustrator. Bạn nên làm quen với các công cụ này. Hơn nữa, hiểu biết cơ bản về JavaScript là điều cần thiết để hoàn thành thành công các khóa học nâng cao.
H. Bạn có cung cấp các tệp mẫu không?
Tất nhiên, chúng tôi cung cấp các tệp ví dụ được sử dụng trong bài giảng để giúp bạn học tập dễ dàng nhất có thể.
H. Bạn có thể dạy tôi cách sử dụng After Effects hoặc tạo hoạt ảnh khô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. Nó tập trung vào cách xuất hoạt ảnh dưới dạng mã, áp dụng chúng vào web và triển khai tương tác bằng JavaScript.
Khuyến nghị cho những người này
Khóa học này dành cho ai?
Nhà thiết kế giao diện người dùng quan tâm đến hoạt ảnh và tương tác
Nhà thiết kế web giỏi viết mã web
Các nhà xuất bản web muốn tìm hiểu cách sử dụng Roti
Cần biết trước khi bắt đầu?
Kiến thức cơ bản về HTML và CSS
Kiến thức cơ bản về Javascript
Cách sử dụng After Effects
Xin chào Đây là
35,318
Học viên
395
Đánh giá
32
Trả lời
4.8
Xếp hạng
5
Các khóa học
디자인베이스는 누구나 쉽게 디자인을 배울 수 있도록 디자인 강좌를 만들고 있습니다. 저는 현업에서 UXUI 디자이너로 활동 중이며 입문자의 입장을 잘 알기 때문에 꼭 필요한 내용만 담아 강의를 제작합니다. 포토샵, 일러스트레이터뿐만 아니라 프로덕트 디자이너로서 알아야 할 다양한 툴과 코딩 지식을 갖추고 있습니다. 😊
Đó thực sự là một bài giảng hữu ích đối với tôi. Tôi là một nhà thiết kế không biết nhiều về hiệu ứng hay kịch bản, nên kệ thôi! Tôi cảm thấy mình cũng có thể làm được. Cảm ơn thầy.
Đó là một bài giảng ngắn, nhưng nó có tất cả mọi thứ. Trong thực tế, bạn có thể sử dụng nó nhiều hơn một chút. Tôi khởi đầu là một nhà thiết kế, sau đó chuyển sang phát triển nhà xuất bản và front-end, vì vậy nó trở nên dễ hiểu hơn. Tuy nhiên, có những khái niệm phát triển mà người thiết kế giao diện người dùng nên biết. Sẽ rất tốt nếu thêm lời giải thích đơn giản vào nội dung nào đó như tài liệu PDF.