RW.com: Animations Article - Part 1

The run continues! Like I said, my plan is to absorb knowledge from these 'beginner' articles. I won't get ALL of it - there'll be stuff beyond me for sure. But there WILL be elements to glean from them, that's the point. In the past I've been too concerned with understanding every aspect but actually, it's more like gradually building a complex puzzle - one piece at a time!

Start Time - 15:16

https://www.raywenderlich.com/5815412-getting-started-with-swiftui-animations
*Article dated Dec 9th 2019

Again, this could well be over two parts. We'll see!

The three key things we're going to learn are animation MODIFIERS and withAnimation - that's the function which lets you animate STATE CHANGES. And Custom Animations!

Opened project - here are the various Swift files already put in!



And here's what the view structure is -



The app is to basically bring up info about the planets in the solar system.

Basic Animations
*subheadings whenever needed

Right onto the good stuff!

 if self.toggleMoons(planet.name) {

        MoonList(planet: planet)

      }

So this piece of code is for determining if that planet's row should be toggled.... If the moon list is on then it will appear in the Stack. It is part of the makePlanetRow method. 

This next bit of code is in the button's curly brackets - 

self.showMoon = self.toggleMoons(planet.name) ? nil : planet.name

So showMoon will be called and then the toggleMoons bit for the planet...Or it clears showMoon if the button has already been pressed.

I've done the animation line of code but don't see any difference...

I take it back - that's actually a very subtle difference with the moon icon shrinking gradually! 

Animaton Timing

Right there are five main parameters: linear, easeIn, easeOut, easeInOut and timingCurve. Can't see any difference between these! Ok, again there is - but very very subtle!

Tinkering with Timing

Yes, as I've noticed, you can make the difference more noticeable by adding in a timing parameter - the duration. E.g. add in 5 for 5 seconds. Now that IS noticeable!

You can also do this in the debug menu and select 'slow animations', just to see them more clearly and not change the parameters in the code. 

So I've put in a moon animation value under ContentView; intuitively I've worked out that you can then pass this into the animation parameters. 

You can use speed and delay as properties too. The delay one is supposed to be particularly useful for accessing multiple properties or objects at once. 

You can also do a repeat option e.g. 

let moonAnimation = Animation.easeInOut.repeatForever(autoreverses: true)

Not sure when I'd actually want to do this! But the option is there

*Delays for approx 40 mins

Simultaneous Animations

So the .animation is a modifier, it stacks on to a Swift UI View. The changes to animation will apply to all attributes of a view. Not entirely sure what that means yet...

Rotation Effect - I've seen this before  

.rotationEffect(.degrees(self.toggleMoons(planet.name) ? -50 : 0))

Right by attributes we mean additional information about a declaration or a type. Modifiers seem to be specifically for the view of something. 

OK so we're talking about animation for size and animation for rotation - different attributes. 

Animating State Changes

So we have put this in the button/action block of code - 

withAnimation {

   self.showMoon = self.toggleMoons(planet.name) ? nil : planet.name

}

So this now has an animation of the planet row moving. 

So the 'withAnimation' block can have parameters but into it - 

withAnimation(.easeIn(duration: 2))

But that did look too laborious. Definitely better without the duration parameter. 

Transitions

*Last bit for now!

So this is about how a view is inserted or removed. Yes I've seen the effect - the image slides along to the right, out of sight. 

The five main built in ones are slide, opacity, scale, move and offset. 

Think of this as transitions between objects on Google Slides. Simple!

So next time we are starting from Combining Transitions. Cool!

Finish Time - 17:02 (approx 1 hour - lots of pauses and delays!)

So productive time spent! Let's do a summary - this is important to reiterate what I've learned...

• Three key aspects involving animation are modifiers, withAnimation and custom animations
• Animation timing - 5 main parameters to choose for this 
• Parameters for timing - aspects like speed, delay and repeat can be included
• Rotation effect - can be added in (does what it says!)
• withAnimation is a specific function - goes inside code with button 
• Transitions - for how objects leave/move from the screen 

The key thing will be to actually try this stuff out! Yes, once this article is complete I need to play around with that. But again, a recent revelation is not to take ALL from a course but to take SOME elements, which are relevant.