So sánh hoạt hình bằng CSS và JavaScript. Các thư viện và plugin JavaScript đầy hứa hẹn cho hoạt ảnh
Một thư viện nhỏ để tạo hoạt ảnh trên Dựa trên JavaScript. Nó có thể được sử dụng để tạo hiệu ứng động cho các thuộc tính CSS, hình ảnh SVG hoặc thuộc tính cây DOM trên trang web. Thư viện cho phép bạn kiểm soát tất cả các khía cạnh của hoạt ảnh và cung cấp nhiều cách để chỉ định các phần tử cần được chuyển động.
Bạn có toàn quyền kiểm soát thứ tự phát hoạt ảnh và kiểm soát cách hoạt ảnh của các phần tử khác nhau được đồng bộ hóa với nhau. Thư viện hỗ trợ mọi thứ trình duyệt hiện đại, bao gồm IE10 trở lên.
Trong loạt hướng dẫn này, bạn sẽ tìm hiểu về tất cả các tính năng của Anime.js và có thể sử dụng thư viện trong các dự án của mình.
Lưu ý Nếu bạn hoàn toàn mới làm quen với JavaScript, chúng tôi khuyên bạn nên tự làm quen với ngôn ngữ lập trình này.
Cài đặt thư việnĐể cài đặt, bạn có thể sử dụng lệnh npm hoặc bower:
Npm cài đặt animejs bower cài đặt animejs
Bạn cũng có thể tải xuống thư viện và bao gồm hoặc liên kết đến nó trong dự án của bạn phiên bản mới nhất thông qua CDN.
Sau khi cài đặt thành công, bạn sẽ có thể sử dụng Anime.js để thêm hoạt ảnh thú vị vào các thành phần của mình. Hãy bắt đầu với khả năng cơ bản thư viện.
Xác định các yếu tố mục tiêuĐể tạo hoạt ảnh bằng Anime.js, bạn gọi hàm anime() và truyền cho nó một đối tượng có cặp khóa-giá trị xác định các thành phần và thuộc tính đích mà bạn muốn tạo hoạt ảnh. Bạn có thể sử dụng từ khóa mục tiêu để cho thư viện biết bạn cần tạo hiệu ứng động gì. Từ khóa này có thể nhận một giá trị ở các định dạng khác nhau.
Bộ chọn CSS: bạn có thể chuyển một hoặc nhiều bộ chọn làm giá trị cho từ khóa mục tiêu.
Var blue = anime(( target: ".blue", dịchY: 200 )); var redBlue = anime(( target: ".red, .blue", dịchY: 200 )); vareven = anime((target: ".square:nth-child(even)", dịchY: 200 )); var notRed = anime(( target: ".square:not(.red)", dịchY: 200 ));
Trong trường hợp đầu tiên, Anime.js sẽ tạo hoạt ảnh cho tất cả các phần tử có lớp màu xanh lam. Trong thứ hai - màu xanh hoặc đỏ. Trong trường hợp thứ ba, Anime.js sẽ tạo hoạt ảnh cho tất cả trẻ em phần tử chẵn với lớp hình vuông. Và trong trường hợp sau, thư viện sẽ tương tác với tất cả các phần tử có lớp hình vuông không có lớp màu đỏ.
Nút DOM hoặc NodeList: Bạn cũng có thể sử dụng nút DOM hoặc NodeList làm giá trị cho từ khóa mục tiêu. Xem ví dụ về cách sử dụng nút DOM cho mục tiêu.
Var đặc biệt = anime((mục tiêu: document.getElementById("đặc biệt"), dịchY: 200 )); var blue = anime(( target: document.querySelector(".blue"), dịchY: 200 )); var redBlue = anime(( target: document.querySelectorAll(".red, .blue"), dịchY: 200 )); var Even = anime(( target: document.querySelectorAll(".square:nth-child(even)"), dịchY: 200 )); var notRed = anime(( target: document.querySelectorAll(".square:not(.red)"), dịchY: 200 ));
Trong trường hợp đầu tiên, hàm getElementById() được sử dụng để truy cập yếu tố cụ thể. Hàm querySelector() được sử dụng để truy cập một phần tử có lớp blue . Và hàm querySelectorAll() được sử dụng để truy cập tất cả các phần tử trong tài liệu khớp với một nhóm bộ chọn cụ thể hoặc ngược lại, không được bao gồm trong đó.
Có nhiều chức năng mà bạn cũng có thể sử dụng để chọn phần tử mục tiêu. Ví dụ: bạn có thể truy cập các phần tử với một lớp cụ thể bằng cách sử dụng hàm getElementsByClassName(). Hoặc tới các phần tử có thẻ cụ thể bằng cách sử dụng hàm getElementsByTagName().
Bất kỳ hàm nào trả về nút DOM hoặc NodeList đều có thể được sử dụng để đặt giá trị của mục tiêu trong Anime.js.
Đối tượng: bạn có thể sử dụng Đối tượng JavaScript làm giá trị cho mục tiêu . Khóa của đối tượng này được sử dụng làm mã định danh và giá trị được sử dụng làm số để tạo hiệu ứng động.
Sau đó, bạn có thể hiển thị hoạt ảnh bên trong một phần tử HTML khác bằng cách sử dụng mã JavaScript bổ sung. Dưới đây là một ví dụ về hoạt hình các giá trị của hai các phím khác nhau một đối tượng.
Var filesScanned = (đếm: 0, bị nhiễm: 0); var scanner = anime(( target: filesScanned, count: 1000, bị nhiễm: 8, round: 1, update: function() ( var scanCount = document.querySelector(".scan-count"); scanCount.innerHTML = filesScanned.count ;var bị nhiễmCount = document.querySelector(".infect-count"); bị nhiễmCount.innerHTML = filesScanned.infector; ) ));
Đoạn mã trên sẽ điều khiển bộ đếm tệp được quét từ 0 đến 1.000 và bộ đếm tệp bị nhiễm từ 0 đến 8. Hãy nhớ rằng bạn có thể tạo hoạt ảnh giá trị số chỉ cách này thôi. Nếu bạn cố gắng tạo hoạt ảnh cho một phím từ AAA sang BOY, một thông báo lỗi sẽ được hiển thị.
Ngoài ra, mã còn sử dụng hàm gọi lại khóa cập nhật, được gọi là mọi khung hình trong quá trình hoạt ảnh. Ở đây nó được sử dụng để cập nhật số lượng tệp được quét và bị nhiễm. Tuy nhiên, bạn có thể đi xa hơn và hiển thị cho người dùng thông báo lỗi khi số lượng tệp bị nhiễm vượt quá một ngưỡng nhất định.
Mảng: khả năng chỉ định Mảng JavaScript mục tiêu sẽ hữu ích nếu bạn cần tạo hoạt ảnh cho nhiều yếu tố liên quan đến danh mục khác nhau. Ví dụ: nếu bạn muốn tạo hiệu ứng động cho một nút DOM, một đối tượng và nhiều thành phần khác dựa trên bộ chọn CSS, bạn có thể thực hiện việc này bằng cách đặt chúng vào một mảng, sau đó xác định mảng đó làm giá trị cho target . Ví dụ dưới đây sẽ làm cho mọi thứ rõ ràng hơn.
Var multipleAnimations = anime(( target: , dịchY: 250 ));
Những thuộc tính nào có thể được tạo hoạt ảnh bằng Anime.jsBây giờ bạn đã biết cách xác định các yếu tố khác nhau cần tạo hoạt ảnh. Đã đến lúc tìm hiểu những thuộc tính và thuộc tính nào có thể được tạo hoạt hình bằng thư viện.
Thuộc tính CSSVí dụ: chúng bao gồm chiều rộng, chiều cao và màu sắc cho các phần tử mục tiêu khác nhau. Giá trị cuối cùng của các thuộc tính hoạt hình khác nhau như màu nền được xác định bằng cách sử dụng lowCamelCase. Do đó, màu nền trở thành màu nền. Đoạn mã dưới đây minh họa hoạt hình vị trí của đối tượng bên trái và màu nền (backgroundColor) của đối tượng đích.
Var animateLeft = anime(( target: ".square", left: "50%" )); var animateBackground = anime(( Target: ".square", BackgroundColor: "#f96" ));
Thuộc tính có thể mất các loại khác nhau các giá trị họ sẽ sử dụng CSS thông thường. Ví dụ: thuộc tính left có thể có các giá trị sau: 50vh , 500px hoặc 25em . Bạn cũng có thể bỏ qua đơn vị đo sau số nhưng trong trường hợp này mặc định nó sẽ trở thành px. Hành động tương tự có thể được thực hiện với màu nền, chỉ định màu là giá trị thập lục phân hoặc sử dụng mã RGB hoặc HSL.
Chuyển đổi CSSViệc chuyển đổi dọc theo trục X và Y đạt được bằng cách sử dụng thuộc tính dịchX và dịchY. Tương tự, bạn có thể chia tỷ lệ, nghiêng hoặc xoay một phần tử dọc theo một trục cụ thể bằng cách sử dụng các thuộc tính tỷ lệ, nghiêng hoặc xoay phù hợp với trục cụ thể đó.
Có thể xác định các góc khác nhau theo độ hoặc sử dụng thuộc tính quay. Giá trị lần lượt là 1 tương ứng với 360 độ. Điều này làm cho việc tính toán dễ dàng hơn vì bạn biết cần xoay các phần tử bao nhiêu so với trục của chúng. Ví dụ bên dưới cho thấy cách tạo hiệu ứng động cho việc chia tỷ lệ, chuyển đổi hoặc xoay của một thuộc tính hoặc tất cả chúng cùng một lúc.
Var animateScaling = anime(( target: ".square", tỉ lệ: 0.8 )); var animateTranslation = anime((target: ".square", TranslateX: window.innerWidth*0.8 )); var animateRotation = anime(( target: ".square", xoay: "1turn" )); var animateAll = anime(( target: ".square", tỉ lệ: 0.8, dịchX: window.innerWidth*0.8, xoay: "1turn" ));
Thuộc tính SVGĐiều kiện duy nhất là giá trị thuộc tính phải là số. Khả năng tạo hoạt ảnh cho các thuộc tính khác nhau mở ra khả năng tạo ra một số hiệu ứng mát mẻ. Vì bài viết này chỉ nhằm mục đích cung cấp thông tin nên nó sẽ chứa các ví dụ đơn giản.
Tóm tắt: Một ví dụ đơn giản: phương pháp tuyệt chủng màu vàng. Hoạt ảnh sử dụng thư viện JavaScript. Hơn ví dụ phức tạp: Di chuyển và thay đổi kích thước. Chuyển tiếp CSS.
Nguyên tắc đằng sau sự mờ dần là màu nền của phần tử mờ dần được đặt thành màu vàng và sau đó, qua một loạt các bước, màu của nó sẽ trở về màu ban đầu. Vì vậy, nếu màu nền ban đầu là màu đỏ thì màu đó sẽ được đặt thành màu vàng, sau đó là vàng cam, sau đó là cam, sau đó là đỏ cam và sau đó là đỏ. Số bước được sử dụng sẽ xác định mức độ thay đổi màu sắc diễn ra suôn sẻ như thế nào và thời gian giữa các bước xác định thời gian thay đổi màu tiếp tục. Khi thay đổi màu sắc bạn có thể sử dụng sự thật hữu ích từ CSS: một màu có thể được định nghĩa là bộ ba số thông thường hoặc dưới dạng chuỗi thập lục phân. Do đó #FF0000 (màu đỏ) cũng có thể được định nghĩa là rgb(255,0,0) . Do đó, việc thay đổi từ màu vàng sang màu đỏ theo năm bước có nghĩa là chuyển từ rgb(255,255,0) (màu vàng) sang rgb(255,0,0) theo năm bước sau:
rgb(255,255,0) rgb(255,192,0) rgb(255,128,0) rgb(255,64,0) rgb(255,0,0)
Ví dụ phức tạp hơn: di chuyển và thay đổi kích thướcMặc dù phương pháp làm mờ màu vàng thể hiện hoạt ảnh nhưng nó có phần nhàm chán. Khi hầu hết mọi người nghĩ đến hoạt hình, họ thường nghĩ đến chuyển động. Một kỹ thuật thú vị để cảnh báo người dùng rằng điều gì đó đã xảy ra mà không làm gián đoạn quy trình làm việc của họ là sử dụng thông báo không có chế độ. Thay vì hiển thị hộp thoại cửa sổ cảnh báo() yêu cầu người dùng nhấp vào OK trước khi họ có thể tiếp tục, chỉ cần đặt thông báo vào một div nổi trên trang và giữ nguyên ở đó một cách kín đáo cho đến khi nhận được xác nhận. Cái thứ hai là đủ điều thú vịđiều này sau đó có thể cho phép người dùng quay lại tin nhắn mà họ đã xác nhận rằng họ muốn đọc lại. Vì vậy, hãy triển khai một thông báo nổi mà khi nhấp vào sẽ thu gọn về góc màn hình và sau đó có thể khôi phục lại khi nhấp vào. Bạn có thể xem bản demo ngắn về "thông báo thu gọn" này (http://dev.opera.com/articles/view/javascript-animation/moving_messages_jq.html) để có ý tưởng chung.
Nếu bạn đang thực hiện một số công việc hoạt hình nghiêm túc hoặc một số công việc JavaScript nghiêm túc, thì hầu như luôn có giá trị sử dụng Thư viện JavaScript. Điều này sẽ cho phép bạn tạo bản trình bày mong muốn cho người dùng mà không phải lo lắng về những vấn đề toán học phức tạp cần có để thực hiện hoạt ảnh. (Sau khi xem ví dụ đầu tiên ở trên, bây giờ bạn đã biết cách thực hiện Tính toán toán học và cách sử dụng setInterval nhưng bạn sẽ tiết kiệm được thời gian và sức mạnh riêng sử dụng các giải pháp làm sẵn.)
Bản demo trên sử dụng để làm việc thư viện jQuery(http://jquery.com/), nhưng như đã đề cập, hầu hết các thư viện đều cung cấp khái niệm hoạt ảnh đủ tương tự để bạn có thể triển khai phần nguyên tắc bằng thư viện ưa thích của mình. Về cơ bản, bạn cần phải làm như sau:
Thực hiện hoạt hình với sử dụng jQuery rất dễ dàng: chỉ cần sử dụng . animate() và cung cấp mong muốn kết quả cuối cùng hoạt hình (và nó sẽ chạy trong bao lâu):
$(ourObject).animate(( width: "20px", chiều cao: "20px", trên cùng: "20px", phải: "20px", lềRight: "0px", độ mờ: "0.2" ), 300);
Hàm này lấy ourObject và, trong 300 mili giây, thay thế chiều rộng và chiều cao của nó bằng 20px, vị trí trên cùng và bên phải của nó bằng 20px, thuộc tính kiểu lề phải bằng 0px và mật độ của nó (trong các trình duyệt hỗ trợ mật độ hình ảnh) bằng 20%. Sau đó, vấn đề chỉ là lập trình theo phong cách
Paul là người ủng hộ thiết kế và hoàn thiện
Truyền bá Chrome và web di động trong nhóm Quan hệ nhà phát triển tại Google.
Có hai cách chính để tạo hoạt ảnh trên Internet: bằng sử dụng CSS và JavaScript. BẠn nên chọn cái nào? Điều này phụ thuộc vào các đặc điểm khác của dự án của bạn, cũng như những hiệu ứng bạn đang cố gắng đạt được
TL;DR- Sử dụng hoạt ảnh sử dụng CSS dành cho các chuyển đổi đơn giản, ngắn gọn như chuyển đổi trạng thái của các phần tử giao diện người dùng.
- Sử dụng hoạt ảnh JavaScript khi bạn cần các hiệu ứng phức tạp như nảy, dừng, tạm dừng, tua lại hoặc chậm lại.
- Nếu bạn chọn tạo hoạt ảnh bằng JavaScript, hãy sử dụng TweenMax hoặc nếu bạn muốn một giải pháp đơn giản hơn, TweenLite.
Hầu hết hoạt hình đơn giản có thể được tạo bằng cả CSS và sử dụng JavaScript tuy nhiên, số lượng nhân công và thời gian sử dụng sẽ khác nhau (xem thêm bài viết). Mỗi lựa chọn đều có những ưu điểm và nhược điểm riêng nhưng đều có quy tắc tốtđể theo dõi:
- Sử dụng CSS khi làm việc với các trạng thái nhỏ, độc lập của các thành phần giao diện người dùng. Chuyển tiếp và hoạt ảnh CSS là lý tưởng để hiển thị menu điều hướng ở bên cạnh màn hình hoặc hiển thị chú giải công cụ. JavaScript có thể được sử dụng để kiểm soát trạng thái, nhưng bản thân hoạt ảnh sẽ được thực hiện bằng CSS.
- Sử dụng JavaScript khi bạn cần mức độ kiểm soát cao đối với hoạt ảnh của mình. Khi bạn cần triển khai theo dõi vị trí cảm ứng động hoặc hoạt ảnh cần dừng, tạm dừng, làm chậm hoặc bắt đầu trong hướng ngược lại, bạn nên sử dụng JavaScript.
Nếu bạn đang sử dụng jQuery hoặc một khung JavaScript có chức năng hoạt ảnh, bạn có thể cảm thấy thoải mái hơn khi sử dụng các tính năng đó thay vì chuyển sang CSS.
Hoạt hình với CSSHoạt hình bằng CSS chắc chắn là tốt nhất một cách đơn giản làm cho một cái gì đó di chuyển trên màn hình.
Sau đây là mã CSS di chuyển một phần tử 100 pixel dọc theo trục X và Y. Điều này được thực hiện bằng cách sử dụng Chuyển đổi CSS, được thiết lập để chạy trong vòng 500 mili giây. Khi bạn thêm lớp di chuyển, giá trị của thuộc tính biến đổi sẽ thay đổi và quá trình chuyển đổi bắt đầu.
Box ( -webkit-transform: Translate(0, 0); -webkit-transition: -webkit-transform 500ms; Transform: Translate(0, 0); transition: Transform 500ms; ) .box.move ( -webkit-transform: dịch(100px, 100px); biến đổi: dịch(100px, 100px); )
Nếu, như trong đoạn mã trên, bạn tạo các lớp CSS riêng biệt để kiểm soát hoạt ảnh, bạn có thể bật và tắt từng hoạt ảnh bằng JavaScript:
Box.classList.add("di chuyển");
Điều này sẽ cho phép các ứng dụng của bạn được cân bằng rất tốt. Trọng tâm có thể là quản lý trạng thái bằng JavaScript. Nếu không, bạn chỉ cần đặt các lớp thích hợp cho các thành phần đích và hoạt ảnh sẽ được trình duyệt thực hiện. Nếu bạn chọn đường dẫn này, bạn có thể nhận các sự kiện chuyển tiếp cho phần tử. Tuy nhiên nó không phù hợp với người già Phiên bản Internet Nhà thám hiểm; phiên bản 10 là phiên bản đầu tiên hỗ trợ những sự kiện này. Tất cả các trình duyệt khác đã hỗ trợ sự kiện này từ khá lâu.
Mã JavaScript cần thiết để nhận sự kiện kết thúc quá trình chuyển đổi như sau:
Hộp Var = document.querySelector(".box"); box.addEventListener("transitionend", onTransitionEnd, false); function onTransitionEnd() ( // Xử lý quá trình chuyển đổi hoàn tất. )
Bên cạnh việc sử dụng chuyển tiếp CSS, bạn cũng có thể sử dụng Hoạt hình CSS, cho phép kiểm soát chính xác hơn nhiều đối với từng khung hình chính, thời lượng và chuyển động hoạt ảnh.
Lưu ý: Nếu hoạt ảnh là điều mới mẻ đối với bạn, bạn nên biết rằng khung hình chính là một thuật ngữ cũ được sử dụng từ thời hoạt ảnh được vẽ bằng tay. Các nhà hoạt hình đã tạo ra những khung hình đặc biệt cho một phần hành động được gọi là khung hình chính. Họ chụp những thứ như phần ngoài cùng của một số chuyển động và sau đó vẽ tất cả các khung hình riêng lẻ giữa các khung hình chính. Ngày nay, khi tạo hoạt ảnh bằng CSS, có một quy trình tương tự trong đó chúng ta cho trình duyệt biết những giá trị nào nó nên có. Thuộc tính CSS tại một số điểm nhất định và trình duyệt sẽ lấp đầy những khoảng trống.Ví dụ: bạn có thể tạo hoạt ảnh cho hình vuông bằng cách sử dụng các hiệu ứng chuyển tiếp theo cách tương tự, nhưng hoạt ảnh sẽ diễn ra mà không cần bất kỳ hành động nào của người dùng (ví dụ: nhấp chuột) và sẽ lặp lại vô tận. Ngoài ra, bạn có thể thay đổi nhiều thuộc tính cùng lúc:
/** * Đây là phiên bản đơn giản không có tiền tố * nhà cung cấp. Với chúng được bao gồm * (mà bạn sẽ cần) mọi thứ trở nên xa hơn * dài dòng hơn! */ .box ( /* Chọn hoạt ảnh */ animation-name: movingBox; /* Thời lượng của hoạt ảnh */ animation-duration: 1300ms; /* Số lần chúng ta muốn hoạt ảnh chạy */ animation-iteration-count : vô hạn; /* Làm cho hoạt ảnh đảo ngược trên mỗi lần lặp lẻ */ animation-direction: xen kẽ; ) @keyframes movingBox ( 0% ( Transform: Translate(0, 0); opacity: 0.3; ) 25% ( opacity: 0.9 ; ) 50% ( biến đổi: dịch(100px, 100px); độ mờ: 0,2; ) 100% ( biến đổi: dịch (30px, 30px); độ mờ: 0,8; ) )
Khi tạo hoạt ảnh bằng CSS, bạn xác định chính hoạt ảnh đó một cách độc lập với phần tử đích, sau đó chọn hoạt ảnh mong muốn bằng thuộc tính tên hoạt ảnh.
Hoạt ảnh bằng CSS vẫn rất dành riêng cho từng trình duyệt, với tiền tố -webkit- được sử dụng để biểu thị nó trong Chrome, Safari, Opera, Safari Mobile và Trình duyệt Android. TRONG trình duyệt web IE và tiền tố Firefox không được sử dụng. Có rất nhiều công cụ cho phép bạn tạo ra những thứ cần thiết Phiên bản CSS có tiền tố, trong khi phiên bản không có tiền tố có thể được ghi vào tệp nguồn.
Hoạt hình với JavaScriptTạo hoạt ảnh bằng JavaScript khó hơn viết chuyển tiếp hoặc hoạt ảnh bằng CSS, nhưng nhìn chung JavaScript mang lại cho nhà phát triển nhiều hơn thế nhiều cơ hội. Thông thường, bạn sử dụng hàm requestAnimationFrame rồi xác định thủ công giá trị của từng thuộc tính của phần tử đang được tạo hoạt ảnh trên mỗi khung của hoạt ảnh.
Lưu ý: Trên Internet, bạn có thể tìm thấy các ấn phẩm mã trong đó hàm setInterval hoặc setTimeout được sử dụng cho hoạt ảnh. Đây là một giải pháp khủng khiếp vì hoạt ảnh sẽ không được đồng bộ hóa với tần số màn hình và do đó có khả năng xảy ra hiện tượng giật và rớt hình là rất cao. Bạn không nên sử dụng mã như vậy trong mọi trường hợp mà thay vào đó nên sử dụng hàm requestAnimationFrame đã được đồng bộ hóa một cách thích hợp.Hộp hàm () ( var animationStartTime = 0; var animationDuration = 500; var target = document.querySelector(".box"); this.startAnimation = function() ( animationStartTime = Date.now(); requestAnimationFrame(update); ) ; hàm cập nhật() ( var currentTime = Date.now(); var locationInAnimation = (currentTime - animationStartTime) / animationDuration; var xPosition = locationInAnimation * 100; var yPosition = locationInAnimation * 100; target.style.transform = "translate(" + xPosition + "px, " + yPosition + "px)"; if (positionInAnimation 1000 / 50 = 20ms var time = setInterval(function())( // giảm giá trị độ mờ hiện tại op -= d0; // đặt độ mờ thành phần tử DOM elem .style.opacity = op; // giảm số bước hoạt ảnh còn lại step--; // nếu hoạt ảnh kết thúc if(steps
