Điều phối sự phức tạp với API hoạt hình web

[theanh]

Không có điểm trung gian giữa các chuyển tiếp đơn giản và hoạt ảnh phức tạp. Bạn hoặc là hài lòng với những gì CSS Transitions và Animations cung cấp hoặc đột nhiên bạn cần tất cả sức mạnh mà bạn có thể có được. Web Animations API cung cấp cho bạn rất nhiều công cụ để làm việc với hoạt ảnh. Nhưng bạn cần biết cách xử lý chúng. Bài viết này sẽ hướng dẫn bạn qua các điểm chính và kỹ thuật có thể giúp bạn xử lý các hoạt ảnh phức tạp trong khi vẫn linh hoạt.

Trước khi đi sâu vào bài viết, điều quan trọng là bạn phải nắm rõ những điều cơ bản về Web Animations API và JavaScript. Để làm rõ và tránh mất tập trung vào vấn đề trước mắt, các ví dụ mã được cung cấp rất đơn giản. Sẽ không có gì phức tạp hơn các hàm và đối tượng. Là những điểm khởi đầu tốt cho bản thân hoạt ảnh, tôi muốn đề xuất MDN làm tài liệu tham khảo chung, loạt bài tuyệt vời của Daniel C. Wilson và CSS Animations vs Web Animations API của Ollie Williams. Chúng ta sẽ không đi sâu vào các cách xác định hiệu ứng và điều chỉnh chúng để đạt được kết quả bạn mong muốn. Bài viết này giả định rằng bạn đã xác định hoạt ảnh của mình và cần có ý tưởng cũng như kỹ thuật để xử lý chúng.

Chúng ta sẽ bắt đầu bằng tổng quan về giao diện và mục đích của chúng. Sau đó, chúng ta sẽ xem xét thời gian và mức độ kiểm soát để xác định cái gì, khi nào và trong bao lâu. Sau đó, chúng ta sẽ học cách xử lý nhiều hoạt ảnh như một bằng cách gói chúng trong các đối tượng. Đó sẽ là một khởi đầu tốt trên con đường sử dụng Web Animations API của bạn.

Giao diện​

Web Animations API cung cấp cho chúng ta một chiều hướng kiểm soát mới. Trước đó, CSS Transitions và Animation mặc dù cung cấp một cách mạnh mẽ để xác định hiệu ứng nhưng vẫn có một điểm kích hoạt duy nhất. Giống như công tắc đèn, nó chỉ có thể bật hoặc tắt. Bạn có thể chơi với các hàm trì hoãn và dễ dàng để tạo ra các hiệu ứng khá phức tạp. Tuy nhiên, tại một thời điểm nhất định, nó trở nên cồng kềnh và khó sử dụng.

Web Animations API biến điểm kích hoạt duy nhất này thành quyền kiểm soát hoàn toàn đối với quá trình phát lại. Công tắc đèn biến thành công tắc điều chỉnh độ sáng có thanh trượt. Nếu muốn, bạn có thể biến nó thành toàn bộ thứ trong nhà thông minh, vì ngoài việc kiểm soát quá trình phát lại, giờ đây bạn có thể xác định và thay đổi hiệu ứng khi chạy. Bây giờ bạn có thể điều chỉnh hiệu ứng theo ngữ cảnh hoặc bạn có thể triển khai trình chỉnh sửa hoạt ảnh với chế độ xem trước theo thời gian thực.

Chúng ta bắt đầu với giao diện Hoạt ảnh. Để có được đối tượng hoạt ảnh, chúng ta có thể sử dụng phương thức Element.animate. Bạn cung cấp cho nó các khung hình chính và tùy chọn và nó sẽ phát hoạt ảnh của bạn ngay lập tức. Nó cũng trả về một thể hiện đối tượng Hoạt ảnh. Mục đích của nó là kiểm soát quá trình phát lại.

Hãy nghĩ về nó như một máy phát băng cát-sét, nếu bạn còn nhớ những điều này. Tôi biết rằng một số độc giả có thể không quen với nó. Không thể tránh khỏi việc bất kỳ nỗ lực nào nhằm áp dụng các khái niệm trong thế giới thực để mô tả những thứ trừu tượng của máy tính sẽ nhanh chóng sụp đổ. Nhưng hãy để nó trấn an bạn — một độc giả không biết niềm vui của việc tua lại băng bằng bút chì — rằng những người biết máy phát băng cát-sét là gì sẽ còn bối rối hơn nữa vào cuối bài viết này.

Hãy tưởng tượng một chiếc hộp. Nó có một khe để đặt băng cát-sét và có các nút để phát, dừng và tua lại. Đó chính là giao diện Animation — một hộp chứa hoạt ảnh đã xác định và cung cấp các cách để tương tác với quá trình phát lại của hoạt ảnh đó. Bạn cung cấp cho nó thứ gì đó để phát và nó sẽ trả lại cho bạn các điều khiển.

Các điều khiển bạn nhận được rất tiện lợi, tương tự như các điều khiển bạn nhận được từ các thành phần âm thanh và video. Chúng là các phương thức phát và tạm dừng và thuộc tính thời gian hiện tại. Với ba điều khiển đó, bạn có thể xây dựng bất cứ thứ gì khi nói đến quá trình phát lại.

Bản thân băng cassette là một gói chứa tham chiếu đến thành phần được hoạt ảnh, định nghĩa về hiệu ứng và các tùy chọn bao gồm thời gian cùng nhiều thứ khác. Và đó chính là KeyframeEffect. Băng cassette của chúng ta là thứ chứa tất cả các bản ghi và thông tin về độ dài của các bản ghi. Tôi sẽ để trí tưởng tượng của khán giả lớn tuổi hơn ghép tất cả các thuộc tính đó với các thành phần của băng cassette vật lý. Tôi sẽ cho bạn thấy nó trông như thế nào trong mã.

Khi bạn tạo hoạt ảnh thông qua Element.animate, bạn đang sử dụng một phím tắt thực hiện ba việc. Nó tạo ra một thể hiện KeyframeEffect. Nó đưa vào một thể hiện Animation mới. Nó sẽ ngay lập tức bắt đầu phát.

const animation = element.animate(keyframes, options);

Chúng ta hãy phân tích và xem đoạn mã tương đương thực hiện cùng một chức năng.

const animation = new Animation( // (2) new KeyframeEffect(element, keyframes, options) // (1));animation.play(); (3)

Lấy băng cassette (1), cho vào máy phát (2), sau đó nhấn nút Phát (3).

Mục đích của việc biết cách thức hoạt động đằng sau hậu trường là để có thể tách định nghĩa của các khung hình chính và quyết định thời điểm phát. Khi bạn có nhiều hoạt ảnh cần phối hợp, việc tập hợp tất cả chúng trước có thể hữu ích để bạn biết chúng đã sẵn sàng để phát. Việc tạo chúng ngay lập tức và hy vọng chúng sẽ bắt đầu phát vào đúng thời điểm không phải là điều bạn muốn hy vọng. Quá dễ để phá vỡ hiệu ứng mong muốn chỉ bằng một vài lần kéo khung hình. Trong trường hợp một chuỗi dài mà việc kéo dài tích tụ dẫn đến trải nghiệm không hề thuyết phục.

Thời gian​

Giống như trong hài kịch, thời gian là tất cả trong hoạt hình. Để tạo hiệu ứng hoạt động, để đạt được cảm giác nhất định, bạn cần có khả năng tinh chỉnh cách các thuộc tính thay đổi. Có hai cấp độ thời gian mà bạn có thể kiểm soát trong Web Animations API.

Ở cấp độ các thuộc tính riêng lẻ, chúng ta có offset. Offset cho phép bạn kiểm soát thời gian của từng thuộc tính. Bằng cách gán cho nó một giá trị từ 0 đến 1, bạn sẽ xác định thời điểm mỗi hiệu ứng bắt đầu. Khi bỏ qua, nó bằng 0.

Bạn có thể nhớ từ @keyframes trong CSS cách bạn có thể sử dụng phần trăm thay vì from/to. Đó chính là offset nhưng chia cho một trăm. Giá trị của offset là một phần thời lượng của một lần lặp lại duy nhất.

offset cho phép bạn sắp xếp các khung hình chính trong KeyframeEffect. Là một số bù tương đối đảm bảo rằng bất kể thời lượng hay tốc độ phát lại, tất cả các khung hình chính của bạn đều bắt đầu tại cùng một thời điểm so với nhau.

Như chúng tôi đã nêu trước đó, offset là một phần thời lượng. Bây giờ tôi muốn bạn tránh những sai lầm và mất thời gian của tôi về điều này. Điều quan trọng là phải hiểu rằng thời lượng của hoạt ảnh không giống với thời lượng tổng thể của hoạt ảnh. Thông thường, chúng giống nhau và đó là điều có thể khiến bạn bối rối, và chắc chắn là điều khiến tôi bối rối.

Thời lượng là lượng thời gian tính bằng mili giây mà một lần lặp lại cần để hoàn thành. Theo mặc định, nó sẽ bằng thời lượng tổng thể. Khi bạn thêm độ trễ hoặc tăng số lần lặp lại trong thời lượng hoạt ảnh, thời lượng sẽ ngừng cho bạn biết số bạn muốn biết. Điều quan trọng là phải hiểu để sử dụng nó theo hướng có lợi cho bạn.

Khi bạn cần phối hợp phát lại khung hình chính trong một bối cảnh lớn hơn, như phát lại phương tiện, bạn cần sử dụng các tùy chọn thời gian. Toàn bộ thời lượng của hoạt ảnh từ đầu đến sự kiện “kết thúc” trong phương trình sau:

trì hoãn + (lặp lại × thời lượng) + trì hoãn kết thúc

Bạn có thể xem nó hoạt động trong bản demo sau:

Xem Bút [Thời lượng thực tế của hoạt ảnh là bao lâu?](https://codepen.io/smashingmag/pen/VwWWrzz) của Kirill Myshkin.
Xem Bút Thời lượng thực tế của hoạt ảnh? của Kirill Myshkin.
Điều này cho phép chúng ta căn chỉnh một số hoạt ảnh trong bối cảnh của phương tiện có độ dài cố định. Giữ nguyên thời lượng hoạt ảnh mong muốn, bạn có thể "đệm" nó bằng delay ở đầu và delayEnd ở cuối để nhúng nó vào bối cảnh có thời lượng dài hơn. Nếu bạn nghĩ về nó, delay theo nghĩa này sẽ hoạt động như độ lệch trong khung hình chính. Chỉ cần nhớ rằng độ trễ được đặt bằng mili giây nên bạn có thể muốn chuyển đổi nó thành giá trị tương đối.

Một tùy chọn thời gian khác sẽ giúp căn chỉnh hoạt ảnh là iterationStart. Nó đặt vị trí bắt đầu của một lần lặp. Hãy xem bản demo bóng bi-a. Bằng cách điều chỉnh thanh trượt iterationStart, bạn có thể thiết lập vị trí bắt đầu của quả bóng và hướng quay, ví dụ, bạn có thể thiết lập để quả bóng bắt đầu nhảy từ giữa màn hình và làm cho con số thẳng trong máy ảnh ở khung hình cuối cùng.

Xem Bút [Điều chỉnh interationStart](https://codepen.io/smashingmag/pen/qBjjVPR) của Kirill Myshkin.
Xem Bút Điều chỉnh interationStart của Kirill Myshkin.

Kiểm soát Nhiều As Một​

Khi tôi làm việc trên trình chỉnh sửa hoạt ảnh cho một ứng dụng trình bày, tôi phải sắp xếp một số hoạt ảnh cho một phần tử duy nhất trên dòng thời gian. Lần thử đầu tiên của tôi là sử dụng offset để đặt hoạt ảnh của tôi vào đúng điểm bắt đầu trên dòng thời gian.

Điều đó nhanh chóng chứng minh là cách sử dụng offset sai. Về mặt giao diện người dùng cụ thể này, hoạt ảnh di chuyển trên dòng thời gian có nghĩa là dịch chuyển vị trí bắt đầu của nó mà không làm thay đổi thời lượng hoạt ảnh. Với offset, điều đó có nghĩa là tôi cần thay đổi một số thứ, chính offset và cũng thay đổi offset của thuộc tính đóng để đảm bảo thời lượng không thay đổi. Giải pháp tỏ ra quá phức tạp để hiểu.

Vấn đề thứ hai xuất hiện với thuộc tính transform. Do thực tế là nó có thể biểu diễn một số thay đổi đặc điểm cho một phần tử, nên việc khiến nó thực hiện những gì bạn muốn có thể trở nên khó khăn. Trong trường hợp muốn thay đổi các thuộc tính đó độc lập với nhau, điều đó có thể trở nên khó khăn hơn nữa. Thay đổi hàm tỷ lệ ảnh hưởng đến tất cả các hàm theo sau nó. Đây là lý do tại sao điều đó xảy ra.

Thuộc tính biến đổi có thể lấy một số hàm theo trình tự làm giá trị. Tùy thuộc vào thứ tự của hàm, kết quả sẽ thay đổi. Lấy scale và translate. Đôi khi, việc định nghĩa translate theo phần trăm, nghĩa là so với kích thước của một phần tử sẽ rất tiện lợi. Giả sử bạn muốn một quả bóng nhảy cao chính xác bằng ba đường kính của chính nó. Bây giờ, tùy thuộc vào vị trí bạn đặt hàm tỷ lệ — trước hoặc sau translate — kết quả sẽ thay đổi từ ba độ cao của kích thước ban đầu hoặc kích thước đã được chia tỷ lệ.

Đây là một đặc điểm quan trọng của thuộc tính transform. Bạn cần nó để đạt được một phép biến đổi khá phức tạp. Nhưng khi bạn cần những phép biến đổi đó phải khác biệt và độc lập với các phép biến đổi khác của một phần tử, thì điều đó sẽ cản trở bạn.

Có những trường hợp bạn không thể đặt tất cả các hiệu ứng vào một thuộc tính transform. Nó có thể trở nên quá nhiều khá nhanh. Đặc biệt nếu các khung hình chính của bạn đến từ những nơi khác nhau, bạn sẽ cần phải có một sự hợp nhất rất phức tạp của một chuỗi đã biến đổi. Bạn khó có thể dựa vào một cơ chế tự động vì logic không đơn giản. Ngoài ra, có thể khó hiểu những gì mong đợi. Để đơn giản hóa điều này và duy trì tính linh hoạt, chúng ta cần tách chúng thành các kênh khác nhau.

Một giải pháp là gói các phần tử của chúng ta vào divs mà mỗi phần tử có thể được hoạt hình riêng biệt, ví dụ: một div để định vị trên canvas, một div khác để thay đổi tỷ lệ và một div thứ ba để xoay. Theo cách đó, bạn không chỉ đơn giản hóa đáng kể định nghĩa về hoạt ảnh mà còn mở ra khả năng xác định các nguồn biến đổi khác nhau khi áp dụng.

Có vẻ như mọi thứ trở nên mất kiểm soát với thủ thuật đó. Rằng chúng ta đang nhân lên số lượng các vấn đề mà chúng ta đã gặp trước đó. Trên thực tế, khi lần đầu tiên tìm thấy thủ thuật này, tôi đã loại bỏ nó vì nó quá nhiều. Tôi nghĩ rằng tôi có thể đảm bảo rằng thuộc tính transform của mình được biên dịch từ tất cả các phần theo đúng thứ tự trong một phần. Phải mất thêm một hàm transform nữa để làm cho mọi thứ trở nên quá phức tạp để quản lý và một số thứ không thể thực hiện được. Trình biên dịch chuỗi thuộc tính transform của tôi bắt đầu mất nhiều thời gian hơn để làm đúng nên tôi đã bỏ cuộc.

Hóa ra việc kiểm soát việc phát lại nhiều hoạt ảnh không khó như ban đầu bạn nghĩ. Bạn còn nhớ phép so sánh với máy nghe băng cassette từ đầu không? Nếu bạn có thể sử dụng máy nghe nhạc của riêng mình có thể phát bất kỳ số lượng băng cassette nào thì sao? Hơn thế nữa, bạn có thể thêm bao nhiêu nút tùy thích vào máy nghe nhạc đó.

Điểm khác biệt duy nhất giữa việc gọi play trên một hoạt ảnh duy nhất và một mảng hoạt ảnh là bạn cần phải lặp lại. Sau đây là mã mà bạn có thể sử dụng cho bất kỳ phương thức nào của các thể hiện Animation:

// Để phát, chỉ cần gọi play trên tất cả chúnganimations.forEach((animation) => animation.play());

Chúng ta sẽ sử dụng mã này để tạo ra mọi loại hàm cho trình phát của mình.

Hãy tạo hộp chứa các hoạt ảnh và phát chúng. Bạn có thể tạo các hộp đó theo bất kỳ cách nào phù hợp. Để làm rõ, tôi sẽ chỉ cho bạn một ví dụ về cách thực hiện bằng hàm và đối tượng. Hàm createPlayer lấy một mảng các hoạt ảnh sẽ được phát đồng bộ. Hàm này trả về một đối tượng với một phương thức play duy nhất.

function createPlayer(animations) { return Object.freeze({ play: function () { animations.forEach((animation) => animation.play()); } });}

Vậy là đủ để bạn biết cách bắt đầu mở rộng chức năng. Hãy thêm các phương thức pause và currentTime.

function createPlayer(animations) { return Object.freeze({ play: function () { animations.forEach((animation) => animation.play()); }, pause: function () { animations.forEach((animation) => animation.pause()); }, currentTime: function (time = 0) { animations.forEach((animation) => animation.currentTime = time); } });}

createPlayer với ba phương thức đó cung cấp cho bạn đủ quyền kiểm soát để sắp xếp bất kỳ số lượng hoạt ảnh nào. Nhưng hãy tiến xa hơn một chút. Hãy làm cho trình phát của chúng ta không chỉ có thể sử dụng bất kỳ số lượng băng cassette nào mà còn có thể sử dụng các trình phát khác nữa.

Như chúng ta đã thấy trước đó, giao diện Animation tương tự như giao diện phương tiện. Sử dụng điểm tương đồng đó, bạn có thể đưa mọi thứ vào trình phát của mình. Để phù hợp với điều đó, hãy điều chỉnh phương thức currentTime để làm cho nó hoạt động với cả đối tượng hoạt ảnh và đối tượng đến từ createPlayer.

function currentTime(time = 0) { animations.forEach(function (animation) { if (typeof animation.currentTime === "function") { animation.currentTime(time); } else { animation.currentTime = time; } });}

Trình phát mà chúng ta vừa tạo sẽ cho phép bạn ẩn độ phức tạp của một số div cho các kênh hoạt ảnh một phần tử. Các phần tử đó có thể được nhóm trong một cảnh. Và mỗi cảnh có thể là một phần của thứ gì đó lớn hơn. Tất cả những điều đó có thể được thực hiện bằng kỹ thuật này.

Để chứng minh bản demo về thời gian, tôi đã chia tất cả các hoạt ảnh thành ba trình phát. Đầu tiên là kiểm soát việc phát lại bản xem trước ở bên phải. Thứ hai là kết hợp hoạt ảnh nhảy của tất cả các đường viền của quả bóng ở bên trái và của quả bóng trong bản xem trước.

Cuối cùng, thứ ba là một trình phát kết hợp hoạt ảnh vị trí của các quả bóng trong một hộp đựng bên trái. Trình phát đó cho phép các quả bóng lan ra trong một bản trình diễn hoạt ảnh liên tục với các lát cắt khoảng 60 khung hình mỗi giây.

Kết luận​

Các giao diện web như Web Animations API cho chúng ta thấy một số thứ mà trình duyệt đã làm từ trước đến nay. Trình duyệt biết cách hiển thị nhanh bằng cách chuyển công việc cho GPU. Với Web Animations API, chúng ta có thể kiểm soát nó. Mặc dù điều khiển đó có vẻ hơi lạ hoặc khó hiểu, nhưng không có nghĩa là việc sử dụng nó cũng sẽ gây khó hiểu. Với sự hiểu biết về thời gian và điều khiển phát lại, bạn có các công cụ để thuần hóa API đó theo nhu cầu của mình. Bạn phải có khả năng xác định mức độ phức tạp của nó.

Đọc thêm​

• “Các kỹ thuật thiết thực về thiết kế hoạt hình,” Sarah Drasner
• “Thiết kế với chuyển động giảm cho độ nhạy chuyển động,” Val Head
• “Giao diện người dùng giọng nói thay thế cho trợ lý giọng nói,” Ottomatias Peura
• “Thiết kế chú giải công cụ tốt hơn cho giao diện người dùng di động,” Eric Olive