Learn about iOS Animations in our Swift Spring Fling celebration! Note from Ray : This is an abbreviated chapter from iOS Animations by Tutorials released as part of theSpring Swift Fling to give you a sneak peek of what’s inside the book. We hope you enjoy! :] Animation is a critical part of your iOS user interfaces. Animation draws the user’s attention toward things that change, and adds a ton of fun and polish to your apps UI.Even more importantly, in an era of “flat design”, animation is one of the key ways to make your app stand apart from others.In this tutorial, you’ll learn how to use UIView animation to do the following: Set the stage for a cool animation. Create move and fade animations. Adjust the animation easing. Reverse and repeat animations.There’s a fair bit of material to get through, but I promise it will be a lot of fun. Are you up for the challenge?
All right – time to get animating!Getting Started Start by downloading thestarter project for this tutorial, which represents the login screen for a fictional airline – “Bahama Air”. Build and run your project in Xcode and you’ll see the following:
The app doesn’t do much right now – it just shows a login form with a title, two text fields, and a big friendly button at the bottom.There’s also a nice background picture and four clouds. The clouds are already connected to outlet variables in the code. Open ViewController.swift and have a look inside. At the top of the file you’ll see all the connected outlets and class variables. Further down, there’s a bit of code in viewDidLoad() , which initializes some of the UI. The project is ready for you to jump in and shake things up a bit! Enough with the introductions – you’re undoubtedly ready to try out some code!Your First AnimationYour first task is to animate the form elements onto the screen when the user opens the application. Since the form is now visible when the app starts, you’ll have to move it off of the screen just before your view controller makes an appearance. Add the following code to viewWillAppear() :
heading.center.x-= view.bounds.widthusername.center.x -= view.bounds.widthpassword.center.x -= view.bounds.widthThis moves each of the form elements outside the visible bounds of the screen, like so:
Since the code above executes before the view controller appears, it will look like those text fields were never there in the first place.Build and run your project to make sure your fields truly appear off-screen just as you had planned:
Perfect – now you can animate those form elements back to their original locations via a delightful animation. Add the following code to the end of viewDidAppear() :
UIView.animateWithDuration(0.5, animations: {self.heading.center.x += self.view.bounds.width}) To animate the title in you call the UIView class method animateWithDuration(_:animations:) . The animation starts immediately and animate you set the duration via the first method parameter in the code. It’ all the changes you make to the view in the animations closure will be animated by UIKit.Build
you should see the title slide neatly into place like so:
That sets the stage for you to animate in the rest of the form elements. Since animateWithDuration(_:animations:) is a class method, you aren’t limited to animate ju in fact you can animate as many views as you want in your animations closure.
Add the following line to the animations closure:
self.username.center.x += self.view.bounds.widthBuild and ru watch as the username field slides into place:
Delayed AnimationsSeeing both views animate together is quite cool, but you probably noticed that animating the two views over the same distance and with the same duration looks a bit stiff. Only kill-bots move with such absolute synchronization! :]Wouldn’t it be cool if each of the elements moved independently of the others, possibly with a little bit of delay in between the animations? First remove the commented out line of code below that animates username :
UIView.animateWithDuration(0.5, animations: {self.heading.center.x += self.view.bounds.width// self.username.center.x += self.view.bounds.width}) Then add the following code to the bottom of viewDidAppear() :
UIView.animateWithDuration(0.5, delay: 0.3, options: nil, animations: {self.username.center.x += self.view.bounds.width}, completion: nil)The class method you use this time looks familiar, but it has a few more parameters to let you customize your animation:
duration : The duration of the animation.
delay : The amount of seconds UIKit will wait before it starts the animation.
options : A bitmask value that allows you to customize a number of aspects about your animation. You’ll learn more about this parameter later on, but for now you can pass nil to mean “no options.”
animations : The closure expression to provide your animations.
completion : A code closure to execute when the this parameter often comes in handy when you want to perform some final cleanup tasks or chain animations one after the other.
In the code you added above you set delay to 0.3 to make the animation start just a hair later than the title animation. Build
how does the combined animation look now?
Ahh – that looks much better. Now all you need to do is animate in the password field.
Add the following code to the bottom of viewDidAppear() :
UIView.animateWithDuration(0.5, delay: 0.4, options: nil, animations: {self.password.center.x += self.view.bounds.width}, completion: nil) Here you’ve mostly mimicked the animation of the username field, just with a slightly longer delay. Build and run your project again to see the complete animation sequence:
That’s all you need to do to animate views across the screen with a UIKit animation!That’s just the start of it – you’ll be learning a few more awesome animation techniques in the remainder of this tutorial!Animatable PropertiesNow that you’ve seen how easy animations can be, you’re probably keen to learn how else you can animate your views. This section will give you an overview of the animatable properties of a UIView , and then guide you through exploring these animations in your project. Not all view properties can be animated, but all view animations, from the simplest to the most complex, can be built by animating the subset of properties on a view that do lend themselves to animation, as outlined in the section below.Position and Size
You can animate a view’s position and frame in order to make it grow, shrink, or move around as you did in the previous section. Here are the properties you can use to modify a view’s position and size:
bounds : Animate this property to reposition the view’s content within the view’s frame.
frame : Animate this property to move and/or scale the view.
center : Animate this property when you want to move the view to a new location on screen.
Don’t forget that Swift lets you adjust single members of structures as well. This means you can move a view vertically by changing center.y or you can shrink a view by decreasing frame.size.width . Appearance
You can change the appearance of the view’s content by either tinting its background or making the view fully or semi-transparent.
backgroundColor : Change this property of a view to have UIKit gradually change the tint of the background color over time.
alpha : Change this property to create fade-in and fade-out effects. Transformation
Transforms modify views in much the same way as above, since you can also adjust size and position.
transform : Modify this property within an animation block to animate the rotation, scale, and/or position of a view. These are affine transformations under the hood, which are much more powerful and allow you to describe the scale factor or rotation angle rather than needing to provide a specific bounds or center point.These look like pretty basic building blocks, but you’ll be surprised at the complex animation effects you’re about to encounter!Animation Options Looking back to your animation code, you were always passing in nil to the options parameter.
options lets you customize how UIKit creates your animation. You’ve only adjusted the duration and delay of your animations, but you can have a lot more control over your animation parameters than just that.
There’s a list of options declared in the UIViewAnimationOptions enumeration that you can combine in different ways for use in your animations. RepeatingYou’ll first take a look at the following two animation options:
.Repeat : Enable this option to makes your animation loop forever.
.Autoreverse : Enable this option only in conjunction with .Repeat ; this option repeatedly plays your animation in forward then in reverse.
Modify the code that animates the password field viewDidAppear() to use the .Repeat option as follows:
UIView.animateWithDuration(0.5, delay: 0.4,options: .Repeat, animations: {self.password.center.x += self.view.bounds.width}, completion: nil)Build and run your project to see the effect of your change:
The form title and username field fly in and settle down in the center of the screen, but the password field keeps animating forever from its position offscreen. Modify the same code you changed above to use both .Repeat and .Autoreverse in the options parameter as follows:
UIView.animateWithDuration(0.5, delay: 0.4,options: .Repeat | .Autoreverse, animations: {self.password.center.x += self.view.bounds.width}, completion: nil)Build and ru this time the password field just can’t make up its mind about staying on the screen!Animation EasingIn real life things don’t just suddenly start or stop moving. Physical objects like cars or trains slowly accelerate until they reach their target speed, and unless they hit a brick wall, they gradually slow down until they come to a complete stop at their final destination.The image below illustrates this concept in detail:
To make your animations look more realistic, you can apply the same effect of building momentum at the beginning and slowing down before the end, known in general terms as ease-in and ease-out . You can choose from four different easing options:
.Linear : This option applies no acceleration or deceleration to the animation.
.CurveEaseIn : This option applies acceleration to the start of your animation.
.CurveEaseOut : This option applies deceleration to the end of your animation.
.CurveEaseInOut : This option applies acceleration to the start of your animation and applies deceleration to the end of your animation. To better understand how these options add visual impact to your animation, you’ll try a few of the options in your project.Modify the animation code for your password field once again with a new option as follows: UIView.animateWithDuration(0.5, delay: 0.4,options: .Repeat | .Autoreverse | .CurveEaseOut, animations: {self.password.center.x += self.view.bounds.width}, completion: nil)Build
notice how smoothly the field decelerates until it reaches its rightmost position, before returning to the left side of the screen:
This looks much more natural since that’s how you expect things to move in the real world. Now try the opposite: ease-in the animation when the field is still outside of the screen by modifying the same code as above to change the .CurveEaseOut option to .CurveEaseIn as follows:
UIView.animateWithDuration(0.5, delay: 0.4,options: .Repeat | .Autoreverse | .CurveEaseIn, animations: {self.password.center.x += self.view.bounds.width}, completion: nil)Build
observe how the field jumps back from its rightmost with robotic vigor. This looks unnatural and isn’t as visually pleasing as the previous animation.You’ve seen how the various animation options affect your project and how to make movements look smooth and natural.Now that you have some experience with animation curves, change the options on the piece of code you’ve been playing with back to nil: UIView.animateWithDuration(0.5, delay: 0.4, options: nil, animations: {self.password.center.x += self.view.bounds.width}, completion: nil)And that’s it – you now understand how to use UIView animation API – so go forth and add some cool animations in your apps!Where To Go From Here?Now that you know how basic animations work, you’re ready to tackle some more dazzling animation techniques.Animating views from point A to point B? Pshaw – that’s so easy! :] If you want to learn more, check out our book iOS Animations by Tutorials . In the book, you’ll learn how to animate with springs, transitions, keyframe animations, CALayer animations, Auto Layout constraint animations, view controller transition animations, and more. We hope you enjoyed this tutorial, and if you have any questions or comments, please join the forum discussion below!
无相关信息Tutorials for Prototyping iOS Animations in Swift
| Mobile Tuxedo
Articles & Tutorials &
Tutorials for Prototyping iOS Animations in Swift
Now with Xcode 6 and iOS 8, Apple have created a new programming language called
that is not only more powerful, but also has a syntax that designers will probably feel a lot more comfortable with compared to Objective-C.
If you’ve ever wanted to learn enough programing to create rich prototypes and interactive or generative animations now’s a great time to begin.
This tutorial will show you the basics of creating animations with .
The New iPad (iPad 3) Photoshop Tutorial
The New iPad (iPad 3) has been released. Many of you may want to learn how to design this gorgeous Apple product as well as developing other iPad related graphics based on the PSD...
Mobile Application Development ResourcesiOS Animations by Tutorials: Bonus Chapters Now Available! - 推酷
iOS Animations by Tutorials: Bonus Chapters Now Available!
3 New Bonus Chapters for iOS Animations by Tutorials Now Available!
is the gift that keeps on giving!
Marin Todorov has just released a brand new version of his book, that includes three free new bonus chapters covering Facebook’s popular
Chapter 22, Getting Started with Pop : In this chapter, you’ll learn how to install Pop and take it for a quick test drive by creating a few simple animations.
Chapter 23, Decay Animations with Pop : Learn about a new kind of animation where instead of setting start and end points, you set an initial velocity vector and deceleration rate, and Pop takes care of the rest.
Chapter 24, Spring Animations with Pop : Learn how to make your animations look a bit snappier with one of Pop’s best feeling features – spring animations!
He’s also checked and updated the sample projects as needed so everything is up-to-date with the latest release of Xcode 6.2.
Wondering how to get these cool new chapters?
PDF customers : You can download the new version (v1.3) that includes the bonus chapters immediately on yourMy Loot page.
Print customers : Check the introduction in the book for instructions on how to download the bonus chapters.
Don’t have the book yet? : Be sure tograb your copy!
Marin and I hope you enjoy these free bonus chapters of
– happy animating! :]
已发表评论数()
&&登&&&录&&
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见