Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ivanvorobei/SPPerspective

Widgets iOS 14 animation with 3D and dynamic shadow. Customisable transform and duration.
https://github.com/ivanvorobei/SPPerspective

animation ios14 perspective shadow swift ui uikit widget widgets xcode

Last synced: 6 days ago
JSON representation

Widgets iOS 14 animation with 3D and dynamic shadow. Customisable transform and duration.

Host: GitHub
URL: https://github.com/ivanvorobei/SPPerspective
Owner: ivanvorobei
License: mit
Created: 2020-10-02T14:37:05.000Z (about 4 years ago)
Default Branch: main
Last Pushed: 2022-03-27T17:39:25.000Z (over 2 years ago)
Last Synced: 2024-04-24T14:47:47.850Z (8 months ago)
Topics: animation, ios14, perspective, shadow, swift, ui, uikit, widget, widgets, xcode
Language: Swift
Homepage: https://opensource.ivanvorobei.io
Size: 5.09 MB
Stars: 321
Watchers: 9
Forks: 26
Open Issues: 2
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

awesome-ios - SPPerspective - Widgets iOS 14 animation with 3D and dynamic shadow. Customisable transform and duration. (UI / Animation)
awesome-ios-star - SPPerspective - Widgets iOS 14 animation with 3D and dynamic shadow. Customisable transform and duration. (UI / Animation)
awesome-ios - SPPerspective - Animatable widgets from iOS 14. Same animation for transform and shadow. Customisable duration, perspective and shadow also. [•](https://cdn.ivanvorobei.by/github/spperspective/preview.mov) (Content / Effects)

README

# SPPerspective

### About

Animatable widgets from iOS 14. Same animation for transform and shadow.

Customisable duration, perspective and shadow also. For visual edit use example app, check video preview:

[![https://opensource.ivanvorobei.by/spperspective/preview](https://github.com/ivanvorobei/Readme/blob/main/Buttons/video-preview.svg)](https://opensource.ivanvorobei.by/spperspective/preview)

If you like the project, don't forget to `put star ★`
Check out my other libraries:

## Navigate

- [Installation](#installation)
- [Swift Package Manager](#swift-package-manager)
- [CocoaPods](#cocoapods)
- [Manually](#manually)
- [Quick Start](#quick-start)
- [Customise](#customise)
- [Duration](#duration)
- [Perspective](#perspective)
- [Shadow](#shadow)
- [Сontribution](#сontribution)
- [Other Projects](#other-projects)
- [Russian Community](#russian-community)

## Installation

Ready for use on iOS 12+. Works with Swift 5+. Required Xcode 12.0 and higher.

### Swift Package Manager

The [Swift Package Manager](https://swift.org/package-manager/) is a tool for automating the distribution of Swift code and is integrated into the `swift` compiler. It’s integrated with the Swift build system to automate the process of downloading, compiling, and linking dependencies.

Once you have your Swift package set up, adding as a dependency is as easy as adding it to the `dependencies` value of your `Package.swift`.

```swift
dependencies: [
.package(url: "https://github.com/ivanvorobei/SPPerspective.git", .upToNextMajor(from: "1.4.1"))
]
```

### CocoaPods:

[CocoaPods](https://cocoapods.org) is a dependency manager for Cocoa projects. For usage and installation instructions, visit their website. To integrate using CocoaPods, specify it in your `Podfile`:

```ruby
pod 'SPPerspective'
```

### Manually

If you prefer not to use any of dependency managers, you can integrate manually. Put `Sources/SPPerspective` folder in your Xcode project. Make sure to enable `Copy items if needed` and `Create groups`.

## Quick Start

For apply animation for your view, use this code:

```swift
view.applyPerspective(.iOS14WidgetAnimatable)
````

Use this, if need apply non-animation transform:

```swift
view.applyPerspective(.iOS14WidgetStatic)
```

## Customise

### Summary

You can customise duration, angle, shadow properties and other. All this customising by configuration file. Configuration can be animatable or static. Above you see `.iOS14WidgetAnimatable` & `.iOS14WidgetStatic`, its also configurations wich already have good-usage values same as native widgets.

For get fine configuration, better use example app ([video preview](https://opensource.ivanvorobei.by/spperspective/preview)). You can in real time see changes in configuration.

[![https://opensource.ivanvorobei.by/spperspective/preview](https://github.com/ivanvorobei/Readme/blob/main/Buttons/video-preview.svg)](https://opensource.ivanvorobei.by/spperspective/preview)

Next more details about customise.

### Duration

When you init new animation configuration, you can set duration:

```swift
let animationConfig = SPPerspectiveAnimationConfig(duration: 16, distortion: 600, angle: 10, vectorStep: 3.14, shadow: nil)
view.applyPerspective(animationConfig)
```

If need change duration for default config, using this:

```swift
let animationConfig = SPPerspectiveConfig.iOS14WidgetAnimatable
animationConfig.animationDuration = 8
view.applyPerspective(animationConfig)
```

### Perspective

Angle is how much the view will rotate. For change it call `angle` in config:

```swift
animationConfig.angle = 10
```

Also you can customise distortion of perspective. Using this:

```swift
animationConfig.distortionPerspective = 600
```

Both properties allow you configure transform for your view. If you don't know which values shoud using, check use example app ([video preview](https://opensource.ivanvorobei.by/spperspective/preview)). With sliders you can customize it in detail.

### Shadow

Shadow also using configuration. Static and animation configs contains shadow property.

#### Blur, Opacity & Color

It simple. For change blur, opacity and color call this in configuration.

```swift
animationConfig.shadowConfig?.blurRadius = 5
animationConfig.shadowConfig?.opacity = 0.3
animationConfig.shadowConfig?.color = .black
```

#### Translations

Translation help customise position of shadow for any state of transform. For example you can want do more vertical translation for show deep transform.

Transform adaptive for each higlight corner. For example `startVerticalOffset` using when highlight top-center side. For bottom corners available `cornerVerticalOffset`. For bottom-center side shoud change `maximumVerticalOffset` . Horizontal trnalation customising by `maximumHorizontalOffset`.

```swift
animationConfig.shadowConfig?.startVerticalOffset = 8
animationConfig.shadowConfig?.cornerVerticalOffset = 18
animationConfig.shadowConfig?.maximumVerticalOffset = 21
animationConfig.shadowConfig?.maximumHorizontalOffset = 12
```

For get fine result, you shoud use this rule: `startVerticalOffset` < `cornerVerticalOffset` < `maximumVerticalOffset`. Visual transform available in example app ([video preview](https://opensource.ivanvorobei.by/spperspective/preview)), with it you get fine values.

## Сontribution

My English is very bad. You can see this once you read the documentation. I would really like to have clean and nice documentation. If you see gramatical errors and can help fix the Readme, please contact me [email protected] or make a Pull Request. Thank you in advance!

## Other Projects

I love being helpful. Here I have provided a list of libraries that I keep up to date. For see `video previews` of libraries without install open [opensource.ivanvorobei.by](https://opensource.ivanvorobei.by) website.

I have libraries with native interface and managing permissions. Also available pack of useful extensions for boost your development process.

## Russian Community

Подписывайся в телеграмм-канал, если хочешь получать уведомления о новых туториалах.

Со сложными и непонятными задачами помогут в чате.

Видео-туториалы выклыдываю на [YouTube](https://tutorials.ivanvorobei.by/youtube):

[![Tutorials on YouTube](https://cdn.ivanvorobei.by/github/readme/youtube-preview.jpg)](https://tutorials.ivanvorobei.by/youtube)