Trang này được dịch bởi Cloud Translation API.

Chế độ kiểm soát việc phát ảnh động trên web trong Chrome 39

Sam Thorogood

Đầu năm nay, Chrome 36 đã đưa phương thức thành phần tử.animate vào phạm vi thông số ảnh động web rộng hơn. Điều này cho phép viết ảnh động gốc hiệu quả, nhờ đó, nhà phát triển luôn có thể lựa chọn tạo ảnh động và hiệu ứng chuyển tiếp theo phương pháp phù hợp nhất.

Để ôn lại kiến thức nhanh, dưới đây là cách bạn có thể tạo ảnh động cho một đám mây trên màn hình bằng lệnh gọi lại khi hoàn tất:

var player = cloud.animate([
    {transform: 'translateX(' + start + 'px)'},
    {transform: 'translateX(' + end + 'px)'}
], 5000);
player.onfinish = function() {
    console.info('Cloud moved across the screen!');
    startRaining(cloud);
};

Chỉ riêng việc này cũng cực kỳ dễ dàng và bạn nên cân nhắc đưa vào hộp công cụ khi tạo ảnh động hoặc hiệu ứng chuyển cảnh. Tuy nhiên, trong Chrome 39, các tính năng điều khiển chế độ phát đã được thêm vào đối tượng AnimationPlayer do element.animate trả về. Trước đây, sau khi tạo ảnh động, bạn chỉ có thể gọi cancel() hoặc nghe sự kiện kết thúc.

Những bổ sung phát lại này mở ra các khả năng về những gì Ảnh động trên web có thể làm - biến ảnh động thành một công cụ đa năng, thay vì chỉ định về hiệu ứng chuyển tiếp, tức là Ảnh động "cố định" hoặc được xác định trước.

Tạm dừng, tua lại hoặc thay đổi tốc độ phát

Hãy bắt đầu bằng cách cập nhật ví dụ trên để tạm dừng ảnh động nếu người dùng nhấp vào đám mây:

cloud.addEventListener('mousedown', function() {
    player.pause();
});

Bạn cũng có thể sửa đổi thuộc tính playbackRate:

function changeWindSpeed() {
    player.playbackRate *= (Math.random() * 2.0);
}

Bạn cũng có thể gọi phương thức reverse(), thường tương đương với việc đảo ngược playbackRate hiện tại (nhân với -1). Tuy nhiên, có một vài trường hợp đặc biệt:

Nếu sự thay đổi do phương thức reverse() gây ra sẽ khiến ảnh động đang chạy kết thúc thực sự, thì currentTime cũng bị đảo ngược – ví dụ: nếu một ảnh động hoàn toàn mới bị đảo ngược, toàn bộ ảnh động sẽ phát ngược
Nếu trình phát bị tạm dừng, ảnh động sẽ bắt đầu phát.

Vuốt trình phát

AnimationPlayer hiện cho phép chỉnh sửa currentTime trong khi ảnh động đang chạy. Thông thường, giá trị này sẽ tăng theo thời gian (hoặc giảm xuống nếu playbackRate là số âm). Việc này có thể cho phép kiểm soát vị trí của ảnh động bên ngoài, có thể là thông qua sự tương tác của người dùng. Hành động này thường được gọi là xoá.

Ví dụ: nếu trang HTML của bạn thể hiện bầu trời và bạn muốn cử chỉ kéo để thay đổi vị trí của đám mây đang phát, bạn có thể thêm một số trình xử lý vào tài liệu:

var startEvent, startEventTime;
document.addEventListener('touchstart', function(event) {
    startEvent = event;
    startEventTime = players.currentTime;
    player.pause();
});
document.addEventListener('touchmove', function(event) {
    if (!startEvent) return;
    var delta = startEvent.touches[0].screenX -
        event.changedTouches[0].screenX;
    player.currentTime = startEventTime + delta;
});

Khi bạn kéo qua tài liệu, currentTime sẽ thay đổi để phản ánh khoảng cách từ sự kiện ban đầu của bạn. Bạn cũng có thể muốn tiếp tục phát ảnh động khi cử chỉ kết thúc:

document.addEventListener('touchend', function(event) {
    startEvent = null;
    player.play();
});

Điều này thậm chí có thể được kết hợp với hành vi đảo ngược, tuỳ thuộc vào vị trí nhấc chuột khỏi trang (bản minh hoạ kết hợp).

Thay vì xoá AnimationPlayer để phản hồi một tương tác của người dùng, bạn cũng có thể sử dụng currentTime của thành phần này để cho thấy tiến trình hoặc trạng thái, chẳng hạn như cho thấy trạng thái của một tệp tải xuống.

Tiện ích ở đây là AnimationPlayer cho phép đặt một giá trị và yêu cầu phương thức triển khai gốc cơ bản đảm nhận việc trực quan hoá tiến trình. Trong trường hợp tải xuống, thời lượng của ảnh động có thể được đặt thành tổng kích thước tải xuống và currentTime được đặt thành kích thước được tải xuống hiện tại (bản minh hoạ).

Hiệu ứng chuyển đổi giao diện người dùng và cử chỉ

Từ lâu, các nền tảng di động đã trở thành một nền tảng của những cử chỉ phổ biến: kéo, trượt, hất và những cử chỉ tương tự. Những cử chỉ này có xu hướng có một chủ đề chung: thành phần giao diện người dùng có thể kéo, chẳng hạn như "kéo để làm mới" của chế độ xem danh sách hoặc thanh bên được vẽ từ phía bên trái của màn hình.

Với Ảnh động trên web, hiệu ứng tương tự rất dễ được lặp lại trên web - trên máy tính để bàn hoặc thiết bị di động. Ví dụ: khi một cử chỉ điều khiển currentTime hoàn tất:

var steps = [ /* animation steps */ ];
var duration = 1000;
var player = target.animate(steps, duration);
player.pause();
configureStartMoveListeners(player);

var setpoints = [0, 500, 1000];
document.addEventListener('touchend', function(event) {
    var srcTime = player.currentTime;
    var dstTime = findNearest(setpoints, srcTime);
    var driftDuration = dstTime - srcTime;

    if (!driftDuration) {
    runCallback(dstTime);
    return;
    }

    var driftPlayer = target.animate(steps, {
    duration: duration,
    iterationStart: Math.min(srcTime, dstTime) / duration,
    iterations: Math.abs(driftDuration) / duration,
    playbackRate: Math.sign(driftDuration)
    });
    driftPlayer.onfinish = function() { runCallback(dstTime); };
    player.currentTime = dstTime;
});

Thao tác này sẽ tạo thêm một ảnh động thực hiện một "lần trôi". Hành động này diễn ra từ khi cử chỉ được hoàn tất cho đến mục tiêu tốt đã biết.

Điều này hoạt động vì ảnh động có mức độ ưu tiên dựa trên thứ tự tạo: trong trường hợp này, driftPlayer sẽ được ưu tiên hơn trình phát. Khi hoàn tất, driftPlayer và các hiệu ứng của lệnh đó sẽ biến mất. Tuy nhiên, thời gian cuối cùng của nó sẽ khớp với thời gian hiện tại của trình phát cơ bản, vì vậy giao diện người dùng của bạn sẽ vẫn nhất quán.

Cuối cùng, nếu bạn thích mèo con, có ứng dụng web minh hoạ thể hiện những cử chỉ này. Phiên bản này thân thiện với thiết bị di động và sử dụng đoạn mã polyfill để đảm bảo khả năng tương thích ngược. Vì vậy, hãy thử tải phiên bản này trên thiết bị di động của bạn!

Di chuyển qua và Element.animate

Phương thức element.animate hoàn toàn hoạt động ngay bây giờ – cho dù bạn đang sử dụng phương thức này cho ảnh động đơn giản hay sử dụng AnimationPlayer được trả về theo các cách khác.

Hai tính năng này cũng được hỗ trợ đầy đủ trong các trình duyệt hiện đại khác thông qua một polyfill nhẹ. Lớp polyfill này cũng thực hiện việc phát hiện tính năng, do đó, khi các nhà cung cấp trình duyệt triển khai thông số kỹ thuật, tính năng này sẽ chỉ trở nên nhanh hơn và tốt hơn theo thời gian.

Thông số kỹ thuật về Ảnh động trên web cũng sẽ tiếp tục được cải tiến. Nếu bạn muốn khám phá các tính năng sắp ra mắt, thì những tính năng này hiện cũng có sẵn ở dạng polyfill chi tiết hơn: web-Animations-next.