iOSProgrammingControllingAnimations動畫

2019-11-14 18:57:02

字體：大中小

來源：轉載

供稿：網友

iOS PRogramming Controlling Animations 動畫

The Word "animation" is derived from a Latin word that means "the act of bringing to life." Animations are what bring your applications to life, and when used appropriately, they can guide your users through a course of actions, orient them, and overall create a delightful experience.

animation 源自拉丁詞意思是帶入聲明的動作。animations 是把你的應用帶到life,當你恰當的使用，他們能引導你的用戶通過一系列動作，orient 他們，全部創建一個delightful experience.

you will use a variety of animation techniques to animate various views in the HypnoNerd application.

在本章，你將使用各種各樣的animation techniques to animate 各種views在HypnoNerd應用。

1. Basic Animations 基礎的動畫

Animations are a great way to add an extra layer of polish to any application; games are not the only type of application to benefit from animations.

animations 是一種很好的方式添加到任何應用上的額外的層。games 不是從animations 獲利的唯一一種應用。

Animations can smoothly bring interface elements on screen or into focus, they can draw the user's attention to an actionable item, and they give clear indications of how your app is responding to the user's actions.

動畫能夠平滑的把界面元素帶到屏幕上或者引起注意，他們能吸引用戶的注意到他們動作的item，他們給了清晰的暗示來怎樣讓你的app響應用戶的actions.

The first type of animation you are going to use is the basic animation. A basic animation animates between a start value and an end value

你將使用的第一個動畫是basic animation.basic animation animates 在一個開始的值和一個end value之間動作。

The first animation you will add will animate the alpha value of the labels when they are added to the view.

你將添加的第一個動畫是animate the alpha value of the labels 當他們添加到view上時。

messageLabel.alpha=0;

? ? ? ? [UIView animateWithDuration:0.5 animations:^{

? ? ? ? ? ? messageLabel.alpha=1;

? ? ? ? }];

After you enter some text and tap the return key, the labels should fade into view. Animations provide a less jarring user experience than having the views just pop into existence.

Animations 提供了一個更少的用戶等待時間比直接讓view 出現體驗更好。

The method animateWithDuration:animations: returns immediately. That is, it starts the animation, but does not wait around for the animation to complete.

animateWithDuration:animations直接返回。也就是說它開始一個animation，但是并不會等到動畫完成。

The simplest block-based animation method on UIView is animateWithDuration:animations:. This method takes in the duration that the animation should run for and a block of changes to animate.?

最簡單的block—based animation 方法在UIView是animateWithDuration:animations.這個方法傳入一個動畫應該運行的時間和一個block? of changes to animate.

The animation will follow an ease-in/ease-out animation curve, which will cause the animation to begin slowly, accelerate through the middle, and finally slow down at the end.

動畫會跟隨ease-in/ease-out animation curve,這將導致animation 開始慢，中間加速，最后減速的效果。

1.1 Timing functions?

The acceleration of the animation is controlled by its timing function. The method animateWithDuration:animations: uses an ease-in/ease-out timing function.?

動畫的acceleration 是由它的timing function 控制的。這個animateWithDuration:animations使用了ease-in/ease-out timing function.

To use a driving analogy, this would mean the driver accelerates smoothly from rest to a constant speed, and then gradually slows down at the end, coming to rest.

用一個開車的比喻，這意味著從rest 到一個恒速平滑的加速，然后漸漸的減速，直到rest。

Other timing functions include linear (a constant speed from beginning to end), ease-in (accelerating to a constant speed, and then ending abruptly), and ease-out (beginning at full speed, and then slowing down at the end).

其他的timing funcitons 包括linear(從開始到結束都是勻速)，ease-in（加速到一個常量，然后突然結束），ease-out(開始全速，最后減速)

In order to use one of these other timing functions, you will need to use the UIView animation method that allows options to be specified: animateWithDuration:delay:options:animations:completion:.

為了使用這些其他的timing functions,你需要使用哪些允許options 來指明的animateWithDuration:delay:options:animations:completion:.

的UIView animation 方法。

This method gives you the most control over the animation. In addition to the duration and animation block, you can also specify how long to delay before the animations should begin, some options (which we will look at shortly), and a completion block that will get called when the animation sequence completes.

這個方法給你了更多的控制在整個animation.除了duration 和animation block ,你可以指明在動畫開始之前需要delay 多久，和一些options和一個completion block 當animation sequence completes 時被調用。

?[UIView animateWithDuration:2 delay:5 options:UIViewAnimationOptionCurveEaseIn animations:^{

? ? ? ? ? ? messageLabel.alpha=1;

? ? ? ? } completion:NULL];

Now, as opposed to using the default ease-in/ease-out animation curve, the animation will just ease- in.

The options argument is a bitmask, so you can bitwise-or multiple values together. Here are some of the useful options that you can supply:

optinons 參數是bit mask,所以你可以bitwise或者multiple values together.這里是你能提供的一些有用的信息。

These control the acceleration of the animation. Possible values are

UIViewAnimationOptionCurveEaseInOut

UIViewAnimationOptionCurveEaseIn

UIViewAnimationOptionCurveEaSEOut

UIViewAnimationOptionCurveLinear

UIViewAnimationOptionAllowUserInteraction

By default, views cannot be interacted with when animating. Specifying this option will override the default. This can be useful for repeating animations, such as a pulsing view.

默認情況下，views 不能交流當animating時。指明這個選項將override 這個default.這在repeating animations ，例如pulsing view 時會很有用

UIViewAnimationOptionRepeat

This will repeat the animation indefinitely. This is often paired with the UIViewAnimationOptionAutoreverse option.

這個將無限期的這個動畫。它經常與UIViewAnimationOptionAutoreverse一起用。

UIViewAnimationOptionAutoreverse

This will run the animation forward and then backward, returning the view to its initial state.

這將運行animation 前進然后后退，返回view到她的初始狀態。

2 ?Keyframe Animations

The animations you have added so far have been basic animations; they animate from one value to another value.

你目前添加的動畫都是basic animations.

If you want to animate a view's properties through more than two values, you use a keyframe animation. A keyframe animation can be made up of any number of individual keyframes (Figure 27.3). You can think of keyframe animations as multiple basic animations going back to back.

如果你想animate 一個view 的properties經過多于兩個值，你要用keyframe animation. 一個keyframe animation 能夠由任意數量的獨立的keyframes 組成。你可以認為keyframe animations 為multiple basic animations 來來回回。

Keyframe animations are set up similarly to basic animations, but each keyframe is added separately.

keyframe animations 與basic animations 的設置非常相近，但是每個keyframe被分別的添加。

To create a keyframe animation, use the animateKeyframesWithDuration:delay:options:animations:completion: class method on UIView, and add keyframes in the animation block using the addKeyframeWithRelativeStartTime:relativeDuration:animations: class method.

In BNRHypnosisViewController.m, update drawHypnoticMessage: to animate the center of the labels first to the middle of the screen and then to another random position on the screen.

更新drawHypotic Message? 來animate the? center of the labels 先在screen 的中間，然后到任意其他的屏幕的位置。

Keyframe animations are created using animateKeyframesWithDuration:delay:options:animations:completion:. The parameters are all the same as with the basic animation except that the options are of type UIViewKeyframeAnimationOptions instead of UIViewAnimationOptions. The duration passed into this method is the duration of the entire animation.

keyframe animations 使用animateKeyframesWithDuration:delay:options:animations:completion來創建。參數除了options 的類型是UIViewKeyframeAnimationOptions而不是UIViewAnimationOptions之外，都一樣。傳遞給這個方法的duration 是整個animation 的duration。

Individual keyframes are added using addKeyframeWithRelativeStartTime:relativeDuration:animations:.

單獨的keyframes 由addKeyframeWithRelativeStartTime:relativeDuration:animations添加。

The first argument is the relative start time, which will be a value between 0 and 1. The second argument is the relative duration, which is a percent of the total duration and will also be a value between 0 and 1.

第一個參數是相對開始時間，將會是0到1 之間的數。第二個參數是相對持續時間。是整個duration 百分比，值仍然是在0-1之間。

?[UIView animateKeyframesWithDuration:5.0 delay:0 options:0 animations:^{

? ? ? ? ? ? [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.6 animations:^{

? ? ? ? ? ? ? ? messageLabel.center=self.view.center;

? ? ? ? ? ? }];

? ? ? ? ? ? [UIView addKeyframeWithRelativeStartTime:0.6 relativeDuration:0.4 animations:^{

? ? ? ? ? ? ? ? int x=arc4random()%width;

? ? ? ? ? ? ? ? int y=arc4random()%height;

? ? ? ? ? ? ? ? messageLabel.center=CGPointMake(x, y);

?? ? ? ? ? ? ? ??

? ? ? ? ? ? }];

?? ? ? ? ? ??

? ? ? ? } completion:NULL];

3 Animation Completion?

It can often be useful to know when an animation completes.?

知道animation什么時候完成是有用的。

For instance, you might want to chain different kinds of animations together or update another object when the animation completes. To know when the animation finishes, pass a block for the completion argument.

例如，你可能想連接不同種類的動畫一起或者當animation 完成時，更新另一個對象。為了知道animation 什么時候完成，傳遞一個block 為compleiton 參數。

Build and run the application, and log messages will appear in the console as soon as the animations complete.

You might be wondering, "What if the animation repeats? Will the completion block be executed after each repeat?" No, the completion block will only be executed once, at the very end.

你可能會想："如果animation 重復怎么辦？completion block 是否被反復執行？"，不是，completion block 將僅僅執行一次，在最后。

4 Spring Animations?

iOS has a powerful physics engine built into the SDK, and one of the easiest ways to use it is with the new spring animations.

iOS 有一個強大的物理引擎構建在SDK中，使用它的最簡單的方式是用新的spring animations.

This type of animation has a timing function like that of an actual spring. You will use this to animate the text field dropping in from the top of the screen, as if it was attached to a spring.

這個類型的animation 有一個timing functions 像一個實際的spring。你可以用這個animate 這個text field 從screen

頂端滑落，好像是依附在一個spring上。

In BNRHypnosisViewController.m, add a property for the text field to the class extension and update loadView to store the reference to the text field. Then start with the text field offscreen:

@property (nonatomic, weak) UITextField *textField;

self.textField = textField;

It will be best to begin the animation as soon as the view is on the screen, so the animation code will go into viewDidAppear:. Currently there is no property pointing to the text field, but you will need one in order to update its frame in viewDidAppear:.

Now, in BNRHypnosisViewController.m, override viewDidAppear: to drop in the text field using a spring animation.

- (void)viewDidAppear:(BOOL)animated {

[super viewDidAppear:animated];

[UIView animateWithDuration:2.0 delay:0.0

usingSpringWithDamping:0.25 initialSpringVelocity:0.0

options:0 animations:^{

CGRect frame = CGRectMake(40, 70, 240, 30);

self.textField.frame = frame; }

completion:NULL];

}

The individual components of this method are relatively straightforward:

這個方法獨立的組成是相當的直接：