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 đã ra mắt phương thức element.animate trong thông số kỹ thuật Ả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 – cho phép nhà phát triển lựa chọn tạo ảnh động và hiệu ứng chuyển đổi bằng phương pháp phù hợp nhất với họ.

Để ôn lại nhanh, 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);
};

Việc này rất dễ dàng và đáng để cân nhắc đưa vào bộ công cụ của bạn khi tạo ảnh động hoặc hiệu ứng chuyển đổi một cách bắt buộc. Tuy nhiên, trong Chrome 39, các tính năng điều khiển 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 tính năng bổ sung về phát này mở ra nhiều khả năng cho Ảnh động trên web – biến ảnh động thành một công cụ đa năng, thay vì chỉ dùng để chuyển đổi, 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 số trường hợp đặc biệt:

Nếu thay đổi do phương thức reverse() gây ra khiến ảnh động đang chạy kết thúc hiệu quả, thì currentTime cũng được đảo ngược – ví dụ: nếu đảo ngược một ảnh động hoàn toàn mới, 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.

Tua trình phát

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 lên theo thời gian (hoặc giảm nếu playbackRate âm). Điều này có thể cho phép vị trí của ảnh động được kiểm soát bên ngoài, có thể thông qua hoạt động tương tác của người dùng. Quá trình này thường được gọi là xoá sạch.

Ví dụ: nếu trang HTML của bạn đại diện cho bầu trời và bạn muốn một cử chỉ kéo thay đổi vị trí của một đám mây đang phát, thì 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. Bạn cũng có thể tiếp tục phát ảnh động khi cử chỉ kết thúc:

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

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

Thay vì xoá AnimationPlayer để phản hồi tương tác của người dùng, bạn cũng có thể dùng currentTime để hiển thị tiến trình hoặc trạng thái: ví dụ: để hiển thị trạng thái của một lượt tải xuống.

Lợi ích ở đây là AnimationPlayer cho phép đặt giá trị và có phương thức triển khai gốc cơ bản để xử lý việc hiển thị 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à đặt currentTime thành kích thước hiện đã 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 di động từ lâu đã là nơi sử dụng các cử chỉ phổ biến: kéo, trượt, hất và các cử chỉ tương tự. Những cử chỉ này thường có một 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ừ bên trái màn hình.

Với Ảnh động trên web, bạn có thể dễ dàng tạo hiệu ứng tương tự trên web – trên máy tính 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 "tình trạng trượt". Thao tác này diễn ra từ vị trí hoàn tất cử chỉ cho đến mục tiêu đã biết là hợp lệ.

Đ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 người chơi. Khi driftPlayer hoàn tất, hiệu ứng và hiệu ứng của nó sẽ biến mất. Tuy nhiên, thời gian kết thúc 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, hãy xem ứng dụng web minh hoạ các cử chỉ này. Ứng dụng này thân thiện với thiết bị di động và sử dụng polyfill để tương thích ngược, vì vậy, hãy thử tải ứng dụng này trên thiết bị di động của bạn!

Tiếp tục và phần tử.animate

Phương thức element.animate đang rất tuyệt vời ngay lúc này – 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ề theo những 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ẹ. Polyfill này cũng thực hiện việc 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 và tốt hơn theo thời gian.

Quy cách Ảnh động trên web cũng sẽ tiếp tục phát triển. Nếu bạn muốn thử nghiệm các tính năng sắp ra mắt, thì các tính năng này hiện cũng có trong một polyfill chi tiết hơn: web-animations-next.