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

[Tên người]

Đầu năm nay, Chrome 36 đã ra mắt phương thức element.animate như một phần của thông số kỹ thuật về Ảnh động trên web rộng hơn. Điều này cho phép các ảnh động gốc hiệu quả được viết một cách bắt buộc, giúp các nhà phát triển có thể chọn tạo ảnh động và chuyển đổi theo phương pháp phù hợp nhất với họ.

Để ôn lại kiến thức, sau đây là cách bạn có thể tạo ảnh động cho một đám mây trên màn hình, với 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);
};

Điều này đã cực kỳ dễ dàng và đáng để cân nhắc khi đưa vào hộp công cụ của bạn khi tạo ảnh động hoặc hiệu ứng chuyển tiếp khẩn cấp. 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 nội dung bổ sung cho quá trình phát này mở ra khả năng của Ảnh động trên web – biến ảnh động thành một công cụ đa năng, thay vì quy định về các hiệu ứng chuyển đổi, như 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 bạn 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 khiến ảnh động đang chạy kết thúc một cách hiệu quả, 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 lại

  • Nếu trình phát bị tạm dừng, thì ảnh động sẽ bắt đầu phát.

Đang dò người chơi

AnimationPlayer hiện cho phép sửa đổi 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 nếu playbackRate là số âm). Điều này có thể cho phép kiểm soát vị trí của ảnh động từ bên ngoài, có thể là thông qua tương tác của người dùng. Quá trình này thường được gọi là lấy hàng.

Ví dụ: nếu trang HTML của bạn thể hiện bầu trời và bạn muốn sử dụng cử chỉ kéo để thay đổi vị trí của một đá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 tài liệu, currentTime sẽ được thay đổi để phản ánh khoảng cách từ sự kiện ban đầu. 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 lên 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 để cho thấy tiến trình hoặc trạng thái, chẳng hạn như để hiện trạng thái tải xuống.

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

Chuyển đổi và cử chỉ trên giao diện người dùng

Nền tảng thiết bị di động từ lâu đã là không gian của các cử chỉ phổ biến: kéo, trượt, hất và các cử chỉ tương tự. Các cử chỉ này thường có chủ đề chung: một 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 tạo từ phía bên trái màn hình.

Với Ảnh động trên web, hiệu ứng tương tự rất dễ dàng được sao chép ở đây 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 một ảnh động bổ sung thực hiện việc "drift". Phần này sẽ diễn ra giữa thời điểm thực hiện cử chỉ cho đến mục tiêu tốt đã biết của chúng ta.

Giá trị 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 driftPlayer hoàn tất, nội dung này và các hiệu ứng của nó sẽ biến mất. Tuy nhiên, thời gian cuối cùng sẽ khớp với currentTime của người chơi 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ó một ứng dụng web minh họa thể hiện các cử chỉ này. Tính năng này thân thiện với thiết bị di động và sử dụng polyfill để có khả năng tương thích ngược, vì vậy hãy thử tải nó trên thiết bị di động của bạn!

Di chuyển và Element.animate

Phương thức element.animate hoàn toàn sử dụng ngay – cho dù bạn đang sử dụng phương thức này cho ảnh động đơn giản hay tận dụng AnimationPlayer được trả về của phương thức này theo 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 polyfill nhẹ. Đoạn mã polyfill này cũng thực hiện quá trình phát hiện tính năng, vì vậy, 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à hiệu quả hơn theo thời gian.

Chúng tôi cũng sẽ tiếp tục phát triển thông số kỹ thuật về Ảnh động trên web. Nếu bạn muốn khám phá các tính năng sắp ra mắt, các tính năng đó hiện cũng có trong polyfill chi tiết hơn: web-animations-next.