Uiviewanimation animation and catransition Animation

Catransition

CatransitionIs an objective-C wrapper for creating view transitions. as of 3.1.2, there are 11 types of transitions. 4 of them are SDK-compatible, but are the most boring ones. the following shows all 11 types of transition
From picture "A" to "B" at 40%. The subtypes, if any, is "fromleft ".

Camerairis	Cube	Fade (kcatransitionfade)	Movein (kcatransitionmovein)
Oglflip	Pagecurl	Pageuncurl	Push (kcatransitionpush)
Reveal (kcatransitionreveal)	Rippleeffect	Suckeffect

Subtype and filtermain article: cafilter

Specified transitions have are further divided into several discrete subtypes. They often control the movement direction of the animation.

Some transitions accept addition arguments through the filter property, for example, you can set the location of suckeffect using

...CAFilter* filter = [CAFilter filterWithName:@"suckEffect"];[filter setValue:[NSValue valueWithCGPoint:CGPointMake(160, 240)] forKey:@"inputPosition"];transition.filter = filter;...

Transition	Subtypes	Accepted parameters
Movein Push Reveal	Fromleft, Fromright, frombottom, fromtop	-
Pagecurl, pageuncurl	Fromleft, fromright, fromtop,Frombottom	Float inputcolor [];
Cube Alignedcube	Fromleft, Fromright, fromtop, frombottom	Float inputamount;(Perspective)
Flip Alignedflip Oglflip	Fromleft, Fromright, fromtop, frombottom	Float inputamount;
Camerairis	-	Cgpoint inputposition;
Rippleeffect	-	-
Rotate	90cw, 90ccw, 180cw, and 180ccw	-
Suckeffect	-	Cgpoint inputposition;

Availability

The following shows the availability of different catransitions starting from 2.0

Catransition	Availability
Fade Movein Push Reveal	(Public API) 2.0-
Flip Alignedflip Oglflip	2.0-
Cube Alignedcube	2.0-
Pagecurl Pageuncurl	2.0-
Rippleeffect	2.0-
Suckeffect	2.0-
Camerairis Camerairishollowopen Camerairishollowclose	2.0-
Rotate	4.0-
Speweffect Genieeffect Ungenieeffect Twist Swirl Charminultra Reflection Zoomyin Zoomyout Mapcurl Mapuncurl Oglapplicationsuspend Camerairishollow	2.0-2.2

References

• Official reference: catransition
• Header: http://github.com/kennytm/iphone-private-frameworks/blob/master/QuartzCore/CATransition2.h

 

Uiviewanimation animation and catransition animation of core Animation

1. Use the uiview function to implement:

// Uiviewanimationtransitionflipfromleft, left
// Uiviewanimationtransitionflipfromright, turn to the right
// Uiviewanimationtransitioncurlup, flip up
// Uiviewanimationtransitioncurldown, flip down

 

[Uiview beginanimations: @ "animationid" context: Nil];
[Uiview setanimationduration: 0.5f]; // animation duration
[Uiview setanimationcurve: uiviewanimationcurveeaseinout];
[Uiview setanimationtransition: uiviewanimationtransitionflipfromleft forview: Self. View cache: Yes]; // Add a transition effect to the view
// Write your code here.
[Uiview commitanimations]; // submit an animation

 

2. Use the catransition object to implement:

Catransition is relatively powerful. Generally, you can use catransition to simulate the uiview animation.

/* Transition effect
Fade // cross fade transition (transition direction not supported)
Push // New View releases old view
Movein // move the new view to the old view
Reveal // remove the old view to display the new view below
Cube // cube tumble Effect
Oglflip // top, bottom, left, and right flip
Suckeffect // contraction effect, such as a cloth being drawn (transition direction not supported)
Rippleeffect // drip effect (transition direction not supported)
Pagecurl // page up
Pageuncurl // page flip
Camerairishollowopen // camera lens opening effect (transition direction not supported)
Camerairishollowclose // camera lens close effect (transition direction not supported)
*/

 

/* Transition direction
Fromright;
Fromleft;
Fromtop;
Frombottom;
*/
Catransition * animation = [catransition animation];
Animation. Delegate = self;
Animation. Duration = 0.5f; // animation duration
Animation. timingfunction = uiviewanimationcurveeaseinout;
Animation. fillmode = kcafillmodeforwards;
Animation. type = @ "cube"; // excessive Effect
Animation. Subtype = @ "formleft"; // transition direction
Animation. startprogress = 0.0 // animation start point (percentage in the overall animation)
Animation. endprogress = 1.0; // animation stop end point (percentage in the overall animation)
Animation. removedoncompletion = no;
[Self. View. layer addanimation: animation forkey: @ "Animation"];

 

From: http://www.cnblogs.com/project/archive/2011/09/27/2193556.html

 

There are two main ways to achieve beautiful iPhone animation effects:

One is at the uiview level,

One is to use catransition for lower-level control,

The first is uiview. The uiview method may also be encapsulated by catransition on the lower layer. It can only be used for some simple and common effects. Here, we will write a common sample code, for your reference.

CPP Code

[Uiview beginanimations: @ "curl" context: Nil]; // starts the animation.

[Uiview setanimationduration: 0.75];

[Uiview setanimationdelegate: Self];

[Uiview setanimationtransition: uiviewanimationtransitioncurlup forview: myview cache: Yes];

[Myview removefromsuperview];

[Uiview commitanimations];

The second method is relatively complicated, but if you want to control it better, use this method,

The following is an example of the basic usage:

CPP Code

Catransition * animation = [catransition animation];

[Animation setduration: 1.25f];

[Animation settimingfunction: [camediatimingfunction functionwithname: kcamediatimingfunctioneasein];

[Animation settype: kcatransitionreveal];

[Animation setsubtype: kcatransitionfrombottom];

[Self. View. layer addanimation: animation forkey: @ "reveal"];

The settype and setsubtype combinations are used here, which is relatively safe, because their parameters are defined in the official API. Their parameter descriptions can be referred to below:

[Animation settype: @ "suckeffect"];

Suckeffect here is the name of the effect. The following effects can be used:

CPP Code

Pagecurl page up

Pageuncurl flip down one page

Rippleeffect dripping Effect

Suckeffect contraction effect, such as a piece of cloth being extracted

Cube Effect

Oglflip flip up and down

 

 

 

Differences between cabasicanimation and uiview animation in iPhone [conversion]

Uiview Animation:

1. [Uiview beginanimations: @ "zoom out" context: Nil];
2. [Uiview setanimationduration: 1.f];
3. [Uiview setanimationcurve: uiviewanimationcurveeaseout];
4. Cover. Transform = cgaffinetransformmakescale (9.25, 7.05 );
5. Cover. Center = cgpointmake (430,512 );
6. [Uiview commitanimations]

Uiview animation is applied to a view.

About cabasicanimation Animation:

1. -(Caanimation *) animationmove :( cgpoint) rootcenter
2. {
3. Cabasicanimation * animationmove
4. = [Cabasicanimation animationwithkeypath: @ "position"];
5. Animationmove. Duration = 1;
6. Animationmove. autoreverses = no;
7. // Animationmove. Delegate = self;
8. Animationmove. removedoncompletion = no;
9. Animationmove. fillmode = kcafillmodeforwards;
10. Animationmove. fromvalue = [nsvalue valuewithcgpoint: Self. oldcovercenter];
11. Animationmove. tovalue = [nsvalue valuewithcgpoint: rootcenter];
12.  
13. Return animationmove;
14. }

Cabasicanimation animation is applied to a layer.

Note:
1. When you place an image on a view layer to zoom in, if you use uiview, the image will not be distorted or flickering, however, cabasicanimation may cause serious distortion and flicker, and the effect may be poor.
2. It is easy to add an animation. You only need to put the animation together. Take a look at this effect: one book moves to the center of the screen, and the screen is enlarged to open the cover.

1. [Imagelayer addanimation: [self animationopen] forkey: @ "open"];
2. [Uiview beginanimations: @ "zoom out" context: Nil];
3. [Uiview setanimationduration: 1.f];
4. [Uiview setanimationcurve: uiviewanimationcurveeaseout];
5. Cover. Transform = cgaffinetransformmakescale (5.5, 5.5 );
6. Cover. Center = cgpointmake (629,384 );
7. [Uiview commitanimations];
8.  
9. -(Caanimation *) animationopen
10. {
11. Cabasicanimation * animationopen
12. = [Cabasicanimation animationwithkeypath: @ "transform. Rotation. Y"];
13. Animationopen. Duration = 1;
14. Animationopen. autoreverses = no;
15. Animationopen. Delegate = self; // then execute the content that truly opens the book
16. Animationopen. removedoncompletion = no;
17. Animationopen. fillmode = kcafillmodeforwards;
18. Animationopen. fromvalue = [nsnumber numberwithfloat:-m_pi/5];
19. Animation open. tovalue = [nsnumber numberwithfloat:-m_pi/1.5];
20.  
21. Return animationopen;
22. }

[Uiview beginanimations: @ "suck" context: NULL];

[Uiview setanimationtransition: 103 forview: Self. View cache: Yes];

[Uiview setanimationduration: 0.5f];

If (self. interfaceorientation = uiinterfaceorientationportrait | self. interfaceorientation = uiinterfaceorientationportraitupsidedown)
{

[Uiview setanimationposition: cgpointmake (44, 42)];

} Else {

[Uiview setanimationposition: cgpointmake (320, 42)];

}

[Uiview commitanimations];