Spring Animation-ios-Preparation

Finally stop at the end point:

If you add a spring effect to an animated position move, the motion trajectory of the view should look like the one shown in:

This will make your animations look more realistic, more realistic, and closer to reality. In some cases, it gives the user a better user experience. So let's start learning.

Spring animation

We are still in the above article of the login page, for example, we should find that the rigid login button, we let it pop up today.

Open ViewController.swift , viewWillAppear() Add the following code at the bottom of the method:

1. Self.loginbutton.center.y + = 30
2. Self.loginButton.alpha = 0

Let the sign-in button Move down 30 before the screen renders, and make it transparent. Then viewDidAppear() add the following code at the bottom of the method:

1. Uiview.animatewithduration (1, delay:0.5, usingspringwithdamping:0.5, initialspringvelocity:0, Options:. allowUserInteraction, animations: {
2. SELF.LOGINBUTTON.CENTER.Y-= 30
3. Self.loginButton.alpha = 1
4. }, Completion:nil)

The code above is not familiar, yes, still UIView the class method, but there are two more parameters:

• usingSpringWithDamping: The damping value of the spring animation, that is equivalent to the size of friction, the value of the property from 0.0 to 1.0, the closer to 0, the smaller the damping, the greater the amplitude of the rebound, the greater the damping, the smaller the amplitude of the elastic, if the road to a certain extent, will appear in the case of the missile.
• initialSpringVelocity: The speed of the spring animation, or the power. The smaller the value, the smaller the spring, the smaller the spring tension, the greater the force, the greater the spring tension. It is important to note that if set to 0, this property is ignored, and the animation's effect is calculated by animation duration and damping.

Let's take a look at the effects of different dynamics:

• Duration is 3 seconds, damping is 0.5, power is 1:

• Duration is 3 seconds, damping is 0.5, power is 20:

When initialSpringVelocity the value is 1 o'clock, the login button is not very strong up and down, when set to 20 o'clock, the login button directly rushed through the password input box, which is the effect of power.

Then we'll look at the effects of different damping:

• Duration is 3 seconds, damping is 0.1, power is 0:

• Duration is 3 seconds, damping is 1, power is 0:

When the usingSpringWithDamping value of the property is 0.1, the damping is very small, although there is no power factor, but the login button is still relatively large amplitude, equivalent to glide on the ice. When this property is 1 o'clock, it means that the damping is very large, and you can see that the login button is almost no bounce amplitude. This is the effect of damping.

It is important to note that the spring animation is not only used for position changes, it can be used for all animation properties of the changes, such as we in animations the closure in addition to the change in position, but also the change in transparency, it also has the effect of spring animation, but it has no position changes so obvious and close to the real, It will show a flashing effect:

You can try these several properties of the combination of different values, choose a self-satisfied spring effect can be.

Applying animations to human-computer interaction

The spring animations in the previous section really make our UI lively, but it's just a matter of looking at the eye, and there's no response or feedback to the user's actions. In this section you will be taught how to give a view a response and feedback in an animated manner when the user clicks the action.

ViewController.swiftThere is a login() method named, which associates the Touch up Inside event with the login button, adding the following code to the method:

 

1. Uiview.animatewithduration (0.5, delay:0.0, usingspringwithdamping:0.2, initialspringvelocity:0.0, Options:. allowUserInteraction, animations: {
2. Self.loginButton.bounds.size.width + = 25
3. }, Completion:nil)

At this point, whenever we click the login button once, it gets fatter. Compile and run to see the effect:

We can combine one effect so that when you click the login button, you not only get fat, but also a slight bounce effect. Add the following code at the bottom of the login() method:

 

1. Uiview.animatewithduration (0.3, delay:0.0, usingspringwithdamping:0.6, initialspringvelocity:0.0, Options:. allowUserInteraction, animations: {
2. Self.loginbutton.center.y + = 10
3. }, Completion:nil)

Compile and run to see the effect:

These are just two simple examples of the use of animation to human-computer interaction, you can in their own projects to add some user's actions and views of the animation feedback, so that your application live up.

Statement two:

Spring Animation is a special animation curve that has been widely used in system animations since IOS 7.

The animated effects of the system shown in are all using Spring Animation:

In fact, almost all system animations from IOS 7 use Spring Animation, including App folder open/close effects, keyboard pop-up effects, switch effects for uiswitch controls, Push animations between different View controllers, Modal Animations that appear and disappear, the appearance and disappearance of Siri, and so on. A comparison of the motion curves for Spring Animation and normal animations:

To make it more intuitive, I made a set of demo diagrams, from left to right, listing the animation effects of Spring Animation, Ease-out Animation and Linear Animation, respectively:

Can be seen, and the system comes with the ease-out effect compared to the Spring Animation earlier speed increased faster, in the animation time certain premise, give people feel faster and cleaner.

Spring Animation API

Starting with IOS 8, Apple exposes the Spring Animation API, and developers can create such animations with simple code:

+(void)Animatewithduration:(Nstimeinterval)DurationDelay(Nstimeinterval)DelayUsingspringwithdamping: (cgfloat) dampingratio  (cgfloat) velocity options: (uiviewanimationoptions)  Options animations: (void  (^< Span class= "P" >) (voidanimations completion:  (void  (^) (finishedcompletion       

The method is UIView the class method.

The Spring Animation API has two more parameters than normal animations, respectively usingSpringWithDamping initialSpringVelocity .

Usingspringwithdamping parameters

usingSpringWithDampingThe range is 0.0f to 1.0f , the smaller the value of the "Spring" vibration effect is more obvious. Demonstrated in the initialSpringVelocity case 0.0f of the circumstances, usingSpringWithDamping respectively taken 0.2f , 0.5f and 1.0f the case.

Initialspringvelocity parameters

initialSpringVelocityIndicates the initial speed, the higher the number, the faster the movement begins. Illustrates the usingSpringWithDamping 1.0f case when, initialSpringVelocity respectively, take 5.0f , 15.0f and 25.0f . It is worth noting that the initial speed value is higher and the time is short, there will also be rebound situation.

Use

Spring Animation is an ideal alternative to linear or ease-out animations. Because the IOS itself is heavily used by Spring Animation, users are accustomed to the animated effect, so using it can make the App feel more natural, in Apple's words is "instantly familiar". In addition, Spring Animation is not only available for locations, it applies to all properties that can be animated.

Thanks for sharing

Spring Animation-ios-Preparation