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