So sánh hoạt hình bằng CSS và JavaScript. Hoạt ảnh CSS3 và phương thức javascript Animate() mới
Phần cuối cùng sẽ mô tả các hàm gọi lại khác nhau được sử dụng để thực hiện các hàm tùy thuộc vào tiến trình của hoạt ảnh. Hầu hết mọi ví dụ trong các bài viết trước đều sử dụng thuộc tính CSS để hiển thị cách chúng hoạt động Các phương pháp khác nhau và các thông số. Bạn có thể có ấn tượng rằng Anime.js phù hợp hơn để tạo hoạt ảnh cho các thuộc tính CSS. Trong hướng dẫn này, bạn sẽ biết rằng nó cũng có thể được sử dụng để tạo hiệu ứng động cho các tệp SVG.
Trong ba bài viết trước, chúng ta đã xem xét nhiều chức năng của thư viện Anime.js. Bạn có thể tìm hiểu cách chọn các phần tử mục tiêu; về các loại tham số được sử dụng để kiểm soát độ trễ và thời lượng của hoạt ảnh; c - làm thế nào để có nhiều quyền kiểm soát hơn đối với các giá trị của các thuộc tính đơn lẻ.
Chức năng gọi lại
Lệnh gọi lại được sử dụng để thực hiện các chức năng dựa trên tiến trình của hoạt ảnh. Có 4 chức năng trong Anime.js gọi lại: bắt đầu, chạy, cập nhật và hoàn thành. Mỗi người trong số họ chạy vào thời gian nhất định và lấy một đối tượng hoạt hình làm đối số của nó.
Hàm Begin() được gọi khi hoạt ảnh bắt đầu. Điều này có nghĩa là nếu hoạt ảnh có tham số độ trễ có giá trị 800 mili giây thì start() sẽ không được gọi cho đến 800 mili giây sau. Bạn có thể kiểm tra xem hoạt ảnh đã bắt đầu hay chưa bằng cách sử dụng hàm animationName.begin, hàm này trả về true (đã bắt đầu) hoặc sai (không bắt đầu).
Run được sử dụng để thực thi một chức năng ở mỗi khung hình sau khi hoạt ảnh bắt đầu. Nếu bạn cần thực thi một chức năng ở mọi khung hình ngay từ đầu hoạt ảnh, bất kể tham số độ trễ là bao nhiêu, thì hãy sử dụng chức năng gọi lại cập nhật.
Hàm gọi lại hoàn chỉnh tương tự như started, chỉ có điều nó được gọi sau khi kết thúc. Để kiểm tra xem hoạt ảnh đã hoàn thành hay chưa, hãy sử dụng animationName.complete, giống như với started.
Trước đây, chúng tôi đã sử dụng chức năng gọi lại cập nhật để cập nhật số lượng tệp được quét và bị nhiễm. Trong bài viết này, chúng tôi sẽ mở rộng ví dụ quét và bạn sẽ thấy tất cả các hàm gọi lại hoạt động như thế nào.
Var filesScanned = (đếm: 0, bị nhiễm: 0); var scanCount = document.querySelector(".scan-count"); var bị nhiễm = document.querySelector(".infect-count"); var scanner = anime(( target: filesScanned, autoplay: false, count: 100, bị nhiễm: 8, độ trễ: 1000, thời lượng: 2000, nới lỏng: "tuyến tính", vòng: 1, cập nhật: function(anim) ( if (anim .thời điểm hiện tại< 1000) { document.querySelector(".update-cb").innerHTML = "Creating an Index..."; } }, begin: function() { document.querySelector(".begin-cb").innerHTML = "Starting the Scan..."; }, run: function() { scanCount.innerHTML = filesScanned.count; infected.innerHTML = filesScanned.infected; }, complete: function() { document.querySelector(".complete-cb").innerHTML = "Scan Complete..."; } });
Trong ví dụ trên, chúng tôi đã cố tình thêm độ trễ hoạt ảnh để có thể thấy sự khác biệt về thời gian thực hiện của các hàm gọi lại khác nhau. Hàm gọi lại cập nhật bắt đầu thực thi ngay sau khi đối tượng hoạt ảnh được tạo.
Bản thân hoạt ảnh bắt đầu với độ trễ 1000 mili giây và tại thời điểm này, chức năng bắt đầu kích hoạt, hiển thị cho người dùng thông báo “Bắt đầu quét…”. Đồng thời quá trình chạy bắt đầu thực thi và cập nhật giá trị sốđối tượng sau mỗi khung hình. Sau khi hoạt ảnh kết thúc, lệnh gọi lại hoàn chỉnh sẽ hiển thị thông báo “Quét hoàn tất…”.
Chức năng làm mịn
Các hàm làm mịn được sử dụng để điều khiển quá trình chuyển đổi giá trị ban đầu thuộc tính vào trận chung kết. Các hàm này có thể được xác định bằng cách sử dụng tham số nới lỏng, tham số này có thể lấy các giá trị dưới dạng chuỗi hoặc dưới dạng tọa độ đường cong Bezier tùy chỉnh (dưới dạng mảng).
Có 31 chức năng làm mịn được tích hợp sẵn. Một trong số chúng được gọi là tuyến tính, 30 cái còn lại bao gồm các biến thể khác nhau của easyIn, easyOut và easyInOut. Lớp đàn hồi định nghĩa ba hàm làm mịn: easyInElastic, easyOutElastic và easyInOutElastic. Bạn có thể kiểm soát chúng bằng cách sử dụng tham số độ đàn hồi. Giá trị của tham số này chỉ có thể nằm trong khoảng từ 0 đến 1000.
Sử dụng easyIn làm cho giá trị thay đổi nhanh hơn, bắt đầu từ số 0. Điều này có nghĩa là nó sẽ thay đổi chậm lúc đầu và nhanh chóng về cuối. Tốc độ thay đổi bằng 0 ở đầu và 1000 ở cuối.
Hàm easyOut làm chậm quá trình thay đổi giá trị bắt đầu từ tốc độ tối đa.
easyInOut tăng tốc độ thay đổi các giá trị ở đầu và làm chậm chúng ở cuối. Điều này có nghĩa là ở giữa hoạt ảnh tốc độ sẽ nhanh nhất. Hộp sau đây cho thấy sự khác biệt giữa các hàm làm mịn này:
Bạn có thể tạo các tính năng gia tốc của riêng mình bằng cách sử dụng anime.easings. Dưới đây là một ví dụ về việc tạo chức năng tùy chỉnhđộ mịn:
Anime.easings["tanCube"] = function(t) ( return Math.pow(Math.tan(t * Math.PI / 4), 3); ) anime.easings["tanSqr"] = function(t) ( return Math.pow(Math.tan(t * Math.PI / 4), 2); ) var tanCubeSequence = anime(( target: ".tan-cube", TranslateX: "75vw", thời lượng: 2000, giảm bớt: " tanCube", tự động phát: false )); var tanSqrSequence = anime(( target: ".tan-sqr", TranslateX: "75vw", thời lượng: 2000, nới lỏng: "tanSqr", autoplay: false ));
Hoạt ảnh dựa trên tệp SVG
Trong tất cả các hoạt ảnh liên quan đến chuyển động đã được tạo cho đến thời điểm này, các phần tử mục tiêu đã di chuyển theo đường thẳng. Trong Anime.js, bạn có thể di chuyển các phần tử dọc theo các đường dẫn SVG phức tạp bằng một lượng lớnđường cong với khả năng kiểm soát vị trí và góc của các phần tử hoạt hình trên đường viền. Để di chuyển một phần tử dọc theo trục X trên một đường dẫn, hãy sử dụng path("x") . Tương tự, các phần tử có thể được di chuyển dọc theo trục Y bằng cách sử dụng path("y") .
Nếu đường viền không được biểu diễn dưới dạng đường thẳng thì nó hầu như sẽ luôn tạo thành một góc so với đường chính. đường chân trời. Khi xoay bất kỳ phần tử hoạt hình không tròn nào, hình ảnh tổng thể sẽ trông tự nhiên hơn nếu phần tử đó di chuyển dọc theo góc của đường dẫn. Điều này có thể được thực hiện bằng cách đặt thuộc tính xoay thành path("angle") . Dưới đây là một ví dụ mã tạo hoạt ảnh cho bốn phần tử với những nghĩa khác nhauđộ mịn dọc theo đường viền SVG:
Đường dẫn Var = anime.path("đường dẫn"); var easings = ["tuyến tính", "easeInCubic", "easeOutCubic", "easeInOutCubic"]; var motionPath = anime((target: ".square", TranslateX: path("x"), dịchY: path("y"), xoay: path("angle"), nới lỏng: function (el, i) ( return easings[i]; ), thời lượng: 10000, loop: true ));
Trong hình nhỏ bên dưới, bạn có thể thấy rằng hình vuông màu đỏ với hàm easyInCubic di chuyển chậm nhất ở phần đầu nhưng nhanh nhất ở phần cuối. Tình huống tương tự trong trường hợp hình vuông màu cam - nó di chuyển nhanh nhất ở đầu nhưng chậm nhất ở cuối.
Có thể tạo hiệu ứng chuyển đổi của các hình dạng SVG khác nhau từ hình này sang hình khác bằng Anime.js. Điều kiện duy nhất để chuyển đổi hình dạng là có số điểm neo bằng nhau. Điều này có nghĩa là hình tam giác chỉ có thể chuyển thành hình tam giác khác, hình tứ giác thành hình tứ giác, v.v. Cố gắng chuyển đổi các phần tử có số điểm neo không bằng nhau sẽ dẫn đến sự thay đổi mạnh mẽ về hình dạng. Dưới đây là một ví dụ về phép biến đổi tam giác:
Biến hình = anime(( mục tiêu: "đa giác", điểm: [ ( giá trị: "143 31 21 196 286 223" ), ( giá trị: "243 31 21 196 286 223" ), ( giá trị: "243 31 121 196 286 223" ), ( giá trị: "243 31 121 196 386 223" ), ( giá trị: "543 31 121 196 386 223" )], nới lỏng: "tuyến tính", thời lượng: 4000, hướng: "thay thế", vòng lặp: đúng ));
Một trong những điều nhất hiệu ứng thú vị Anime.js là khả năng tạo các bản vẽ đường thẳng. Tất cả những gì bạn phải làm là cung cấp cho thư viện đường viền mà bạn muốn sử dụng để vẽ đường; cung cấp các tham số khác để kiểm soát thời lượng, độ trễ và độ mượt. Ví dụ bên dưới đã sử dụng lệnh gọi lại hoàn chỉnh để làm cho đồ họa neo của Font Awesome có màu vàng.
Var linedraw = anime(( target: "path", StrokeDashoffset: , easing: "easeInOutCubic", thời lượng: 4000, hoàn thành: function(anim) ( document.querySelector("path").setAttribution("fill", "vàng" ); ) ));
Sử dụng kiến thức về tất cả các khái niệm bạn đã học, bạn sẽ có thể tạo ra những bản vẽ phức tạp hơn với nhiều tính năng hơn nữa. kiểm soát tốt hơn về cách chúng được vẽ. Dưới đây là ví dụ về hiển thị tên bằng SVG:
Var thưTime = 2000; var linedraw = anime(( target: "path", đột quỵDashoffset: , easing: "easeInOutCubic", thời lượng: letterTime, delay: function(el, i) ( return letterTime * i; ), bắt đầu: function(anim) ( var Letters = document.querySelectorAll("đường dẫn"), i;for (i = 0; i< letters.length; ++i) { letters[i].setAttribute("stroke", "black"); letters[i].setAttribute("fill", "none"); } }, update: function(anim) { if (anim.currentTime >= letterTime) ( document.querySelector(".letter-m").setAttribution("fill", "#e91e63"); ) if (anim.currentTime >= 2 * letterTime) ( document.querySelector(".letter-o ").setAttribution("fill", "#3F51B5"); ) if (anim.currentTime >= 3 * letterTime) ( document.querySelector(".letter-n").setAttribution("fill", "#8BC34A" ); ) if (anim.currentTime >= 4 * letterTime) ( document.querySelector(".letter-t").setAttribution("fill", "#FF5722"); ) if (anim.currentTime >= 5 * letterTime ) ( document.querySelector(".letter-y").setAttribution("fill", "#795548"); ) ), tự động phát: false ));
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 CSS
Hoạ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.
Ghi chú:Nếu hoạt hì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 hì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 JavaScript
Tạ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.
Ghi chú: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); ) ; cập nhật hàm() ( 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<= 1) requestAnimationFrame(update); } } var box = new Box(); box.startAnimation();
Mã này trở nên rất phức tạp và khó quản lý nếu bạn cố gắng bao gồm nhiều trường hợp, vì vậy nói chung nên chọn một trong nhiều thư viện hoạt ảnh JavaScript có sẵn. Nếu bạn đã sử dụng jQuery trong dự án của mình thì có lẽ bạn không nên chuyển sang các tùy chọn khác. Sử dụng các hàm .animate(). Nếu bạn cần một thư viện chuyên biệt, hãy thử TweenMax cực kỳ mạnh mẽ của Greensock. Có một phiên bản đơn giản hóa tên là TweenLite tạo ra các tệp nhỏ hơn.
Vì hoạt ảnh JavaScript cho phép bạn có toàn quyền kiểm soát các kiểu thành phần ở mỗi bước nên bạn có thể làm chậm, tạm dừng, dừng, phát ngược lại và thực hiện các thao tác khác với hoạt ảnh.
Trừ khi có ghi chú khác, nội dung của trang này được cấp phép theo Giấy phép Creative Commons Ghi công 3.0 và các mẫu mã được cấp phép theo Giấy phép Apache 2.0. Để biết chi tiết, xem của chúng tôi. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các chi nhánh của nó.
Cập nhật ngày 8 tháng 8 năm 2018
Tài liệu này dành cho hoạt ảnh trên các trang HTML, hiệu suất hoạt ảnh, triển vọng sử dụng cũng như hoạt ảnh trong các ứng dụng và trò chơi di động HTML5.
Hoạt hình Javascript
Trước hết, hãy bắt đầu bằng cách xem hoạt ảnh JS trên trang HTML. Hoạt ảnh trong JavaScript có thể được thực hiện bằng setInterval, trong đó bạn có thể đặt khung hình tĩnh mỗi giây hoặc sử dụng một hàm thông thường mà cuối cùng sẽ gọi chính nó hoặc bằng window.requestAnimationFrame.
Đây là logic đơn giản nhất về cách hoạt động của hoạt ảnh trong JS:
var el=document.getElementById("elem");
tháng ba=10; //dữ liệu ban đầu tĩnh
// chu kỳ bắt đầu
mar=mar+1;
el.style.marginLeft=mar+"px";
//vòng lặp kết thúc
Cái hay của JS là bạn có thể mở rộng các công cụ gốc và sử dụng một cách thuận tiện, chẳng hạn như hoạt ảnh jQuery hoặc sử dụng Vận tốc. Điều này tăng tốc đáng kể năng suất. Tuy nhiên, đặc biệt, Velocity không sử dụng JS cho hoạt ảnh mà bản thân hoạt ảnh được thực hiện ở đó bằng CSS, điều này sẽ được thảo luận bên dưới.
Hoạt hình SVG
Chúng ta không thể không nhắc tới ảnh động SVG. Bản thân nó rất tốt, nhưng nó không hoạt động trên trình duyệt di động. Hay đúng hơn là chỉ SMIL hoạt động trên Android 3.0 trở lên. Có thể nói là khó chịu, nhưng bản thân SVG hoạt động theo phương thức WebView, nhưng than ôi, mọi thứ liên quan đến hoạt ảnh trong thẻ này...
Ở bất cứ nơi nào cô ấy làm việc, cô ấy đều thể hiện tốt. Xem cho chính mình.
Một tính năng đặc biệt là không có pixel bên trong SVG mà thay vào đó là một số giá trị trừu tượng. Sau khi chỉ định chiều cao và chiều rộng của phần tử svg, bạn có thể chỉ định thuộc tính hộp xem, nhờ đó bạn có thể điều chỉnh vị trí của các phần tử bên trong và kích thước tương đối của chúng. SVG có thể được tạo theo bất kỳ chiều dài và chiều rộng nào và nó sẽ điều chỉnh các đối tượng bên trong để phù hợp với kích thước của hộp xem.
Hoạt hình canvas
Loại hoạt ảnh này rất phổ biến trong các trình duyệt trên máy tính thông thường, đặc biệt là khi tạo trò chơi. Những nhược điểm là:
1. Thiếu nhận dạng DOM cho các phần tử.
2. Độ phân giải càng cao thì hiệu suất càng thấp.
Trong trình duyệt di động, hoạt ảnh canvas không hoạt động trơn tru.
Hoạt ảnh CSS
Hãy xem hoạt hình bằng CSS3. Như bạn đã biết, trong CSS3, chúng ta đã tìm thấy một thuộc tính hoạt ảnh tuyệt vời mà bạn có thể tạo hoạt ảnh hoàn toàn cho một số đối tượng nhất định.
Làm thế nào điều này xảy ra? Ví dụ: chúng tôi muốn di chuyển phần tử #obj sang phải 300 pixel và di chuyển nó trở lại, lặp lại hoạt ảnh vô thời hạn. Với CSS3, việc này đã trở thành một thao tác rất dễ dàng.
Ngoài chiều rộng và chiều cao tiêu chuẩn, chúng ta gán các thuộc tính sau cho đối tượng:
Hoạt hình Webkit: 3 giây di chuyển tuyến tính vô hạn;
hoạt hình: 3s di chuyển tuyến tính vô hạn;
Để tương thích nhiều trình duyệt hơn, chúng tôi đặt hai thuộc tính cho đối tượng, trong đó 3 giây - 3 giây để hoàn thành toàn bộ hoạt ảnh, di chuyển - tên của hoạt ảnh được áp dụng cho đối tượng (xem thêm chi tiết bên dưới), tuyến tính - một lá cờ làm cho đối tượng di chuyển với tốc độ như nhau trong mọi khu vực, vô hạn - cờ làm cho hoạt ảnh trở nên vô tận.
Bây giờ chúng ta hãy chạm vào hoạt ảnh chuyển động. Nó sẽ cần phải được viết trong cùng một tệp CSS nơi bạn áp dụng nó. Trước đây và thậm chí bây giờ, một số người sử dụng các tham số trái/phải/trên/dưới hoặc lề để di chuyển một đối tượng trên màn hình. Đây thực sự là một cách làm khá tệ và không nên thực hiện vì nó chưa được tối ưu hóa - bạn có thể đạt được chuyển động mượt mà hơn với các thuộc tính CSS3 khác. Các thuộc tính này là dịch và dịch.
/*Hoạt hình xấu*/
@-webkit-keyframes đang di chuyển (
từ (lề trái: 0;)
50% (lề trái: 300px;)
đến (lề trái: 0;)
}
/*Hoạt hình hay*/
@-webkit-keyframes đang di chuyển (
từ (chuyển đổi: Translatex(0);)
50% (chuyển đổi: Translatex(300px);)
sang (chuyển đổi: Translatex(0);)
}
Cũng cần lưu ý rằng quá trình chuyển đổi trong các sự kiện như di chuột cũng hoạt động rất tốt trên thiết bị di động. Chà, nói chung, bạn có thể đính kèm cùng một chuyển tiếp hoặc hoạt ảnh CSS3 vào bất kỳ phần tử nào bằng cách sử dụng JS. Trong trường hợp này, bạn sẽ có tùy chọn tốt nhất (JS chỉ định nội dung cần tạo hoạt ảnh, CSS hoạt ảnh).
Vì trường hợp này nên khi tạo trò chơi, họ thường sử dụng các khung và công cụ hỗ trợ phát triển. Một trong số đó là Sencha Animator, cho phép bạn thực hiện nhiều việc khác nhau bằng CSS và có giao diện thân thiện với người dùng.
Cái nào tốt hơn và nhanh hơn: hoạt hình CSS hay hoạt hình JS?
Đầu tiên chúng ta có thể đi sâu hơn một chút vào phần tính toán để làm rõ tình huống một chút. Javascript là một ngôn ngữ được thông dịch và để thực thi nó, công cụ JS của trình duyệt phải liên tục phân tích cú pháp hướng dẫn (mã) trong quá trình thực thi và sau đó chuyển đổi nó thành mã mà máy có thể đọc được. Tình huống với CSS hơi khác một chút. Thực tế là nó ngay lập tức được biên dịch sang ngôn ngữ máy và do đó cho thấy hiệu suất tốt hơn trong hoạt ảnh.
Hoạt hình CSS theo mặc định có hiệu suất cao hơn nhiều so với Javascript, nhưng có một số sắc thái khi sử dụng JS mang lại lợi thế về hiệu suất cao hơn.
Như đã nói trong các đề xuất mới nhất về hoạt ảnh CSS, tốt hơn là nên sử dụng CSS để xử lý hoạt ảnh và JS để chỉ ra những gì cần xử lý (ví dụ: chỉ đơn giản bằng cách treo trên một thành phần lớp với các hoạt ảnh được quy định cần thiết).
Đó là câu hỏi về hiệu suất, câu hỏi tiếp theo là mức độ phù hợp. Bất chấp tất cả các khía cạnh có vẻ thuận lợi của CSS, vẫn có những tình huống phát sinh rằng sử dụng JS sẽ tốt hơn. Nó xảy ra.
Tối ưu hóa hiệu suất hoạt ảnh
Nếu bạn đang tạo một ứng dụng HTML 5 trên Android, bạn có thể thử cách sau:
Thêm android:hardwareAccelerated="true" vào thông số hoạt động của bạn
Điều này sẽ giúp tăng tốc phần cứng, GPU, khi bật tùy chọn này, sẽ bắt tay vào làm việc và cùng với CPU, sẽ hoàn toàn bận rộn xử lý ứng dụng của bạn. Nhược điểm duy nhất là thời lượng pin sẽ vui hơn một chút.
Ngoài ra, không sử dụng sự kiện onclick (mặc dù nó hoạt động trên màn hình cảm ứng). Thực tế là sự kiện này gây ra độ trễ khoảng 1/3 giây và để tránh điều này, tốt hơn hết bạn nên sử dụng ontouchstart và ontouchend.
Hãy nhớ bổ sung và viết vào phần bình luận những gì chưa được đề cập trong bài viết. Cùng nhau, chúng ta sẽ tạo ra tài liệu chất lượng cao bằng tiếng Nga.
07.02.2016Nếu bây giờ bạn đang ở trong tình huống cần tạo một hình ảnh động ấn tượng cho một trang web, thì bài đăng này chắc chắn sẽ cung cấp cho bạn những công cụ hữu ích.
Xin chào các bạn! Trong bài viết này, tôi mời bạn xem tuyển tập các thư viện CSS và plugin JS tuyệt vời của tôi sẽ giúp bạn triển khai các hoạt ảnh tương thích nhất trên trang web của mình trong vài phút.
Plugin JavaScript cho hoạt ảnh
Nếu bạn muốn tạo hoạt ảnh được kích hoạt bởi một số sự kiện hoặc hành động thì plugin hoạt ảnh JavaScript sẽ giúp bạn rất nhiều trong việc này. Nhưng điều đáng chú ý là hầu hết các hoạt ảnh này đều được viết bằng CSS3 và được kiểm soát bằng JavaScript.
AniJS
Dynamics.js
Dynamic.js là một thư viện JavaScript để tạo hoạt ảnh dựa trên vật lý.
mo.js
mo.js là một thư viện tuyệt vời để tạo đồ họa chuyển động. Bạn thường thấy một ví dụ về đồ họa như vậy khi Google đặt một biểu tượng theo chủ đề mới (doodle), biểu tượng này sẽ hoạt hình khi được di chuột hoặc nhấp vào.
cta.js
cta.js - Plugin JavaScript để tạo lời kêu gọi hành động sinh động. Nhiều người trong số họ trông rất ấn tượng.
animo.js
animo.js là một công cụ mạnh mẽ để quản lý hoạt ảnh CSS3.
html5tooltips.js
html5tooltips.js - chú giải công cụ cũ tốt với thiết kế và hoạt ảnh hiện đại không phụ thuộc, kết nối và sử dụng.
Tên lửa
Rocket là một thư viện JS thú vị cho phép bạn tạo hiệu ứng động cho đường dẫn của một phần tử đến mục tiêu.
cuộnReveal.js
ScrollReveal.js là một plugin cho phép bạn tạo hiệu ứng động cho các phần tử khi cuộn trang.
Wow.js
Wow.js là một plugin javascript khác để kiểm soát hoạt ảnh khi cuộn trang.
Quá cảnh
Transit là một plugin jQuery để làm mượt các quá trình chuyển đổi và chuyển đổi được cung cấp trong jQuery.
thị sai.js
parallax.js là một plugin phản ứng với vị trí của điện thoại thông minh trong không gian, dựa vào đó, nó kiểm soát độ thụt, vị trí và độ sâu của các lớp. Nếu thiết bị không có con quay hồi chuyển thì các phép tính được thực hiện dựa trên vị trí của con trỏ chuột. Trong hai từ - thị sai nâng cao!
ranh mãnh
Sly - Thư viện JavaScript để tạo cuộn một chiều với điều hướng từng phần được triển khai. Nó có vẻ phức tạp về mặt ngôn từ, tôi khuyên bạn chỉ nên xem một ví dụ.
Di chuyển.js
Move.js là một thư viện JavaScript nhỏ để tạo hoạt ảnh CSS3 tùy chỉnh.
thanh trượt.js
slider.js là một thư viện JavaScript nhẹ và dễ sử dụng để tạo thanh trượt dọc và đồng thời ngang.
TạoJS
CreateJS là một tập hợp các thư viện và công cụ mô-đun có thể hoạt động cùng nhau hoặc độc lập để làm phong phú nội dung bằng tính tương tác. Chức năng của các thư viện này sẽ cho phép bạn tạo các trang web và ứng dụng tuyệt vời, hãy nhớ xem các bản demo.
Flippant.js
Flippant.js - Plugin JavaScript để tạo các phần tử có hiệu ứng xoay quanh trục của chúng.
jmpress.js
jmpress.js là một thư viện JavaScript với ý tưởng độc đáo là tạo một trang web trên canvas HTML5 vô tận. Ý tưởng này rất đáng được chú ý.
Thư viện CSS3
Các nhà phát triển có kinh nghiệm đã đảm nhiệm việc tạo một thư viện có hoạt ảnh CSS3 cho chúng tôi từ lâu. Bây giờ chúng ta có thể chỉ cần lấy chúng và áp dụng chúng trong các dự án của mình và tin tưởng vào tính hiệu quả của chúng.
Với thuật ngữ “hoạt hình”, chúng tôi thường muốn nói đến những bộ phim hoạt hình - những “phim hoạt hình” mà chúng tôi yêu thích từ khi còn nhỏ. Nhưng nếu tra từ điển giải thích, chúng ta thấy rằng dịch từ tiếng Pháp nó có nghĩa là “hồi sinh”, “hoạt hình”. Và ở đây hóa ra ý nghĩa này lại phù hợp một cách chính xác một cách đáng ngạc nhiên không chỉ với ngành công nghiệp điện ảnh mà còn cả công nghệ web.
Sử dụng các hiệu ứng hoạt hình khác nhau(chuyển tiếp, chuyển động, biến đổi, v.v.) “làm sinh động” trang web một cách đáng kể, cho phép bạn kiểm soát sự chú ý của người dùng, chuyển nó sang yếu tố cần thiết và đưa ra một số tín hiệu thị giác nhất định.
Nói đến hoạt hình, không thể không nhắc đến 12 nguyên tắc nổi tiếng được các nhà làm phim hoạt hình của hãng phim Disney xây dựng, việc sử dụng nguyên tắc này là vô cùng quan trọng để sử dụng hiệu ứng hoạt hình hợp lý và chất lượng cao.
Nói về những công nghệ cung cấp sử dụng hình ảnh động trong các trang web, một số có thể được phân biệt, nhưng có lẽ không có cái nào mạnh bằng . Chỉ cách đây vài năm, công nghệ hoạt hình Flash còn là đối thủ đáng gờm và rất được ưa chuộng. Nhưng bây giờ, có vẻ như những năm tháng huy hoàng nhất của nó đã qua và nó đang dần được thay thế khỏi các trang của các trang web bằng các tập lệnh Java mạnh mẽ và linh hoạt hơn. Và nếu bạn quyết định nghiêm túc sử dụng hình ảnh động trên trang web của bạn, thì bạn nên đặt cược vào JavaScript. Và để có sự lựa chọn thông minh về thư viện, tôi đã thực hiện bài đánh giá ngày hôm nay.
Dynamics.js
Có lẽ tôi sẽ bắt đầu với Dynamics.js. Đây là một thư viện nghiêm túc và mạnh mẽ cho phép bạn tạo hoạt ảnh thực tế về mặt vật lý (chẳng hạn như dao động tắt dần điều hòa của một điểm trên trang chính của trang web). Thư viện có khả năng quản lý các thuộc tính của bất kỳ phần tử DOM nào. Dynamics.js được sử dụng để tạo menu, nút, chỉ báo quy trình, điểm đánh dấu. Trong trường hợp này, có sẵn nhiều thông số khác nhau, chẳng hạn như tần số, độ suy giảm giảm chấn, các thông số mô tả độ đàn hồi hoặc thời gian xử lý, v.v.
Cta.js
Khối lượng nhỏ thư viện cta.js dự định để tạo hiệu ứng hoạt hình trên trang loại "hiệu ứng hành động", tức là di chuột hoặc nhấp con trỏ chuột lên một đối tượng sẽ tạo ra hiệu ứng cụ thể. Nó rất thuận tiện để sử dụng khi phát triển các giao diện xếp chồng, khi nhấp vào một phần tử sẽ dẫn đến việc mở nó dưới dạng cửa sổ phương thức, trên toàn bộ trang hoặc dưới dạng bảng trượt bên.
Tiếng bíp.js
Một thư viện thú vị sử dụng API WebAudio để tạo bộ tổng hợp nhạc trên một trang. Có thể được sử dụng để phát triển sách giáo khoa âm nhạc trực tuyến hoặc như một món đồ chơi thú vị.
Rainyday.js
Hiệu ứng mưa vô cùng đẹp mắt với những giọt nước có kích thước khác nhau chảy xuống. Tuy nhiên, theo ý kiến của tôi, những giọt lớn thiếu tính chân thực (có thể vật lý tương tự có trong Dynamics.js?). Tuy nhiên, API hiện tại cho phép bạn tạo các đối tượng của riêng mình và kiểm soát hành vi của chúng, tạo ra những hiệu ứng đáng kinh ngạc hơn nữa.
Dom-Animator.js
Dom-Animator.js được gọi là “quả trứng Phục sinh”. Hiệu ứng mà nó tạo ra không thể nhìn thấy được bằng mắt thường, tức là. dành cho những người xem trang trong cửa sổ trình duyệt thông thường. Nhưng những người phân tích mã của bạn sẽ thấy mã đó trong bảng điều khiển (nếu bạn vẫn không hiểu chúng ta đang nói về điều gì thì có một video ở đây sẽ làm rõ mọi thứ).
Nổi tiếng
Nổi tiếng - theo hướng sự kiện Thư viện JS để tạo hoạt ảnh hiện đại. Nó có lõi hình học mạnh mẽ cho phép bạn thao tác các vật thể 3D khác nhau - điểm và thể tích - tác dụng lực và gia tốc lên chúng, áp đặt các hạn chế và kiểm soát va chạm.
Bounce.js
Không tệ Thư viện JavaScript để tạo ảnh động ấn tượng sử dụng CSS. Cho phép bạn áp dụng nhiều kiểu chuyển động, xoay, chia tỷ lệ và biến đổi khác nhau cho các đối tượng.
Snabbt.js
Một thư viện nhẹ và nhanh, theo các nhà phát triển, tạo ra 60 khung hình / giây ngay cả trên thiết bị di động. Sử dụng ma trận chuyển đổi, CSS cho phép bạn di chuyển, xoay, chia tỷ lệ và thực hiện các thao tác khác với đối tượng. Nó cũng cho phép bạn áp dụng các hiệu ứng đặc biệt cho các đối tượng thu hút sự chú ý, có thể được sử dụng khi điền vào biểu mẫu.
Rekapi
Rekapi cho phép bạn sử dụng cả hai Hoạt ảnh khung hình chính CSS(@keyframes quy tắc) và hoạt ảnh DOM bằng JavaScript. Thư viện này cho phép bạn tạo các đối tượng động khá phức tạp, chẳng hạn như biểu đồ hình tròn và đường, dòng thời gian và các thành phần giao diện người dùng khác.
thay đổi
Shifty là một thư viện chứa mọi thứ bạn cần để hoàn thiện hoạt hình khung hình chính(cái gọi là "kết nghĩa") và số lượng đối tượng có thể rất lớn. Nó là một thư viện cấp thấp có thể được sử dụng làm lõi cho các nền tảng hoặc thư viện cấp cao hơn. Trên thực tế, Shifty được sử dụng làm cốt lõi của Rekapi đã nói ở trên.
