RW.com: Animations Article - Part 2

The run continues! Will be good to make the most of it, as there will not be anywhere near as much time over the next few weeks. Anyway, second and final part on animations. Let's do it!

Start Time - 15:04

So we are starting with combing transitions

Combining Transitions

Here is an extension on AnyTransition -

extension AnyTransition {

    static var customTransition: AnyTransition {

      let transition = AnyTransition.move(edge: .top)

        .combined(with: .scale(scale: 0.2, anchor: .topTrailing))

        .combined(with: .opacity)

      return transition

    }

  }

This basically means that there are three specific transitions saved into customTransition - and that is specifically for the type. I'm starting to understand when it is useful to use type properties!

10 minute delay

Asynchronous Transition

So we have replaced to transition above with this custom one instead - 

extension AnyTransition {

  static var customTransition: AnyTransition {

    let insertion = AnyTransition.move(edge: .top)

      .combined(with: .scale(scale: 0.2, anchor: .topTrailing))

      .combined(with: .opacity)

    let removal = AnyTransition.move(edge: .top)

    return .asymmetric(insertion: insertion, removal: removal)

  }

}

This one again has various parts to it but also this removal bit as well. Moving to the top - yes I can see that in the code!

Springs

Here is a modifier, added specifically to the MoonView SwiftUI file - 

.onAppear {

        withAnimation {

          self.angle = self.targetAngle

      }

    }

This means the moons will move from a the circle to the new location, at random angles. In a straight line. 

A couple of neat bits of code make the objects bounce a little!

So there a few in built options with springs. The physics involved are to emulate real life - the stiffness, damping and various other aspects. A lot of technical stuff here - loads of options to fine tune the springing element!

Refining the Animation

A new bit of code for the Solar System part...

func animation(index: Double) -> Animation {

    return Animation

      .spring(response: 0.55, dampingFraction: 0.45, blendDuration: 0)

      .speed(2)

      .delay(0.075 * index)

  }

This is again, customised with the spring, speed and delay modifiers put in!

A cool effect!

Animatable

There is a custom modifier called Geometry Effect. So this code was included - 

struct OrbitEffect: GeometryEffect {

    let initialAngle = CGFloat.random(in: 0 ..< 2 * .pi)

    var percent: CGFloat = 0

    let radius: CGFloat

    var animatableData: CGFloat {

      get { return percent }

      set { percent = newValue }

    }

    func effectValue(size: CGSize) -> ProjectionTransform {

      let angle = 2 * .pi * percent + initialAngle

      let pt = CGPoint(

        x: cos(angle) * radius,

        y: sin(angle) * radius)

      return ProjectionTransform(CGAffineTransform(translationX: pt.x, y: pt.y))

    }

  }

The clever thing about geometry effect is that it conforms to animatable - that means it needs a animatableData property is needed. Animatable data conforms to VectorArithmetic...

This is all VERY complex and I'm not going to even to try to understand! It seems that Geometry Effect is a clever tool to use. 

Alternate Look At Animatable Data

This is too complicated so leaving this bit out!

Other Ways to Animate

Rotation 3D effect is pretty cool - 

.rotation3DEffect(

                  .degrees(Double(moonGeometry

                    .frame(in: .global).midX - geometry.size.width / 2) / 3),

                  axis: (x: 0, y: 1, z: 0)

                )

It gives a cool look and effect. 

Finish Time - 15:59 (approx 40 minutes with delays)

So some really useful elements learned here, but - like the last article - lots of complex code that was difficult to make sense of. I'd prefer to see it all created from scratch and just add small elements. Anyway, in my consolidation I'm going to make sense of the whole thing. 

For this entry, here are the key points:

• You can create custom transitions through extension on Any Transition
• These transitions can be combinations of two or more - for various effects
• Asynchronous adds in the 'remove' part - leaving the screen. So it has insert and remove as the two values
• Springs - all to do with bouncing. Lots of different options for this!
• Animatable - very complex but this is where the Geometry Effect comes in. Only aspect that I struggled to follow

So lots of good takeaways; I actually don't see the point of a consolidation one on this. So much code that I can't really access at my level. So consider the consolidation within this entry!