ITP 342 Mobile App Dev. Animation

Transcription

1 ITP 342 Mobile App Dev Animation

2 Views Views are the fundamental building blocks of your app's user interface, and the UIView class defines the behaviors that are common to all views. Responsibilities Drawing and animation Layout and subview management Event handling

3 Drawing and Animation Views draw content in their rectangular area using UIKit or Core Graphics Some view properties can be animated to new values. 3

4 Animations The following properties of the UIView class are animatable: frame bounds center transform alpha backgroundcolor 4

5 Animations To animate your changes, create a UIViewPropertyAnimator object and use its handler block to change the values of your view's properties. The UIViewPropertyAnimator class lets you specify the duration and timing of your animations, but it performs the actual animations. You can pause a property-based animator that is currently running to interrupt the animation and drive it interactively. 5

6 Animator An animator is always in one of the following states: Inactive: This is the initial state. As an animation finishes, this will also be the state it returns to. Active: The animator becomes active as soon as you call startanimation() or pauseanimation(). It will stay in this state until the animations finishes naturally or the stopanimation() method gets called. Stopped: The animator enter this state after calling stopanimation(). 6

7 Animator 7

8 UIViewPropertyAnimator When creating a property animator object, you specify the following: A block containing code that modifies the properties of one or more views. The timing curve that defines the speed of the animation over the course of its run. The duration (in seconds) of the animation. An optional completion block to execute when the animations finish. 8

9 Working with Closures Closures allow you to create distinct segments of code that can be passed around to methods or functions as if they were values. Closures are Swift objects, which means they can be added to collections like Array or Dictionary. They also have the ability to capture values from the enclosing scope, making them similar to blocks or lambdas in other programming languages. 9

10 Example In a method such as an IBAction, create an animator and then start the animation let animator = UIViewPropertyAnimator(duration: 10, curve: UIViewAnimationCurve.easeInOut) { self.view.backgroundcolor = newcolor animator.startanimation() 10

11 Example Example where you call another method in the closure for the animation func fadeoutlabel() { msglabel.alpha = func swipedright(_ sender: UISwipeGestureRecognizer) { msglabel.alpha = 1 msglabel.text = "Swiped Right" let animator = UIViewPropertyAnimator(duration: 5, curve: UIViewAnimationCurve.linear, animations: {() in self.fadeoutlabel() ) animator.startanimation() 11

12 Example Example where you use the name of the method func fadeinlabel() { msglabel.alpha = func swipedleft(_ sender: UISwipeGestureRecognizer) { msglabel.alpha = 0 msglabel.text = "Swiped Left" let animator = UIViewPropertyAnimator(duration: 5, curve: UIViewAnimationCurve.linear, animations: fadeinlabel) animator.startanimation() 12

13 Example Add Completion Fade out current text, update text, and fade in func fadeoutlabel() { msglabel.alpha = func doubletapped(_ sender: UITapGestureRecognizer) { let firstanimator = UIViewPropertyAnimator(duration: 5, curve:.linear, animations: fadeoutlabel) firstanimator.addcompletion { (position) in self.msglabel.text = "Double Tapped" let animator = UIViewPropertyAnimator(duration: 5, curve: UIViewAnimationCurve.linear, animations: {() in self.fadeinlabel() ) animator.startanimation() firstanimator.startanimation() 13

14 Previous Way to Animate The following slides use UIView's static animate methods 14

15 Animate Animate changes to one or more views using the specified duration. class func animate(withduration duration: TimeInterval, () -> Void) Parameters duration: The total duration of the animations, measured in seconds. If you specify a negative value or 0, the changes are made without animating them. animations: A closure containing the changes to commit to the views. This is where you programmatically change any animatable properties of the views in your view hierarchy. This closure takes no parameters and has no return value. This parameter must not be NULL. 15

16 Example 1 Animation In the ViewController, create a method that passes in a new name (as a String) and fades it in. 16

17 Example 1 Animation func fadeinstudent(name: String){ // Alpha = 0 means the text is transparent self.namelabel.alpha = 0 self.namelabel.text = name UIView.animate(withDuration: 1.0) { // Fade in the text of the label self.namelabel.alpha = 1 17

18 What we have: Animate The old string disappears and the new string fades in. What we want: We want the old string to fade out first. We need 2 animations First one to fade out old string Second one to fade in new string after the first one finishes 18

19 Animate Animate changes to one or more views using the specified duration and completion handler. class func animate(withduration duration: TimeInterval, () -> Void, completion: ((Bool) -> Void)? = nil) Parameters duration: The total duration of the animations, measured in seconds. animations: A closure containing the changes to commit to the views. completion: A closure to be executed when the animation sequence ends. This closure has no return value and takes a single Boolean argument that indicates whether or not the animations actually finished before the completion handler was called. 19

20 Example 2 Animations Create a method that fades in the new text. Create a method that fades out the old text of the label. In the completion argument for the animation, call the method that fades in the new text. 20

21 Example 2 Animations Create a method that fades in the new text. func animatestudent(name: String){ self.namelabel.text = name UIView.animate(withDuration: 1.0) { self.namelabel.alpha = 1 21

22 Example 2 Animations Create a method that fades out the old text of the label. In the completion argument for the animation, call the method that fades in the new text. 22

23 Example 2 Animations func displaystudent(name: String){ UIView.animate(withDuration: 1.0, animations: { // Fade out old text of label self.namelabel.alpha = 0 ) { (finished) in // Upon completion, call animatestudent self.animatestudent(name: name) 23

24 Example Colors Add code to rotate between 2 colors func animatestudent(name: String){ self.namelabel.text = name // If black, set to USC cardinal red if self.namelabel.textcolor == UIColor.black { self.namelabel.textcolor = UIColor(red: 153.0/255.0, green: 0.0, blue: 0.0, alpha: 1.0) else { self.namelabel.textcolor = UIColor.black UIView.animate(withDuration: 1.0) { self.namelabel.alpha =

25 Auto Layout & Animation If you are using Auto Layout, then some attributes will not animate such position and size. To turn off Auto Layout 25

26 Resources Apple's Developer Site: ation/windowsviews/conceptual/viewpg_iphoneo s/animatingviews/animatingviews.html ios Animation Tutorial: 26