Day 58 - 100 Days of Swift

3 minute read

Project 15 (part 2)

Day 58 is the second part of the fifteenth project. It is really going back and applying some animations that you learn in project 15 to some of the previous projects. He challenges you to make the letter buttons fade out when they are tapped in project 8. He challenges you to fade the image in when a new one is selected in project 13. And he challenges you to animate the flag to scale down when it is tapped in project 2.

To make the letter buttons fade out I added an animation to take the alpha to 0 when the button is tapped on, and then another to take it back to 1 when the user hits “Clear”, and I reset it to 1 when the user levels up:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// In letterTapped(_:)
UIView.animate(withDuration: fadeDuration) {
    sender.alpha = 0
}

// In clearAnswer(_:)
UIView.animate(withDuration: fadeDuration*2) {
    for button in self.activatedButtons {
        button.alpha = 1
    }
}

// In levelUp()
for button in letterButtons {
    button.alpha = 1
}

One issue with this was the built in animation for tapping on a UIButton didn’t look great in combination with this animation, so I got rid of the built in one by making the button a .custom button and setting its color programmatically:

1
2
3
// In loadView(), where we are making the buttons
let letterButton = UIButton(type: .custom)
letterButton.setTitleColor(.systemBlue, for: .normal)

That results in an animation that looks like this:

Gif of final project 8 animation

To fade in the image in project 13, I first animated the alpha to zero when the user hits the add button (so that it fades out the previous image if there is one), then I animated it back to 1 when the imagePickerController is dismissed. I also reset it if the imagePickerController is cancelled:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// In importPicture()
UIView.animate(withDuration: 0.1) {
    self.imageView.alpha = 0
}

// At the end of imagePickerController(_:didFinishPickingMediaWithInfo:)
dismiss(animated: true) {
    UIView.animate(withDuration: 0.5) {
        self.imageView.alpha = 1
    }
}

// In imagePickerControllerDidCancel(_:)
imageView.alpha = 1
dismiss(animated: true)

That gives an animation that looks like this:

Gif of final project 13 animation

To animate the flags in project 2, I turned off adjustsImageWhenHighlighted for all the buttons, because it is no longer necessary, and then put pretty much all of pickFlag(_:) in the completion closure for the animation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
UIView.animate(withDuration: 0.3,
               delay: 0,
               usingSpringWithDamping: 0.5,
               initialSpringVelocity: 1,
               options: [],
               animations: {
    sender.transform = CGAffineTransform(scaleX: 0.8,
                                         y: 0.8)
}) { _ in
    sender.transform = .identity
    self.answered += 1
    if sender.tag == self.correctAnswer {
        self.score += 1
        self.askQuestion()
    } else {
        self.score -= 1
        self.presentWrongAnswerAlert(country: self.countries[sender.tag].uppercased())
    }
}

That gives an animation that looks like this:

Gif of final project 2 animation

You can find my version of these projects at the end of day 58 on Github here.