アニメーションは、Web サイトでのユーザー エクスペリエンスを向上させる強力なツールです。正しく使用すると、Web サイトをより魅力的でインタラクティブで直感的なものにすることができます。この記事では、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 add 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)

ベストプラクティス

アニメーションは、Web インターフェイスでのユーザー エクスペリエンスを大幅に向上させることができます。ただし、エクスペリエンスに悪影響が及ばないように、いくつかのガイドラインに従うことが不可欠です。以下のルールを守ることで、ポジティブなスタートを切ることができます。

意味のあるアニメーションを使用する

アニメーションは単なる装飾ではなく、明確な意図を伝える必要があります。目立ちたがりのためだけに注目を集めるアニメーションを使用することは避けてください。代わりに、インターフェイスで何か特別なものを強調するために使用してください。入り口と出口のアニメーションを使用して、ユーザーをインターフェイスに誘導し、新しい状態への移行を知らせます。

遊び心は良いですが、注意してください

インターフェースに遊び心を追加することは有益ですが、アニメーションがユーザー エクスペリエンスを妨げたり、過度の使用によってページのパフォーマンスに影響を与えたりしないようにしてください。

大きな要素のアニメーション化を避ける

大きな要素をアニメーション化すると、ユーザー エクスペリエンスが低下し、混乱が生じたり、アニメーションがぎくしゃくしたりする可能性があります。したがって、ユーザーにとってほとんど価値がないため、大きな要素のアニメーション化は避けることをお勧めします。

無限のアニメーションを避ける

animate.css は、無限のものを含むアニメーションを繰り返すためのユーティリティ クラスを提供しますが、無限のアニメーションを避けることをお勧めします。これらのアニメーションは、ユーザーの気を散らしてイライラさせ、ネガティブな体験をもたらす可能性があります。したがって、それらを賢く使用してください！

落とし穴

インライン要素をアニメーション化することはできません

インライン要素のアニメーション化は、CSS アニメーション仕様に従って推奨されておらず、すべてのブラウザーで機能するとは限りません。代わりに、 gridおよびflexコンテナーとその子を含む、 blockまたはinline-blockレベルの要素をアニメーション化する必要があります。インライン レベルの要素をアニメーション化するには、その display プロパティを inline-block に設定します。

オーバーフロー

画面全体で要素をアニメーション化すると、一部の Animate.css アニメーションによって Web ページにスクロールバーが作成される場合があります。これを回避するには、アニメーション化された要素を含む親要素で、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) } }

それで全部です

ええ、そのライブラリはコンパクトですが強力です!

もっと学びたいですか？今後の記事をお楽しみに！