[![MIT License](https://img.shields.io/github/license/ApolloZhu/swift_qrcodejs.svg)](./LICENSE) [![Swift 5.3](https://img.shields.io/badge/Swift-5.3-green.svg)](https://swift.org) [![iOS 14.0](https://img.shields.io/badge/iOS-14.0-green)](https://developer.apple.com)
# Description
This project is part of the article ["MatchedGeometryEffect - Part 2"](https://swiftui-lab.com/matchedGeometryEffect-part2), which describes the concepts needed to create a hero animation using **`matchedGeometryEffect()`**. Unlike part 1, it does so without using custom transitions.
# How to Use the Project
The project was tested on an iPad. Launching the project on an iPhone may requiring some tweaking. Especially, the modal size.
# Source Code
To better navigate the project, here is a list of all the source code files, together with a quick description.
## SwiftUI Views
### `ContentView.swift`
At the top of the hierarchy, the ContentView just creates the Wildlife view.
### `Wildlife.swift`
This is the main view of the project. It assembles everything together. It is a large `ZStack`, with the following three layers:
* **Layer 1**, `zIndex = 1`: Main view containing the header (title + favorites).
* **Layer 2**, `zIndex = 2`: In the middle layer, there is a backdrop that blurs the first layer when there is modal present.
* **Layer 3**, `zIndex = 3`: When there is a grid or a favorite item selected, this top layer displays the modal that presents the data.
### `AnimalImage.swift`
A small view for drawing the images of the grid cells.
### `BlurView.swift` and `VisualEffectView.swift`
A view used to blur the grid, using a `UIViewRepresentable` of UIKit's `UIVisualEffect`
### `FavoriteView.swift`
This view draws the favorite icon shown at the top. Since this icons should morph between the cell where they fly from, to their final look, it needs to be animatable. To achieve that, this view is really an `EmptyView()` with an animatable modifier which actually does all the work.
```swift
EmptyView().modifier(FavoriteMod(image: image, pct: pct))
```
The modifier uses an animatable `pct` value, which represent a percentage of how much along the flight we are. (0.0 when the view is at the grid cell size and position, and 1.0 when the view is already at its final size and position in the favorites area).
### `StarView.swift`
A small view with a star symbol to show in a grid cell, when the item is marked as favorite.
### `ModalView.swift`
This view represents the modal shown when either a grid cell or a favorite icon is tapped once. Since the modal should morph between the cell where it flies from, to its final look, size and position, it needs to be animatable. To achieve that, this view is really an `EmptyView()` with an animatable modifier which actually does all the work.
```swift
EmptyView().modifier(ModalModMod(image: image, pct: pct))
```
The modifier uses an animatable `pct` value, which represent a percentage of how much along the flight we are. (0.0 when the view is at the grid cell size and position, and 1.0 when the view is already at the modal final size and position).
### `RectangleToCircle.swift`
This view is used to morph between a rectangle and a circle and vice-versa. It is useful to gradually change the shape of images so it adjusts from one look to another. For example, if an image is a rounded circle in the grid, but a full circle in the favorite area, this view will gradually morph from one shape to the other.
### `TitleView.swift`
A small view that draws the title. The title can be tapped to enable animation debug (i.e., very slow animations).
<hr>
## Extensions
### `CGSize+Random.swift`
A useful extension to generate random sizes in a given range. Used by the favorite area to apply a random offset when a new icon is added. It creates a little shake illusion.
### `Animation.swift`
Provides a name for the animations used in the project so they are centralized and consistent in one place.
### `EnvironmentValues.swift`
Defines to environment keys:
|EnvironmentKey name|Description|
|-------------------|-----------|
|`\.gridRadiusPct`|Use this key to set the corner radius used by grid cells.|
|`\.gridShadow`|Use this key to set the shadow radius used by grid cells.|
|`\.favRadiusPct`|Use this key to set the corner radius used by favorite icons.|
|`\.favShadow`|Use this key to set the shadow radius used by favorite icons.|
There are also some helpful modifiers that can be used to set the environment for these keys. You may call it like this:
```swift
struct ContentView: View {
var body: some View {
Wildlife()
.gridLook(radiusPercent: 0.12, shadowRadius: 8.0)
.favoriteLook(radiusPercent: 1.0, shadowRadius: 3.0)
}
}
```
All parameters are optional, and if not specified, the default for each key is used.
<hr>
## Data Model
### `DataModel.swift`
Provides the text and image names.
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
内容概要: 本示例代码包括 SwiftUI 中详细的英雄动画(HeroAnimations)演示、各种附加动画效果。 所谓“英雄动画”是一种让不同 SwiftUI 视图平滑过渡转变的动画效果,就像英雄一样吸引用户的眼球! 其中还包括本人自己领悟而写出的附加测试代码。 让您更加直观和更感性的读懂示例核心逻辑。 您将学到以下内容: - SwiftUI 2.0 中惊艳的英雄动画(HeroAnimations)效果; - 英雄动画如何应用到同一和不同视图中的各个元素中去; - 英雄动画不同的附加特效介绍 - 本人写的更直观和简洁的测试代码; 其中包括文件: - 完整演示示例项目 - Readme文件 - 直观演示英雄动画效果的视频文件 - 本人写的测试(Test)代码
资源推荐
资源详情
资源评论
收起资源包目录
hero-animations.zip (68个子文件)
hero-animations
.DS_Store 6KB
LICENSE 1KB
HeroAnimationsNoTransitions.xcodeproj
project.pbxproj 20KB
xcuserdata
hopy.xcuserdatad
xcschemes
xcschememanagement.plist 362B
project.xcworkspace
xcshareddata
swiftpm
configuration
IDEWorkspaceChecks.plist 238B
contents.xcworkspacedata 135B
xcuserdata
hopy.xcuserdatad
UserInterfaceState.xcuserstate 69KB
wildlife-1.mp4 7.07MB
HeroAnimationsNoTransitions
HeroAnimationsNoTransitionsApp.swift 336B
Preview Content
Preview Assets.xcassets
Contents.json 63B
SwiftUI
Data Model
DataItems.swift 2KB
Views
VisualEffectView.swift 541B
FavoriteView.swift 2KB
TitleView.swift 1KB
Wildlife.swift 7KB
ModalView.swift 7KB
RectangleToCircle.swift 1KB
BlurView.swift 545B
StarView.swift 476B
ContentView.swift 253B
AnimalImage.swift 675B
test
test.swift 4KB
ExampleView.swift 1KB
Extensions
Animations.swift 930B
CGSize+Random.swift 559B
EnvironmentValues.swift 2KB
Info.plist 2KB
Assets.xcassets
Contents.json 63B
AppIcon.appiconset
Contents.json 2KB
AccentColor.colorset
Contents.json 123B
Images
polar-bear.imageset
Contents.json 160B
polar-bear.jpg 21KB
parrot-couple.imageset
Contents.json 161B
parrot-pair.jpg 60KB
tiger.imageset
tiger.jpg 32KB
Contents.json 155B
dolphin.imageset
Contents.json 157B
dolphin.jpg 49KB
Contents.json 63B
fox.imageset
fox.jpg 51KB
Contents.json 153B
peacock.imageset
Contents.json 157B
peacock.jpg 60KB
elephant.imageset
Contents.json 158B
elephant.jpg 27KB
cheetah.imageset
Contents.json 157B
cheetah.jpg 24KB
ape.imageset
Contents.json 153B
ape.jpg 26KB
raccoon.imageset
Contents.json 157B
raccoon.jpg 53KB
mandarin-fish.imageset
Contents.json 163B
mandarin-fish.jpg 54KB
giraffe.imageset
giraffe.jpg 22KB
Contents.json 157B
panda-bear.imageset
Contents.json 160B
panda-bear.jpg 56KB
lion.imageset
lion.jpg 70KB
Contents.json 154B
penguin.imageset
Contents.json 157B
penguin.jpg 75KB
zebra.imageset
Contents.json 155B
zebra.jpg 35KB
goldfish.imageset
Contents.json 158B
goldfish.jpg 23KB
parrot.imageset
parrot.jpg 54KB
Contents.json 156B
README.md 5KB
共 68 条
- 1
资源评论
大熊猫侯佩
- 粉丝: 1w+
- 资源: 13
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功