Ả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 animate.css nổi tiếng nhất. Hãy cài đặt nó và xem cách sử dụng nó!

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ở Package.swift và chỉnh sửa phần dependencies để trông giống như sau:

 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 executableTarget để nó trông như thế này:

 .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Animate", package: "animate") ]),

Sau đó mở App.swift add import Animate và định cấu hình nó theo phương thức didFinishLaunching như sau:

 Lifecycle.didFinishLaunching { Animate.configure() }

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 } }

Ngoài ra, bạn có thể đặt cài đặt duration , delay và 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ị Float hoặc Int nào như trong ví dụ trên.

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ị Int nào như trong các ví dụ trên.

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 độ block hoặc inline-block , bao gồm grid và hộp chứa flex 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.

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) } }

Đó 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!