You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: Sources/EffectsLibrary/Documentation.docc/Tutorials/tutorial-table.tutorial
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,5 @@
1
1
@Tutorials(name: "Effects Library") {
2
-
@Intro(title: "What is the Effects Library?") {
2
+
@Intro(title: "EffectsLibrary tutorials") {
3
3
This is a library for creating full screen effects in SwiftUI in an easy, seamless way. The package is available on Swift Package Manager (SPM) and fully open-source.
Copy file name to clipboardExpand all lines: Sources/EffectsLibrary/Documentation.docc/basic-configuration-options.md
+86-10Lines changed: 86 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -5,20 +5,96 @@ This article gives an overview over the configuration options that are common fo
5
5
6
6
## Overview
7
7
8
-
We aim to build our effects in a way that it's easy and intuitive to use. However, this might not always be possible so in this article we want to exaplain to you the basic effect configuration options (meaning: parameters of `Config` files) that you can use for each and every effect of our package.
8
+
We aim to build our effects in a way that it's easy and intuitive to use. However, this might not always be possible, so in this article we want to exaplain to you the basic effect configuration options (meaning: parameters of `Config` files) that you can use for each and every effect of our package.
9
9
10
10
If there's still things remaining unclear, feel free to contact us for clarification.
11
11
12
+
The configuration options that are shared for all effects are the following:
12
13
13
-
-**Render Mode:** Options (Unordered, oldest first, oldest last, back to front, additive). It defines how emitter cells are rendered into the view.
14
-
-**Amount of particles** (Birthrate): An animatable property that increments the particle cells.
15
-
-**Velocity:** An animatable property that multiplies the particle cells’ velocity. The default value is `1`. You can use the range of `-500 to 500`.
16
-
- Scale: Defines a multiplier applied to the cell-defined particle scale. Use the range of `-100 to 100`.
The `content` parameter is one of the most powerful options we have. It allows you to set the content of the single particles all of our effects are made of. It is actually an array of ``Content`` objects. The ``Content`` type is a custom `enum` which can take multiple values, specifically the following three:
29
+
30
+
-`.shape`
31
+
-`.image`
32
+
-`.emoji`
33
+
34
+
In our advanced tutorial we go over how to use each of those, so let's only quickly see some examples of how to define the content array (we've actually taken this example directly from the tutorial itself).
35
+
36
+
```Swift
37
+
let content: [Content] = [
38
+
.shape(.triangle, .blue, 10.0),
39
+
.shape(.square, .green, 10.0),
40
+
.shape(.circle, .red, 10.0),
41
+
.emoji("🚀", 10.0),
42
+
.emoji("💥", 3.0),
43
+
.image(UIImage(named: "stream-logo")!, nil, 0.8)
44
+
]
45
+
```
46
+
47
+
It demonstrates how to exactly configure each of the parameter types. For the `.image` it requires us to have an image with the name `stream-logo` in the Assets folder.
48
+
49
+
Each content item always has a scaling parameter as the last option as well. This is used so that you can manually scale the size of each particle. This gives you the power to e.g. combine differently sized images with emojis and shapes and fine-tune them so that they are of equal size.
50
+
51
+
The `.shape` and `.image` parameters have an optional `UIColor` option as well. This allows you to directly tint the pieces in any way you like. You can also leave this as `nil` to have the effect take care of coloring the particles itself.
52
+
53
+
For each of the effects we have a sensible default `content` parameter which is different in every case. However, as this library is open-source you can always have a look at the source code. The `Config` files have default parameters and you can find the `content` definitions there.
54
+
55
+
### backgroundColor
56
+
57
+
As the name suggests this allows you to set a background color on your effects. By default this is set to `.clear` so that you can place the effects on top of other UI elements (`ZStack` is our friend here.). But you're free to set this to any value you like.
58
+
59
+
### intensity
60
+
61
+
The `intensity` parameter is one of the configuration options where you see the most impact. It will make the effect more lively when set to the `.high` option and way more subtle when set to `.low`. The default is always to have it at `.medium`.
62
+
63
+
The cool thing is that internally it has different manifestations of how values will change. Some effects use `SpriteKit` where it will have an effect on some of the values being set there. Other effects make use of `CAEmitterLayer` where the changes for the `intensity` will have very different changes of parameters.
64
+
65
+
That is the goal that we aimed for with this library. The level of abstraction that you can change parameters depending on understandable functionality and don't need to know how that works internally.
66
+
67
+
### lifetime
68
+
69
+
Each particle in a system has a certain duration where it will be existant - the `lifetime`. With this parameter you can specify how long that will be. As this determines how long they will be on screen it will also have an effect on how _dragged out_ the effect will be. Shorter lifetime will lead to shorter bursts of effects.
70
+
71
+
The possible values are:
72
+
73
+
-`.short`
74
+
-`.medium` (default)
75
+
-`.long`
76
+
77
+
### initialVelocity
78
+
79
+
For each of the effects the particles are emitted from a source. Depending on this `initialVelocity` particles will be emitted faster or slower. The higher the initial velocity is, the more widespread the effect will be. As some effects are directly affected by gravity that will also impact the trajectory they will take. E.g. for rain it will detemine whether the rain is more spread around the available space or more centered toward the middle.
80
+
81
+
You can select between `.short`, `.medium` (default), and `.fast`.
82
+
83
+
### fadeOut
84
+
85
+
The `fadeOut` is related to the `lifetime` value but contrary to that one it will not directly remove particles. It will slowly fade them out by reducing the opacity over time. Here you have 4 options:
86
+
87
+
*`.none`
88
+
*`.slow`
89
+
*`.medium` (default)
90
+
*`.fast`
91
+
92
+
We want to emphasize again: the goal was that you don't need to know anything about the underlying implementation but you can just play around with some sensible defaults that we have set.
93
+
94
+
### spreadRadius
95
+
96
+
The `spreadRadius` specifies the radius in which particles are emitted from the source. That can be in a full circle or only in a certain angle. This parameter is pretty specific to the effects but all of them have the options of `.low`, `.medium`, and `.high`.
97
+
98
+
## Summary
99
+
100
+
Hopefully, this gave you a nice introduction into the configuration options of all the effects. Some effects even have some more specialized paramters and we'll get to them in a follow article, that will be be coming soon. Stay tuned.
0 commit comments