-
Notifications
You must be signed in to change notification settings - Fork 411
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
13 changed files
with
464 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
22 changes: 0 additions & 22 deletions
22
SwiftPamphletApp/Assets.xcassets/logo.imageset/Contents.json
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
83 changes: 83 additions & 0 deletions
83
SwiftPamphletApp/Resource/Guide/SwiftUI/视觉/Blend Modes(ap).md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
|
|
||
| Blend Modes | ||
|
|
||
| ### 介绍 | ||
|
|
||
| `blendMode(_:)` 是 SwiftUI 中的一个视图修饰符，用于混合视图。以下是两种使用 `blendMode(_:)` 的方式，以及相应的示例： | ||
|
|
||
| 1. 通过 `ZStack` 使用 `blendMode(_:)`： | ||
|
|
||
| ```swift | ||
| struct ContentView: View { | ||
| var body: some View { | ||
| ZStack { | ||
| Image("evermore") | ||
| Image("fearless") | ||
| .blendMode(.multiply) | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| 在这个例子中，我们创建了一个 `ZStack`，它包含两个图像。我们将 `blendMode(.multiply)` 应用于第二个图像，这样它就会与第一个图像混合。 | ||
|
|
||
| 2. 通过 `.overlay` 使用 `blendMode(_:)`： | ||
|
|
||
| ```swift | ||
| struct ContentView: View { | ||
| var body: some View { | ||
| Image("evermore") | ||
| .overlay { | ||
| Image("fearless") | ||
| .blendMode(.color) | ||
| .blendMode(.multiply) | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| 在这个例子中，我们创建了一个图像，并添加了一个覆盖层。这个覆盖层是另一个图像，我们将 `blendMode(.multiply)` 应用于这个图像，这样它就会与底层的图像混合。 | ||
|
|
||
| `.multiply` 是一种混合模式，你可以根据需要选择其他的混合模式。 | ||
|
|
||
| blendMode 混合模式可以分为以下几种类型： | ||
|
|
||
| ## 变亮 | ||
|
|
||
| 提升亮部亮度 | ||
|
|
||
| - `colorDodge` | ||
| - `lighten` | ||
| - `screen` | ||
| - `plusLighter` | ||
|
|
||
| ## 变暗 | ||
|
|
||
| 使暗部更暗 | ||
|
|
||
| - `colorBurn` | ||
| - `darken` | ||
| - `multiply` | ||
| - `plusDarker` | ||
|
|
||
| ## 对比 | ||
|
|
||
| 让亮部更亮，暗部更暗，对比度增加，更艳丽。 | ||
|
|
||
| - `overlay` | ||
| - `softLight` | ||
| - `hardLight` | ||
|
|
||
| ## 融合 | ||
|
|
||
| 这些模式会根据源图像和目标图像的色调、饱和度、颜色或亮度进行混合。 | ||
|
|
||
| - `hue` | ||
| - `saturation` | ||
| - `color` | ||
| - `luminosity` | ||
| - `sourceAtop` | ||
| - `destinationOver` | ||
| - `destinationOut` | ||
| - `difference` | ||
| - `exclusion` |
124 changes: 124 additions & 0 deletions
124
SwiftPamphletApp/Resource/Guide/SwiftUI/视觉/SF Symbol(ap).md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,126 @@ | ||
|
|
||
|
|
||
| ## 演进 | ||
|
|
||
| 在 iOS 13 中，苹果引入了 SF Symbols，这是一套专门为 Apple 设备设计的符号图标，可以在应用程序中使用。这些符号图标是矢量图形，可以在不同的大小和颜色下保持清晰度。 | ||
|
|
||
| WWDC 21 符号数量达到 3000 个，包括 500 个全新的符号，以及 1000 个符号的变体。推出了 SF Symbols 3，支持更多的变体和颜色。可以自定义符号。 | ||
|
|
||
| WWDC 22 推出了 SF Symbols 4，数量达到 4000 个，支持更多的变体和颜色。有自动渲染模式，还有可变颜色。 | ||
|
|
||
| WWDC 23 推出了 SF Symbols 5，数量达到 5000 个。符号有7种动画，可以定制动画。可以用 Symbol Components 来创建自定义符号。 | ||
|
|
||
| ## 变量值 | ||
|
|
||
| SF Symbol 支持变量值，可以通过设置 variableValue 来填充不同部分，比如 wifi 图标，不同值会亮不同部分，`Image(systemName: "wifi", variableValue: 0.5)` 。 | ||
|
|
||
| 下面是一个使用变量值的示例代码： | ||
|
|
||
| ```swift | ||
| struct ContentView: View { | ||
| @State private var variableValue: Double = 0.5 | ||
|
|
||
| var body: some View { | ||
| VStack { | ||
| Slider(value: $variableValue, in: 0...1, step: 0.01) | ||
| Image(systemName: "speaker.wave.3.fill", variableValue: variableValue) | ||
| .symbolRenderingMode(.palette) | ||
| .symbolVariant(.fill) | ||
| .foregroundColor(.blue) | ||
| .imageScale(.large) | ||
| } | ||
| .padding() | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ## 大小 | ||
|
|
||
| `.imageScale` 可以改变 SF Symbol 的大小，可以设置为 `.small`、`.medium`、`.large`。 | ||
|
|
||
| ```swift | ||
| struct ContentView: View { | ||
| var body: some View { | ||
| Image(systemName: "wifi") | ||
| .imageScale(.large) | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| 还可以通过 `.font(.system(size:` 和 `.fontWeight(.semibold)` 来设置大小和粗细。 | ||
|
|
||
| ## 文本插值 | ||
|
|
||
| 文本插值支持 SF Symbol，可以在文本中插入 SF Symbol。 | ||
|
|
||
| ```swift | ||
| Text("这是一辆双层 \(Image(systemName: "bus.doubledecker"))") | ||
| ``` | ||
|
|
||
| ## symbolRenderingMode 渲染模式 | ||
|
|
||
| symbolRenderingMode 可以设置 SF Symbol 的渲染模式，可以设置为 `.multicolor`、`.palette`、`.monochrome`、`.hierarchical`。 | ||
|
|
||
| - `.multicolor`：多色模式。这种模式下，SF Symbols 将使用预定义的多种颜色来显示。这是默认的渲染模式。 | ||
| - `.palette`：调色板模式。这种模式下，SF Symbols 将使用你指定的颜色来显示。你可以为每个部分指定不同的颜色。 | ||
| - `.monochrome`：单色模式。这种模式下，SF Symbols 将使用单一颜色来显示。这个颜色是你在代码中指定的颜色。 | ||
| - `.hierarchical`：层次模式。这种模式下，SF Symbols 将使用一种颜色，但是不同的部分会有不同的透明度。这可以创建出一种层次感。 | ||
|
|
||
| 以下是一个使用 `.multicolor` 渲染模式的示例代码： | ||
|
|
||
| ```swift | ||
| struct ContentView: View { | ||
| var body: some View { | ||
| Image(systemName: "figure.walk.motion.trianglebadge.exclamationmark") | ||
| .symbolRenderingMode(.multicolor) | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ## symbolVariant 变体 | ||
|
|
||
| symbolVariant 可以设置 SF Symbol 的变体，可以设置为 `.none`、`.circle`、`.square`、`.rectangle`、`.fill`、`.slash`。 | ||
|
|
||
| 当然，以下是 SF Symbols 的各种变体的详细介绍： | ||
|
|
||
| 1. `none`：没有任何特殊变体的 SF Symbol。 | ||
|
|
||
| 2. `circle`：这个变体的 SF Symbol 是在一个圆形背景中的。例如，`circle` 变体的 "person" symbol 就是一个人像在一个圆形背景中。 | ||
|
|
||
| 3. `square`：这个变体的 SF Symbol 是在一个正方形背景中的。例如，`square` 变体的 "person" symbol 就是一个人像在一个正方形背景中。 | ||
|
|
||
| 4. `rectangle`：这个变体的 SF Symbol 是在一个矩形背景中的。例如，`rectangle` 变体的 "person" symbol 就是一个人像在一个矩形背景中。 | ||
|
|
||
| 5. `fill`：这个变体的 SF Symbol 是填充的，也就是说，它的内部是有颜色的，而不是空心的。例如，`fill` 变体的 "heart" symbol 就是一个填充的心形。 | ||
|
|
||
| 6. `slash`：这个变体的 SF Symbol 是有一条斜线穿过的。例如，`slash` 变体的 "bell" symbol 就是一个有斜线穿过的铃铛，表示静音。 | ||
|
|
||
|
|
||
| ```swift | ||
| struct ContentView: View { | ||
| var body: some View { | ||
| VStack(alignment: .leading) { | ||
| Label("Default", systemImage: "person") | ||
| Label("Circle", systemImage: "circle") | ||
| .symbolVariant(.circle) | ||
| Label("Circle Fill", systemImage: "circle.fill") | ||
| .symbolVariant(.circle.fill) | ||
| Label("Square", systemImage: "square") | ||
| .symbolVariant(.square) | ||
| Label("Square Fill", systemImage: "square.fill") | ||
| .symbolVariant(.square.fill) | ||
| Label("Rectangle", systemImage: "rectangle") | ||
| .symbolVariant(.rectangle) | ||
| Label("Rectangle Fill", systemImage: "rectangle.fill") | ||
| .symbolVariant(.rectangle.fill) | ||
| Label("Fill", systemImage: "heart") | ||
| .symbolVariant(.fill) | ||
| Label("Slash", systemImage: "bell") | ||
| .symbolVariant(.slash) | ||
| Label("Slash Fill", systemImage: "bell.fill") | ||
| .symbolVariant(.slash.fill) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
|
|
||
| 三方库 | ||
|
|
||
| - [daprice/Variablur: Variable blur effects for SwiftUI, powered by Metal](https://github.com/daprice/Variablur) | ||
| - [joogps/Glur: Progressive blurs in SwiftUI.](https://github.com/joogps/Glur) |
Oops, something went wrong.