iOS Animation in detail (learning animation see this one is enough)

iOS Animation in detail (learning animation see this one is enough)

First, the basic knowledge

Caanimation.png

Second, cabasicanimation

1. Properties and explanations of animations

2. Interpretation of attribute values

• RepeatCount: If you need to keep repeating in Swift: Float.infinity,oc:huge_valf

• Timingfunction:

Timingfunction.png

kcamediatimingfunctionlinear--animations are changed at the same speed throughout the animation time. That's uniform motion. A linear timing function, which is also the default function of the Caanimation Timingfunction property is empty. Linear pacing makes sense for those scenes that immediately accelerate and maintain a constant speed to the finish line (for example, bullets that shoot the barrel).

Kcamediatimingfunctioneasein: The animation starts slowly, and then the animation accelerates. A method that slowly accelerates and then stops abruptly. Suitable for examples of previously mentioned freefall, or, for example, the launch of a missile aimed at a target.

Kcamediatimingfunctioneaseout: The animation starts faster, and then the animation slows down. It starts at a full speed, then slows down slowly and stops. It has a weakened effect, and the application of a scene such as a door slowly closes, rather than slamming.

Kcamediatimingfunctioneaseineaseout: Animations are slower at the beginning and end, and faster in the middle time period. Creates a process that slowly accelerates and then slows down slowly. This is the way most objects move in the real world and the best choice for most animations. If only one buffer function can be used, then it must be it. Then you will wonder why this is not the default choice, actually when using the UIView animation method, he is indeed the default, but when creating caanimation, you need to manually set it up.

Kcamediatimingfunctiondefault: It's very similar to kcamediatimingfunctioneaseineaseout, but the acceleration and deceleration processes are slightly slower. The difference between it and kcamediatimingfunctioneaseineaseout is hard to spot, probably because Apple thinks it's more appropriate for an implicit animation (and then changes the idea to Uikit. Instead of using Kcamediatimingfunctioneaseineaseout as the default effect), although its name is the default, remember that when creating an explicit caanimation It is not the default option (in other words, The default layer behavior animation uses Kcamediatimingfunctiondefault as their timing method).

How to use:

1	pathAnim.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)

• Fillmode

Fillmode.png

Kcafillmodeforwards: When the animation starts, the layer's state remains at the last frame of the animation, and the default property value of Removedoncompletion is yes, so that the layer remains closed after the animation ends. The removedoncompletion should be set to No.

Kcafillmodebackwards: The first frame of the animation will be executed immediately, regardless of whether the BeginTime property is set. The observation found that setting this value, just beginning the view is missing, does not know where the app is.

Kcafillmodeboth: This value is a combined state of kcafillmodeforwards and Kcafillmodebackwards

Kcafillmoderemoved: The animation will start at the beginTime of the setting (if the BeginTime property is not set, the animation executes immediately), and the layer will be restored when the animation finishes.

3. User Experience

Try not to set removedoncompletion = False, because the mating caanimationdelegate will bring the problem of recycling, if the animation needs to stay in the final state, You can set the center property of the view directly at the end of the animation point

Circular references occur because of the type of strong used by Caanimation delegate: Take a look at the brief illustration:

Caanimationdelegate.png

To solve the problem that sometimes the view flashes, we can set the property value of the layer to the last value of our animation, and then add a layer animation to our view.

4. Sample Display

• Rotate animation

Rotate an animation. gif

• Displacement animation

Displacement animations. gif

• Background color change animation, background picture change animation, round angle Change animation

Animation Collection -1.gif

• Scale animation

Scale animation -1.gif

• Size scale, transparency value change animation (can be used as a flicker effect)

Size scale, transparency value change animation. gif

5. General KeyPath Summary

Third, cakeyframeanimation

Cakeyframeanimation is a frame animation inside a core animation that provides an animation of a specified string of values as if it were a frame-by-frame effect of a movie.

1. Attribute interpretation

• Values: is an array of many values to animate. This property is special and only works if the Path property value is nil.

• Path: You can specify a path for the animation to follow along this specified path.

• Cacluationmode: There is also a very important parameter in the Keyframe animation, which is Calculationmode, the calculation mode. It is mainly for the contents of each frame as a block punctuation, that is, to anchorpoint and position Animation. When there are multiple discrete points in a planar coordinate system, they can be discrete, or they can be interpolated after straight lines, or they can be interpolated using a sleek curve.

1) kcaanimationlinear Calculationmode default value, R custom control animation time (linear) can be set Keytimes, indicating that when the keyframe is a block punctuation, the key frame directly connected to the interpolation calculation;

2) Kcaanimationdiscrete Discrete, is not the interpolation calculation, all the key frames are displayed directly;

3) kcaanimationpaced Rhythm Animation automatically calculates the motion time of the animation, making the animation evenly, not by keytimes set or by key frame split time, at this time keytimes and timingfunctions invalid;

4) Kcaanimationcubic The key frame for the key frame of the block punctuation after the smooth curve interpolation calculation, for the shape of the curve can also be adjusted by tensionvalues,continuityvalues,biasvalues to customize, The mathematical principle here is kochanek–bartels spline, where the main purpose is to make the running trajectory become smooth, the curve animation needs to set Timingfunctions

kcaanimationcubicpaced see this name to know and Kcaanimationcubic have a certain connection, in fact, is on the basis of Kcaanimationcubic make the animation run evenly, is the system time within the same distance movement, Keytimes and timingfunctions are also invalid at this time.

• Keytimes: An array containing several NSNumber object values to distinguish the timing of the animation. It is worth noting that the floating-point values of these NSNumber objects are between 0.0~1.0. The value inside is larger or equal than the previous one. The best result is that the value in this array corresponds to the value inside values or the value of the path control, otherwise you may not get the result you want. Property for the app to specify a timer on each keyframe that is applied to each key frame. This property is used only when the Calculationmode property is set to Kcaanimationlinear,kcaanimaitondiscrete,kcaanimationcubic. It is not used in rhythm animations. Keytimes defines the point in time at which each keyframe is applied. The timing of all intermediate values is controlled by the timer function, which allows you to apply ease-in or ease-out curve timing to each part. If you don't specify any timing functions, the animation will be linear.

• Rotationmode: Rotation style

1) Kcaanimationrotateauto automatically rotates according to the path

2) Kcaanimationrotateautoreverse Auto-Flip According to Path

2. Sample Display

Cakeyframeanimation path animations. gif

Third, catransition

Used primarily for transition animations transitioning from one scene to another in an animated form

1. Attribute interpretation

• Type: Types of transition animations, filter properties specified in a custom transition animation

There are also animation effects that are not exposed by the system:

1	["cube", "suckEffect", "rippleEffect", "pageCurl", "pageUnCurl", "oglFlip", "cameraIrisHollowOpen",  "cameraIrisHollowClose", "spewEffect","genieEffect","unGenieEffect","twist","tubey","swirl","charminUltra", "zoomyIn", "zoomyOut", "oglApplicationSuspend"]

effect, it is not listed, you can see the next

• Subtype: The direction the transition animation will go

• Startprogress, endprogress: Start and end position progress, values between [0,1], the end value must be greater than the start value

3. Examples of animations

Catransition path animations. gif

Iv. caspringanimation

IOS9 introduced the animation class, in the past we used to use Facebook Pop to do this spring effect, it inherits from Cabaseanimation, used to make spring animation

1. Parameter description

• Mass: quality, affect the movement of the layer of spring inertia, the larger the mass, the greater the spring tension and compression, the speed of the animation is slow, and the fluctuation amplitude becomes larger

• stiffness: rigidity coefficient (stiffness coefficient/elasticity coefficient), the greater the stiffness coefficient, the greater the force of deformation, the faster the movement

• Damping: damping coefficient, the coefficient of blocking spring contraction, the greater the damping coefficient, the faster the stop

• Initialvelocity: Initial rate, when the initial speed of the animation view is positive, the velocity direction is consistent with the direction of motion, and the velocity is negative, the direction of movement is opposite to the direction of motion if

• Settlingduration: The settling time returns the estimated time of the spring animation to the stop, and estimates the time of the usual spring animation based on the current animation parameters the settlement time is more accurate

2. Example shows

Caspringanimation Spring animation. gif

Five, some interesting animation examples

To achieve the animation of the process of drawing, although very simple, but see a lot of people have asked, the effect is as follows:

DrawLine animations. gif

Using the sine curve to do, the effect is OK, I believe many people have done:

Water animations. gif

Left after a small flame of hope, particle animation, the effect is amazing, games with more, interested, can also study under

Fire animations. gif

The animated effect of fish swimming in fishpond:

Fish animation. gif

iOS Animation in detail (learning animation to see this one is enough)