Custom animation timing in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic UIView animation with a duration of 2 seconds.

iOS Swift

UIView.animate(withDuration: [1]) {
  myView.alpha = 0
}

Drag options to blanks, or click blank then click option'

A2.0

B0.5

C5

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using an integer without decimal like 2 instead of 2.0

Using a very short duration like 0.5 which makes animation too fast

The withDuration parameter sets how long the animation lasts in seconds. Here, 2.0 means the animation will take 2 seconds.

2fill in blank

medium

Complete the code to use a custom timing curve with UIViewPropertyAnimator.

iOS Swift

let animator = UIViewPropertyAnimator(duration: 1.5, curve: [1]) {
  myView.frame.origin.x += 100
}
animator.startAnimation()

Drag options to blanks, or click blank then click option'

A.easeOut

B.easeInOut

C.linear

D.easeIn

Attempts:

3 left

💡 Hint

Common Mistakes

Using .linear which makes animation constant speed

Using .easeIn or .easeOut which only slow down or speed up one side

The .easeInOut curve makes the animation start slow, speed up, then slow down at the end, creating a smooth effect.

3fill in blank

hard

Fix the error in the code to create a custom timing curve using CAMediaTimingFunction.

iOS Swift

let timingFunction = CAMediaTimingFunction(controlPoints: [1], 0.0, 1.0, 1.0)
let animation = CABasicAnimation(keyPath: "position.x")
animation.timingFunction = timingFunction

Drag options to blanks, or click blank then click option'

A0.42, 0.0

B0.42 0.0

C0.42

D0.42, 0.0,

Attempts:

3 left

💡 Hint

Common Mistakes

Missing commas between numbers

Providing fewer than four numbers

The controlPoints initializer expects four Float values. The first two are the x and y of the first control point. Here, the first two values must be separated by commas and there should be exactly four values total.

4fill in blank

hard

Fill both blanks to create a UIViewPropertyAnimator with a custom cubic timing curve and start it.

iOS Swift

let timing = UICubicTimingParameters(controlPoint1: CGPoint(x: [1], y: [2]))
let animator = UIViewPropertyAnimator(duration: 1.0, timingParameters: timing)
animator.startAnimation()

Drag options to blanks, or click blank then click option'

A0.25

B0.1

C0.75

D0.9

Attempts:

3 left

💡 Hint

Common Mistakes

Using values outside 0 to 1 range

Swapping x and y values

The control points define the shape of the cubic Bezier curve. Common values like (0.25, 0.75) create a smooth ease-in-out effect.

5fill in blank

hard

Fill all three blanks to create a CABasicAnimation with a custom timing function and add it to a layer.

iOS Swift

let animation = CABasicAnimation(keyPath: "opacity")
animation.fromValue = [1]
animation.toValue = [2]
animation.timingFunction = CAMediaTimingFunction(name: [3])
myLayer.add(animation, forKey: "fade")

Drag options to blanks, or click blank then click option'

A1.0

B0.0

C"easeInEaseOut"

D"linear"

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping fromValue and toValue

Using timing function names without quotes

The animation fades opacity from 1.0 (fully visible) to 0.0 (invisible). The timing function easeInEaseOut makes the fade smooth.