Development step 8 — Animation and Effects
In this step, I tried to creating the gradient transition for the background (UIView) for my weather app. I run through some trouble debugging the code and It took me roughly 16 hours to find the solution, yet I haven’t get the right answers to some part of it. I am now posting my code and asking for the help on StackExchange community. In this post, I will run through the process that I myself have figured out and described the new feature added to the app.
1.Final results
2.Sources
3. The Progress
The idea is using the gradient transition as UI elements and creating the environment-like of current weather condition. the inspiration come from Instagram log-in page:
By doing so, first I had to replace my old View, which was an image, into Swift’s own view (which is code-based). I learned (https://www.appcoda.com/cagradientlayer)/ that in order to work with gradient, I’ll need to understand the CAGradientLayer , where you can experiment with different Style Properties, like startColor, endColor, startPoint, endPoint,… But all you can do is mostly linear gradient for new user and a bit complicated radial Gradient for experienced ones. In this project, I’m gonna stick with an easier one!
3.1 — Import the view and add the gradient to UIView
@IBOutlet weak var gradientView: UIView!let gradientLayer = CAGradientLayer()let gradientLayer2 = CAGradientLayer()let gradientLayer3 = CAGradientLayer()
3.2 — Add the gradient property to assigned class at view load
gradientLayer.frame = gradientView.boundsgradientLayer.colors = [UIColor(red:0.19, green:0.81, blue:0.82, alpha:1.0).cgColor, UIColor(red:0.20, green:0.03, blue:0.40, alpha:1.0).cgColor]gradientView.layer.insertSublayer(gradientLayer, at: 0)//main gradient color viewgradientLayer2.colors = [UIColor.red.cgColor, UIColor.purple.cgColor]//gradient color view 2gradientLayer3.colors = [UIColor.orange.cgColor, UIColor.green.cgColor]//gradient color view 3
Here I can add several classes of gradient but be sure to assigned one main gradient property to the view. Also, I had to insert that main gradient as a sublayer to the View that I added before, put it in the back layer. So you can see (gradientLayer, at: 0) — I didn’t had it before and the whole gradient layer was on top of everything.
3.3 — Add the gradient property to assigned class at view load
For each of group condition I had mentioned in previous posts (sunny, rainny, foggy,…) there would be a transition to the assigned gradient class I made above. Below is the example of one condition group — cloudy:
else if self.condition.lowercased().range(of:"cloudy") != nil || self.condition.lowercased().range(of:"overcast") != nil {let colorChangeAnimation = CABasicAnimation(keyPath: "colors")colorChangeAnimation.duration = 1.0colorChangeAnimation.toValue = self.gradientLayer2.colorscolorChangeAnimation.fillMode = kCAFillModeForwardscolorChangeAnimation.isRemovedOnCompletion = falseself.gradientLayer.add(colorChangeAnimation, forKey: "colorChange")//effects
}
I used the CABasicAnimation as the main animation drive, with “color” was the element to be changed. duration is the time the animation would last, in this case is 1 second.toValue is the state color after. I don’t need fromValue because it was already the main View. fillMode and isRemovedOnCompletion made sure that the “after” state stays the same and doesn’t go back to last state.
Note: Be sure to check what value is afterfromValue and toValue . If they are “colors” as CABasicAnimation input then you have to match them with “color” after. For me, I didn’t input self.gradientLayer2.colors but self.gradientLayer2 because I thought it also covered then It took me a long time to figure the reason why gradient didn’t change in the first place.
4. The bug?
When running the simulator as seen above, you can see that It took a pretty long time (10–15 seconds) for the transition/animation to work.
I have tried to run the animation in different scenes, where there’s no APIXU calls function and the animation run smoothly after 1 seconds as I expected.
One thing I could not figure out is that the sound work totally fine. Animation and sound function were on the same line of code yet animation didn’t respond in sync.
I took me a lot of time running through the code but none of approaches works. So I have put my case onto StackExchange for help:
H
