Hiệu ứng hoạt hình vòng tròn css

Sử dụng hoạt ảnh CSS và thuộc tính trì hoãn hoạt ảnh để tạo hiệu ứng vòng tròn xung thú vị và thanh lịch

Ngoài các hiệu ứng chuyển tiếp hoạt ảnh giữa các trạng thái, chúng tôi không thấy nhiều hoạt ảnh thực tế trong nhiều giao diện người dùng mà chúng tôi tương tác. Chúng tôi không có pixel ngẫu nhiên di chuyển quanh màn hình đơn giản vì làm như vậy thật tuyệt. Đây không phải là năm 2002. Có một số ngoại lệ tốt đẹp, mặc dù. Tôi đã gặp phải một trường hợp ngoại lệ như vậy khi thiết lập máy ảnh Nest tuyệt vời của mình (hình ảnh được chụp từ đây)

Trong quá trình thiết lập, bạn sẽ đến một màn hình nơi bạn thấy sản phẩm Nest của mình với một loạt các vòng tròn màu xanh lam được thu nhỏ lại và mờ dần trong tầm nhìn. Bạn có thể xem những gì tôi đang đề cập đến trong video mở hộp và cài đặt này (tại 5. 23 điểm). Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách tạo lại hoạt hình vòng tròn xung tuyệt vời này. Đồng thời, chúng ta cũng sẽ học cách sử dụng các thủ thuật khác nhau mà chúng ta có sẵn khi làm việc với Hoạt ảnh CSS sẽ phục vụ tốt cho chúng ta không chỉ hoạt ảnh này mà còn cho nhiều hoạt ảnh khác ngoài hoạt ảnh này.

trở đi

Chúa ơi. Một cuốn sách hoạt hình được viết bởi Kirupa?

Để nâng cao kỹ năng hoạt hình của bạn, mọi thứ bạn cần để trở thành một chuyên gia hoạt hình đều có sẵn ở cả phiên bản bìa mềm và kỹ thuật số

ví dụ

Trước khi chúng ta tiếp tục, hãy xem hoạt hình vòng tròn xung mà chúng ta sẽ tạo sẽ trông như thế nào

Chú ý cách các vòng tròn xuất hiện và biến mất. Hiểu các chi tiết tinh tế về cách hoạt động này hoạt động ở cấp độ cao là rất quan trọng trước khi chúng tôi thực sự tạo ra nó. Hãy cùng nhau tìm hiểu những chi tiết tinh tế

Hoạt hình đang làm gì

Khi bạn đang xem hoạt hình xoay tròn của vòng tròn, bạn sẽ nhận thấy rằng có một sự liên tục khi một vòng tròn biến mất một cách dễ dàng thì một vòng tròn khác sẽ xuất hiện một cách nổi bật để thế chỗ. Cách thức hoạt động của tính năng này không phải bằng cách tạo hiệu ứng cho một vòng kết nối. Nó được thực hiện bằng cách hoạt hình một số vòng tròn theo trình tự

Nếu chúng ta phải kiểm tra hành vi của chỉ một vòng kết nối, nó sẽ bắt đầu như sau

Ban đầu nó sẽ rất nhỏ và có thể nhìn thấy đầy đủ. Khi hoạt hình tiến triển, vòng tròn của chúng tôi sẽ lớn hơn và có một chút trong suốt

Càng về cuối, vòng tròn của chúng tôi càng lớn hơn và hầu như không nhìn thấy được

Khi kết thúc hoạt ảnh, vòng tròn đạt kích thước tối đa và biến mất hoàn toàn khỏi tầm nhìn. Khi đạt đến điểm này, quá trình bắt đầu lại từ đầu. Khi chúng ta chỉ có một vòng tròn, hoạt hình này trông hơi không tự nhiên. Nó không phải là một hiệu ứng rung động mà giống như một vòng tròn đơn độc loạn trí mờ dần vào và ra khỏi tầm nhìn

Để khắc phục điều này, chúng ta có thể thêm một vòng tròn khác vào hỗn hợp. Vòng tròn mới này sẽ hoạt động giống hệt như vòng tròn trước đó, nhưng nó sẽ có một chút chậm trễ trong thời gian bắt đầu để chuyển động của nó được bù lại. Điều này có nghĩa là cả hai vòng kết nối sẽ thực hiện cùng một hoạt ảnh, nhưng chúng sẽ không đồng bộ. Điều này có thể được hình dung như sau

Lưu ý rằng khi một vòng tròn sắp mờ dần, vòng tròn kia chỉ mới bắt đầu hành trình của nó. Bạn biết điều gì sẽ làm cho tất cả những điều này thậm chí còn tốt hơn không? . Đây là những gì có ba vòng tròn sẽ trông như thế nào

Khá gọn gàng, phải không? . Một cách tốt hơn để hình dung hiệu ứng này như sau khi chúng ta xem xét thời lượng hoạt ảnh và thời điểm bắt đầu mỗi hoạt ảnh

Mỗi vòng kết nối bắt đầu và kết thúc mỗi lần lặp với cùng thời lượng. Như bạn có thể thấy, biến thể duy nhất là khi mỗi lần lặp lại hoạt ảnh bắt đầu cho mỗi vòng tròn. Bằng cách bù điểm bắt đầu, chúng ta có được hoạt ảnh so le mà chúng ta thấy tạo nên hiệu ứng xung của chúng ta

Triển khai thực tế

Bây giờ bạn đã hiểu rõ về cách thức hoạt động của hoạt ảnh, phần dễ dàng thực sự là xây dựng hoạt ảnh. Chúng tôi sẽ xây dựng hoạt ảnh cuối cùng theo từng giai đoạn, nhưng điều đầu tiên chúng tôi cần là điểm bắt đầu. Tạo một tài liệu HTML mới và thêm nội dung sau vào đó

  
  Pulsing Circle
  




  

    

      

        

      

      
    

  

Nếu bạn lưu tài liệu này và xem trước những gì bạn thấy trong trình duyệt của mình, bạn sẽ thấy nội dung như sau

Trước khi chúng ta tiếp tục, hãy dành một chút thời gian để xem mã chúng ta vừa thêm. Không nên có bất kỳ sự ngạc nhiên nào, vì chỉ có một số HTML và CSS nhàm chán. HTML và CSS thú vị sẽ xuất hiện tiếp theo khi chúng ta bắt tay vào tạo hoạt ảnh của mình

Tạo hiệu ứng vòng kết nối (cô đơn) của chúng tôi

Ngay bây giờ, chúng tôi có một phần tử vòng tròn duy nhất được xác định trong HTML của chúng tôi và CSS tương ứng với phần tử đó trông như sau

.circle {
  border-radius: 50%;
  background-color: deepskyblue;
  width: 150px;
  height: 150px;
  position: absolute;
  opacity: 0;
}

Hãy xác định hoạt ảnh để chia tỷ lệ và làm mờ vòng tròn này. bên trong này. quy tắc kiểu vòng tròn, thêm dòng được đánh dấu sau

.circle {
  border-radius: 50%;
  background-color: deepskyblue;
  width: 150px;
  height: 150px;
  position: absolute;
  opacity: 0;
  animation: scaleIn 4s infinite cubic-bezier(.36, .11, .89, .32);
}

Chúng tôi đang xác định thuộc tính hoạt hình của chúng tôi ở đây. Hoạt hình của chúng tôi được thiết lập để chạy trong 4 giây, lặp lại mãi mãi và dựa vào việc nới lỏng tùy chỉnh được chỉ định bởi hàm cube-bezier. Các khung hình chính hoạt hình thực tế được chỉ định bởi scaleIn, mà chúng tôi sẽ thêm vào tiếp theo

Bên dưới các quy tắc kiểu hiện có được xác định bên trong thành phần kiểu của chúng tôi, hãy thêm phần sau

@keyframes scaleIn {
  from {
    transform: scale(.5, .5);
    opacity: .5;
  }
  to {
    transform: scale(2.5, 2.5);
    opacity: 0;
  }
}

Ở đây, chúng tôi xác định các khung hình chính scaleIn chỉ định chính xác hoạt ảnh của chúng tôi sẽ làm gì. Khi hoạt ảnh diễn ra, đây là một hoạt ảnh đơn giản. Hoạt ảnh của chúng tôi sẽ bắt đầu ở mức 50% (. 5) tỷ lệ với độ mờ của. 5. Nó sẽ kết thúc với tỷ lệ là 250% (2. 5) và độ trong suốt bằng 0. Nếu bạn lưu tất cả các thay đổi bạn đã thực hiện và xem trước tài liệu của chúng tôi trong trình duyệt của bạn ngay bây giờ, bạn sẽ thấy hoạt hình vòng tròn của chúng tôi trở nên sống động

Hoạt hình thêm vòng kết nối

Chỉ có một vòng tròn hoạt hình là một điểm khởi đầu tốt, nhưng nó không mang lại cho chúng tôi sự phong phú mà việc có nhiều vòng tròn hoạt hình mang lại cho bảng. Điều đầu tiên chúng ta sẽ làm là thêm nhiều vòng kết nối hơn. Trong HTML của chúng tôi, hãy thêm các dòng được đánh dấu sau

Những gì bạn có bây giờ là bốn vòng tròn, mỗi vòng bắt đầu cùng một lúc và chạy cùng một tỷ lệTrong ảnh động. Đó không phải là chính xác những gì chúng tôi muốn. Những gì chúng tôi muốn làm là loạng choạng khi hoạt ảnh của mỗi vòng tròn phát để chúng tôi tạo ra hiệu ứng xung liên tục và tự nhiên hơn. Cách dễ nhất để làm điều đó là tạo cho mỗi vòng kết nối của chúng ta một điểm xuất phát khác nhau. Điều đó có thể dễ dàng thực hiện bằng cách thiết lập thuộc tính animation-delay. Bởi vì mỗi vòng kết nối của chúng ta sẽ cần có giá trị độ trễ hoạt hình duy nhất của riêng mình, nên chúng ta hãy chỉ đặt giá trị này nội tuyến thay vì tạo quy tắc kiểu mới cho mỗi vòng kết nối. Hãy tiếp tục và thực hiện thay đổi sau

Chúng tôi đang đặt thuộc tính kiểu trên mỗi vòng tròn với thuộc tính độ trễ hoạt ảnh được đặt thành giá trị 0, 1, 2 hoặc 3. Điều này có nghĩa là hoạt ảnh vòng tròn đầu tiên sẽ bắt đầu ngay lập tức, hoạt ảnh vòng tròn thứ hai sẽ bắt đầu sau 1 giây, hoạt ảnh vòng tròn thứ ba sẽ bắt đầu sau 2 giây và. Bạn nhận được hình ảnh. Nếu bạn xem trước những gì chúng tôi đã làm trong trình duyệt của mình bây giờ, bạn sẽ thấy hiệu ứng xung của chúng tôi có hình dạng cuối cùng

Có vẻ như chúng ta đã hoàn thành, phải không?

Bắt đầu hoạt hình của chúng tôi ở giữa

Ngay bây giờ, khi chúng tôi tải trang của mình, hoạt ảnh của chúng tôi sẽ bắt đầu lại từ đầu. Điều này có nghĩa là có một vài giây không có gì hiển thị trước khi từng vòng tròn dần dần bắt đầu xuất hiện. Nếu bạn không thích hành vi này khi mọi thứ bắt đầu trống rỗng, chúng ta có thể dễ dàng thay đổi điều đó. Chúng tôi có thể có nó để hoạt ảnh của chúng tôi trông giống như nó đã chạy được một lúc khi trang tải để có giao diện bận rộn hơn

Sơ đồ sau đây làm nổi bật sự khác biệt mà bạn sẽ thấy trong quá trình tải trang giữa những gì chúng tôi thấy hiện tại và những gì chúng tôi sẽ thấy khi chúng tôi thêm vào sự bận rộn này

Cách chúng ta có thể đạt được hành vi mong muốn (như được đánh dấu bằng phiên bản bên phải trong sơ đồ trên) là đặt thuộc tính animation-delay của chúng ta một giá trị thời gian âm. Giá trị thời gian âm báo cho hoạt ảnh của chúng ta không bắt đầu từ đầu mà thay vào đó bắt đầu ở giữa. Độ lớn của giá trị âm chỉ định điểm chính xác ở giữa mà hoạt ảnh của chúng tôi sẽ bắt đầu. Điều này nghe có vẻ chính xác như những gì chúng ta muốn, vì vậy hãy tiếp tục và thay đổi các giá trị độ trễ hoạt hình trong các phần tử div vòng kết nối của chúng ta thành như sau

Khi bạn làm điều này, các vòng kết nối của chúng tôi sẽ bắt đầu hành trình hoạt ảnh của họ sau ba giây, hai giây sau, một giây sau và 0 giây sau (về cơ bản lúc đầu) khi trang tải. Điều này sẽ khiến hoạt hình của chúng ta trông giống như nó đã chạy được một lúc mặc dù nó được tải lần đầu tiên

Phần kết luận

Hiệu ứng vòng tròn xung là một trong những ví dụ yêu thích của tôi vì nó thực sự đơn giản như thế nào. Thoạt nhìn, việc tạo hiệu ứng này có vẻ như sẽ cần một số JavaScript hoặc hoạt ảnh được xác định hoàn toàn trên khung vẽ. Bằng cách tận dụng thuộc tính animation-delay và cách nó xử lý các giá trị âm, con đường của chúng ta đơn giản hơn nhiều. Tất cả những gì chúng ta cần làm là sao chép/dán thêm một vài vòng kết nối và thay đổi giá trị độ trễ hoạt hình mà mỗi vòng kết nối được thể hiện. Giản dị