CS193p Notes - Lecture 6: Animation

Property Observers

var isFaceUp: Bool {
  willSet {
    if newValue {
      startUsingBonusTime()
    } else {
      stopUsingBonusTime()
    }
  }
}

• Syntax reminds computer var but it's not the same thing
• Most of the cases newValue contains the value it's going to get but in didSet the value is in oldValue

@State (1:47)

• Views are read only
• Sometimes we want to keep some state and that happens by adding @state front of var
  • Case might be that we want to allow user to edit some image first and then the intention is called with all the state changes and it's stored to the model.
• Changing a variable with @state redraws the view

Animation (8:14)

• Animation happens after the thing happened but in user's point of view it looks like happening the same time
  • The idea is that the value is changed once from A to B and animation is played instead of changing the values from A to B and drawing the animation after every change
• The point of animation is to draw attention to thing that change
• Changes to views in containers that are already on screen
  • The appearance and disappearance of Views
  • Changes to the arguments to Animatable view modifiers of Views
  • Changes to the arguments to the creation of Shapes

• Two ways to animate

  • Implicitly .animation(Animation)

    • "Automatic animation"

    Text("Ghost")
      .opacity(scary ? 1 : 0)
      .rotationEffect(Angle.degrees(upsideDown ? 180 : 0))
      .animation(Animation.easeInOut)
    

    • You can control
      • duration
      • delay
      • repeat
      • curve
        • rate at which the animation plays out
    • When added to a container, all the items inside it get's own animation instead of animating the whole container as one

  • Explicitly withAnimation(Animation) { }

    • Primary way of doing animation
    • This allows to do the same animation for a bunch of views
    • Explicit animations do not override an implicit animation

  • Transitions

    • Specify how to animate the arrival/departure of Views

    ZStack {
      if isFaceUp {
        RoundedRectangle()s
        Text("Ghost").transition(.scale)
      } else {
        RoundedRectangle(cornerRadius: 10).transition(.identity)
      }
    }
    

    • If isFaceUp changed (while ZStack is on screen and an explicit animation is in progress) ...
      • ... to false, the back would appear instantly, Text would shrink to nothing, front RR fade out.
      • ... to true, the back would disappear instantly, Text grow in from nothing, front RR fade in.

  • Places like if-else or for loop where the data changes are good for animations to highlight users the change.

  • Difference between Button and Text with OnTouch gesture is that different operating systems (WatchOS, iOS) know how to show it the best for the user

@RealLankinen

• Notes 1
• Notes 2
• Notes 3
• Notes 4
• Notes 5
• Notes 6
• Notes 7
• Notes 8
• Notes 9
• Notes 10
• Notes 11
• Notes 12
• Notes 13
• Notes 14

Originally published here