Javascript có thể phát triển một số hiệu ứng hoạt hình không?
|
Đây là bài #13 của loạt bài chuyên khám phá JavaScript và các thành phần xây dựng của nó. Trong quá trình xác định và mô tả các yếu tố cốt lõi, chúng tôi cũng chia sẻ một số quy tắc chung mà chúng tôi sử dụng khi xây dựng SessionStack, một ứng dụng JavaScript cần phải mạnh mẽ và có hiệu suất cao để giúp người dùng xem và tái tạo các lỗi ứng dụng web của họ theo thời gian thực Show
Nếu bạn bỏ lỡ các chương trước, bạn có thể tìm thấy chúng ở đây
Như bạn chắc chắn đã biết, hoạt ảnh đóng một vai trò thiết yếu trong việc tạo ra các ứng dụng web hấp dẫn. Khi người dùng ngày càng chuyển sự chú ý của họ sang UX và các doanh nghiệp bắt đầu nhận ra tầm quan trọng của hành trình người dùng thú vị, hoàn hảo, các ứng dụng web trở nên nặng hơn và có giao diện người dùng năng động hơn. Tất cả điều này yêu cầu hoạt ảnh phức tạp hơn để chuyển đổi trạng thái mượt mà hơn trong suốt hành trình của người dùng. Ngày nay, điều này thậm chí không được coi là một cái gì đó đặc biệt. Người dùng đang trở nên cao cấp hơn, theo mặc định mong đợi giao diện người dùng tương tác và phản hồi cao Tuy nhiên, hoạt ảnh giao diện của bạn không nhất thiết phải đơn giản. Cái gì nên được làm hoạt hình và khi nào, và loại hoạt hình nào nên có, đều là những câu hỏi hóc búa Hoạt hình JavaScript so với CSSHai cách chính để tạo hoạt ảnh trên web là sử dụng JavaScript và CSS. Không có lựa chọn đúng hay sai; Sinh động với CSSTạo hoạt ảnh với CSS là cách đơn giản nhất để có thứ gì đó chuyển động trên màn hình Chúng tôi sẽ bắt đầu với một ví dụ nhanh về cách di chuyển phần tử 50px theo cả hai trục X và Y. Nó được thực hiện bằng cách sử dụng quá trình chuyển đổi CSS được đặt thành 1000 mili giây Khi lớp transition: transform 500ms ease-in;0 được thêm vào, giá trị transition: transform 500ms ease-in;1 được thay đổi và quá trình chuyển đổi bắt đầuBên cạnh thời lượng chuyển tiếp, còn có các tùy chọn để nới lỏng, về cơ bản là cảm giác của hoạt ảnh. Chúng tôi sẽ tiến hành nới lỏng chi tiết hơn ở phần sau của bài đăng này Nếu, như trong đoạn mã trên, bạn tạo các lớp CSS riêng biệt để quản lý hoạt ảnh của mình, thì bạn có thể sử dụng JavaScript để bật và tắt từng hoạt ảnh Nếu bạn có yếu tố sau Sau đó, bạn có thể sử dụng JavaScript để bật và tắt từng hoạt ảnh Đoạn mã trên lấy tất cả các phần tử có lớp transition: transform 500ms ease-in;2 và thêm lớp transition: transform 500ms ease-in;0 để kích hoạt hoạt ảnhLàm điều này mang lại sự cân bằng tốt đẹp cho các ứng dụng của bạn. Bạn có thể tập trung vào việc quản lý trạng thái bằng JavaScript và chỉ cần đặt các lớp thích hợp trên các phần tử đích, để trình duyệt xử lý hoạt ảnh. Nếu bạn đi theo con đường này, bạn có thể nghe các sự kiện transition: transform 500ms ease-in;4 trên phần tử, nhưng chỉ khi bạn có thể từ bỏ hỗ trợ cho các phiên bản Internet Explorer cũ hơnLắng nghe sự kiện transition: transform 500ms ease-in;0 được kích hoạt khi kết thúc quá trình chuyển đổi, giống như thế nàyNgoài việc sử dụng chuyển tiếp CSS, bạn cũng có thể sử dụng hoạt ảnh CSS, cho phép bạn có nhiều quyền kiểm soát hơn đối với các khung hình chính hoạt ảnh riêng lẻ, thời lượng và số lần lặp lại
Hãy xem một ví dụ Đây là giao diện của nó (bản giới thiệu nhanh) — https. // ngăn xếp phiên. github. io/blog/bản trình diễn/khung hình chính/ Với hoạt ảnh CSS, bạn tự xác định hoạt ảnh độc lập với phần tử đích và sử dụng thuộc tính tên hoạt ảnh để chọn hoạt ảnh cần thiết Hoạt ảnh CSS vẫn có phần tiền tố của nhà cung cấp, với transition: transform 500ms ease-in;1 được sử dụng trong Safari, Safari Mobile và Android. Chrome, Opera, Internet Explorer và Firefox đều không có tiền tố. Nhiều công cụ có thể giúp bạn tạo các phiên bản CSS có tiền tố mà bạn cần, cho phép bạn viết phiên bản không có tiền tố trong các tệp nguồn của mìnhSinh động với JavaScriptTạo hoạt ảnh bằng JavaScript phức tạp hơn so với sử dụng hiệu ứng chuyển tiếp hoặc hoạt ảnh CSS, nhưng nó thường cung cấp cho nhà phát triển nhiều sức mạnh hơn đáng kể Hoạt hình JavaScript được viết nội tuyến như một phần mã của bạn. Bạn cũng có thể đóng gói chúng bên trong các đối tượng khác. Dưới đây là đoạn mã JavaScript mà bạn cần viết để tạo lại quá trình chuyển đổi CSS được mô tả trước đó Theo mặc định, Web Animations chỉ sửa đổi cách trình bày của một phần tử. Nếu bạn muốn giữ nguyên đối tượng của mình ở vị trí mà đối tượng đã được di chuyển đến, thì bạn nên sửa đổi các kiểu bên dưới của đối tượng đó khi hoạt ảnh kết thúc. Đây là lý do tại sao chúng tôi lắng nghe sự kiện transition: transform 500ms ease-in;2 trong ví dụ trên và đặt thuộc tính transition: transform 500ms ease-in;3 bằng transition: transform 500ms ease-in;4, giống như phép biến đổi thứ hai được thực hiện bởi hoạt ảnh của chúng tôiVới hoạt ảnh JavaScript, bạn có toàn quyền kiểm soát các kiểu của phần tử ở mọi bước. Điều này có nghĩa là bạn có thể làm chậm hoạt ảnh, tạm dừng, dừng, đảo ngược và thao tác các yếu tố khi bạn thấy phù hợp. Điều này đặc biệt hữu ích nếu bạn đang xây dựng các ứng dụng phức tạp, hướng đối tượng, vì bạn có thể gói gọn hành vi của mình một cách chính xác Nới lỏng là gì?Chuyển động tự nhiên giúp người dùng của bạn cảm thấy thoải mái hơn với các ứng dụng web của bạn, dẫn đến trải nghiệm người dùng tốt hơn Đương nhiên, không có gì di chuyển tuyến tính từ điểm này sang điểm khác. Trên thực tế, mọi thứ có xu hướng tăng tốc hoặc giảm tốc khi chúng di chuyển trong thế giới vật chất xung quanh chúng ta vì chúng ta không ở trong chân không và có nhiều yếu tố khác nhau có xu hướng tác động đến điều này. Bộ não con người được kết nối để mong đợi loại chuyển động này, vì vậy khi tạo hoạt ảnh cho các ứng dụng web của mình, bạn nên sử dụng kiến thức này để làm lợi thế cho mình Có thuật ngữ mà bạn cần phải hiểu
Hai cái này có thể kết hợp với nhau, ví dụ “dễ dàng ra vào” Tính năng nới lỏng cho phép bạn tạo hoạt ảnh tự nhiên hơn Giảm từ khóaCác hiệu ứng chuyển tiếp và hoạt ảnh CSS cho phép bạn chọn loại nới lỏng mà bạn muốn sử dụng. Có các từ khóa khác nhau ảnh hưởng đến việc nới lỏng hoạt ảnh. Bạn cũng có thể làm cho việc nới lỏng của mình hoàn toàn tùy chỉnh Dưới đây là một số từ khóa mà bạn có thể sử dụng trong CSS để kiểm soát việc nới lỏng
Hãy xem qua tất cả chúng và xem chúng thực sự có ý nghĩa gì hoạt hình tuyến tínhHoạt hình mà không có bất kỳ loại nới lỏng nào được gọi là tuyến tính Đây là cách biểu đồ của quá trình chuyển đổi tuyến tính trông như thế nào Thời gian trôi qua, giá trị tăng lên với số lượng bằng nhau. Với chuyển động tuyến tính, mọi thứ có xu hướng không tự nhiên. Nói chung, bạn nên tránh chuyển động tuyến tính Đây là cách có thể đạt được hoạt hình tuyến tính đơn giản transition: transform 500ms ease-in;9Hoạt hình dễ dàngNhư đã đề cập trước đó, nới lỏng khiến hoạt ảnh bắt đầu nhanh hơn so với hoạt ảnh tuyến tính, trong khi hoạt ảnh chậm lại ở cuối. Đây là cách biểu đồ của nó trông giống như Nói chung, nới lỏng được sử dụng tốt nhất cho công việc giao diện người dùng vì bắt đầu nhanh mang lại cho hoạt ảnh của bạn cảm giác phản hồi nhanh, trong khi giảm tốc độ ở cuối tạo cảm giác tự nhiên do chuyển động không nhất quán Có nhiều cách để đạt được hiệu ứng giảm bớt, nhưng cách đơn giản nhất là từ khóa transition: transform 500ms ease-in;7 trong CSStransition: transform 500ms ease-in;1Hoạt hình dễ sử dụngNhững hoạt ảnh này trái ngược với hoạt ảnh dễ hiểu — chúng bắt đầu chậm và kết thúc nhanh. Đây là cách biểu đồ của họ trông giống như So với hoạt ảnh mở rộng, chuyển động mở rộng có thể cảm thấy khác thường vì chúng tạo ra cảm giác không phản hồi vì chúng bắt đầu chậm. Kết thúc nhanh cũng có thể tạo ra cảm giác kỳ lạ, vì toàn bộ hoạt ảnh đang tăng tốc trong khi các vật thể trong thế giới thực có xu hướng giảm tốc khi dừng đột ngột Để sử dụng hoạt hình dễ vào, tương tự như hoạt hình dễ ra và hoạt hình tuyến tính, bạn có thể sử dụng từ khóa của nó transition: transform 500ms ease-in;Hình ảnh động dễ dàng vào raHoạt hình này là sự kết hợp giữa dễ vào và dễ ra. Đây là cách biểu đồ của nó trông giống như Không sử dụng thời lượng hoạt ảnh quá dài vì chúng tạo cảm giác như thể giao diện người dùng của bạn không phản hồi Để có được một hình ảnh động dễ hiểu, bạn có thể sử dụng từ khóa CSS transition: transform 500ms ease-in;8transition: transform 500ms ease-in;4Nới lỏng tùy chỉnhBạn có thể xác định các đường cong nới lỏng của riêng mình, điều này mang lại nhiều quyền kiểm soát hơn đối với cảm giác mà hoạt ảnh của dự án của bạn tạo ra Trên thực tế, các từ khóa transition: transform 500ms ease-in;6, transition: transform 500ms ease-in;7, transition: transform 500ms ease-in;5, transition: transform 500ms ease-in;45 ánh xạ tới các đường cong Bézier được xác định trước, được trình bày chi tiết trong đặc tả chuyển tiếp CSS và đặc tả Hoạt hình webđường cong bézierHãy xem đường cong Bézier hoạt động như thế nào. Một đường cong Bézier nhận bốn giá trị, hay chính xác hơn là nhận hai cặp số. Mỗi cặp mô tả tọa độ X và Y của điểm kiểm soát của đường cong Bézier bậc ba. Điểm đầu của đường cong Bézier có toạ độ (0, 0) và toạ độ cuối là (1, 1). Bạn có thể đặt cả hai số cặp. Giá trị X cho hai điểm kiểm soát phải nằm trong phạm vi [0, 1] và giá trị Y của mỗi điểm kiểm soát có thể vượt quá giới hạn [0, 1], mặc dù thông số kỹ thuật không rõ ràng là bao nhiêu Ngay cả những thay đổi nhỏ trong giá trị X và Y của từng điểm kiểm soát cũng mang lại cho bạn một đường cong hoàn toàn khác. Hãy xem xét hai đồ thị của đường cong Bézier với các điểm có tọa độ gần nhau nhưng khác nhau và Như bạn thấy, các biểu đồ khá khác nhau. Điểm kiểm soát đầu tiên có Đây là cách CSS cho đường cong thứ hai trông như thế nào transition: transform 500ms ease-in;9Hai số đầu tiên là tọa độ X và Y của điểm kiểm soát đầu tiên và hai số thứ hai là tọa độ X và Y của điểm kiểm soát thứ hai tối ưu hóa hiệu suấtBạn nên duy trì tốc độ 60 khung hình/giây bất cứ khi nào bạn tạo hoạt ảnh, nếu không nó sẽ tác động tiêu cực đến trải nghiệm người dùng của bạn Như mọi thứ khác trên thế giới, hoạt ảnh không miễn phí. Hoạt ảnh một số thuộc tính rẻ hơn những thuộc tính khác. Ví dụ: hoạt ảnh transition: transform 500ms ease-in;46 và transition: transform 500ms ease-in;47 của một phần tử sẽ thay đổi hình học của nó và có thể khiến các phần tử khác trên trang di chuyển hoặc thay đổi kích thước. Quá trình này được gọi là bố trí. Chúng tôi đã thảo luận về bố cục và kết xuất chi tiết hơn trong một trong các bài viết trước của chúng tôiNói chung, bạn nên tránh các thuộc tính hoạt ảnh kích hoạt bố cục hoặc vẽ. Đối với hầu hết các trình duyệt hiện đại, điều này có nghĩa là giới hạn hoạt ảnh ở mức transition: transform 500ms ease-in;48 và transition: transform 500ms ease-in;49Sẽ thay đổiBạn có thể sử dụng transition: transform 500ms ease-in;90 để thông báo cho trình duyệt rằng bạn định thay đổi thuộc tính của phần tử. Điều này cho phép trình duyệt đưa ra các tối ưu hóa phù hợp nhất trước khi bạn thực hiện thay đổi. Tuy nhiên, đừng lạm dụng transition: transform 500ms ease-in;91 vì làm như vậy có thể khiến trình duyệt lãng phí tài nguyên, từ đó gây ra nhiều vấn đề về hiệu suất hơnThêm transition: transform 500ms ease-in;91 cho các biến đổi và độ mờ trông như thế nàytransition: transform 500ms ease-in;7Trình duyệt hỗ trợ Chrome, Firefox và Opera khá tốt Lựa chọn giữa JavaScript và CSSBạn có thể đã thấy nó sắp xảy ra — không có câu trả lời đúng hay sai cho câu hỏi này. Bạn chỉ cần ghi nhớ những điều sau
Chọn những thứ phù hợp để tạo hiệu ứngHoạt hình tuyệt vời thêm một lớp thích thú và tương tác vào các dự án của bạn cho người dùng của bạn. Bạn có thể tạo hoạt ảnh cho bất kỳ thứ gì bạn thích, cho dù đó là chiều rộng, chiều cao, vị trí, màu sắc hay hình nền, nhưng bạn cần lưu ý về các tắc nghẽn hiệu suất tiềm ẩn. Hoạt ảnh được chọn kém có thể ảnh hưởng tiêu cực đến trải nghiệm người dùng, vì vậy hoạt ảnh cần phải hiệu quả và phù hợp. Animate càng ít càng tốt. Hoạt hình chỉ để làm cho UX của bạn cảm thấy tự nhiên nhưng không hoạt hình quá mức Sử dụng hình ảnh động để hỗ trợ tương tácĐừng chỉ làm sinh động một cái gì đó bởi vì bạn có thể. Thay vào đó, hãy sử dụng các hoạt ảnh được đặt một cách chiến lược để củng cố tương tác của người dùng. Tránh hoạt ảnh làm gián đoạn hoặc cản trở hoạt động của người dùng một cách không cần thiết Tránh hoạt ảnh các thuộc tính đắt tiềnĐiều duy nhất tồi tệ hơn các hoạt ảnh được đặt ở vị trí kém là những hoạt ảnh khiến trang bị giật hình. Loại hoạt ảnh này khiến người dùng cảm thấy thất vọng và không hài lòng Chúng tôi sử dụng hoạt ảnh trong SessionStack khá dễ dàng. Nói chung, chúng tôi tuân theo các phương pháp được đề cập ở trên nhưng chúng tôi cũng có một vài tình huống khác mà chúng tôi sử dụng hoạt ảnh do sự phức tạp của giao diện người dùng của chúng tôi. SessionStack phải tạo lại dưới dạng video mọi thứ đã xảy ra với người dùng cuối tại thời điểm họ gặp sự cố khi duyệt ứng dụng web. Để làm điều này, SessionStack chỉ tận dụng dữ liệu được thư viện của chúng tôi thu thập trong phiên. sự kiện người dùng, thay đổi DOM, yêu cầu mạng, ngoại lệ, thông báo gỡ lỗi, v.v. Trình phát của chúng tôi được tối ưu hóa cao để hiển thị chính xác và sử dụng tất cả dữ liệu đã thu thập nhằm cung cấp mô phỏng hoàn hảo đến từng pixel về trình duyệt của người dùng cuối và mọi thứ diễn ra trong đó, cả về mặt hình ảnh và kỹ thuật Để đảm bảo quá trình sao chép diễn ra tự nhiên, đặc biệt là với các phiên người dùng dài và nhiều, chúng tôi sử dụng hoạt ảnh để biểu thị chính xác quá trình tải/đệm và tuân theo các phương pháp hay nhất về cách triển khai chúng để chúng tôi không chiếm quá nhiều thời gian của CPU và rời khỏi vòng lặp sự kiện Bạn có thể sử dụng JavaScript cho hoạt ảnh không?Hoạt ảnh JavaScript được thực hiện bằng cách lập trình các thay đổi dần dần trong kiểu của phần tử . Các thay đổi được gọi bởi một bộ đếm thời gian. Khi khoảng thời gian hẹn giờ nhỏ, hoạt ảnh trông liên tục.
Tôi có nên sử dụng CSS hoặc JavaScript cho hoạt ảnh không?Sử dụng hoạt ảnh CSS để chuyển tiếp đơn giản hơn, chẳng hạn như chuyển tiếp một lần . Ví dụ: chúng ta có thể nói như chuyển đổi trạng thái phần tử giao diện người dùng. Sử dụng hoạt ảnh JavaScript khi bạn muốn có các hiệu ứng nâng cao như nảy, dừng, tạm dừng, tua lại, làm chậm hoặc nếu bạn cần kiểm soát thời gian và nội dung để tạo hoạt ảnh.
Làm cách nào để áp dụng hoạt ảnh trong JavaScript?Để có thể tạo hoạt ảnh, phần tử hoạt ảnh phải được tạo hoạt ảnh tương ứng với "vùng chứa chính" . Phần tử vùng chứa phải được tạo với style="position. liên quan đến". Phần tử hoạt hình nên được tạo với style="position. tuyệt đối".
Khung nào là tốt nhất cho hoạt ảnh?Thư viện hoạt ảnh miễn phí tốt nhất dành cho nhà thiết kế . AnimeJS quảng cáo mo. js Nền tảng hoạt hình Greenstock (GSAP) vận tốc. js csshake Bay lượn. css hoạt hình ma thuật |
