动画是一种强大的工具，可以增强网站上的用户体验。如果使用得当，它们可以使网站更具吸引力、互动性和直观性。在本文中，我们将探索 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 } }

此外，您还可以设置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 动画规范，不推荐对内联元素进行动画处理，并且可能不适用于所有浏览器。 block或inline-block级元素，包括grid和flex容器及其子元素，应该改为动画。要为行内级元素设置动画，您可以将其显示属性设置为 inline-block。

溢出

在屏幕上为元素设置动画时，某些 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) } }

就这样

是的，该库紧凑但功能强大！

想了解更多？请继续关注即将发布的文章！