Tôi có một vài hình minh họa được thực hiện trong Illustrator và tôi đang lên kế hoạch để tạo hiệu ứng cho một trang web mà tôi đang làm việc, tôi đã nghe nói về bộ công cụ Creat.js với flash, nhưng đó là cách tốt nhất để đi hay là có một cách khác " cách tốt hơn để làm điều đó?
Đây là một ví dụ về loại hình ảnh động mà tôi đang hướng tới: http://kontramax.com/wp-content/uploads/envato/demo/ chuẩn_ton_machine / dark /
Câu trả lời:
Có rất nhiều cách để làm động mọi thứ trên web. Thậm chí còn có nhiều cách hơn để tạo hình động sau đó xuất thành hình động trên web.
Có những lợi ích to lớn khi thiết kế hoạt hình trong một cái gì đó như AfterEffects hoặc Animate CC (có thể nhập cả tệp Illustrator và Photoshop) vì lý do rõ ràng về phân công lao động và sử dụng trình chỉnh sửa đồ họa.
Với điều đó đã được nói, cuối cùng, bạn nên luôn biên dịch theo một trong những điều sau đây :
Khả năng tương tác hạn chế:
Tương tác đầy đủ hơn:
Bây giờ, tôi sẽ đi vào chi tiết hơn một chút.
GIF là một cách tốt để sử dụng khi hoạt ảnh không cần nhiều tương tác, không cần phải có kích thước linh hoạt và tương đối nhỏ. GIF được làm tốt có thể chi tiết như hình minh họa bạn liên kết mà không có bất kỳ lo lắng về hiệu suất. Ngay cả tương tác nhỏ sử dụng lớp phủ trong suốt được đặt trên nó (hoặc chỉ là một phần của nó) là có thể.
Lưu ý bên lề: hiện tại có một .gifvđịnh dạng được tạo bởi Imgur để chuyển đổi các tệp GIF nhanh chóng thành các định dạng video WebM hoặc MP4. Điều này làm tăng hiệu suất bằng cách giảm đáng kể kích thước tệp kết thúc. Bạn có thể xem xét làm như vậy.
Một cách khác để giữ cho một hình ảnh động mượt mà nhưng có phong cách cao là sử dụng một sprite. Google sử dụng phương pháp này cho những thứ như hoạt hình logo . Một ví dụ tuyệt vời khác là trang web cũ của Alexander Engzell có hoạt hình typography bệnh hoạn sử dụng phương pháp này. Điều này là tối ưu khi một GIF quá lớn nhưng bạn không cần nhiều tương tác.
Tôi cũng đã thấy một hình ảnh động JavaScript rất thú vị giống như hình ảnh sprite hoặc GIF được Google sử dụng (di chuột hình ảnh Chrome ở trên cùng bên trái - nó yêu cầu phải có trong Chrome) nhưng thay vào đó sử dụng mặt nạ hoạt hình. Tôi đoán họ đã sử dụng phương pháp này để giới hạn tổng kích thước tệp.
Chúng tôi đã đạt được khả năng tuyệt vời về video trong những năm gần đây. Các <video>let yếu tố của chúng tôi tùy chỉnh cách chúng ta tương tác và video sử dụng thích hơn bao giờ hết. Bây giờ chúng ta có thể sử dụng các video nền toàn màn hình một cách dễ dàng và thực hiện những việc như đi từng khung hình khi cuộn . Tôi cũng nhận thấy rằng FaceBook sử dụng video cho một số hình ảnh động đơn giản khi chào đón người dùng trên nguồn cấp dữ liệu của họ xung quanh các sự kiện đặc biệt. Lợi ích là nó có thể được nén thành một kích thước tệp khá nhỏ và có thể thực hiện một loạt các hình ảnh động rộng hơn (bất cứ điều gì mà phần mềm chỉnh sửa video có thể làm). Như vậy, nếu ai đó có thể tạo một video bệnh hoạn thì việc biến nó thành một bổ sung tuyệt vời cho trang web là khá dễ dàng.
Rõ ràng, video không tốt cho phần lớn các hình ảnh động trên web (ví dụ: chuyển đổi nút, v.v.), vì vậy đừng sử dụng chúng ở mọi nơi.
Với tất cả những gì đã nói, nếu bạn muốn hoạt hình được tạo động, khi bạn cần nhiều hơn tương tác thực sự cơ bản, khi bạn muốn tạo môi trường 3D và trong nhiều trường hợp khác, GIF, sprite hoặc video sẽ không cắt nó. Một khi điều này được quyết định, có một số tùy chọn khác, tùy chọn tốt nhất phụ thuộc vào hoạt hình và nhu cầu của bạn.
Tôi không có số liệu thống kê, nhưng hầu hết các hoạt hình trên web tôi từng thấy đều sử dụng Canvas . Canvas là tuyệt vời để sử dụng vì hiệu suất và tính linh hoạt của nó trong sáng tạo. Nó chỉ sử dụng một yếu tố trình duyệt (DOM) do thực tế là nó chỉ vẽ - giống như trên một khung vẽ thực sự - mọi thứ chồng lên nhau. Bằng cách theo dõi những gì được vẽ và ở đâu với JavaScript, chúng ta có thể tạo ra một số hình ảnh động tuyệt vời và thậm chí cả trò chơi.
Tuy nhiên, nhược điểm chính của việc sử dụng Canvas là độ khó tương đối của nó đối với tỷ lệ. Thông thường, tùy thuộc vào hoạt hình tất nhiên, việc tạo một hoạt hình Canvas đáp ứng sẽ khó khăn hơn so với việc sử dụng các phương tiện khác. Một nhược điểm khác là có nhiều nội dung trên Canvas không thân thiện với SEO vì các yếu tố canvas không thể thu thập dữ liệu (bạn có thể giải quyết vấn đề này bằng cách đặt một số nội dung HTML ẩn trực quan nếu có). Cùng một lưu ý, những thứ như lựa chọn văn bản cho người dùng rất khó khăn với Canvas (đặc biệt là không sử dụng thư viện như CreatJS).
Việc sử dụng chính của Canvas là hình tượng trưng của Google , thường được thực hiện trong Canvas. Khi họ có trò chơi hoặc hoạt hình tương tác, họ sử dụng Canvas mỗi lần tôi nhìn. Nếu không có tương tác, họ sẽ sử dụng GIF hoặc sprite.
Có rất nhiều thư viện tuyệt vời để giúp làm việc với Canvas dễ dàng hơn, mặc dù điều đó chắc chắn không bắt buộc tùy thuộc vào những gì cần phải làm. Trong số những cái được tạo ra chỉ dành cho Canvas là CreatJS (mà bạn có thể xuất từ Animate CC), Pixi.js , PaperJS , KineticJS và FabricJS (được đặt theo thứ tự ấn tượng của tôi về chúng). Một plugin After Effects có tên Lottie (trước đây là BodyMovin) cũng có thể xuất sang Canvas (hoặc SVG [1] ) và có bản dựng trong công cụ hoạt hình.
Tất nhiên, bạn cũng có thể ghép các thư viện hoạt hình lớn hơn như GSAP với Canvas một cách dễ dàng. Đối với một cái gì đó chi tiết như hình minh họa bạn đã liên kết, tôi khuyên bạn nên sử dụng một số loại khung, nhưng đối với nhiều thứ chúng không thực sự cần thiết, chỉ hữu ích - đặc biệt là nếu bạn đã biết cách sử dụng một trong số chúng.
Một cách cực kỳ mạnh mẽ khác để làm sinh động mọi thứ trên web theo cách dễ dàng phản hồi là sử dụng SVG ( Đồ họa vectơ có thể mở rộng ). Họ hoàn thành mục đích của họ - là các vectơ có thể mở rộng - tốt. Nhiều người lần đầu tiên sử dụng SVG gây nhầm lẫn, nhưng hầu hết mọi thứ như hệ tọa độ và biến đổi của SVG đều có những bài viết tuyệt vời giải thích chúng.
Một trong nhiều điều đáng yêu về SVG là nó có thể được làm động bằng JavaScript, CSS thuần túy (bao gồm :hovercác trạng thái, transforms, transitions và animations) hoặc hoạt hình SMIL (cách "gốc" để tạo hiệu ứng mọi thứ với SVG - nhưng IE không ' t hỗ trợ nó và nó đang dần mất giá ). Tôi khuyên bạn nên thử sử dụng CSS trước và sau đó là JavaScript bất cứ khi nào nó không đơn giản (tương đối) trong CSS. Để điều chỉnh các yếu tố SVG, thực tế cần phải sử dụng một công cụ như plugin MorphSVG của GSAP trừ khi bạn ổn chỉ với hỗ trợ một phần, trong trường hợp SMIL có thể được chấp nhận.
Vì các phần tử SVG có thể ở bất kỳ hình dạng nào, chúng có thể được sử dụng để tạo ra một số hiệu ứng thú vị . Sarah Drasner đã thực hiện một số điểm chuẩn hiệu suất hữu ích liên quan đến hoạt hình SVG cho thấy cách thức hoạt hình nào của SVG là hiệu suất tốt nhất.
Tùy thuộc vào hình ảnh động (và cần hỗ trợ của trình duyệt), một thư viện như Snap.svg hoặc GSAP có thể hữu ích, nhưng thường thì CSS và, nếu cần, một chút tùy chỉnh JS là tất cả những gì cần thiết. Như đã nói, một plugin After Effects có tên Lottie (trước đây là BodyMovin) và một tiện ích mở rộng Flash có tên Flash 2 SVG có thể thực sự hữu ích để tạo hoạt hình SVG.
Để biết thêm chi tiết, hãy xem bài đăng liên quan này cụ thể về hoạt hình các yếu tố SVG.
PS Tốt nhất nên sử dụng các SVG trong <object>thẻ hoặc được nhúng trực tiếp vào một <svg>phần tử XML nếu nó tương tác và làm hình nền nếu nó không tương tác, nhưng cũng có nhiều cách khác để làm điều đó.
Theo kinh nghiệm của tôi, hoạt hình và chuyển tiếp CSS chủ yếu nên được sử dụng cho các thành phần UI và các chuyển tiếp và hoạt hình cơ bản khác. Thậm chí sau đó, đôi khi sử dụng thư viện hoạt hình JS như GSAP hoặc Velocity.js cho hoạt hình / chuyển tiếp UI là phù hợp. Nó thực sự phụ thuộc vào loại hành vi bạn muốn và liệu nó có thuận tiện để thực hiện trong CSS hay không.
Mặc dù chúng ta có thể tạo ra những thứ điên rồ bằng CSS thuần túy, nhưng nói chung khó tạo ra các minh họa phức tạp như ví dụ bạn cung cấp làm ví dụ bằng CSS, ngay cả khi thao tác thêm hình ảnh. Các hoạt ảnh CSS phức tạp thường khó bảo trì hơn nhiều lần so với các đối tác JavaScript của chúng. Nhược điểm khác là hoạt ảnh CSS rất khó thay đổi bằng JavaScript và nó không chơi quá tốt khi trộn với JavaScript.
Như đã nói, các tương tác đơn giản sử dụng chuyển tiếp và hoạt ảnh thường nên sử dụng CSS; bạn nên mặc định nó Để bắt đầu học cách tạo hiệu ứng bằng CSS, hãy xem phần giới thiệu của tôi về hoạt hình web .
Bạn cũng có thể tìm thấy hình ảnh động hữu ích và chức năng nới lỏng trong các thư viện như Animate.css mà bạn có thể lấy từ và thêm vào các dự án của riêng bạn. Bạn sẽ gần như không bao giờ cần toàn bộ thư viện, chỉ lấy những phần bạn muốn.
Hoạt ảnh JavaScript dựa trên DOM khá đơn giản. Chúng có một đại diện xấu vì các thư viện hoạt hình khủng khiếp như jQuery animate(), nhưng chúng có thể có hiệu suất đặc biệt cao, đặc biệt là khi sử dụng API hoạt hình web (được thảo luận bên dưới) hoặc thư viện hoạt hình chuyên dụng như GSAP , Velocity.js hoặc mo.js ( GSAP thậm chí còn có một plugin đặc biệt để thay thế .animatecụ thể của jQuery ). Sử dụng một thư viện như vậy, chúng thường có thể vượt trội hơn các loại hình động khác cho hình ảnh động chuyên sâu hơn, chẳng hạn như hoạt hình toàn bộ rất nhiều yếu tố.
Lý do chính tại sao bạn cần sử dụng hoạt hình dựa trên DOM là nếu bạn có nhiều hoạt hình người dùng hoặc các mốc thời gian phức tạp liên quan đến các yếu tố DOM đã được tạo. Thông thường, tốt nhất nên thử và sử dụng một cái gì đó như Canvas trên DOM vì những lý do đã được chỉ định.
Các thư viện như GSAP cho phép chúng tôi làm những việc điên rồ như làm chậm hoạt hình khi di chuột bằng cách theo dõi các ma trận hoạt hình. Theo cách này, hoạt ảnh dựa trên DOM có thể được tùy chỉnh và tương tác nhiều hơn bất kỳ hình thức hoạt hình nào khác khi được thực hiện tốt. Mặt trái duy nhất là đôi khi, tùy thuộc vào cách nó được xây dựng và những gì nó cần làm, nó sẽ không hoạt động tốt.
WebGL là một cách để tạo ra các tác phẩm 3D chủ yếu. Nó có một số dự án tuyệt vời mà bạn nên kiểm tra. Rõ ràng, nó không được sử dụng trên mọi trang web, nhưng điều quan trọng cần đề cập.
Nó thực sự hoạt hình các yếu tố DOM để tạo môi trường 3D (và 2D), điều này thật tuyệt vời vì tiềm năng của nó. Khi sử dụng thư viện, WebGL quay lại sử dụng Canvas nhưng vẫn không có hỗ trợ lớn trên thiết bị di động và có thể có hiệu suất nặng. Nói chung là khá rõ ràng khi bạn cần sử dụng WebGL hay không.
Từ kinh nghiệm của tôi, sử dụng thư viện WebGL là thực tế cần thiết. Rất may có một số người tốt. ThreeJS cho đến nay là phổ biến nhất tôi từng thấy sau PixiJS . Một khung WebGL như A-Frame cũng có thể giúp bạn chọn nó và tạo ra những thứ cơ bản khá dễ dàng.
Các hình ảnh động web API là một nỗ lực để chuẩn hóa như thế nào hình ảnh động được thực hiện và duy trì trên các trình duyệt kết hợp với cải tiến hiệu suất. Nó có nghĩa là được sử dụng với các phần tử DOM bao gồm SVG. Nó giống như cách cấu trúc hoạt hình CSS (ở dạng tìm kiếm JS) nhưng thêm các khả năng như dòng thời gian và hiệu suất được cải thiện.
Nó cải thiện hiệu suất bằng cách đặt hình ảnh động trên luồng tổng hợp (để biết thêm chi tiết kiểm tra bài đăng tuyệt vời này về chủ đề này). Để biết giới thiệu về cách sử dụng nó, hãy xem tài liệu Mozilla hoặc bài giới thiệu này .
Bạn có thể hỏi, " Điều này sẽ thay thế các thư viện hoạt hình JavaScript? " Câu trả lời là " Hy vọng một số ". Nó có lợi cho tất cả mọi người để các công cụ hoạt hình trình duyệt riêng cải thiện và, như họ làm, một số thư viện hoạt hình ít mạnh hơn sẽ trở nên vô dụng. Với điều đó đã được nói, các thư viện hoạt hình mạnh mẽ hơn sẽ vẫn có các lợi ích bổ sung như những gì GSAP đã lưu ý . Cho dù bạn có cần thư viện hay không một khi WAAPI được hỗ trợ rộng rãi vẫn được xác định bởi nhu cầu của bạn.
WAAPI hiện không có hỗ trợ tốt nhưng có thể được sử dụng với polyfill trong sản xuất ngày nay. Có vẻ như nó sẽ tiếp tục tốt hơn và nhận được nhiều hỗ trợ hơn.
Tránh sử dụng các thuộc tính không thực hiện hoặc gây ra phản xạ / sơn lại .
Tránh hoạt hình một loạt các yếu tố trên trang vì chúng chuyên sâu hơn và cũng có thể là một nỗi đau để thay đổi sau này.
Khi sử dụng CSS, hãy sử dụng một transitionhình ảnh động bất cứ khi nào có thể (trong lý do). Họ thực hiện tốt hơn và thường dễ làm việc hơn.
Sử dụng thông minh will-changetài sản trên các yếu tố lớn mà bạn sẽ tạo hiệu ứng để trình duyệt biết trước. Để biết thêm chi tiết và đề xuất về nó, hãy đọc một cái gì đó giống như bài viết trên SitePoint về chủ đề này.
Tránh setIntervalvà lựa chọn requestAnimationFramekhi thực hiện định thời gian trong JavaScript (các thư viện hoạt hình tốt như GSAP sẽ làm điều này cho bạn nếu bạn sử dụng các mốc thời gian của họ).
Khi bạn có thể, hãy sử dụng API hoạt hình web vì nó có khả năng hoạt ảnh với các phương thức khác trong JavaScript không có.
Bạn không bao giờ nên chạy Flash trong sản phẩm cuối cùng . Hoạt ảnh JavaScript hoạt động tốt hơn, năng động hơn, dễ chỉnh sửa hơn, không yêu cầu tải xuống, hoạt động trên nhiều nền tảng hơn (Flash không hoạt động trên hầu hết máy tính bảng / điện thoại) và phản ứng nhanh hơn so với Flash cũ cồng kềnh. Chúng cũng không dễ truy cập và không thân thiện với SEO.
Như đã nói, Animate CC (đổi thương hiệu Flash) là một cách hữu ích để tạo hình động và có thể xuất sang Canvas bằng cách sử dụng Creat.js .
Thường có nhiều phương pháp bạn có thể sử dụng để tạo một hình ảnh động. Cách tốt nhất phụ thuộc vào những gì bạn muốn nó làm, và đôi khi không có một phương pháp tốt hơn rõ ràng. Nhiều khi tôi thấy mình sử dụng nhiều trên cùng một dự án. Điều quan trọng là suy nghĩ chín chắn , hiểu chính xác cách bạn muốn hoạt hình hoạt động và quyết định phương pháp dựa trên điều đó. Nó cũng có ích nếu bạn làm việc từng chút một.
[1] - Lottie cũng có thể xuất sang Android, iOS và React Native .
Theo kinh nghiệm của tôi, khi thực hiện hoạt ảnh tĩnh (hoạt hình không dành cho bất kỳ tương tác nào với người dùng) tôi thấy rằng điều tốt nhất cho tôi là hoạt hình minh họa trong After Effects và sau đó xuất kết quả cuối cùng sang tệp .GIF. Điều này làm cho hình ảnh động hoàn toàn thân thiện với trình duyệt và đảm bảo hình ảnh giống hệt nhau trong bất kỳ thiết bị nào.
Tuy nhiên, nếu bạn đang tìm kiếm thứ gì đó mà người dùng có thể tương tác, tôi tin rằng Canvas thực sự là hướng đi và đối với đó, CreatJS dường như phù hợp với công việc với thư viện EasJS.
Dù sao, theo ví dụ của bạn, bạn cũng có thể làm điều đó với một tệp GIF hoạt hình và nhận được kết quả chính xác như vậy.
Nếu bạn làm việc với After Effects, bạn có thể sử dụng trình cắm Bodymovin . Nó kết xuất công việc của bạn để sử dụng điện thoại di động và web. Bạn sẽ có tệp .json và lottie.js mà bạn có thể sử dụng trong HTML của mình. Nhưng trước tiên, bạn sẽ phải tắt Cho phép tập lệnh để ghi tệp và truy cập Mạng trong cài đặt chung. Khi bạn đã hoàn thành, hãy vào Window , Tiện ích mở rộng và tìm Bodymovin . Chọn thành phần của bạn, đặt vị trí để lưu và nhấp vào kết xuất. Đặt các tệp .json và lottie.js của bạn vào HTML và công việc của bạn đã hoàn tất. Tôi nghĩ rằng GIF không phải là giải pháp tốt nhất vì nó cần nhiều thời gian hơn để tải.
Bạn có thể tải xuống tại đây: http://aescripts.com/bodymovin Chỉ cần thêm giá của bạn, hoặc nếu bạn muốn nó miễn phí, bạn có thể chỉ cần đặt $ 0,00 ...
Dưới đây là hướng dẫn sử dụng Bodymovin và cài đặt hoạt hình của bạn trong trang web của bạn với Visual Studio: youtube.com/watch?v=YmPsCD5jRDw&t=282s
Nếu bạn biết những điều cơ bản về HTML và CSS thì nó sẽ dễ dàng cho bạn. Hướng dẫn đó đã giúp tôi, tôi hy vọng rằng điều này có thể giúp bạn.