Hoạt ảnh CSS3 và phương thức javascript Animate() mới. Thư viện JavaScript để tạo hoạt ảnh tuyệt đẹp
Một thư viện nhỏ để tạo hoạt ảnh trên Dựa trên JavaScript. Bạn có thể sử dụng nó để tạo hoạt ảnh 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ỉ bằng cách này. 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ể làm như vậ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.
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 ảnhNế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
Dynamic.js là 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
hoạt hình.js - công cụ đắc lựcđể 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ế hiện đại và hoạt ảnh 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 CSS3Cá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.
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ư lúc nào bạn cũng nên 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
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 bạn nhìn vào Từ điển, sau đó chúng ta biết 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 đa dạng hiệu ứng hoạt hình(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 vận dụng chúng là vô cùng quan trọng để hợp lý và hợp lý. sử dụng chất lượng hiệu ứng hoạt hình.
Nói về các công nghệ cho phép sử dụng hoạt ảnh trong các trang web, chúng ta có thể nêu bật một số công nghệ, nhưng có lẽ không có công nghệ nào mạnh mẽ 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ư cô ấy năm tốt nhất phía sau và nó đang dần được thay thế khỏi 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 sử dụng hoạt ảnh một cách nghiêm túc trên trang web của mình thì bạn nên dựa vào JavaScript. Và để làm sự lựa chọn thông minh Tôi đã làm bài đánh giá hôm nay về thư viện.
Dynamics.jsTô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ủđịa điểm). 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.
Với sự ra đời của hoạt ảnh CSS3, các tài liệu HTML đã trở nên hấp dẫn hơn và dễ phát triển hơn nhiều. Sử dụng quy tắc @keyframes bạn có thể dễ dàng xác định thông số khác nhau, bao gồm cả vị trí và kích thước của phần tử HTML. Ngược lại, tham số hoạt ảnh chịu trách nhiệm khởi chạy và di chuyển các khung hình chính tùy thuộc vào thông số nhất định. Không cần sử dụng javascript và plugin, chúng ta có thể dễ dàng tạo ra nhiều thứ nhất hoạt hình phức tạp, sẽ hoạt động rất trơn tru trong tất cả các trình duyệt hiện đại.
Vấn đề nảy sinh khi bạn cần sử dụng javascript để phát triển hoạt ảnh CSS3. Tất cả chúng ta đều biết rằng javascript trong hầu hết các trường hợp là điều cần thiết đầu tiên cho phép chúng ta tính toán các giá trị riêng lẻ hoặc toàn bộ quá trình hoạt ảnh.
Kết hợp CSS và javascript bằng phương thức animate() mới
Phương thức javascript animate() mới cho phép chúng ta điều khiển hoạt ảnh thông qua một tập lệnh. Tất nhiên, chúng ta vẫn cần sử dụng rất nhiều tham số CSS để xác định các khung hình chính của mình.
(chiều cao: "0"),
(chiều cao: "100%")
], {
thời lượng: 3000,
lặp lại: 2,
độ trễ: 1000
});
Trong ví dụ trên, chúng ta đang đính kèm phương thức animate() vào phần tử. Có nhiều trạng thái được xác định bên trong dấu ngoặc vuông tham số đã cho, bao nhiêu tùy theo nhu cầu của chúng tôi và trong ví dụ của chúng tôi, chúng tôi sẽ làm việc theo chiều cao. Mỗi giá trị được viết dưới dạng một chữ cái đối tượng và các giá trị chỉ được sử dụng cho một tham số riêng. Không được phép kết hợp như chiều rộng và chiều cao. Xin lưu ý rằng bản thân các giá trị phải được đóng khung theo trích dẫn và được định dạng theo cú pháp phù hợp yêu cầu javascript, có nghĩa là bạn cần sử dụng “backgroundColor” thay vì “background-color”. Trong một chữ cái khác của đối tượng, ngay sau khi đóng dấu ngoặc vuông, chúng ta xác định thêm hoạt ảnh. Chúng tôi muốn thay đổi độ dài của hoạt ảnh bằng cách sử dụng thời lượng, tần suất lặp lại bằng cách lặp lại và có thể tùy ý xác định độ trễ bằng cách sử dụng tham số độ trễ - tham số này xác định thời điểm hoạt ảnh sẽ bắt đầu. Tất cả các giá trị thời gian được chỉ định bằng mili giây.
Chúng tôi quản lý tập hợp các khung chính và thời lượng của chúng
Chúng ta cần chạy phương thức animate() riêng biệt với từng tham số chúng ta cần thay đổi. Điều này có nghĩa là nếu chúng ta muốn thay đổi cả chiều cao và chiều rộng, chúng ta sẽ cần chạy lại animate().
Document.getElementById("element").animate([
(chiều rộng: "0", độ lệch: 0),
(chiều rộng: "10%", offset, 1/3),
(chiều rộng: "100%", độ lệch: 1)
], {
thời lượng: 3000,
lặp lại: 2,
độ trễ: 1000
});
Trong ví dụ trên, chúng tôi đang thay đổi độ rộng của phần tử. Độ rộng sẽ thay đổi bắt đầu từ 0, tăng lên 10 phần trăm và sau đó kết thúc khi đạt 100 phần trăm. Tất cả điều này sẽ được đi kèm hoạt hình mượt mà, một cách tự nhiên. Tham số bổ sung offset chỉ định rằng các thay đổi từ 0 đến 10 phần trăm sẽ chiếm 1/3 tổng thời gian hoạt ảnh và tăng từ 10 lên 100 sẽ chiếm 2/3 tổng thời gian hoạt ảnh. Đồng thời, tổng thời lượng của hoạt ảnh được xác định bởi tham số thời lượng. TRONG trong trường hợp này, phần đầu tiên sẽ diễn ra trong khoảng thời gian một giây và phần thứ hai – trong khoảng thời gian 2 giây.
Thay vì chỉ định giá trị dưới dạng phân số, bạn cũng có thể sử dụng số thập phân. Bạn cần sử dụng các số từ 0 đến 1. Ví dụ: thay vì 1/3, bạn có thể sử dụng 0,33.
Nhiều tùy chọn hoạt hình hơn
Nếu bạn đã quen thuộc với tham số hoạt ảnh CSS3 thì có thể bạn biết rằng phương thức animate() cho phép bạn kiểm soát quá trình hoạt ảnh. Bạn có thể thay đổi hướng cũng như tốc độ của hoạt ảnh và khả năng tăng tốc của nó. Nếu bạn muốn chỉ định rằng sau khi kết thúc, hoạt ảnh sẽ quay lại từ đầu, bạn có thể làm như vậy.
Document.getElementById("element").animate([
…
], {
thời lượng: 3000,
lặp lại: 2,
độ trễ: 1000,
hướng: "đảo ngược",
nới lỏng: "dễ dàng",
điền: "chuyển tiếp"
});
Giá trị hướng chứa thông tin về hướng của hoạt ảnh. Nếu bạn đặt nó ở chế độ đảo ngược, hình ảnh động sẽ phát theo hướng ngược lại. Giá trị thay thế sẽ cho phép bạn phát hoạt ảnh theo hướng tiêu chuẩn và sau đó theo hướng ngược lại. Và giá trị đảo ngược thay thế kết hợp hai giá trị cuối cùng.
Giá trị nới lỏng cho phép bạn sử dụng các hàm sửa đổi phổ biến nhất đã được biết đến nhiều từ CSS3, vì bạn có thể tìm thấy các tính năng dễ dàng, dễ dàng, v.v. Theo mặc định, mỗi hoạt ảnh được đặt để chạy tuyến tính, không tăng hoặc giảm tốc. Giá trị điền xác định nội dung sẽ được hiển thị sau khi hoạt ảnh kết thúc. Theo mặc định, hoạt ảnh sẽ quay lại điểm bắt đầu. Khi sử dụng giá trị chuyển tiếp, hoạt ảnh sẽ dừng ở khung hình chính cuối cùng.
Kiểm soát hoạt ảnh
Sử dụng animate() trên một biến cho phép chúng ta điều khiển hoạt ảnh bằng javascript. Chúng ta có thể bắt đầu và dừng nó theo ý mình.
Hoạt hình thay đổi = document.getElementById("element").animate([
(chiều cao: "0"),
(chiều cao: "100%")
], {
thời lượng: 3000,
lặp lại: 2,
độ trễ: 1000
});
document.getElementById("animation_start").addEventListener("click", function() (
hoạt hình.play();
), SAI);
document.getElementById("animation_pause").addEventListener("click", function() (
hoạt hình.pause();
), SAI);
Trong ví dụ của chúng tôi, chúng tôi đính kèm hoạt ảnh vào biến hoạt ảnh, thật kỳ lạ. Sau đó, chúng ta đính kèm 2 trình xử lý sự kiện vào các phần tử có id animation_start và animation_pause. Những người nghe này sẽ đảm nhiệm việc thực hiện các chức năng nhất định khi được nhấp vào. Phát sẽ bắt đầu hoạt ảnh, tạm dừng là bạn đã biết rõ nó làm gì và đảo ngược sẽ ngay lập tức đưa bạn đến khung chính cuối cùng và dừng hoàn toàn hoạt ảnh.
Này, đó là javascript. Tất nhiên, chúng tôi có một trình xử lý sự kiện cho phép chúng tôi phản ứng khi kết thúc hoạt ảnh. Chúng ta có thể thực hiện điều này bằng cách sử dụng finish. Bên trong hoàn thiện bạn cần xác định chức năng thích hợp.
Animation.addEventListener("kết thúc", function() (
Alert("Hoạt hình đã kết thúc.");
), SAI);
Trong ví dụ trên, chúng tôi chỉ gửi một thông báo cho biết hoạt ảnh đã hoàn tất.
Hỗ trợ trình duyệt
animate() hiện đang trong giai đoạn phát triển ban đầu và hiện đang được gắn nhãn "thử nghiệm". Hỗ trợ cho tùy chọn này sẽ xuất hiện trong Chrome bắt đầu từ phiên bản 36. Nếu muốn dùng thử ngay bây giờ, bạn có thể tải xuống và cài đặt Chrome Canary.
