Share
Trang chủ / Tất cả hướng dẫn / Lập trình web / Chạy aminate trên web với spine-ts

Chạy aminate trên web với spine-ts

Từ sau lần sử dụng sprite để tạo hiệu ứng cô tiên bay qua bay lại, thì mình không còn làm animate trên web nữa, chưa từng có nhu cầu cho đến mấy ngày gần đây. Trong một dự án của khác hàng, họ cần chạy một hiệu ứng đặt biệt cho trang landing page. Thông thường mình sẽ nghĩ đến cách sử dụng video hoặc sprite hoặc ảnh gif để hiển thị animation. Tuy nhiên người quyết định solution đã có một lựa chọn khác. Bởi vì dùng video thì sẽ không chạy inline được trên ios, Dùng gift và sprite thì lại quá nặng, vì hiệu ứng đòi hỏi phải hỗ trợ retina và mượt. Nên anh CTO đã chọn giải pháp là thuê một bên thứ ba để làm hiệu ứng, họ sử dụng phần mềm spine, và có thể chạy được trên web sử dụng spine-ts/spine-webgl.

Nên nó có thể chạy tốt trên những trình duyệt hỗ trợ webgl. Bạn có thể xem qua ở đây.

Screen Shot 2016-08-24 at 2.42.14 PM

Tất cả các trình duyệt phổ biến hiện tại đều hỗ trợ webgl, nhưng một số lại không hỗ trợ hoàn toàn. Vì vậy sẽ có một vài lỗi, nhỏ, nhưng cũng không đáng kể. Nhưng không thể chạy trên safari/ios 7. Vì vậy có lẽ sẽ phải sử dụng ảnh gif trên trình duyệt này.

Thực ra đây chỉ là một bài viết để ghi lại một kinh nghiệm mà thôi. Chứ mình chỉ là sử dụng thư viện spine-ts để ráp asset mà bên thứ ba cung cấp.

Có lẽ trong thời gian gần nhất, mình sẽ mở một category chuyên nên ra các vấn đề để các bạn cùng đưa ra giải pháp thực hiện.

Spine-ts là một thư viện bao gồm nhiều phiên bản khác nhau hỗ trợ các công nghệ khác nhau. Mục đích là để chạy animate export ra từ phần mềm spine.

Spine-ts

Các bạn có thể tải code của repo tại đây : spine-ts. Còn đây là bài blog mà họ giới thiệu về repo này: spine-ts: One runtime to serve all your HTML5 needs!

Ở đây có một vài thư mục, mỗi thư mục hỗ trợ cho một công nghệ khác nhau: canvas, webgl, threejs và widget.

Ở đây không có đầy đủ tài liệu, mà chỉ có ví dụ. Trong mỗi thư mục đều có ví dụ, có lẽ nó sẽ quen thuộc với người làm spine trên mobile,… nhưng với người mới bắt đầu như mình thì không dễ để hiểu, chỉ có thể làm theo mà thôi.

Spine WebGL

Trong số các thư viện mà họ hỗ trợ, thì chỉ có webgl là hỗ trợ đầy đủ tính năng của spine. còn widget thì cũng giống như WebGL.

Bạn nên thử với canvas trước, nếu canvas không thể hiển thị đúng animation của bạn, thì hãy sử dụng webgl.

Thư viện này có hỗ trợ đầy đủ các api của webgl và hỗ trợ các event rất đầy đủ, bạn có thể biết được animate nào bắt đầu, kết thúc, loop… để có thể tiện thay đổi các element khác nếu có nhu cầu.

Sử dụn gif

Đối với một số phiên bản trình duyệt mà nó không hỗ trợ webgl. Bạn có thể sử dụng gif. Dù gif khá là nặng, nhưng dường như bạn không còn nhiều giải pháp, bạn có thể load file bằng iframe hoặc ajax trước khi animation cần show ra. Và khi animation show, bạn add sự kiện ready cho nó để khi nó load xong, thì bạn sẽ set timeout để biết khi nào thì animation kết thúc,

Lời kết

Thực ra thì mình không có nhiều thứ để nói về nó, chỉ là ghép asset vào với script là đủ, trong demo cũng làm rất rõ, mình không muốn mất thời gian để viết lại y hệt ví dụ của họ. Chỉ là mình muốn note và muốn giới thiệu với các bạn mà thôi. Bạn có thể xem qua một kết quả mà mình làm tại đây.