Tìm hiểu cách kiểm soát việc tăng tốc hoạt ảnh của bạn bằng chức năng định thời gian hoạt ảnh và xem một số ví dụ về các giá trị khác nhau mà bạn có thể sử dụng.

Bạn đang xem : chức năng định thời gian hoạt ảnh dễ dàng xuất hiện

Với CSS, bạn có thể tạo hoạt ảnh thu hút và làm hài lòng khách truy cập của bạn và hoạt động theo cách bạn muốn. Bạn có thể đặt số lần hoạt ảnh CSS lặp lại , thời điểm bắt đầu phát sau khi tải trang và hơn thế nữa.

Bạn thậm chí có thể kiểm soát tốc độ của hoạt ảnh. Ví dụ: giả sử bạn muốn hoạt ảnh của mình bắt đầu chậm, tăng tốc ở giữa chu kỳ và sau đó chậm lại ở cuối. Bạn có thể làm như vậy bằng cách sử dụng thuộc tính thời gian hoạt ảnh CSS.

Hãy xem qua cách bạn có thể xác định thuộc tính này để kiểm soát tốc độ của hoạt ảnh bên dưới.

Tải xuống ngay: Hack HTML & amp; CSS miễn phí < / span>

Chức năng định thời gian hoạt ảnh CSS

Chức năng định thời gian hoạt ảnh CSS đặt tốc độ của hoạt ảnh. Có nghĩa là, nó cho phép bạn kiểm soát thời điểm hoạt ảnh tăng tốc và chậm lại trong chu kỳ hoạt ảnh.

Điều quan trọng cần hiểu là chức năng này không ảnh hưởng đến thời lượng thực của hoạt ảnh. Điều đó được đặt bởi thuộc tính thời lượng hoạt ảnh tính bằng giây hoặc mili giây. Tuy nhiên, chức năng định thời gian hoạt ảnh ảnh hưởng đến nhận thức của người dùng về tốc độ nhanh hay chậm của hoạt ảnh.

Đó là bởi vì, tùy thuộc vào giá trị bạn sử dụng để xác định hàm, hoạt ảnh của bạn có thể bắt đầu chậm sau đó tăng tốc. Hoặc nó có thể có tốc độ không đổi, hoặc nhảy ngay lập tức đến trạng thái kết thúc. Đây chỉ là một vài khả năng với chức năng định thời gian hoạt ảnh.

Trước khi chúng tôi xem xét kỹ hơn các giá trị có thể có cho chức năng định thời gian hoạt ảnh, hãy xem nó được viết như thế nào.

Cú pháp hàm định thời gian hoạt ảnh

Cú pháp của hàm định thời gian hoạt ảnh CSS là:

Có sáu giá trị từ khóa có thể có cho chức năng này: dễ dàng, tuyến tính, dễ dàng, dễ dàng hơn, dễ dàng hơn trong việc xuất bản, bắt đầu từng bước và kết thúc bước. Chúng tôi sẽ giải thích từng điều này cũng như các giá trị hàm, bước () và khối-bezier (), bên dưới.

Chức năng hẹn giờ hoạt ảnh trên Webkit

Bạn cũng có thể thấy chức năng định thời gian hoạt ảnh được viết bằng tiền tố nhà cung cấp. Các tiền tố này thường được thêm vào khi các nhà phát triển đang thử nghiệm các thuộc tính CSS không được hỗ trợ đầy đủ trong một số trình duyệt hoặc phiên bản nhất định của trình duyệt đó.

Đối với Safari và Chrome, tiền tố của nhà cung cấp là -webkit-. Tiền tố này là không cần thiết nếu nhà phát triển đang sử dụng phiên bản 9.0 của Safari hoặc phiên bản 43.0 của Chrome, vì các phiên bản này hỗ trợ đầy đủ chức năng định thời gian hoạt ảnh. Tuy nhiên, tiền tố -webkit- nên được thêm khi sử dụng các phiên bản lỗi thời hơn của các trình duyệt này.

Xem Thêm  Veux-Veux-Pas, free classified ads Website - maã ascii

Tiền tố nhà cung cấp luôn được thêm vào trước tên sản phẩm trong khai báo. Dưới đây là cách viết hàm định thời gian hoạt ảnh với tiền tố -webkit-:

Giá trị chức năng định thời gian hoạt ảnh CSS

Có nhiều giá trị có thể có cho chức năng định thời gian hoạt ảnh CSS. Phổ biến nhất là dễ dàng, tuyến tính, dễ vào và dễ dàng, nhưng có một số loại khác cung cấp khả năng kiểm soát chi tiết hơn đối với việc tăng tốc của hoạt ảnh. Hãy xác định từng giá trị bên dưới.

Dễ dàng

Hoạt ảnh bắt đầu chậm, tăng tốc rồi chậm lại. Nếu không có giá trị nào khác được chỉ định, chức năng sẽ được đặt thành dễ dàng theo mặc định.

Xem chức năng định thời gian hoạt ảnh của Pen : easy của Christina Perricone ( @hubspot ) trên CodePen .

Sự thoải mái

Hoạt ảnh bắt đầu chậm, sau đó tăng dần tốc độ.

Xem chức năng định thời gian hoạt ảnh của Pen : easy-in của Christina Perricone ( @hubspot ) trên CodePen . < / p>

Dễ chịu

Hoạt ảnh bắt đầu nhanh, sau đó chậm dần.

Xem chức năng định thời gian hoạt ảnh của Pen : easy-out của Christina Perricone ( @hubspot ) trên CodePen . < / p>

Dễ dàng nhận ra

Hoạt ảnh có phần đầu chậm và phần cuối chậm, tăng tốc ở giữa.

Xem chức năng định thời gian hoạt ảnh của Pen : easy-in-out của Christina Perricone ( @hubspot ) trên CodePen .

Tuyến tính

Hoạt ảnh có cùng tốc độ từ đầu đến cuối.

Xem chức năng định thời gian hoạt ảnh của Pen : tuyến tính của Christina Perricone ( @hubspot ) trên CodePen .

Bắt đầu từng bước

Hoạt ảnh chuyển ngay lập tức đến trạng thái cuối cùng.

Vì vậy, giả sử hoạt ảnh được đặt bắt đầu ở 0px, sau đó di chuyển sang phải 150px và thời lượng của nó là 4 giây. Thay vì dần dần di chuyển sang phải trong khoảng thời gian đó, nó sẽ ngay lập tức nhảy sang phải 150px.

Xem chức năng định thời gian hoạt ảnh của Pen : step-start của Christina Perricone ( @hubspot ) trên CodePen . < / p>

Kết thúc bước

Hoạt ảnh vẫn ở trạng thái ban đầu cho đến khi kết thúc chu kỳ hoạt ảnh, khi hoạt ảnh chuyển ngay sang trạng thái cuối cùng.

Sử dụng giả thuyết tương tự từ bên trên, hoạt ảnh sẽ vẫn ở 0px trong hầu hết chu kỳ hoạt ảnh cho đến khi chuyển ngay sang phải 150px ở cuối.

Xem chức năng định thời gian hoạt ảnh của Pen : step-end của Christina Perricone ( @hubspot ) trên CodePen . < / p>

Lưu ý trong ví dụ trên, tôi đã bỏ thuộc tính animation-iteration-count được sử dụng trong các ví dụ trước và thêm thuộc tính thuộc tính animation-fill-mode . Được đặt thành “chuyển tiếp”, thuộc tính này đảm bảo phần tử hoạt ảnh giữ được giao diện ở trạng thái cuối cùng ngay cả sau khi hoạt ảnh hoàn thành (tức là phần tử này sẽ không đặt lại vị trí của nó).

Các bước (n, số hạng nhảy vọt)

Để xác định một số bước cụ thể trước khi hoạt ảnh đạt đến trạng thái kết thúc, bạn có thể sử dụng bước (). Các dấu ngoặc phải chứa một số nguyên và một số hạng nhảy. Hoạt ảnh sẽ không di chuyển dần dần qua chu kỳ hoạt ảnh – thay vào đó nó sẽ chuyển từ trạng thái này sang trạng thái khác ngay lập tức.

Xem Thêm  Chuỗi Python vào danh sách - python tạo danh sách từ chuỗi có dấu phân cách

Có bốn thuật ngữ nhảy có thể có:

  • Jump-start (hoặc start) : bước nhảy đầu tiên xảy ra khi hoạt ảnh bắt đầu
  • Nhảy cuối (hoặc kết thúc) : bước nhảy cuối cùng xảy ra khi hoạt ảnh kết thúc
  • Không nhảy : không có bước nhảy nào ở đầu hoặc cuối
  • Nhảy cả hai : có khoảng tạm dừng ở cả phần đầu và phần cuối

Giả sử n là 4 nên có 4 bước. Bắt đầu có nghĩa là hoạt ảnh tạm thời giữ ở mức 0%, 25%, 50% và 75%. Jump-end có nghĩa là hoạt ảnh giữ ở mức 25%, 50%, 75% và 100%. Jump-none nghĩa là hoạt ảnh tạo ra 4 điểm dừng từ 0% đến 100% dọc theo chu kỳ hoạt ảnh. Nhảy cả hai nghĩa là hoạt ảnh tạo ra 4 điểm dừng bao gồm các điểm 0% và 100% (cứ như vậy cho các điểm 0%, 33,333%, 66,6666% và 100%).

Trong ví dụ bên dưới, hoạt ảnh được đặt thành sáu bước từ 0% đến 100% dọc theo chu kỳ hoạt ảnh.

Xem chức năng định thời gian hoạt ảnh của Pen : step (n, jump-term) của Christina Perricone ( @hubspot ) trên CodePen < / span>.

Cubic-bezier (x1, y1, x2, y2)

Để kiểm soát nhiều hơn thời gian của hoạt ảnh, bạn có thể chỉ định chức năng làm dịu khối Bézier . Dấu ngoặc đơn nên chứa hai cặp, tổng cộng là bốn số. Chúng đại diện cho tọa độ x và y của hai điểm trên đường cong. Cả hai giá trị x phải nằm trong khoảng [0, 1].

Về mặt kỹ thuật, các giá trị của từ khóa không theo bước, mỗi giá trị đại diện cho một đường cong Bézier lập phương với bốn giá trị điểm cố định. Những điều này như sau:

  • Ease = square-bezier (0,25, 0,1, 0,25, 1,0)
  • Ease-in = khối-bezier (0,42, 0, 1,0, 1,0)
  • Ease-out = khối-bezier (0, 0, 0,58, 1,0)
  • Ease-in-out = khối-bezier (0,42, 0, 0,58, 1,0)
  • Tuyến tính = khối-bezier (0,0, 0,0, 1,0, 1,0)

Nếu bạn muốn tạo một đường cong tốc độ khác cho hoạt ảnh của mình, thì bạn có thể sử dụng hàm khối-bezier () và xác định nó bằng các giá trị không được xác định trước. Vì vậy, giả sử tôi muốn tạo ra một đường cong tốc độ ấn tượng hơn là dễ dàng. Vì vậy, tôi muốn hoạt ảnh di chuyển rất nhanh ở đầu chu kỳ hoạt ảnh của nó và sau đó chậm lại ở cuối. Trong trường hợp đó, tôi có thể sử dụng hàm khối-bezier () sau: khối-bezier (.05, .8, .1, .95).

Đây là sự khác biệt giữa đường cong của “easy-out” và đường cong của giá trị hàm bậc ba-bezier (), theo công cụ vẽ đồ thị này .

Và đây là cách hoạt ảnh trông như thế nào khi được đặt thành giá trị hàm khối-bezier () ở trên.

Xem chức năng định thời gian hoạt ảnh của Pen : khối-bezier (x1, y1, x2, y2) của Christina Perricone ( @hubspot ) trên < span> CodePen .

Biểu đồ thời gian hoạt ảnh

Biểu đồ bên dưới hiển thị một hoạt ảnh với thời gian của nó được đặt thành từng giá trị khác nhau: dễ dàng, dễ dàng, tuyến tính, dễ vào, dễ ra, dễ vào, bắt đầu, kết thúc bước, các bước ( ) và khối-bezier ().

Xem chức năng định thời gian hoạt ảnh của Pen CSS: tất cả các giá trị được so sánh bởi Christina Perricone ( @hubspot ) trên CodePen .

Tăng tốc hoạt ảnh CSS của bạn

Với CSS, bạn có toàn quyền kiểm soát các hoạt ảnh của mình. Bạn có thể kiểm soát thời lượng, hướng, thời gian bắt đầu và tốc độ của hoạt ảnh của mình cùng với các đặc điểm khác. Kiểm soát tốc độ hoạt ảnh của bạn dễ dàng như thêm một dòng CSS khác hoặc một giá trị khác khi sử dụng thuộc tính tốc ký hoạt ảnh.

Xem Thêm  SQL XÓA tất cả các hàng - xóa tất cả các hàng khỏi bảng sql

Gọi hành động mới


Xem thêm những thông tin liên quan đến chủ đề chức năng thời gian hoạt ảnh dễ dàng trong ra

RECOMENDACIÓN DE ORBES #38: REINA RAKKTI, LILY Y GUARDIÁN GALÁCTICO | Manuellewe MGG

alt

  • Tác giả: Manuellewe
  • Ngày đăng: 2022-06-22
  • Đánh giá: 4 ⭐ ( 4541 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ✅ Lista de Reproducción – RECOMENDACIÓN DE ORBES
    https://youtube.com/playlist?list=PLFZrwHfkgQ9jEsSteLDk0iTYIhQ_vV1ov

    ✅ Suscríbete y Sígueme en Instagram para participar en futuros sorteos, Atacando Suscriptores y Usando Tags de Subs en el PvP 🔥
    ☑️ Instagram: https://www.instagram.com/manuellewe/

    ✅ HAZTE MIEMBRO DEL CANAL POR ACÁ Y OBTEN TUS BENEFICIOS 🔥
    ➡️https://www.youtube.com/channel/UCA5rDlOs7PZWhXaqSon-Cpg/join

    ✅Únete a mI Servidor De Discord:
    ☑️https://discord.gg/puEGR4U

    ☑️Puedes Colaborar con El Canal y Ayudarme a Crecer ❤️
    ✅ https://www.paypal.me/manuellewe

    💨 No olvides dejar tu Like, Suscríbirte y activar la campanita 🔔

    💬 Comenta para ser saludado en el Próximo vídeo ❤️

    ✨ No Importa las Circunstancias, El Esfuerzo lo es Todo ✨

    MejoresOrbes Mutantes Manuellewe MutantsGeneticGladiators MggNoticias MggManuellewe Mgg Html5 Flash Recomendación Mejores Top EventoHibridacion NuevoMutante Bingos Mgg Manuellewe Mgg Eventos Jackpot Fichas Anti-sable Urgan MutoNoticias

10 đặc điểm và thiết lập của Galaxy Note10 mà người dùng nên biết

  • Tác giả: news.samsung.com
  • Đánh giá: 4 ⭐ ( 4089 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Galaxy Note10 và Galaxy Note10+ được tích hợp với những cải tiến mạnh mẽ được thiết kế để giúp người dùng

GDMN – Chia sẻ kinh nghiệm số 29 – Một số kinh nghiệm tổ chức hoạt động góc cho trẻ mẫu giáo trong trường mầm non

  • Tác giả: dienbien.edu.vn
  • Đánh giá: 5 ⭐ ( 2667 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: dienbien.edu.vn – Theo Skiner thì bản chất việc học của trẻ nhỏ là thông qua sự bắt chước và quan sát người khác, biến các hành vi quan sát được thành của mình…

Hướng dẫn 3 cách copy, lấy chữ từ trong hình ảnh ra thành văn bản cực dễ dàng

  • Tác giả: thuthuatplus.com
  • Đánh giá: 3 ⭐ ( 8632 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết giới thiệu 3 cách copy, lấy chữ từ trong hình ảnh ra thành văn bản. Thao tác này cực kỳ đơn giản, thực hiện nhanh chóng. Click để xem chi tiết!

Cách phân bổ thời gian cực kỳ dễ dàng mà bạn không thể bỏ qua

  • Tác giả: tranthinhlam.com
  • Đánh giá: 5 ⭐ ( 7855 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Quản lý thời gian là gì? Cách phân bổ thời gian như thế nào? Quản lý thời gian là lên kế hoạch và tổ chức thời gian cho từng hoạt động cụ thể.

Thiết lập thời gian bắt đầu và tốc độ cho hiệu ứng hoạt hình

  • Tác giả: support.microsoft.com
  • Đánh giá: 5 ⭐ ( 8500 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong PowerPoint, bạn có thể kiểm soát khi hoạt hình bắt đầu và tốc độ sẽ phát nhanh như thế nào.

[ĐÚNG NHẤT] Chức năng Animations

  • Tác giả: toploigiai.vn
  • Đánh giá: 3 ⭐ ( 8423 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chức năng Animations/Timing/Delay dùng để thiết lập thời gian chờ trước khi slide được trình chiếu, thiết lập thời gian chờ trước khi hiệu ứng bắt đầu và thiết lập thời gian hoạt động cho tất cả các hiệu ứng.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php