iOS Animation encyclopedia

First, Introduction

IOS animations primarily refer to the core animation framework. The official Use document address is: Core Animation Guide.
Core animation is the underlying framework for graphics rendering and animation on iOS and OS X platforms. The Core animation can work with animation views or other visual elements, for which you have done most of the painting frames you need to animate. You only need to configure a small number of animation parameters (such as the position of the start point and the position of the end point) to use the core animation animation effect. Core Animation The graphics hardware to handle most of the actual drawing tasks, and graphics hardware speeds up graphics rendering. This automated graphics acceleration technology allows animations to have higher frame rates and show smoother results without burdening the CPU and affecting the speed of the program.

Second, Core animation class diagram and characters commonly used segment

The inheritance diagram for the Core animation class

Common Properties
Duration: Duration of animation
BeginTime: Start time of animation
RepeatCount: Number of repetitions of an animation
Autoreverses: Performed animations are returned according to the original animation
Timingfunction: The control animation display Rhythm system provides five value choices, namely:

• Kcamediatimingfunctionlinear Linear Animation
• Kcamediatimingfunctioneasein Slow and fast (slow-forward fast-forward)
• Kcamediatimingfunctioneaseout after the first block (Fast forward slow)
• Kcamediatimingfunctioneaseineaseout Slow and slow
• Kcamediatimingfunctiondefault default, also belong to the middle relatively fast

Delegate: Animation agent. Ability to detect the execution and end of animations.

@interface NSObject (CAAnimationDelegate) - (void)animationDidStart:(CAAnimation *)anim; - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;@end

Path: Execution path in keyframe animation
Type: Animation types for transition animations, four transition animations are provided by the system.
-Kcatransitionfade Gradient effect
-Kcatransitionmovein into the coverage effect
-Kcatransitionpush Launch effect
-Kcatransitionreveal reveal the effect of leaving
Subtype: Animation direction of transition animations
-Kcatransitionfromright enter from the right
-Kcatransitionfromleft entry from the left
-Kcatransitionfromtop entry from the top
-Kcatransitionfrombottom entry from the bottom

Iii. How iOS animations are called first: UIView code block calls

_demoview. Frame= CGRectMake (0, screen_height/2- -, -, -);[UIView animatewithduration:1.0F animations:^{_demoview. Frame= CGRectMake (Screen_width, screen_height/2- -, -, -);} completion:^ (BOOL finished) {_demoview. Frame= CGRectMake (screen_width/2- -, screen_height/2- -, -, -);}];

Second type: UIView [begin commit] Mode

_demoView.frame = CGRectMake(0, SCREEN_HEIGHT/2-50, 50, 50);[UIView beginAnimations:nil context:nil];[UIView setAnimationDuration:1.0f];_demoView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50, 50, 50);[UIView commitAnimations];

Third: Using classes in core animation

 cabasicanimation *anima = [cabasicanimation animationwithkeypath:@" position "] Anima.fromvalue  = [Nsvalue valuewithcgpoint:cgpointmake ( 0 , Screen_height/2 - Page )] Anima.tovalue  = [Nsvalue valuewithcgpoint:cgpointmake (SCREEN_WIDTH, SCREEN_ Height/2 -75 )] Anima.duration  = 1.0  F  [_demoview.layer  addanimation:anima forkey:@ " Positionanimation "] 

Iv. use of iOS Animations 4.1: Base animation (cabaseanimation)

Important Attributes
fromvalue : keypath corresponding to the initial value
tovalue : keypath corresponding End value

The underlying animation primarily provides a simple animation of the mutable properties in a Calayer object. For example: displacement, transparency, scaling, rotation, background color, and so on.
Effect Demo:

Displacement Animation Code Demo:

Create an underlying animation using cabasicanimation cabasicanimation *anima = [Cabasicanimation animationwithkeypath:@"Position"];Anima. Fromvalue= [Nsvalue Valuewithcgpoint:cgpointmake (0, screen_height/2- the)];Anima. Tovalue= [Nsvalue valuewithcgpoint:cgpointmake (Screen_width, screen_height/2- the)];Anima. Duration=1.0F;Anima. Fillmode= Kcafillmodeforwards;Anima. Removedoncompletion= NO;[_demoview. LayerAddanimation:anima forkey:@"Positionanimation"];

watch out.
If Fillmode=kcafillmodeforwards and Removedoncomletion=no are complete, the layer remains displayed after the animation is executed. But in essence, the property value of the layer is still the initial value before the animation is executed, and it is not really changed.

4.2: Keyframe Animation (cakeyframeanimation)

Both Cakeyframeanimation and cabaseanimation belong to Capropertyanimatin subclasses. Cabaseanimation can only be transformed from one numeric value (Fromvalue) to another (Tovalue), while Cakeyframeanimation saves a set of keyframes using a nsarray.
Important Attributes
values : This is the Nsarray object. The elements inside are called "keyframes" (keyframe). The animated object displays each keyframe in the values array in the specified time (duration), in turn
path : You can set a cgpathref\cgmutablepathref so that the layer moves along the path. Path only works on Calayer's anchorpoint and position. If you set the path, values will be ignored.
keytimes : You can specify a corresponding point in time for the corresponding keyframe, and each time value in the range from 0 through 1.0,keytimes corresponds to each frame in values. When the keytimes is not set, the time of each keyframe is equally divided.

Effect Demo:

Circular Path Animation code Demo:

 cakeyframeanimation *anima = [cakeyframeanimation animationwithkeypath:@" position "] Uibezierpath *path = [Uibezierpath bezierpathwithovalinrect:cgrectmake (Screen_width/2 -100 , Screen_height/2 - 100 , 200 , 200  )] Anima.path  = Path  Anima.duration  = 2.0  F  [_demoview.layer  addanimation:anima forkey:@ " Pathanimation "] 

Description : Cabasicanimation can be viewed as a maximum of only 2 keyframes cakeyframeanimation

4.3: Group animation (Caanimationgroup)

Caanimation, you can save a set of animated objects, and after the Caanimationgroup object is added to the layer, all animation objects in the group can run concurrently simultaneously.
Important Attributes
animations : A nsarray used to hold a set of animated objects
Effect Demo:

Group Animation Code Demo:

Cakeyframeanimation*ANIMA1= [Cakeyframeanimation Animationwithkeypath:@"Position"]; Nsvalue*value0= [Nsvalue valuewithcgpoint:cgpointmake (0, screen_height/2-50)]; Nsvalue*value1= [Nsvalue valuewithcgpoint:cgpointmake (SCREEN_WIDTH/3, screen_height/2-50)]; Nsvalue*value2= [Nsvalue valuewithcgpoint:cgpointmake (SCREEN_WIDTH/3, screen_height/2+50)]; Nsvalue*value3= [Nsvalue Valuewithcgpoint:cgpointmake (screen_width * */3, screen_height/2+50)]; Nsvalue*value4= [Nsvalue Valuewithcgpoint:cgpointmake (screen_width * */3, screen_height/2-50)]; Nsvalue*value5= [Nsvalue valuewithcgpoint:cgpointmake (Screen_width, screen_height/2-50)];    Anima1.values = [Nsarray arraywithobjects:value0,value1,value2,value3,value4,value5, Nil]; Zoom Animation Cabasicanimation*anima2= [Cabasicanimation Animationwithkeypath:@"Transform.scale "]; Anima2.fromvalue = [NSNumber numberwithfloat:0.8F]; Anima2.tovalue = [NSNumber numberwithfloat:2.0F];//Rotate animation cabasicanimation*anima3= [Cabasicanimation Animationwithkeypath:@"Transform.rotation"];    Anima3.tovalue = [NSNumber numberwithfloat:m_pi];    Group Animation Caanimationgroup *groupanimation = [Caanimationgroup animation];    Groupanimation.animations = [Nsarray arraywithobjects:anima1,anima2,anima3, Nil];    Groupanimation.duration = 4.0f; [_demoview.layer addanimation:groupanimation Forkey:@ "groupanimation"];

4.4: Transition Animation (catransition)

A subclass of Caanimation, used for transition animations or transition animations, to provide layers with animated effects for moving out of the screen and moving into the screen.
Important Attributes
Type: Animation transition types

Apple's official SDK actually offers only four transitions.
-Kcatransitionfade Gradient effect
-Kcatransitionmovein into the coverage effect
-Kcatransitionpush Launch effect
-Kcatransitionreveal reveal the effect of leaving
The private API offers many other very cool transitions, such as @ "cube", @ "Suckeffect", @ "Oglflip", @ "Rippleeffect", @ "Pagecurl", @ "Pageuncurl", @ " Camerairishollowopen ", @" Camerairishollowclose "and so on.
watch out.
Private API, not recommended for developers. Because Apple does not provide maintenance and may cause your app to be audited.

subtype: Animation transition Direction

• Kcatransitionfromright from the right.
• Kcatransitionfromleft entry from the left
• Kcatransitionfromtop entry from the top of the
• Kcatransitionfrombottom entry from the bottom

startprogress: Start of Animation (percentage in overall animation)
endprogress: End of Animation (percentage in overall animation)

Effect Demo:

4.5: Comprehensive case 4.5.1: imitation path Menu effect

Effect Demo:

Animation parsing:
1, click the Red button, the red button rotation. (Rotate animation)
2, the small black button pop-up, and with a rotation effect. (Displacement animation, rotation animation, group animation)
3, click the Small black button, the other buttons disappear, the click of the Black button to become large and fade away. (scale animation, Alpha animation, group animation)
Blogger's words : Too much code, no demo here. The article concludes with code.

4.5.2: Imitation nail Menu effect

Effect Demo:

Looks pretty flashy, in fact, the implementation is very simple, is the displacement animation + zoom animation.

4.5.3: Likes fireworks effect animation

Effect Demo:


In fact, only the zoom animation used by the button becomes larger. The fireworks effect uses a rather special animation – particle animation.
A particle system typically consists of two parts:
1, Caemittercell: Can be seen as a prototype of a single particle (for example, a single puff in a group of smoke). When emitting a particle, uikit creates a random particle based on the emission particles and definitions. This prototype includes properties to control the particle's picture, color, direction, motion, scale, and life cycle.
2, Caemitterlayer: The main control source location, size, emission mode, the shape of the source and so on.
The properties of the above two classes are still relatively many, here is not detailed. Everyone can Google a bit, learn more about it.

V. Summary

Any complex animation is actually made by a simple animation, as long as we are good at decomposition and assembly, we can achieve satisfactory results. Animation is not so difficult.

Six

Github:https://github.com/yixiangboy/iosanimationdemo

If you still have some use for you, give it to a star. Your support is my motivation to continue.

iOS Animation encyclopedia