Your project today will animate text and images. Your app will scatter the letters of the word "Lambda" by animating the letters to random locations.
After completing the lesson material and this project, you'll be able to animate a number of UIView
and CALayer
properties.
Follow these steps to set up your project skeleton:
- Create a new Single View iOS Xcode project
- In the "Main.storyboard", embed a view controller in a navigation controller (be sure to set the initial view controller arrow)
These steps enable you to run your animation with a single tap:
- Add a bar button item to your view controller's navigation bar (right side).
- Name the button "Toggle"
- Connect an
IBAction
to your view controller:toggleButtonPressed(_:)
. - Create a
Bool
property variable calledisScattered
that you can toggletrue
andfalse
.
You'll animate your views to either scatter them (explore outwards) or gather them together (reset to default position) when the Toggle button is tapped. The boolean variable will help you know what state you're in (scattered or gathered).
Build the UI elements you want to animate (either programmatically or in Interface Builder).
- You need six labels (one for each letter of Lambda)
- You need one image view for the Lambda logo. (Look for the logo file in this repo)
Create IBOutlet
's for these views in your view controller so they can be animated by your toggleButtonPressed(_:)
method.
Scatter Animation:
- Fade out your logo image view (the logo should disappear over the length of the animation)
- Move your letters to random locations (read the random Int API below)
- Assign them a random background color and text color
- Use a custom transform to rotate the views (
letter.transform = CGAffineTransform(rotationAngle: random_angle
) - Incorporate as many other custom animations as you like
- Your animation should take between 2 and 4 seconds
Gather Animation
- Fade in your logo view (it should gradually reappear as the gather animation runs)
- Reset all the custom properties you previously assigned to the letters (they should appear as they did at the start of the app)
- Animate the letters back to their starting positions
Here are some stretch goals to investigate:
- Add 3D transforms to your layers instead of a 2D rotation.
- Animate shadows onto and away from your views.
- Add keyframe sequences to perform multiple tasks when scattering your views.
- Chain together animations
- Add a
UIPanGestureRecognizer
to move around the Lambda logo
Here are some helpful resources for your project:
UIView
reference (Xcode, also this Apple Doc article. See theAnimations
section for a list of animatable properties.CALayer
animatable properties- Core animation
- Affine Transforms in iOS:
- see Xcode docs for
CGAffineTransform
andCATransform3D
, Quartz 2D - Wolfram
- Wikipedia
- University of Texas
- see Xcode docs for
- Random numbers with Swift's
random(in:)
function forInt
- You will want to cast the
Int
into aCGFloat
to createCGPoint
positions.
- You will want to cast the
- UIPanGestureRecognizer Reference