Xuất sau hoạt hình hiệu ứng sang HTML5

Hoạt hình trên web là ở đây để ở. Đó là trong tất cả mọi thứ, từ các phong trào tinh tế giúp mang lại cho chúng ta Thiết kế UI. Đối với cuộc sống, trải nghiệm vải hoạt hình đầy đủ và các thí nghiệm về WebGL đang thách thức những gì chúng ta từng nghĩ là có thể trong trình duyệt.

Mặc dù sự sáng tạo của các nhà phát triển và khả năng của các trình duyệt đang tăng lên, hoạt hình trên web từ lâu đã có mối quan hệ kém với video - một cái gì đó mà cộng đồng đồ họa chuyển động đã tiếp cận một cách thận trọng trong nhiều năm. Hãy nhớ rằng nếu bạn có một trang web phức tạp để duy trì, của bạn web hosting Dịch vụ cần phải được thực hiện.

• Hướng dẫn ưu điểm cho thiết kế UI

Các nhà phát triển đã dựa vào các thư viện như Greensock và Snap.svg để thực hiện nâng vật nặng trong việc sao chép hoạt hình thông qua JavaScript. Mặc dù các công cụ này đã cung cấp rất nhiều tính linh hoạt, nhưng chúng không thể so sánh với độ chính xác và sự tinh tế của hoạt hình có thể đạt được bằng cách sử dụng Sau hiệu ứng CC. Dòng thời gian riêng và đồ thị giảm bớt. Từ góc độ web, hiệu ứng sau đó rất phù hợp để điều chỉnh và thử chuyển động trước khi cam kết mã hóa.

Đi vào Bodymovin. , một phần mở rộng đột phá cho Adobe After Effects xuất hình động trực tiếp từ After Effects sang JavaScript sẽ được hiển thị và thao tác trong trình duyệt. Được tạo bởi Hernan Torrisi. , BodyMovin loại bỏ nhiều rào cản giữa hoạt hình và nhà phát triển. Ở cấp độ cơ sở của nó, plugin hoạt động như tính năng 'Render' Magical 'Render' Adobe Quên. Ở mức tiên tiến nhất, nó mở ra những khả năng mới cho hoạt hình tương tác.

BodyMovin là một liên kết trong chuỗi các công cụ, plugin và hệ thống tăng lên để đáp ứng một số khả năng mới này. Lottie của Airbnb. và Keyframes của Facebook Cả hai xây dựng trên các nền tảng này - và cuối cùng họ đang mang đến công cụ hoạt hình mạnh mẽ nhất vào web.

Tại sao sử dụng BodyMovin?

SVG đã chiếm lấy Internet và mang theo sự mong đợi rằng mọi thứ phải có chất lượng cao, ánh sáng và có thể mở rộng. BodyMovin làm cho mọi thứ trong sáng tác của bạn thành SVG sắc nét đẹp khiến chất lượng vector ở bất kỳ kích thước nào. Không còn ảnh hưởng để làm sáng gif đó hoặc buộc người dùng của bạn tải các tệp video đầy hơi.

Cũng như đơn giản hóa quá trình xuất hình ảnh động của bạn, BodyMovin sẽ mở ra nhiều tiềm năng hơn cho các nhà phát triển để sáng tạo với những trải nghiệm tương tác mới. Kiểm tra Codepen cho một số cách tuyệt vời mà tiện ích mở rộng đã được sử dụng - từ các giàn khoan IK tương tác đến văn bản tương tác loại Animate-You-Type.

Để đơn giản hóa hơn nữa quy trình Dev của bạn, hãy thử một người tạo ra trang web .

Hoạt hình xuất khẩu có thể được thao tác trong trình duyệt như bất kỳ yếu tố nào khác, cho phép chúng ta nghĩ về hoạt hình như một công cụ tương tác và thử nghiệm trong thiết kế web. Và bây giờ vì BodyMovin, mang lại hình ảnh động của bạn đến web chưa bao giờ dễ dàng hơn thế. Trong hướng dẫn này, bạn sẽ tìm hiểu cách xuất hình ảnh động từ After Effects và tạo một hình ảnh động lặp đơn giản đáp ứng với nhấp chuột của người dùng.

Cách chuẩn bị các tệp hiệu ứng sau của bạn

Hỗ trợ cho các tính năng sau khi hiệu ứng đã được cải thiện rất nhiều và bạn có thể mong đợi để có được kết quả khá tốt ngay lập tức. Điều đó đang được nói, các lớp 3D bay lạ mắt của bạn sẽ không chơi tốt để nhận thức được các giới hạn trước khi bạn bắt đầu. Trước khi bạn bắt đầu một dự án, hãy luôn tải xuống phiên bản BodyMovin mới nhất và kiểm tra trang GitHub để xem tính năng nào hiện đang được hỗ trợ.

Đừng quá vội vàng để chuyển sang phần thú vị ... Tidy tập tin làm cho một tâm trí gọn gàng. Trong trường hợp này, họ cũng sẽ giúp thực hiện một số công việc bổ sung từ trình duyệt và cung cấp cho bạn phát lại mượt mà mượt mà. Đầu tiên, bạn sẽ muốn đảm bảo rằng nội dung của bạn nằm trong các lớp hình dạng hiệu ứng cho sức mạnh vector đầy đủ. Để chuyển đổi bất kỳ tệp Illustrator nào thành Shape Layer, bạn có thể chỉ cần nhấp chuột phải và chọn Tạo hình dạng từ lớp vector. Bất kỳ lớp nào không hình dạng ở giai đoạn này sau đó sẽ được chuyển đổi thành hình ảnh và chúng sẽ không được hiển thị dưới dạng vectơ.

Tiếp theo, có một kiểm tra thông qua các lớp và lớp con của bạn; Có một cơ hội tốt, bạn có thể đơn giản hóa nội dung của hình dạng mà không hy sinh bất cứ điều gì. Cố gắng cắt giảm số lượng nhóm, đường dẫn và điền vào chỉ những thiết yếu trần trụi.

Chăm sóc với mặt nạ

Mặt nạ là một cách dễ dàng để trượt lên ở giai đoạn này. Xin lưu ý rằng mặt nạ alpha sẽ hoạt động với trình kết xuất SVG nhưng sẽ không xuất hiện nếu bạn chọn chuyển sang Canvas. Mặt nạ có thể tốn kém về hiệu suất vì vậy hãy sử dụng chúng một cách hiệu quả.

Kết xuất

BodyMovin hoạt động trong hai phần - phần mở rộng After Effects chuyển đổi dữ liệu hoạt hình thành tệp JSON và trình phát BodyMovin.js để đưa vào trang web của bạn có thể diễn giải tệp này và hiển thị nó trong trình duyệt.

Nghĩ rằng các tập tin của bạn là tốt để đi? Mở mở rộng cơ thể qua Window & GT; Mở rộng và sau đó bodymovin.

Khi bạn nhấn refresh, bạn sẽ thấy một danh sách tất cả các tác phẩm trong dự án After Effects này. Chọn comp đã chọn của bạn và sau đó chọn một thư mục đích bên trong dự án Web của bạn. Khi bạn hài lòng chỉ cần nhấp vào Render và xem phép thuật xảy ra. Khi nó được thực hiện, bạn sẽ nhận được một tin nhắn 'Hoàn tất'. Xin chúc mừng! Bạn vừa xuất tệp JSON với tất cả thông tin mà người chơi cần để tạo lại hình ảnh động.

Để kiểm tra hoạt hình mới xuất, nhấp vào Xem trước & GT; Hiển thị hiện tại và nhớ chà qua dòng thời gian như bạn có thể phát hiện ra thứ gì đó trông hơi khác với những gì bạn mong đợi. Nếu bạn phát hiện ra bất kỳ vấn đề nào hãy quay lại và kiểm tra các lớp của bạn - nó có thể là một tính năng không được hỗ trợ hoặc một biểu thức được sử dụng trong hiệu ứng sau.

Một số plugin After Effects như cao su hiện hỗ trợ BodyMovin. Cao su sử dụng các lớp hướng dẫn và các lớp ẩn. Để kích hoạt chúng, chỉ cần nhấp vào COG cài đặt bên cạnh thành phần đã chọn của bạn và đánh dấu vào các tính năng bạn cần.

Nếu mọi thứ có vẻ tốt, chỉ cần một điều nữa bạn cần làm trước khi bạn rời khỏi sau khi bị ảnh hưởng phía sau. Ở giai đoạn này, bạn nên có một tệp data.json mới mô tả hoạt hình của mình, nhưng không có người chơi bodymovin nào để giải thích nó. Trong phần mở rộng, nhấp vào nút 'Lấy nút của người chơi ở trên cùng bên phải và lưu nó bằng tệp JSON của bạn.

Tải hình ảnh động

Bây giờ bạn có mọi thứ bạn cần, hãy nhảy thẳng vào mã và đặt những điều cơ bản để hiển thị hình ảnh động của bạn trên trang.

Đầu tiên làm một container mới #anim_container. để giữ hình ảnh động của bạn. Bạn cũng cần bao gồm bodymovin.js. tập tin trước thẻ cơ thể đóng. Tiếp theo nói với BodyMovin Mọi thứ về hoạt hình của bạn và tải nó vào container mới.

Chúng ta hãy đi qua các thiết lập từng bước:

 var container = document.getelementbyId ('anim_container');
// Thiết lập hoạt hình của chúng tôi

var animdata = {
Container: Container,
Trình kết xuất: 'Svg',
Tự động phát: Đúng,
Vòng lặp: Đúng,
Đường dẫn: 'Data.json'
};
var anim = bodymovin.loadanimation (animdata); 

Bạn cần xác định tất cả các tham số cho hình động. Nói với BodyMovin the Container bạn muốn hình ảnh động tải vào và sau đó bảo nó hiển thị hình ảnh động dưới dạng các phần tử SVG. Tiếp theo, hãy nói với hoạt hình để chơi ngay khi được tải và bạn muốn nó lặp lại vào đầu khi nó kết thúc.

Tài sản đường dẫn cho người chơi BodyMovin biết nơi tìm tệp dữ liệu JSON cho hình ảnh động. Do chính sách chia sẻ tài nguyên có nguồn gốc chéo (CORS), kỹ thuật bạn sẽ sử dụng để truy cập tệp JSON sẽ chỉ hoạt động nếu bạn đang ở trên máy chủ hoặc máy chủ cục bộ. Để làm việc cục bộ, bạn có thể thực hiện dữ liệu đó.json vào một tệp JavaScript gán đối tượng cho một biến. Trong trường hợp đó, thiết lập của bạn có thể trông như thế này:

& lt; script src = "js / data.js" & gt; & lt; / script & gt;
& lt; script & gt;
var container = document.getelementbyId ('anim_container');
// Thiết lập hoạt hình của chúng tôi
var animdata = {
Container: Container,
Trình kết xuất: 'Svg',
Tự động phát: Đúng,
Vòng lặp: Đúng,
AnimationData: Dữ liệu
};
var anim = bodymovin.loadanimation (animdata);
& lt; / script & gt; 

Làm mới trang và hoạt hình của bạn nên được chơi bên trong container. Chọn với các công cụ dev của bạn và bạn sẽ thấy rằng mỗi phần tử trong hoạt hình hiện có trong & lt; g & gt; thẻ, và đang được chuyển đổi trong thời gian thực.

Trông tuyệt vời, phải không? Bây giờ bạn sẽ có một hình ảnh động đẹp, sắc nét hiển thị trong trình duyệt (không có thẻ video khốn khổ trong tầm nhìn ...). Hoạt hình sẽ luôn luôn mở rộng để phù hợp với vật chứa của nó, vì vậy hãy tiếp tục và thổi bay nó lên!

BodyMovin có một loạt các phương pháp mạnh mẽ để kiểm soát hoạt hình sau khi nó đã tải. Gọi một phương thức như Anim.pause () hoặc là anim.setdirection () sẽ cho phép bạn thao tác phát lại theo những cách khác nhau. Hãy xem xét một số ví dụ:

• Anim.setdirection (-1) sẽ phát hình động ngược lại
• Anim.pause () và anim.play () sẽ bắt đầu và dừng hoạt hình
• Anim.Setspeed (0,5) sẽ phát hình ảnh động ở một nửa tốc độ

Thêm tương tác

Trong bước tiếp theo này, bạn sẽ khám phá một vài cách khác nhau để thêm tương tác vào hình ảnh động của mình thông qua JavaScript. Trong ví dụ này, chúng tôi xuất hoạt hình After Effects với hai phần: Mục A và Mục B. Phần A sử dụng các khung từ một đến 20 (Tam giác đang giữ thanh POGO) Phần B sử dụng các khung từ 20 đến 40 (Tam giác đang nhảy lên và xuống trên một thanh pogo).

Bây giờ, bạn muốn phát phần A trên một vòng lặp sau đó (chỉ sau khi người dùng nhấp chuột) Phát và Loop Phần B. Bạn có thể sử dụng thuộc tính PlaySegment để phân tách hoạt hình theo cách này. Phương pháp này sẽ lấy hai đối số - một mảng với các giá trị bắt đầu và kết thúc và boolean thứ hai - isframe. Đặt điều này thành true sẽ cho phép hình ảnh động đọc các giá trị bắt đầu và kết thúc dưới dạng khung, trong khi sai sẽ cho biết nó là đọc các giá trị này theo thời gian.

 Anim.pause ();
anim.playgments ([0,20], TRUE); 

Thêm phần này yêu cầu BodyMovin tạm dừng ở khung đầu tiên và chỉ chơi hình ảnh động từ 0 đến 20 khung hình. Khi bạn thiết lập hoạt hình của mình với một Vòng lặp: Đúng. Tài sản Điều này sẽ tiếp tục phát phần một lần nữa.

Hãy thiết lập toàn bộ ví dụ. Bạn sẽ sử dụng hai phân đoạn của một hình ảnh động cho ví dụ này, vì vậy bạn sẽ tạo hai hàm:

 var container = document.getelementbyId ('anim_container');
// Thiết lập hoạt hình của chúng tôi
var animdata = {
Container: Container,
Trình kết xuất: 'Svg',
Tự động phát: Sai,
Vòng lặp: Đúng,
Đường dẫn: 'Data.json'
};
var anim = bodymovin.loadanimation (animdata);
// Khi hình ảnh động được tải Chạy chức năng FirstLoop của chúng tôi
Anim.addeventlistener ('domloaded', FirstLoop);
// Tạo chức năng phát lại của chúng tôi
chức năng FirstLoop () {
Anim.playgments ([0,20], TRUE);
};
chức năng secondloop () {
anim.playgments ([20,40], TRUE);
};
// nghe sự kiện nhấp
container.addeventlistener ('nhấp', chức năng (sự kiện) {
Anim.addeventlistener ('loopcomplete', secondloop);
}); 

Cách để đi! Bây giờ hoạt hình của bạn sẽ tiếp tục lặp cho đến khi người dùng nhấp vào nó, thì nó sẽ bắt đầu vòng lặp thứ hai. Vấn đề duy nhất bây giờ là một bước nhảy như thế này rất đột ngột và nó có thể làm hỏng sự trơn tru của hoạt hình.

Một tình huống lý tưởng là bao gồm phần thứ ba cho hoạt hình, một phần mà chuyển từ giữ gậy pogo để nhảy vào nó. Bây giờ cấu trúc của bạn sẽ trông giống như thế này:

• đầu tiên - Khung 0 đến 20
• Chuyển đổi - Khung 20 đến 30
• Secondloop. - Khung 30 đến 50

Chúng tôi muốn hình ảnh động của bạn ở trong vòng lặp đầu tiên cho đến khi nó nhấp. Tại thời điểm đó, bạn sẽ muốn đợi kết thúc vòng lặp bạn hiện đang ở và chuyển sang quá trình chuyển đổi. Sau khi chuyển đổi được thực hiện di chuyển đến vòng lặp thứ hai của bạn. Điều này nghe có vẻ phức tạp nhưng ở lại với tôi! Đây là mã của bạn đầy đủ:

 var container = document.getelementbyId ('anim_container');
// Thiết lập hoạt hình của chúng tôi
var animdata = {
Container: Container,
Trình kết xuất: 'Svg',
Tự động phát: Sai,
Vòng lặp: Đúng,
Đường dẫn: 'Data.json'
};
var anim = bodymovin.loadanimation (animdata);
// Khi hình ảnh động được tải Chạy chức năng FirstLoop của chúng tôi
Anim.addeventlistener ('domloaded', FirstLoop);
// Tạo chức năng phát lại của chúng tôi
chức năng FirstLoop () {
Anim.playgments ([0,20], thật);
};
Chuyển đổi chức năng () {
anim.playgments ([20,30], đúng);
Anim.removeeventlistener ('loopcomplete');
Anim.addeventlistener ('loopcomplete', secondloop);
};
chức năng secondloop () {
Anim.playgments ([30.100], TRUE);
Anim.removeeventlistener ('loopcomplete');
};
// nghe sự kiện nhấp
container.addeventlistener ('nhấp', chức năng (sự kiện) {
anim.addeventlistener ('loopcomplete', chuyển tiếp);
}); 

Khi nhấp, bạn đang sử dụng một loopcomplete. người nghe để đợi cho đến khi bạn đạt được khung cuối cùng của vòng lặp, sau đó chạy Chuyển đổi () chức năng. Ở đây bạn xóa trình nghe cuối cùng, chơi bộ khung tiếp theo và sau đó làm lại cùng một lần nữa. Sau khi quá trình chuyển đổi xong, nó sẽ gọi secondloop () .

Đó là nó!

Bạn đã làm việc với một vài tính năng của BodyMovin ngày nay, nhưng nếu bạn muốn tìm hiểu thêm về plugin, bạn có thể tìm thấy một tải thông tin trên BodyMovin Github. trang. Để biết thêm các ví dụ, hãy xem bộ sưu tập CodeMovin CodePen ấn tượng.

Hy vọng hướng dẫn này sẽ đưa cho bạn một ý tưởng về các loại cách khác nhau mà bạn có thể kết hợp việc sử dụng hiệu ứng sau và BodyMovin để tạo ra một số hình ảnh động siêu cảm cho web!

Bây giờ bạn có thể thiết lập hoạt hình để được xuất cho Web, hãy mang các tệp đã xuất của bạn vào trình duyệt và làm cho hoạt hình của bạn phản ứng nhanh để nhấp. Hãy suy nghĩ ngoài các tệp MP4 mà bạn đã từng sử dụng và tìm đến BodyMovin để tạo ra nhiều trải nghiệm web phong phú hơn trong tương lai.

Có thể liên quan đến các nhà hoạt động chặt chẽ trong quá trình phát triển ngày càng trở nên quan trọng và lĩnh vực hoạt hình web đang di chuyển cực kỳ nhanh. Với một bộ sưu tập các tiện ích mở rộng, plugin và khung mới đang phát triển, các nhà hoạt động và nhà phát triển có thể hy vọng quá trình này sẽ dễ dàng hơn và tốt hơn theo thời gian. Tôi cho một người không thể chờ đợi để xem những gì tương lai giữ.

Có rất nhiều tập tin để sao lưu? Kiểm tra chúng tôi lưu trữ đám mây chọn.

Bài viết này ban đầu xuất hiện trong Tạp chí Net. trong năm 2017. Đăng ký tại đây .

Đọc thêm:

• Tạo và Animate Polygons SVG
• 14 Adobe tuyệt vời Sau các plugin hiệu ứng
• Tạo bảng phân cảnh cho hình ảnh động trên web