Ảnh động là một công cụ mạnh mẽ có thể nâng cao trải nghiệm người dùng trên trang web. Khi được sử dụng đúng cách, chúng có thể làm cho trang web trở nên hấp dẫn, tương tác và trực quan hơn. Trong bài viết này, chúng ta sẽ khám phá thư viện hoạt hình cho SwifWeb. Tôi đang nói về thư viện nổi tiếng nhất. Hãy cài đặt nó và xem cách sử dụng nó! animate.css Cài đặt Nếu bạn chưa quen với SwifWeb, vui lòng xem cách tạo dự án mới . trong bài viết này Trong dự án, hãy mở và chỉnh sửa phần để trông giống như sau: Package.swift dependencies dependencies: [ // the rest of the other dependencies including swifweb/web .package( url: "https://github.com/swifweb/animate", from: "1.0.0" ), ] Tiếp theo chỉnh sửa để nó trông như thế này: executableTarget .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Animate", package: "animate") ]), Sau đó mở add và định cấu hình nó theo phương thức như sau: App.swift import Animate didFinishLaunching Lifecycle.didFinishLaunching { Animate.configure() } Nó sẽ không hoạt động nếu bạn quên cấu hình nó. Cách sử dụng Tất cả các lớp từ thư viện ban đầu đều ở bên dưới và đối với người dùng SwiftWeb, có sẵn một giao diện Swift rất tiện lợi và đẹp mắt. Lấy bất kỳ phần tử nào và thêm hoạt ảnh vào phần tử đó sẽ được khởi chạy sau khi phần tử đó được thêm vào DOM. @DOM override var body: DOM.Content { Img() .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg") .width(400.px) .animate(.jello) // <- here we added jello animation } Hoặc lấy bất kỳ yếu tố nào trên màn hình và thêm hoạt ảnh vào đó khi đang di chuyển: lazy var img = Img() @DOM override var body: DOM.Content { self.img .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg") .width(400.px) Button("Animate").onClick { self.img.animate(.jello) // <- here we animate } } Danh sách đầy đủ các hoạt ảnh có sẵn trên trang web của thư viện https://animate.style Ngoài ra, bạn có thể đặt cài đặt , và . duration delay repeat .animate(.jello, delay: 0, duration: 1, repeat: 0) Tất cả các thông số này là tùy chọn. Các giá trị sẽ tự động bị xóa khi hoạt ảnh kết thúc. Ngoài ra, các tùy chọn này có thể được đặt bằng các phương pháp riêng biệt: .animateDelay(0) .animateDuration(1) .animateRepeat(0) Và bạn cũng nên xóa các giá trị này theo cách thủ công: .removeAnimateDelay() .removeAnimateDuration() .removeAnimateRepeat() Hãy nói thêm về từng tùy chọn. Trì hoãn Các giá trị tiện lợi được xác định trước: .delay0s // animation starts immediately .delay1s // adds a 1-second delay .delay2s // adds a 2-second delay .delay3s // adds a 3-second delay .delay4s // adds a 4-second delay .delay5s // adds a 5-second delay Tạo giá trị tiện lợi của riêng bạn trong tiện ích mở rộng: extension DelayValue { static var delay10s: Self { 10 } // adds a 10-second delay } Hoặc bạn có thể sử dụng bất kỳ giá trị hoặc nào như trong ví dụ trên. Float Int Khoảng thời gian Các giá trị tiện lợi được xác định trước: .slow // executes animation for 2 seconds .slower // executes animation for 3 seconds .fast // executes animation for 0.8 seconds .faster // executes animation for 0.5 seconds Tạo giá trị tiện lợi của riêng bạn trong tiện ích mở rộng: extension DurationValue { static var verySlow: Self { 5 } // executes animation for 5s } Hoặc bạn có thể sử dụng bất kỳ giá trị Float hoặc Int nào như trong ví dụ trên. Lặp lại Các giá trị tiện lợi được xác định trước: .repeat1 // repeats animation once .repeat2 // repeats animation twice .repeat3 // repeats animation three times .infinite // repeats animation infinitely Tạo giá trị tiện lợi của riêng bạn trong tiện ích mở rộng: extension RepeatValue { static var repeat5: Self { 5 } // repeats animation five times } Hoặc bạn có thể sử dụng bất kỳ giá trị nào như trong các ví dụ trên. Int Ví dụ với các giá trị tiện lợi .animate(.jello, delay: .delay0s, duration: .slower, repeat: .repeat2) Và các phương pháp riêng biệt: .animateDelay(.delay0s) .animateDuration(.slower) .animateRepeat(.repeat2) Thực hành tốt nhất Ảnh động có thể nâng cao đáng kể trải nghiệm của người dùng với giao diện web. Tuy nhiên, điều cần thiết là phải tuân theo một số hướng dẫn để đảm bảo rằng trải nghiệm không bị ảnh hưởng tiêu cực. Bằng cách tuân thủ các quy tắc sau, bạn có thể tạo ra một khởi đầu tích cực. Sử dụng hình ảnh động có ý nghĩa Hoạt ảnh nên truyền đạt một ý định rõ ràng, thay vì chỉ mang tính chất trang trí. Tránh sử dụng hoạt ảnh tìm kiếm sự chú ý chỉ vì sự hào nhoáng của chúng; thay vào đó, hãy sử dụng chúng để làm nổi bật điều gì đó đặc biệt trong giao diện. Sử dụng hoạt ảnh vào và ra để hướng người dùng đến giao diện và báo hiệu sự chuyển đổi sang trạng thái mới. Tinh nghịch là tốt, nhưng hãy lưu tâm Việc thêm tính vui nhộn vào giao diện có thể có lợi nhưng hãy đảm bảo rằng hoạt ảnh không cản trở trải nghiệm của người dùng hoặc ảnh hưởng đến hiệu suất của trang do sử dụng quá mức. Tránh hoạt ảnh các yếu tố lớn Hoạt ảnh các yếu tố lớn có thể dẫn đến trải nghiệm người dùng kém, gây nhầm lẫn và làm cho hoạt ảnh có vẻ giật cục. Do đó, nên tránh tạo hoạt ảnh cho các phần tử lớn vì chúng mang lại ít giá trị cho người dùng. Tránh hình ảnh động vô hạn Mặc dù animate.css cung cấp các lớp tiện ích để lặp lại hoạt ảnh, bao gồm cả hoạt ảnh vô hạn, nhưng bạn nên tránh hoạt ảnh vô tận. Những hoạt ảnh này có thể khiến người dùng mất tập trung và khó chịu, dẫn đến trải nghiệm tiêu cực. Do đó, hãy sử dụng chúng một cách khôn ngoan! Gotchas Bạn không thể làm động các phần tử nội tuyến Hoạt ảnh các phần tử nội tuyến không được khuyến nghị theo thông số kỹ thuật hoạt ảnh CSS và có thể không hoạt động trên tất cả các trình duyệt. thay vào đó, các phần tử cấp độ hoặc , bao gồm và hộp chứa và phần tử con của chúng, nên được làm động. Để tạo hiệu ứng động cho phần tử cấp độ nội tuyến, bạn có thể đặt thuộc tính hiển thị của nó thành khối nội tuyến. block inline-block grid flex Tràn ra Khi tạo hoạt ảnh cho các phần tử trên màn hình, một số hoạt ảnh Animate.css có thể tạo thanh cuộn trên trang web của bạn. Để tránh điều này, bạn có thể sử dụng thuộc tính overflow: hidden trong phần tử cha chứa phần tử hoạt hình. Tuy nhiên, không có công thức dứt khoát về thời điểm hoặc cách sử dụng nó. Khoảng cách giữa các lần lặp lại Hiện không thể đặt khoảng thời gian giữa các lần lặp lại bằng CSS thuần túy. Nhưng có thể sử dụng trình nghe sự kiện `.animationEnd`: Img() .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg") .width(400.px) .animate(.jello, delay: 0, duration: 2) .addEventListener( .animationEnd, options: .init(once: true) ) { event, element in Dispatch.asyncAfter(0.5) { element.animate(.jello, delay: 0, duration: 2) } } Hoặc thậm chí thuận tiện hơn: Img() .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg") .width(400.px) .animate(.jello, delay: 0, duration: 2) { element in Dispatch.asyncAfter(0.5) { element.animate(.jello, delay: 0, duration: 2) } } Trong cả hai trường hợp, hoạt ảnh khởi động lại với khoảng thời gian . 500 mili giây Đó là tất cả Vâng, thư viện đó nhỏ gọn nhưng mạnh mẽ! Muốn tìm hiểu thêm? Hãy theo dõi các bài viết sắp tới! Đừng ngần ngại hỏi bất kỳ câu hỏi nào và cảm thấy tự do để đóng góp! trong sự bất hòa của chúng tôi
