Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mercari/shimmerview
ShimmerView is a collection of APIs to construct Skelton View + Shimmering Effect type loading indicator on UIKit and SwiftUI.
https://github.com/mercari/shimmerview
animation ios shimmer swift swiftui
Last synced: 20 days ago
JSON representation
ShimmerView is a collection of APIs to construct Skelton View + Shimmering Effect type loading indicator on UIKit and SwiftUI.
- Host: GitHub
- URL: https://github.com/mercari/shimmerview
- Owner: mercari
- License: mit
- Created: 2020-06-15T11:22:47.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-11-16T08:34:02.000Z (almost 2 years ago)
- Last Synced: 2024-05-02T01:24:31.739Z (7 months ago)
- Topics: animation, ios, shimmer, swift, swiftui
- Language: Swift
- Homepage:
- Size: 569 KB
- Stars: 188
- Watchers: 11
- Forks: 11
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# ShimmerView  [](https://opensource.org/licenses/MIT)
ShimmerView is a collection of APIs to construct Skelton View + Shimmering Effect type loading indicator on UIKit and SwiftUI. This framework is inspired by Facebook's [Shimmer](https://github.com/facebook/Shimmer).
## Installation
### Carthage
```
github "mercari/ShimmerView"
```
### Cocoapods
```
pod 'ShimmerView'
```
### SwiftPM
In your `Package.swift`, add the following line to the `dependencies`:
```swift
.package(url: "https://github.com/mercari/ShimmerView.git", from: #version#)
```
## Feature
### Synchronized Effect
The shimmering effect would be effectively displayed when all the subviews’s effect in the screen is synced and animated together.
| Not Synced | Synced |
|---|---|
|||
ShimmerView calculates its relative coordinate against the sync target and synchronize the shimmering effect with other ShimmerViews.
### Customizable
You can customize the appearance of the shimmer effect by using `ShimmerViewStyle`.
```swift
let style = ShimmerViewStyle(
baseColor: UIColor(red: 239/255, green: 239/255, blue: 239/255, alpha: 1.0),
highlightColor: UIColor(red: 247/255, green: 247/255, blue: 247/255, alpha: 1.0),
duration: 1.2,
interval: 0.4,
effectSpan: .points(120),
effectAngle: 0 * CGFloat.pi)
```
## Usage on SwiftUI (iOS 14.0+)
`ShimmerView` has two related APIs on SwiftUI as below:
- `ShimmerScope`
- `ShimmerElement`
You can create a custome loading indicator by combining these APIs and other `SwiftUI` APIs.
```swift
struct Placeholder: View {
@State
private var isAnimating: Bool = true
var body: some View {
ShimmerScope(isAnimating: $isAnimating) {
HStack(alignment: .top) {
ShimmerElement(width: 100, height: 100)
.cornerRadius(4)
VStack(alignment: .leading, spacing: 8) {
ShimmerElement(height: 12)
.cornerRadius(4)
ShimmerElement(height: 12)
.cornerRadius(4)
ShimmerElement(width: 100, height: 12)
.cornerRadius(4)
}
}
.padding(.horizontal, 16)
}
}
}
```
### ShimmerScope
`ShimmerScope` is a container view to sync the animation timing and style of all the `ShimmerElement`s in its content.
Please note that `ShimmerScope` uses `GeometryReader` in its body function and it doesn't fit to the content but expands to the parent view bounds.
### ShimmerElement
`ShimmerElement` is a view to show the shimmering effect animation.
`ShimmerElement` looks for `EnvironmentObject` injected by `ShimmerScope` so please make sure to use it as a sub view of `ShimmerScope`'s `content` function.
## Usage on UIKit
`ShimmerView` has four related APIs on UIKit as blow:
- `ShimmerView`
- `ShimmerSyncTarget`
- `ShimmerReplicatorView`
- `ShimmerReplicatorViewCell`
### ShimmerView
`ShimmerView` is a subclass of `UIView` that has `CAGradientLayer` as a sublayer and encapsulates the logic for the shimmering effect animation.
```swift
let shimmerView = ShimmerView()
view.addSubview(shimmerView)
shimmerView.startAnimating()
```
The style of `ShimmerView` can be customized with `ShimmerViewStyle`.
```swift
let style = ShimmerViewStyle.default
shimmerView.apply(style: style)
```
### ShimmerSyncTarget
`ShimmerView` can be used as it is, but to make the best effect, create a view or view controller that contains multiple ShimmerViews and specify the container as `ShimmerSyncTarget`. ShimmerView will calculate its relative origin against the target and adjust the effect automatically.
### ShimmerReplicatorView & ShimmerReplicatorViewCell
`ShimmerReplicatorView` will let you create a list type loading screen with a few lines of code. It replicates the `ShimmerReplicatorViewCell` provided by the `cellProvider` closure to fill the bounds of the view.
```swift
let replicatorView = ShimmerReplicatorView(
itemSize: .fixedSize(CGSize(width: 80, height: 80)),
interitemSpacing: 16,
lineSpacing: 0,
horizontalEdgeMode: .within,
cellProvider: { () -> ShimmerReplicatorViewCell in
let cell = ShimmerView()
cell.layer.cornerRadius = 8.0
cell.layer.masksToBounds = true
return cell
})
replicatorView.startAnimating()
```
## Contribution
Please read the CLA carefully before submitting your contribution to Mercari.
Under any circumstances, by submitting your contribution, you are deemed to accept and agree to be bound by the terms and conditions of the CLA.
[https://www.mercari.com/cla/](https://www.mercari.com/cla/)
## License
Copyright 2020 Mercari, Inc.
Licensed under the MIT License.