iOS Animation light Sinks

Transferred from: http://www.cocoachina.com/ios/20160311/15660.html

In iOS development, animating is one of the most enjoyable links for developers. A well-designed, sophisticated animation effect can give users a refreshing effect, attracting their eyes-this is very important for the app. We always pursue a more cool implementation, if careful enough, we are not difficult to find a good animation by step decomposition is essentially simply a simple animation implementation. This article on the personal collection of some animation related theories and practical knowledge to do a summary, the shortcomings do not take offense.

Theory UIview VS Uilayer

UIView is just the package above the Calyer, more accurately, UIView is a simple version of Calyer package, plus event handling of the collection class. Calayer is a class within the Quartzcore library and is the most basic drawing unit on iOS. Secondly, we know that the iOS platform Cocoa Touch is originated from the OS X platform Cocoa), on the basis of Cocoa to add a mobile phone device for gesture recognition, animation and other features, but from the bottom-up, Cocoa Touch and Cocoa share a set of underlying libraries, This includes quartcore.framework, but Quartcore.framework was designed for OS X in the first place, so some of these features are not suitable for mobile device development, such as the most important coordinate system. Therefore, it is not difficult for us to understand why uiview/nsview a layer of encapsulation on calayer.

Animations based on the UIView implementation

A simple block animation

UIView

Elastic animation

Keyframe animations (You can add more frames in the middle to make different articulation animations)

Calayer Animation

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: Control the animation display rhythm, the system provides five kinds of value selection, respectively is

• 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

Path: Execution path in keyframe animation

Type: Animation types for transition animations, with four transition animations provided by the system:

• Kcatransitionfade Gradient Effect

• Kcatransitionmovein Entry Coverage Effect

• Kcatransitionpush Launch effect

• Kcatransitionreveal revealing the effect of leaving

Subtype: Animation direction of transition animations

• Kcatransitionfromright from the right.

• Kcatransitionfromleft entry from the left

• Kcatransitionfromtop entry from the top of the

• Kcatransitionfrombottom entry from the bottom

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. Important attribute Fromvalue:keypath corresponds to the tovalue:keypath corresponding to the end value of the corresponding initial value.

• Basic animation (cabaseanimation) 0:1 1:0 realization of the expansion and unwinding of the drop-down shears

• Keyframe Animation (cakeyframeanimation) 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 attribute values: This is the Nsarray object above. The elements inside are called "keyframes" (keyframe). The animated object displays each keyframe in the values array in the specified time (duration) path: You can set a cgpathrefcgmutablepathref 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.

• Combo Animations:

• Transition animations (catransition) are mostly private APIs that cannot be used after the app is available. The private API offers many other very cool transitions, such as @ "cube", @ "Suckeffect", @ "Oglflip", @ "Rippleeffect", @ "Pagecurl", @ "Pageuncurl", @ " Camerairishollowopen ", @" Camerairishollowclose "and so on.

Particle animation

Transform animation

Transform is a very important attribute, it changes the view effect on the level of matrix transformation, completes the rotation, the deformation, the translation and so on operation. As it is modified, the frame of the view will also be changed. There are two data types used to represent transform, respectively, Cgaffinetransform and Catransform3d. The former acts on UIView, which is the transformation type of layer layer. Based on the latter, more powerful functions can be achieved. For the purpose of understanding how matrix transformations can be implemented, refer to this blog: Cgaffinetransform radiation transformation

Before you start using transform to implement your animations, let me introduce a few common functions:

Transform strictly not an animation, but a part of the action in the animation, I come up with it because it appears in the UIView animation and Calayer animation.

Some applications

Using the above Calayer base Animation code to implement the pull-down cutting head expansion and collection, but also to achieve the rotation of the clock pointer

The shaking effect of the input box when the error message is entered.

Loading animations can be implemented using Cashapelayer and cabasicanimation.

Level diagram for iOS rendered view:

More content can be found in the iOS development UI Chapter--ios animation (Core Animation) summary.

The fact that the animation is to rely on the design, you see my animation above the draw, but in fact, the same code can write very beautiful animation.

iOS Animation light Sinks