Thay đổi biểu tượng hoạt hình css

Bất kể hình ảnh động nào của bạn hiển thị ở tốc độ dưới 60 khung hình mỗi giây, thì khách truy cập của bạn sẽ nhận thấy và trải nghiệm người dùng sẽ bị ảnh hưởng

Chính vì lý do đó, bài viết này sẽ hướng dẫn bạn Animation tối ưu để vừa có hiệu ứng animation mượt mà hiệu quả tổng thể trang web lại tốt

Animation dark

1. Hoạt ảnh CSS so với Hoạt ảnh Javascript?

Hoạt ảnh được tạo bằng JavaScript đôi khi được gọi là hoạt ảnh bắt buộc và hoạt ảnh được tạo bằng CSS được gọi là hoạt ảnh khai báo

Hoạt hình CSS được xử lý chuỗi tổng hợp (luồng hỗn hợp) của trình duyệt chứ không phải là chuỗi chính

Do đó, CSS Animation sẽ không bị ảnh hưởng bởi các nhiệm vụ quan trọng hơn trong luồng chính

Tuy nhiên, hiệu ứng CSS Animation kích hoạt các điều kiện vẽ hoặc bố cục cũng sẽ yêu cầu công việc của luồng chính, điều này phủ nhận lợi ích của việc sử dụng CSS Animation

Mặt khác, Hoạt hình JavaScript luôn được thực thi bởi chủ đề chính

Tuy nhiên, JavaScript cung cấp cho bạn quyền kiểm soát lớn hơn đối với hoạt ảnh, do đó, bạn nên sử dụng nó trong một số trường hợp

• CSS là lựa chọn lý tưởng cho hiệu ứng hoạt hình đơn giản

• JavaScript thì được khuyến khích khi muốn tạo hiệu ứng hoạt hình nâng cao

• Hiệu ứng cho phép người dùng tạm dừng hoặc tua lại cũng phải được thực hiện bằng JavaScript

• Các hiệu ứng định dạng tốt nhất như thị sai cuộn cũng nên được thực hiện bằng Javascript

Với sự trợ giúp của Web Animation API, bạn có thể tạo các hình động phức tạp cho các đối tượng ứng dụng hướng tới.

Ngoài ra, bạn cũng có thể sử dụng JavaScript để kiểm tra CSS Animation

2. mẹo sử dụng Javascript Animation

Để có hiệu ứng Animation mượt mà lại có hiệu suất tốt với Javascript, đây là 4 mẹo bạn nên áp dụng

mẹo #1. Use requestAnimationFrame()

Thay vì sử dụng setTimeOut() và setInterval(), hãy sử dụng phương thức JavaScript requestAnimationFrame() để thực thi mã Animation của bạn vào thời điểm tốt nhất cho trình duyệt

Phương thức này chọn tốc độ khung hình phù hợp với thiết bị của người dùng, vì vậy khách truy cập trên thiết bị di động sẽ thấy tốc độ khung hình khác với trên máy tính để bàn

mẹo #2. Tách hoạt hình từ các sự kiện

Code chịu trách nhiệm xử lý các sự kiện như scroll phải được tách biệt khỏi code animation của bạn

HTML5Rocks có một bài viết hướng dẫn rất đầy đủ, nó có thể giúp bạn tìm hiểu sâu hơn về cách phân tách các sự kiện từ mã xử lý requestAnimationFrame()

mẹo #3. Mã Javascript phải được chấp nhận

Cần phải lưu ý khi thêm nhiều mã Javascript vào trang web của bạn

Nếu mã của bạn bắt đầu khó sử dụng, bạn có thể thử sử dụng các Web Worker để thực thi JavaScript Animations trên một luồng khác

mẹo #4. KHÔNG sử dụng jQuery

Bỏ qua thư viện hoạt hình cũ như jQuery

Nếu bạn đang tìm kiếm một thư viện tương tự, hãy thử Velocity. js

Về cơ bản, Vận tốc. js hoạt động tương tự như jQuery, nhưng nó nhanh hơn nhiều và hỗ trợ nhiều tính năng hơn

Bạn chỉ cần thay thế $.animate() bằng $.velocity() là đã tạo ra sự khác biệt lớn cho người dùng di động

3. Chọn thuộc tính CSS nào để tạo Hoạt hình?

Hiệu ứng hoạt hình liên tục có thể tiêu tốn một lượng tài nguyên đáng kể

And a number of property CSS Animation but a default more than a other property number

Trình duyệt càng khó hoạt động để tạo hiệu ứng động, tốc độ khung hình sẽ càng chậm

Do đó, việc chọn các thuộc tính CSS phù hợp để tạo hiệu ứng có thể tác động rất lớn đến hiệu suất trang web

Có 3 loại thuộc tính CSS chính

Thứ nhất, các thuộc tính cục bộ

Chúng tôi xác định kích thước và vị trí của các phần tử trên trang

Hoạt hình thay đổi chiều rộng và chiều cao của phần tử có thể ảnh hưởng đến vị trí của các phần tử khác, điều này có thể gây phản ứng dây điện phản hồi được gọi là "Layout thrash"

Thế nên, các hoạt hình thay đổi bố cục trang này đặc biệt nặng, tốt nhất là NÊN TRÁNH

Thứ hai, thuộc tính vẽ

Thuộc tính này xác định sự xuất hiện của các phần tử

Thực hiện thay đổi đối với các thuộc tính như màu sắc yêu cầu phải vẽ lại, nó cũng có thể gây tốn kém tài nguyên

Do đó, các hình ảnh động đơn giản yêu cầu một phần nhỏ của khung nhìn được vẽ lại có thể có tác động không đáng kể đến hiệu suất tổng thể

Ngược lại, hoạt hình lớn hơn yêu cầu phải vẽ lại không thể đánh bại để bạn đánh đổi hiệu quả

Thứ ba, thuộc tính hỗn hợp

Bao gồm transform và opacity, là những thuộc tính tốt nhất để bạn có thể tạo CSS Animation với tài nguyên tối thiểu

Với biến đổi, bạn có thể chia tỷ lệ và xoay hình động mà không ảnh hưởng đến bố cục trang

Vì thế, hãy cố gắng sử dụng các thuộc tính hỗ trợ cho hoạt ảnh bất cứ khi nào có thể

Mặc dù nó có giới hạn, nhưng lúc này đây rất cần bạn sáng tạo, và việc phải sáng tạo thường xuyên thì trình độ của bạn tăng tiến vù vù ngay thôi

Nếu bạn muốn tìm hiểu thêm về cách làm thế nào để biến loại chuyển động bố trí cục bộ thành loại chuyển động được hỗ trợ thì có thể xem thêm tại đây

CSS Triggers có một biểu tượng giải thích các quá trình được kích hoạt bởi các thuộc tính CSS riêng lẻ trong các trình duyệt khác nhau

Trình kích hoạt CSS

Nó có thể giúp bạn xác định xem hoạt động của bạn sẽ gây ra sự thay đổi bản vẽ hay thay đổi định dạng cục bộ

Để có kết quả tốt nhất, hãy cố gắng tự giới hạn bản thân bằng cách sử dụng bốn thuộc tính tổng hợp sau

Bạn có thể thực hiện hầu hết mọi thứ bằng các thuộc tính này để thực hiện các nhiệm vụ tương tự của các thuộc tính cục bộ mà không ảnh hưởng đến các phần tử trên trang

Ví dụ. Để thay đổi kích thước của hình ảnh, hãy sử dụng scale() thay vì setTimeOut()0

4. mẹo sử dụng CSS Animation

Tất nhiên là bạn vẫn có những trường hợp có thể sử dụng CSS Animation mà vẫn có hiệu quả tốt

Đây là 5 mẹo sử dụng CSS Animation

mẹo #1. Việc sử dụng các đồng thời hoạt hình

Hiệu ứng hoạt hình chạy trơn tru khi đơn độc. Nó không thể hoạt động tốt nhất trên một trang có hàng loạt hiệu ứng hoạt hình khác

Nhiều hơn hai hình ảnh động cùng một lúc có khả năng gây ra định mức

Do đó, việc xác định thời gian cho các hoạt ảnh của bạn để chúng không thực hiện tất cả cùng một lúc là rất quan trọng để duy trì hiệu suất ổn định

Điều khoản này có thể được thực hiện bằng cách bổ sung thuộc tính setTimeOut()1

Mặc dù công việc tối ưu hóa hoạt hình khá khó khăn và mất thời gian, nhưng như mình luôn khuyến khích các học viên của mình

"Khó thì mới có chỗ dành cho bạn, dễ nó làm hết rồi"

Hãy nhớ rằng, hiệu suất tốt hơn không phải là giá trị duy nhất mà bạn nhận được

mẹo #2. Kiểm tra hoạt ảnh trong chuyển động chậm

Nếu một hiệu ứng hoạt ảnh vẫn tốt trong quá trình chuyển động chậm, nó sẽ tốt ở tốc độ bình thường

Làm chậm hiệu ứng hoạt hình có thể giúp bạn xác định chính xác hơn các vấn đề kết xuất của trình duyệt

mẹo #3. Trì hoãn tất cả các hoạt ảnh vài phần trăm

Bạn cần biết là, trình duyệt rất bận rộn khi trang bắt đầu tải

Type like. Đang bận mà phải nhờ vả thêm 10 nhiệm vụ phụ,. chắc nghỉ việc quá

Thế nên,

Hãy trì hoãn tất cả các hoạt ảnh khoảng vài trăm setTimeOut()2 sau sự kiện tải ban đầu có thể tạo ra sự khác biệt đáng kể đến hiệu suất tổng thể của trang

mẹo #4. Không liên kết Hoạt ảnh với sự kiện cuộn trang

Hiệu ứng hoạt hình hình theo chế độ xem khi người dùng cuộn không chỉ gây khó chịu mà còn kéo giảm hiệu ứng của mọi thứ khác trên đường di chuyển

mẹo #5. Kết hợp CSS với SVG

Đồ họa vector hoặc SVG, là lựa chọn tuyệt vời dành cho hiệu ứng hoạt hình vì chúng có thể được thu nhỏ mà không làm giảm tốc độ phân giải

Để đơn giản, bạn có thể tạo SVG nhanh Adobe Illustrator, xuất ra CSS và chỉnh sửa nó

And try to view. Icon font hay SVG sẽ tốt hơn?

5. Khi nào thì sử dụng setTimeOut()3?

Nếu bạn đã thử mọi thứ khác và vẫn gặp sự cố về hiệu suất, thì bạn có thể thử thêm thuộc tính setTimeOut()3 vào hoạt ảnh của mình

Đúng như tên gọi của nó, thuộc tính setTimeOut()3 sẽ báo cáo rằng các thuộc tính của phần tử sẽ thay đổi để trình duyệt có thể chuẩn bị thích hợp

Liệt kê các thuộc tính cụ thể có thể setTimeOut()3 như thế này

.element {
    will-change: transform, opacity;
}

Vì việc sử dụng setTimeOut()3 cũng sẽ tiêu tốn tài nguyên, do đó không nên sử dụng quá mức mà mang lại tác dụng ngược

Lưu ý. Không khuyến nghị đặt setTimeOut()3 trước mỗi hoạt ảnh

Chỉ sử dụng sẽ setTimeOut()3 như là đối sách cuối cùng để tối ưu hóa hiệu quả trang web

Your setting testing your animation

Bạn cần phải liên tục kiểm tra hiệu suất trong khi xây dựng hiệu ứng hoạt ảnh cho trang web của bạn

Bạn càng để lâu thì càng khó xác định vấn đề

Các công cụ dành cho lập trình viên trên Chrome, Firefox và Safari cung cấp bảng phân tích theo từng khung hình và vẽ các sự kiện trong tab Mạng

Thông báo này có thể giúp bạn tối ưu hóa hình ảnh động khi bạn thiết kế

Nếu bạn sử dụng Chrome, hãy xem tab bên dưới Rendering trong bảng điều khiển DevTools để thêm các tính năng bổ sung như máy đo FPS

Hướng dẫn bật FPS Meter trong Chrome Devtools

Kích thước màn hình của người dùng có ảnh hưởng lớn đến cách hiển thị hoạt ảnh, hãy đảm bảo kiểm tra dự án của bạn trên nhiều loại thiết bị khác nhau

Hiệu ứng tối ưu là phải khôi phục lại giá trị thực

Tối ưu hóa hoạt ảnh cho trang web không phải nhiệm vụ bất khả thi

Nhưng,

Lựa chọn hoạt ảnh để thu hút khách hàng truy cập mới ở lại trên trang web của bạn sẽ khó khăn hơn vì bạn phải xem xét các đối tượng của mình

Tham khảo ngay các khóa học Lập trình web với chuyên gia để hiểu bản chất và trang web tối ưu

Ngoài ra, bạn cũng cần phải theo dõi việc thay đổi hiệu suất tác động như thế nào đến chuyển đổi trên trang web

Nếu hoạt ảnh tối thiểu của bạn không giúp ích cho việc chuyển đổi. Tốt hơn hết là đầu tư tài nguyên và định vị tại chỗ khác. . D

Chúc bạn thành công

---

HỌC VIỆN ĐẠO TẠO CNTT NIIT - ICT HÀ NỘI

Tạo học Lập trình chất lượng cao (Từ năm 2002). Học lập trình viên. Action ngay

Đc. Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội

SĐT. 02435574074 - 0914939543 - 0353655150

E-mail. xin chào@niithanoi. giáo dục. vn

trang chủ. https. //Facebook. com/NIIT. CNTT-TT/

#niit #niithanoi niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python