动画是一种强大的工具，可以增强网站上的用户体验。如果使用得当，它们可以使网站更具吸引力、互动性和直观性。在本文中，我们将探索 SwifWeb 的动画库。 我说的是最著名的 库。让我们安装它，看看如何使用它！ animate.css 安装 如果您是 SwifWeb 的新手，请查看 如何创建新项目。 本文中的 在项目中打开 并编辑 部分，使其看起来像这样： Package.swift dependencies   dependencies: [ // the rest of the other dependencies including swifweb/web .package( url: "https://github.com/swifweb/animate", from: "1.0.0" ), ] 接下来编辑 使其看起来像这样： executableTarget   .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Animate", package: "animate") ]), 然后打开 添加 并在 方法中配置它，如下所示： App.swift import Animate didFinishLaunching   Lifecycle.didFinishLaunching { Animate.configure() } 如果您忘记配置它，它将无法工作。 用法 原始库中的所有类都在底层，对于 SwiftWeb 用户来说，可以使用非常方便和漂亮的 Swift 界面。  获取任何元素并向其添加动画，一旦将其添加到 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 } 或者在屏幕上获取任何元素并即时为其添加动画：   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 } } 完整的动画列表可在图书馆网站上找到 https://animate.style 此外，您还可以设置  、  和 设置。 duration delay repeat   .animate(.jello, delay: 0, duration: 1, repeat: 0) 所有这些参数都是可选的。动画结束时，值将自动删除。 或者，可以使用单独的方法设置这些选项：   .animateDelay(0) .animateDuration(1) .animateRepeat(0) 您还应该手动删除这些值：   .removeAnimateDelay() .removeAnimateDuration() .removeAnimateRepeat() 让我们更多地讨论每个选项。 延迟 预定义的便利值：   .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 在扩展中创建您自己的便利值：   extension DelayValue { static var delay10s: Self { 10 } // adds a 10-second delay } 或者您可以像上面的示例一样使用任何 或 值。 Float Int 期间 预定义的便利值：   .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 在扩展中创建您自己的便利值：   extension DurationValue { static var verySlow: Self { 5 } // executes animation for 5s } 或者您可以像上面的示例一样使用任何 Float 或 Int 值。 重复 预定义的便利值：   .repeat1 // repeats animation once .repeat2 // repeats animation twice .repeat3 // repeats animation three times .infinite // repeats animation infinitely 在扩展中创建您自己的便利值：   extension RepeatValue { static var repeat5: Self { 5 } // repeats animation five times } 或者您可以像上面的示例一样使用任何 值。 Int 具有便利值的示例 .animate(.jello, delay: .delay0s, duration: .slower, repeat: .repeat2) 和单独的方法：   .animateDelay(.delay0s) .animateDuration(.slower) .animateRepeat(.repeat2) 最佳实践 动画可以显着增强用户对网络界面的体验。但是，必须遵循一些准则以确保体验不会受到负面影响。通过遵守以下规则，您可以创造一个积极的开始。 使用有意义的动画 动画应该传达一个明确的意图，而不仅仅是装饰性的。避免仅仅因为它们的浮华而使用吸引注意力的动画；相反，使用它们来突出显示界面中的特殊内容。使用进入和退出动画将用户引导至界面并指示过渡到新状态。 嬉戏是好事，但要注意 为界面添加趣味性可能是有益的，但要确保动画不会妨碍用户体验或因过度使用而影响页面性能。 避免动画大元素 为大型元素设置动画可能会导致糟糕的用户体验，造成混乱并使动画显得不稳定。因此，建议避免对大型元素进行动画处理，因为它们对用户的价值不大。 避免无限动画 虽然 animate.css 提供了用于重复动画（包括无限动画）的实用程序类，但建议避免无限动画。这些动画会分散用户的注意力并惹恼他们，从而导致负面体验。因此，明智地使用它们！ 陷阱 你不能为内联元素设置动画 根据 CSS 动画规范，不推荐对内联元素进行动画处理，并且可能不适用于所有浏览器。  或 级元素，包括 和 容器及其子元素，应该改为动画。要为行内级元素设置动画，您可以将其显示属性设置为 inline-block。 block inline-block grid flex 溢出 在屏幕上为元素设置动画时，某些 Animate.css 动画可能会在您的网页上创建滚动条。为避免这种情况，您可以在包含动画元素的父元素中使用 overflow: hidden 属性。但是，没有关于何时或如何使用它的明确方法。 重复间隔 目前无法使用纯 CSS 设置重复之间的间隔。 但是可以使用 .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) } } 或者更方便：   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) } } 在这两种情况下，动画都会以 间隔重新开始。 500 毫秒的 就这样 是的，该库紧凑但功能强大！ 想了解更多？请继续关注即将发布的文章！ 不要犹豫，问任何问题 并随时贡献！ 在我们的 Discord 中

This story contains new, firsthand information uncovered by the writer.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

The writer is smart, but don't just like, take their word for it. #DoYourOwnResearch

Read My Stories

該音頻是用故事的原始語言製作的！

SwifWeb 库：Animate.css

About Author

註釋

標籤

这篇文章刊登在

Related Stories

Telegram：加密岛通往大陆的桥梁

加密货币增长：创建有效的用户角色

看不见的层面：为什么用户访谈是不可替代的资产

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Telegram：加密岛通往大陆的桥梁

加密货币增长：创建有效的用户角色

看不见的层面：为什么用户访谈是不可替代的资产

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps