Tìm hiểu cách tạo hình ảnh động bằng JavaScript.
Hãy tự mình thử »
Để chứng minh cách tạo hình ảnh động HTML với JavaScript, chúng ta có thể sử dụng một trang web đơn giản.
Hoạt hình JavaScript đầu tiên của tôi
& nbsp; & nbsp; & nbsp; Hoạt hình của tôi sẽ đến đây
Hãy tự mình thử »
Để chứng minh cách tạo hình ảnh động HTML với JavaScript, chúng ta có thể sử dụng một trang web đơn giản.
Thí dụ
The animation element should be created with style = "position: absolute".
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
Hoạt hình JavaScript đầu tiên của tôi
width: 50px;
height: 50px;
position: absolute;
background: red;
}
Hãy tự mình thử »
Để chứng minh cách tạo hình ảnh động HTML với JavaScript, chúng ta có thể sử dụng một trang web đơn giản.
Thí dụ
The basic code is:
var id = setInterval[frame, 5];
Hoạt hình JavaScript đầu tiên của tôi
if [/* test for
finished */] {
clearInterval[id];
} else {
/* code to change the element style */
}
}
var id = null;
function myMove[] {
var elem = document.getElementById["myAnimation"];
var pos = 0;
clearInterval[id];
id = setInterval[frame, 10];
function frame[]
{
if [pos == 350] {
clearInterval[id];
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
Hãy tự mình thử »
Việc thêm các animation vào giao diện web làm cho web pages và các apps trông có vẻ tương tác nhiều hơn với người dùng. Một thanh side menu với khả năng trượt vào/ra mượt mà sẽ mang đến trải nghiệm người dùng tốt hơn nhiều trường hợp cũng là thanh side menu đó, chỉ xuất hiện rồi biến mất.
Từ trước đến nay, việc tạo web animation thường được thực hiện bằng CSS transition, CSS keyframe hoặc một thư viện bên ngoài như Animate.css, Velocity.js. Những API mới của native JavaScript có thể tạo animation cho các phần tử HTML gói gọn trong file .jsCSS transition, CSS keyframe hoặc một thư viện bên ngoài như Animate.css, Velocity.js. Những API mới của native JavaScript có thể tạo animation cho các phần tử HTML gói gọn trong file .js
Để thể hiện sự tuyệt vời của các JavaScript Web animations. chúng ta sẽ tạo một ví dụ đơn giản bằng cả 2 cách, một cách cũ sử dụng CSS, và một cách mới sử dụng JavaScript Web animation.
Editor bên dưới chứa 2 thẻ div HTML, gồm 2 hình vuông và tròn. Khi nhấp vào hình thì hình đó sẽ di chuyển sang phải và sau đó đổi màu. Hình vuông được tạo animation thông qua CSS code>@keyframes, hình tròn được tạo animation bằng Web Animations API.CSS code>@keyframes, hình tròn được tạo animation bằng Web Animations API.
Demo code ở link sau :
.animate {
animation-name: move-and-change-color;
animation-duration: 0.4s;
animation-fill-mode: forwards;
}
@keyframes move-and-change-color {
0% {
transform: translateX[0];
}
80% {
transform: translateX[100px];
background-color: #2196F3;
}
100% {
transform: translateX[100px];
background-color: #EF5350;
}
}
var square = document.getElementById['square'];
square.addEventListener['click', function[] {
square.className += " animate";
}]
var moveAndChangeColor = [
{
transform: 'translateX[0]',
background: '#2196F3' // blue
},
{
offset: 0.8,
transform: 'translateX[100px]',
background: '#2196F3' // blue
},
{
transform: 'translateX[100px]',
background: '#EF5350' // red
}
];
Mỗi đối tượng trong mảng đại diện cho một trạng thái của animation. Các trạng thái được phân bổ đều theo thời gian [3 trạng thái - 0%, 50%, 100%]. để thay đổi mốc thời gian của đối tượng trong animation, chúng ta sử dụng offset. Như ví dụ bên trên, chúng ta để offset là 0.8 cho đối tượng ở giữa.
Sau khi định nghĩa animation array, chúng ta có thể gọi chúng bằng hàm animate[]. Hàm này nhận animation làm argument thứ 1, và argument thứ 2 là một đối tượng với các property tương tự với CSS animation property. Tên các property gần giống nhau [animation-fill-mode trên CSS tương ứng fill, animation-iteration-count trên CSS tương ứng iteration,…]
var circle = document.getElementById['circle'];
circle.addEventListener['click', function[] {
circle.animate[moveAndChangeColor, {
duration: 400,
fill: 'forwards'
}];
}];
Web animation API cho phép chúng ta dễ dàng kiểm soát animation bằng nhiều cách khác nhau. Hàm animate[] trả lại một đối tượng Animation, chúng ta có thể lưu đối tượng này trong một biến, và xử lý animation bằng đối tượng này sau này.
var animation = elem.animate[transitions, options];
Chúng ta có thể sử dụng các hàm sau để kiểm soát animation:
• pause[] - Tạm thời đóng băng trạng thái hiện tại của animation
• play[] - Tiếp tục thực hiện animation hoặc chạy lại animation trong trường hợp animation đã hoàn thành
• reverse[] - thực hiện animation với chiều ngược lại
• finish[] - Đi đến cuối của animation [đi đến đầu trong trường hợp sử dụng reverse]
• cancel[] - Dừng animation và trở lại trạng thái đầu tiên trước khi thực hiện animation
Dưới đây là 1 demo nhỏ, với một loading indicator chạy vô hạn. Chúng ta sẽ thiết lập các nút cho các sự kiện khác nhau như sau: link demo
Các object Animation trả về animate [] chứa một số thuộc tính hữu ích cho phép chúng ta truy cập vào các tùy chọn như thời gian hiện tại, tốc độ phát và các thuộc tính khác, mặc dù một số thuộc tính chỉ để đọc
Bạn có thể xem demo này
để hiểu về cách chúng hoạt động. Để biết thêm danh sách chi tiết đầy đủ các thuộc tính, hãy truy cập MDN.Ngoài ra, API Animation Web còn cung cấp cho chúng ta hai trình xử lý sự kiện hữu ích khi Animation kết thúc[ finish] hoặc đã bị hủy [cancel]
spinnerAnimation.addEventListener['finish', function[] {
doSomething[];
}];
spinnerAnimation.addEventListener['cancel', function[] {
doSomething[];
}];
Web Animation API cung cấp cho các deverloper một cách tuyệt vời để tạo và kiểm soát animation web bằng cách sử dụng không có gì khác ngoài JavaScript thuần túy.animation web bằng cách sử dụng không có gì khác ngoài JavaScript thuần túy.
Đối với các Animation được gọi khi tương tác với người dùng hoặc các event animation khác, đây là một tin tuyệt vời vì toàn bộ Animation có thể được thực hiện, mà không phải chuyển sang CSS .Animation được gọi khi tương tác với người dùng hoặc các event animation khác, đây là một tin tuyệt vời vì toàn bộ Animation có thể được thực hiện, mà không phải chuyển sang CSS .
Bài viết này đề cập đến hầu hết các tính năng của API mới, nhưng nếu bạn muốn tìm hiểu thêm các link dưới đây: