SkeletonView - GitLite

KO | EN

gitlite — search

#javascript #typescript #llm #machine-learning #rust #deep-learning #macos #java #windows #kubernetes #awesome-list #vue #pytorch #ios

SkeletonView

(★ 12,895)

☠️ 사용자가 어떤 일이 일어나고 있음을 보여주고, 앞으로 어떤 콘텐츠를 기대할 수 있는지 미리 준비시키는 우아한 방법

파일 탐색기

최종 버전 다운로드 (.zip)

- - bug_report.md
  - feedback.md
  - submit-a-request.md
- - CD.yml
  - main.yml
  - needs-attention.yml
  - pod_lib_lint.yml
  - pod_trunk.yml
  - release.yml
  - release_notes.yml
  - stale.yml
  - validations.yml
- FUNDING.yml
- pull_request_template.md
- release-drafter.yml
- all_skeletonables.jpg
- all_skeletonables_result.png
- container_no_skeletonable.jpg
- container_skeletonable.jpg
- container_skeletonable_result.png
- debug_description.png
- debug_mode.png
- demoApp2.png
- flatcolors.png
- gradient.png
- gradient_animated.gif
- header.jpg
- header2.jpg
- hierarchy_output.png
- multiline_corner.png
- multiline_customize.png
- multiline_insets.png
- multiline_lastline.png
- multiline_lineHeight.png
- multiline_lineSpacing.png
- multilines2.png
- no_skeletonable.jpg
- no_skeletonables_result.png
- skeleton_transition_fade.gif
- skeleton_transition_nofade.gif
- sliding_bottom_to_top.gif
- sliding_bottomRight_to_topLeft.gif
- sliding_left_to_right.gif
- sliding_right_to_left.gif
- sliding_top_to_bottom.gif
- sliding_topLeft_to_bottomRight.gif
- solid.png
- solid_animated.gif
- solid_animated2.gif
- storyboard.png
- tableview_no_skeletonable.jpg
- tableview_no_skeletonable_result.png
- tableview_scheme.png
- tableview_skeletonable.jpg
- tableview_skeletonable_result.png
- thumb_getting_started.png
- - AppDelegate.swift
  - CollectionViewCell.swift
  - Main.storyboard
  - SkeletonViewExampleCollectionview-Info.plist
  - ViewController.swift
- Fastfile
- README.md
- - contents.xcworkspacedata
- - IDETemplateMacros.plist
- project.pbxproj
- - IDEWorkspaceChecks.plist
- contents.xcworkspacedata
- README_de.md
- README_es.md
- README_fr.md
- README_ko.md
- README_pt-br.md
- README_zh.md
.codebeatsettings
.gitattributes
.gitignore
.swift-version
.swiftlint.yml
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
Dangerfile.swift
Gemfile
Gemfile.lock
LICENSE
Package.swift
README.md
SkeletonView.podspec

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![](https://raw.githubusercontent.com/Juanpe/SkeletonView/main/Assets/header2.jpg)

[![](https://github.com/Juanpe/SkeletonView/workflows/CI/badge.svg)](https://github.com/Juanpe/SkeletonView/actions?query=workflow%3ACI)
[![codebeat badge](https://codebeat.co/badges/1f37bbab-a1c8-4a4a-94d7-f21740d461e9)](https://codebeat.co/projects/github-com-juanpe-skeletonview-main)
[![](https://img.shields.io/cocoapods/v/SkeletonView.svg?style=flat)](https://cocoapods.org/pods/SkeletonView)
[![](https://img.shields.io/badge/Carthage-compatible-4BC51D.svg?style=flat)](https://github.com/Carthage/Carthage/)
[![](https://img.shields.io/badge/SPM-supported-Green.svg?style=flat)](https://swift.org/package-manager/)
![](https://img.shields.io/endpoint?url=https%3A%2F%2Fswiftpackageindex.com%2Fapi%2Fpackages%2FJuanpe%2FSkeletonView%2Fbadge%3Ftype%3Dplatforms)
[![SkeletonView Playground](https://raw.githubusercontent.com/bow-swift/bow-art/master/badges/nef-playgrounds-badge.svg)](https://badge.bow-swift.io/recipe?name=SkeletonView&description=An%20elegant%20way%20to%20show%20users%20that%20something%20is%20happening%20and%20also%20prepare%20them%20to%20which%20contents%20he%20is%20waiting&url=https://github.com/juanpe/skeletonview&owner=Juanpe&avatar=https://avatars0.githubusercontent.com/u/1409041?v=4&tag=1.20.0)

[기능](#-features)
• [가이드](#-guides)
• [설치](#-installation)
• [사용법](#-usage)
• [기타](#-miscellaneous)
• [기여하기](#️-contributing)

\*\*🌎 README는 다른 언어로도 제공됩니다: [🇪🇸](Translations/README\_es.md) . [🇨🇳](Translations/README\_zh.md) . [🇧🇷](Translations/README\_pt-br.md) . [🇰🇷](Translations/README\_ko.md) . [🇫🇷](Translations/README\_fr.md) . [🇩🇪](Translations/README\_de.md)\*\*

오늘날 거의 모든 앱은 API 요청, 장시간 실행되는 프로세스 등 비동기 프로세스를 가지고 있습니다. 이러한 프로세스가 작동하는 동안 개발자는 보통 사용자에게 무언가 진행되고 있음을 알리기 위해 로딩 뷰를 배치합니다.

\*\*SkeletonView\*\*는 이러한 요구사항을 해결하기 위해 고안되었습니다. 사용자에게 무언가 일어나고 있음을 우아하게 보여주고, 어떤 콘텐츠가 기다리고 있는지 미리 준비시키는 방법입니다.

재미있게 사용해 보세요! 🙂

##

- [🌟 Features](#-features)
- [🎬 Guides](#-guides)
- [📲 Installation](#-installation)
- [🐒 Usage](#-usage)
- [🌿 Collections](#-collections)
- [🔠 Texts](#-texts)
- [🦋 Appearance](#-appearance)
- [🎨 Custom colors](#-custom-colors)
- [🏃‍♀️ Animations](#️-animations)
- [🏄 Transitions](#-transitions)
- [✨ Miscellaneous](#-miscellaneous)
- [❤️ Contributing](#️-contributing)
- [📢 Mentions](#-mentions)
- [🏆 Sponsors](#-sponsors)
- [👨🏻‍💻 Author](#-author)
- [👮🏻 License](#-license)

## 🌟 Features

\* 사용하기 쉬움
\* 모든 UIView를 스켈레톤화(skeletonable) 가능
\* 완전한 커스터마이징 가능
\* 유니버설 (iPhone 및 iPad)
\* Interface Builder 친화적
\* 간단한 Swift 문법
\* 가볍고 읽기 쉬운 코드베이스

## 🎬 Guides

| [![](https://img.youtube.com/vi/75kgOhWsPNA/maxresdefault.jpg)](https://youtu.be/75kgOhWsPNA)|[![](https://img.youtube.com/vi/MVCiM\_VdxVA/maxresdefault.jpg)](https://youtu.be/MVCiM\_VdxVA)|[![](https://img.youtube.com/vi/Qq3Evspeea8/maxresdefault.jpg)](https://youtu.be/Qq3Evspeea8)|[![](https://img.youtube.com/vi/Zx1Pg1gPfxA/maxresdefault.jpg)](https://www.youtube.com/watch?v=Zx1Pg1gPfxA)
|:---: | :---: | :---: | :---:
|[\*\*SkeletonView Guides - Getting started\*\*](https://youtu.be/75kgOhWsPNA)|[\*\*How to Create Loading View with Skeleton View in Swift 5.2\*\*](https://youtu.be/MVCiM\_VdxVA) by iKh4ever Studio|[\*\*Create Skeleton Loading View in App (Swift 5) - Xcode 11, 2020\*\*](https://youtu.be/Qq3Evspeea8) by iOS Academy| [\*\*Cómo crear una ANIMACIÓN de CARGA de DATOS en iOS\*\*](https://www.youtube.com/watch?v=Zx1Pg1gPfxA) by MoureDev

## 📲 Installation

\* [CocoaPods](https://guides.cocoapods.org/using/using-cocoapods.html):
```ruby
pod 'SkeletonView'
```

\* [Carthage](https://github.com/Carthage/Carthage):
```ruby
github "Juanpe/SkeletonView"
```

\* [Swift Package Manager](https://swift.org/package-manager/):
```swift
dependencies: [
.package(url: "https://github.com/Juanpe/SkeletonView.git", from: "1.7.0")
]
```

> 📣 \*\*IMPORTANT!\*\*
>
> 버전 1.30.0부터 `SkeletonView`는 \*\*XCFrameworks\*\*를 지원하므로, \*\*XCFramework\*\*로 설치하려면 대신 [이 저장소](https://github.com/Juanpe/SkeletonView-XCFramework.git)를 사용해 주세요.

## 🐒 Usage

`SkeletonView`를 사용하는 데 필요한 단계는 단 \*\*3\*\*단계뿐입니다:

1️⃣ 적절한 곳에서 SkeletonView를 임포트(import)합니다.
```swift
import SkeletonView
```

2️⃣ 이제 스켈레톤화할 뷰를 설정합니다. 다음 두 가지 방법으로 설정할 수 있습니다:

\*\*코드를 사용하는 경우:\*\*
```swift
avatarImageView.isSkeletonable = true
```

\*\*IB/스토리보드를 사용하는 경우:\*\*
![](https://raw.githubusercontent.com/Juanpe/SkeletonView/main/Assets/storyboard.png)

3️⃣ 뷰를 설정했으면 \*\*스켈레톤(skeleton)\*\*을 표시할 수 있습니다. 이를 위해 \*\*4가지\*\* 선택지가 있습니다:
```swift
(1) view.showSkeleton() // 단색
(2) view.showGradientSkeleton() // 그라데이션
(3) view.showAnimatedSkeleton() // 단색 애니메이션
(4) view.showAnimatedGradientSkeleton() // 그라데이션 애니메이션
```

\*\*미리보기\*\*

|  |  |  |  |
| --- | --- | --- | --- |
| 단색 | 그라데이션 | 단색 애니메이션 | 그라데이션 애니메이션 |
|  |  |  |  |

> 📣 \*\*중요!\*\*
>
> `SkeletonView`는 재귀적이므로, 스켈레톤 가능한 모든 뷰에 스켈레톤을 표시하려면 메인 컨테이너 뷰에서 show 메서드만 호출하면 됩니다. 예를 들어 `UIViewControllers`를 사용할 때처럼 말입니다.
### 🌿 컬렉션
```SkeletonView```는 ```UITableView``` 및 ```UICollectionView```와 호환됩니다.
\*\*UITableView\*\*
```UITableView```에 스켈레톤을 표시하려면 ```SkeletonTableViewDataSource``` 프로토콜을 채택해야 합니다.
``` swift
public protocol SkeletonTableViewDataSource: UITableViewDataSource {
func numSections(in collectionSkeletonView: UITableView) -> Int // Default: 1
func collectionSkeletonView(\_ skeletonView: UITableView, numberOfRowsInSection section: Int) -> Int
func collectionSkeletonView(\_ skeletonView: UITableView, cellIdentifierForRowAt indexPath: IndexPath) -> ReusableCellIdentifier
func collectionSkeletonView(\_ skeletonView: UITableView, skeletonCellForRowAt indexPath: IndexPath) -> UITableViewCell? // Default: nil
func collectionSkeletonView(\_ skeletonView: UITableView, prepareCellForSkeleton cell: UITableViewCell, at indexPath: IndexPath)
}
```
보시다시피 이 프로토콜은 ```UITableViewDataSource```를 상속하므로, 기존 프로토콜을 스켈레톤 프로토콜로 대체할 수 있습니다.
이 프로토콜은 일부 메서드에 대해 기본 구현을 제공합니다. 예를 들어, 각 섹션의 행 수는 런타임에 계산됩니다.
``` swift
func collectionSkeletonView(\_ skeletonView: UITableView, numberOfRowsInSection section: Int) -> Int
// Default:
// It calculates how many cells need to populate whole tableview
```
> 📣 \*\*중요!\*\*
>
> 위 메서드에서 `UITableView.automaticNumberOfSkeletonRows`를 반환하면 기본 동작처럼 작동합니다(즉, 테이블뷰 전체를 채우는 데 필요한 셀 개수를 계산합니다).
Skeleton에 셀 식별자를 알려주기 위해 구현해야 하는 메서드는 단 하나뿐입니다. 이 메서드는 기본 구현이 없습니다.
``` swift
func collectionSkeletonView(\_ skeletonView: UITableView, cellIdentifierForRowAt indexPath: IndexPath) -> ReusableCellIdentifier {
return "CellIdentifier"
}
```
기본적으로 라이브러리는 각 indexPath에서 셀을 디큐(dequeue)하지만, 스켈레톤이 나타나기 전에 일부 변경을 가하고 싶다면 다음과 같이 할 수도 있습니다.
``` swift
func collectionSkeletonView(\_ skeletonView: UITableView, skeletonCellForRowAt indexPath: IndexPath) -> UITableViewCell? {
let cell = skeletonView.dequeueReusableCell(withIdentifier: "CellIdentifier", for: indexPath) as? Cell
cell?.textField.isHidden = indexPath.row == 0
return cell
}
```
디큐 과정을 라이브러리에 맡기고 싶다면 다음 메서드를 사용하여 셀을 설정할 수 있습니다.
``` swift
func collectionSkeletonView(\_ skeletonView: UITableView, prepareCellForSkeleton cell: UITableViewCell, at indexPath: IndexPath) {
let cell = cell as? Cell
cell?.textField.isHidden = indexPath.row == 0
}
```
또한, 헤더와 푸터 모두에 스켈레톤을 적용할 수 있습니다. 이를 위해 `SkeletonTableViewDelegate` 프로토콜을 채택해야 합니다.
```swift
public protocol SkeletonTableViewDelegate: UITableViewDelegate {
func collectionSkeletonView(\_ skeletonView: UITableView, identifierForHeaderInSection section: Int) -> ReusableHeaderFooterIdentifier? // default: nil
func collectionSkeletonView(\_ skeletonView: UITableView, identifierForFooterInSection section: Int) -> ReusableHeaderFooterIdentifier? // default: nil
}
```
> 📣 \*\*중요!\*\*
>
> 1️⃣ 크기가 조절되는 셀(\*\*`tableView.rowHeight = UITableViewAutomaticDimension`\**)을 사용하는 경우, 반드시 \*\*`estimatedRowHeight`\*\*를 정의해야 합니다.
>
> 2️⃣ \*\*`UITableViewCell`\*\*에 요소를 추가할 때는 셀에 직접 추가하지 말고 \*\*`contentView`\*\*에 추가해야 합니다.
> ```swift
> self.contentView.addSubview(titleLabel) ✅
> self.addSubview(titleLabel) ❌
> ```
\*\*UICollectionView\*\*
`UICollectionView`의 경우, `SkeletonCollectionViewDataSource` 프로토콜을 채택해야 합니다.
``` swift
public protocol SkeletonCollectionViewDataSource: UICollectionViewDataSource

```swift
func numSections(in collectionSkeletonView: UICollectionView) -> Int // 기본값: 1
func collectionSkeletonView(\_ skeletonView: UICollectionView, numberOfItemsInSection section: Int) -> Int
func collectionSkeletonView(\_ skeletonView: UICollectionView, cellIdentifierForItemAt indexPath: IndexPath) -> ReusableCellIdentifier
func collectionSkeletonView(\_ skeletonView: UICollectionView, supplementaryViewIdentifierOfKind: String, at indexPath: IndexPath) -> ReusableCellIdentifier? // 기본값: nil
func collectionSkeletonView(\_ skeletonView: UICollectionView, skeletonCellForItemAt indexPath: IndexPath) -> UICollectionViewCell? // 기본값: nil
func collectionSkeletonView(\_ skeletonView: UICollectionView, prepareCellForSkeleton cell: UICollectionViewCell, at indexPath: IndexPath)
func collectionSkeletonView(\_ skeletonView: UICollectionView, prepareViewForSkeleton view: UICollectionReusableView, at indexPath: IndexPath)
}
```
나머지 과정은 ```UITableView```와 동일합니다.
### 🔠 텍스트 (Texts)
![](https://raw.githubusercontent.com/Juanpe/Skeleton`View/main/Assets/multilines2.png)
텍스트가 포함된 요소를 사용할 때, ```SkeletonView```는 텍스트를 시뮬레이션하기 위해 선을 그립니다.
여러 줄(multiline) 요소에 대해 몇 가지 속성을 설정할 수 있습니다.
| 속성 | 타입 | 기본값 | 미리보기
| ------- | ------- |------- | -------
| \*\*lastLineFillPercent\*\* | `CGFloat` | `70`| ![](https://raw.githubusercontent.com/Juanpe/SkeletonView/main/Assets/multiline\_lastline.png)
| \*\*linesCornerRadius\*\* | `Int` | `0` | ![](https://raw.githubusercontent.com/Juanpe/SkeletonView/main/Assets/multiline\_corner.png)
| \*\*skeletonLineSpacing\*\* | `CGFloat` | `10` | ![](https://raw.githubusercontent.com/Juanpe/SkeletonView/main/Assets/multiline\_lineSpacing.png)
| \*\*skeletonPaddingInsets\*\* | `UIEdgeInsets` | `.zero` | ![](https://raw.githubusercontent.com/Juanpe/SkeletonView/main/Assets/multiline\_insets.png)
| \*\*skeletonTextLineHeight\*\* | `SkeletonTextLineHeight` | `.fixed(15)` | ![](https://raw.githubusercontent.com/Juanpe/SkeletonView/main/Assets/multiline\_lineHeight.png)
| \*\*skeletonTextNumberOfLines\*\* | `SkeletonTextNumberOfLines` | `.inherited` | ![](https://raw.githubusercontent.com/Juanpe/SkeletonView/main/Assets/multiline\_corner.png)
  
\*\*코드를 사용하여\*\* 퍼센트나 반경을 수정하려면 다음과 같이 속성을 설정하세요:
```swift
descriptionTextView.lastLineFillPercent = 50
descriptionTextView.linesCornerRadius = 5
```
또는 \*\*IB/스토리보드(Storyboard)\*\*\*를 사용하고 싶다면:
![](https://raw.githubusercontent.com/Juanpe/SkeletonView/main/Assets/multiline\_customize.png)
  
\*\*줄 수는 어떻게 정의하나요?\*\*
기본적으로 줄 수는 `numberOfLines` 속성의 값과 동일합니다. 그리고 이 값이 \*\*0\*\*으로 설정된 경우, 전체 스켈레톤을 채우는 데 필요한 줄 수를 계산하여 그려줍니다.
하지만 특정 개수의 스켈레톤 라인을 설정하고 싶다면 `skeletonTextNumberOfLines` 속성을 설정하여 지정할 수 있습니다. 이 속성은 두 가지 가능한 값을 가집니다. `numberOfLines` 값을 반환하는 `inherited`와 연관 값으로 지정된 특정 줄 수를 반환하는 `custom(Int)`이 있습니다.
예를 들면 다음과 같습니다:
```swift
label.skeletonTextNumberOfLines = 3 // .custom(3)
```
  
> \*\*⚠️ 지원 중단됨 (DEPRECATED)!\*\*
>
> \*\*useFontLineHeight\*\*는 지원이 중단되었습니다. 대신 \*\*skeletonTextLineHeight\*\*를 사용할 수 있습니다:
> ```swift
> descriptionTextView.skeletonTextLineHeight = .relativeToFont
> ```
> \*\*📣 중요 (IMPORTANT)!\*\*
>
> 여러 줄이 없는 뷰의 경우, 단일 라인이 마지막 라인으로 간주된다는 점에 유의하세요.
### 🦋 외형 (Appearance)
스켈레톤은 기본 외형을 가지고 있습니다. 따라서 색상, 그라데이션 또는 여러 줄 속성을 지정하지 않으면 `SkeletonView`가 기본값을 사용합니다.
기본값:
- \*\*tintColor\*\*: `UIColor`
- \*기본값: `.skeletonDefault` (`.clouds`와 같지만 다크 모드에 적응함)\*
- \*\*gradient\*\*: SkeletonGradient
- \*기본값: `SkeletonGradient(baseColor: .skeletonDefault)`\*
- \*\*multilineHeight\*\*: `CGFloat`
- \*기본값: 15\*

\*\*multilineSpacing\*\*: `CGFloat`
- \*default: 10\*
- \*\*multilineLastLineFillPercent\*\*: `Int`
- \*default: 70\*
- \*\*multilineCornerRadius\*\*: `Int`
- \*default: 0\*
- \*\*skeletonCornerRadius\*\*: `CGFloat` (IBInspectable) (모서리가 둥근 skeleton view 만들기)
- \*default: 0\*
이러한 기본값을 얻으려면 `SkeletonAppearance.default`를 사용할 수 있습니다. 이 속성을 사용하여 값을 설정할 수도 있습니다:
```swift
SkeletonAppearance.default.multilineHeight = 20
SkeletonAppearance.default.tintColor = .green
```
> \*\*⚠️ DEPRECATED!\*\*
>
> \*\*useFontLineHeight\*\*는 더 이상 사용되지 않습니다. 대신 \*\*textLineHeight\*\*를 사용할 수 있습니다:
> ```swift
> SkeletonAppearance.default.textLineHeight = .relativeToFont
> ```
### 🎨 커스텀 색상
skeleton에 적용할 틴트 색상을 직접 지정할 수 있습니다. 원하는 색상이나 그라데이션을 매개변수로 전달하기만 하면 됩니다.
\*\*단색 사용하기\*\*
```swift
view.showSkeleton(usingColor: UIColor.gray) // 단색
// 또는
view.showSkeleton(usingColor: UIColor(red: 25.0, green: 30.0, blue: 255.0, alpha: 1.0))
```
\*\*그라데이션 사용하기\*\*
``` swift
let gradient = SkeletonGradient(baseColor: UIColor.midnightBlue)
view.showGradientSkeleton(usingGradient: gradient) // 그라데이션
```
게다가 \*\*SkeletonView\*\*는 20가지 플랫 컬러를 지원합니다 🤙🏼
```UIColor.turquoise, UIColor.greenSea, UIColor.sunFlower, UIColor.flatOrange ...```
![](https://raw.githubusercontent.com/Juanpe/SkeletonView/main/Assets/flatcolors.png)
###### 웹사이트 [https://flatuicolors.com](https://flatuicolors.com)에서 캡처한 이미지
### 🏃‍♀️ 애니메이션
\*\*SkeletonView\*\*에는 단색 skeleton용 \*pulse\*와 그라데이션용 \*sliding\*이라는 두 가지 내장 애니메이션이 있습니다.
또한 자신만의 skeleton 애니메이션을 직접 만드는 것도 매우 쉽습니다.
Skeleton은 커스텀 애니메이션을 정의할 수 있는 ```SkeletonLayerAnimation``` 클로저를 받는 `showAnimatedSkeleton` 함수를 제공합니다.
```swift
public typealias SkeletonLayerAnimation = (CALayer) -> CAAnimation
```
다음과 같이 함수를 호출할 수 있습니다:
```swift
view.showAnimatedSkeleton { (layer) -> CAAnimation in
let animation = CAAnimation()
// 여기에 애니메이션 커스터마이징 코드 작성
return animation
}
```
```SkeletonAnimationBuilder```를 사용할 수 있습니다. 이는 ```SkeletonLayerAnimation```을 만들기 위한 빌더입니다.
현재 그라데이션을 위한 \*\*슬라이딩 애니메이션\*\*을 생성할 수 있으며, 애니메이션의 \*\*방향(direction)\*\*과 \*\*지속 시간(duration)\*\*을 설정할 수 있습니다(기본값 = 1.5초).
```swift
// func makeSlidingAnimation(withDirection direction: GradientDirection, duration: CFTimeInterval = 1.5) -> SkeletonLayerAnimation
let animation = SkeletonAnimationBuilder().makeSlidingAnimation(withDirection: .leftToRight)
view.showAnimatedGradientSkeleton(usingGradient: gradient, animation: animation)
```
```GradientDirection```은 다음과 같은 케이스를 가진 열거형(enum)입니다:
| 방향 | 미리보기
|------- | -------
| .leftRight | ![](https://raw.githubusercontent.com/Juanpe/SkeletonView/main/Assets/sliding\_left\_to\_right.gif)
| .rightLeft | ![](https://raw.githubusercontent.com/Juanpe/SkeletonView/main/Assets/sliding\_right\_to\_left.gif)
| .topBottom | ![](https://raw.githubusercontent.com/Juanpe/SkeletonView/main/Assets/sliding\_top\_to\_bottom.gif)
| .bottomTop | ![](https://raw.githubusercontent.com/Juanpe/SkeletonView/main/Assets/sliding\_bottom\_to\_top.gif)
| .topLeftBottomRight | ![](https://raw.githubusercontent.com/Juanpe/SkeletonView/main/Assets/sliding\_topLeft\_to\_bottomRight.gif)
| .bottomRightTopLeft | ![](https://raw.githubusercontent.com/Juanpe/SkeletonView/main/Assets/sliding\_bottomRight\_to\_topLeft.gif)
> \*\*😉 꿀팁!\*\*
>
> 다음 단축키를 사용하여 슬라이딩 애니메이션을 만드는 또 다른 방법도 존재합니다:
> ```swift
> let animation = GradientDirection.leftToRight.slidingAnimation()
> ```
### 🏄 전환 효과 (Transitions)
\*\*SkeletonView\*\*에는 skeleton을 더 \*부드러운\* 방식으로 \*\*표시(show)\*\*하거나 \*\*숨기는(hide)\*\* 내장 전환 효과가 있습니다 🤙
전환 효과를 사용하려면, ```showSkeleton()``` 또는 ```hideSkeleton()``` 함수에 ```transition``` 매개변수를 추가하고

전환 시간을 다음과 같이 지정할 수 있습니다:
```swift
view.showSkeleton(transition: .crossDissolve(0.25)) //Show skeleton cross dissolve transition with 0.25 seconds fade time
view.hideSkeleton(transition: .crossDissolve(0.25)) //Hide skeleton cross dissolve transition with 0.25 seconds fade time
```
기본값은 `crossDissolve(0.25)`입니다.
\*\*미리보기\*\*

|  |  |
| --- | --- |
| None | Cross dissolve |
|  |  |

## ✨ 기타 사항
\*\*계층 구조 (Hierarchy)\*\*
```SkeletonView```는 재귀적으로 동작하며, 스켈레톤(skeleton)이 매우 효율적으로 작동하기 위해서는 가능한 한 빨리 재귀를 멈추어야 합니다. 이러한 이유로 컨테이너 뷰를 `Skeletonable`로 설정해야 합니다. 스켈레톤은 `skeletonable`이 아닌 뷰를 만나는 즉시 하위 뷰 탐색을 중단하고 재귀를 종료하기 때문입니다.
백 마디 말보다 이미지가 낫습니다:
이 예제에서는 `ContainerView`와 `UITableView`가 있는 `UIViewController`를 사용합니다. 뷰가 준비되면 다음 메서드를 사용하여 스켈레톤을 표시합니다:
```
view.showSkeleton()
```
> ```isSkeletonable```= ☠️
| Configuration | Result|
|:-------:|:-------:|
|![](Assets/no_skeletonable.jpg) | ![](Assets/no_skeletonables_result.png)|
|![](Assets/container_no_skeletonable.jpg) | ![](Assets/no_skeletonables_result.png)|