애니메이션은 웹사이트에서 사용자 경험을 향상시킬 수 있는 강력한 도구입니다. 올바르게 사용하면 웹사이트를 더욱 매력적이고 대화형이며 직관적으로 만들 수 있습니다. 이 기사에서는 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)

모범 사례

애니메이션은 웹 인터페이스를 통해 사용자 경험을 크게 향상시킬 수 있습니다. 그러나 경험이 부정적인 영향을 받지 않도록 하려면 몇 가지 지침을 따르는 것이 중요합니다. 다음 규칙을 준수하면 긍정적인 시작을 만들 수 있습니다.

의미 있는 애니메이션을 사용하세요

애니메이션은 단순히 장식적인 것이 아니라 명확한 의도를 전달해야 합니다. 화려함만을 위해 관심을 끄는 애니메이션을 사용하지 마세요. 대신 인터페이스에서 특별한 것을 강조하는 데 사용하세요. 입구 및 출구 애니메이션을 사용하여 사용자에게 인터페이스 방향을 알려주고 새로운 상태로의 전환을 알립니다.

장난기는 좋은데 조심하세요

인터페이스에 재미를 더하는 것은 유익할 수 있지만, 애니메이션이 사용자 경험을 방해하거나 과도한 사용으로 인해 페이지 성능에 영향을 주지 않는지 확인하세요.

큰 요소에 애니메이션을 적용하지 마세요.

큰 요소에 애니메이션을 적용하면 사용자 경험이 저하되어 혼란을 야기하고 애니메이션이 불안해 보일 수 있습니다. 따라서 사용자에게 가치를 거의 추가하지 않는 큰 요소에 애니메이션을 적용하지 않는 것이 좋습니다.

무한한 애니메이션을 피하세요

animate.css는 무한 애니메이션을 포함하여 애니메이션 반복을 위한 유틸리티 클래스를 제공하지만 끝없는 애니메이션은 피하는 것이 좋습니다. 이러한 애니메이션은 사용자의 주의를 산만하게 하고 짜증나게 하여 부정적인 경험을 초래할 수 있습니다. 그러므로 현명하게 사용하십시오!

문제

인라인 요소에는 애니메이션을 적용할 수 없습니다.

인라인 요소 애니메이션은 CSS 애니메이션 사양에 따라 권장되지 않으며 모든 브라우저에서 작동하지 않을 수 있습니다. 대신 grid 및 flex 컨테이너와 그 하위 요소를 포함한 block 또는 inline-block 수준 요소에 애니메이션을 적용해야 합니다. 인라인 수준 요소에 애니메이션을 적용하려면 해당 표시 속성을 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) } }

그게 다야

네, 그 라이브러리는 작지만 강력합니다!

더 자세히 알아보고 싶으신가요? 앞으로 나올 기사를 계속 지켜봐주세요!