iOS animation (3) Keyframe animation

The time system in the Keyframe animation, the model tree and the render tree are consistent with the underlying animation, which mainly describes the use of key-frame animations

Cakeyframeanimation

- (void) viewdidload{[Super Viewdidload]; Calayer*layer =[Calayer layer]; Layer.bounds= CGRectMake (0,0, -, -); Layer.position= Cgpointmake ( -, -); Layer.cornerradius= -; Layer.maskstobounds=YES; Layer.contents= (ID) [UIImage imagenamed:@"5.png"].    Cgimage; [Self.view.layer Addsublayer:layer];}- (void) touchesended: (Nsset *) touches withevent: (Uievent *)Event{Calayer*layer =[Self.view.layer.sublayers Lastobject]; Cakeyframeanimation*animation = [Cakeyframeanimation animationwithkeypath:@"position"]; //set KeyFrames//Unlike base animations, key-frame animations must indicate an animated initial valueNsvalue *value1 =[Nsvalue valueWithCGPoint:layer.position]; Nsvalue*value2 = [Nsvalue valuewithcgpoint:cgpointmake ( -, -)]; Nsvalue*value3 = [Nsvalue valuewithcgpoint:cgpointmake ( -, -)]; Animation.duration=2; Animation.values=@[value1,value2,value3]; Animation.autoreverses=YES; [Layer addanimation:animation Forkey:nil];}

This is the first way to define a keyframe animation, which is to set several key nodes and then coreanimation automatically to the animation in the key node

Another way of writing keyframes is to set the path of the animation, and then the layer can be moved around the painted path, which can easily achieve the animation effect of the curve motion

- (void) viewdidload{[Super Viewdidload]; Calayer*layer =[Calayer layer]; Layer.bounds= CGRectMake (0,0, -, -); Layer.position= Cgpointmake ( -, -); Layer.cornerradius= -; Layer.maskstobounds=YES; Layer.contents= (ID) [UIImage imagenamed:@"5.png"].    Cgimage; [Self.view.layer Addsublayer:layer];}- (void) touchesended: (Nsset *) touches withevent: (Uievent *)Event{Calayer*layer =[Self.view.layer.sublayers Lastobject]; Cakeyframeanimation*animation = [Cakeyframeanimation animationwithkeypath:@"position"]; //set KeyFrames//Unlike base animations, key-frame animations must indicate an animated initial valueCgpathref Path =cgpathcreatemutable (); Cgpathmovetopoint (Path, NULL, layer.position.x, LAYER.POSITION.Y);//move to start pointCgpathaddcurvetopoint (Path, NULL, the,280, - -, -, -, -);//draw a Bezier curve of two timescgpathrelease (path); Animation.path=path; Animation.duration=2; Animation.autoreverses=YES; [Layer addanimation:animation Forkey:nil];}

UIView Encapsulating Keyframe Animations

- (void) viewdidload{[Super Viewdidload]; Uiimageview*imageview = [[Uiimageview alloc] Initwithframe:cgrectmake ( -, -, -, -)]; Imageview.image= [UIImage imagenamed:@"5.png"]; [Self.view Addsubview:imageview];}- (void) touchesended: (Nsset *) touches withevent: (Uievent *)Event{Uiimageview*image =[Self.view.subviews Lastobject]; [UIView animatekeyframeswithduration:5Delay0Options:uiviewkeyframeanimationoptionrepeat| Uiviewkeyframeanimationoptionautoreverse animations:^{        //Add keyframes//The first keyframe is the start position without adding//Second keyframe: 50% time from 0 seconds, i.e. 5.0*0.5=2.5 seconds[UIView Addkeyframewithrelativestarttime:0Relativeduration:0.5animations:^{Image.center= Cgpointmake ( -, -);                }]; //The third keyframe, starting from 0.5*5.0 seconds, lasts 5.0*0.25=1.25 seconds[UIView Addkeyframewithrelativestarttime:0.5Relativeduration:0.25animations:^{Image.center= Cgpointmake ( Max, -);                }]; //Fourth Keyframe: Starting from 0.75*5.0 seconds, holding the required 5.0*0.25=1.25 seconds[UIView Addkeyframewithrelativestarttime:0.75Relativeduration:0.25animations:^{Image.center= Cgpointmake ( Max, -);    }];    } Completion:nil]; }

For Keyframe animation There are also some animation parameters set Options,uiviewkeyframeanimationoptions type, and the above basic animation parameter settings some differences, key frame animation settings parameters are divided into two categories, can be combined with:

1. General Animation property settings (multiple settings can be selected at the same time)

Uiviewanimationoptionlayoutsubviews: Ensure that the child view follows the motion during the animation.

Uiviewanimationoptionallowuserinteraction: Allows user interaction during animation.

Uiviewanimationoptionbeginfromcurrentstate: All views start running from the current state.

Uiviewanimationoptionrepeat: Run the animation repeatedly.

Uiviewanimationoptionautoreverse: The animation is still animated back to the initial point after it runs to the end point.

Uiviewanimationoptionoverrideinheritedduration: Ignores nested animation time settings.
Uiviewanimationoptionoverrideinheritedoptions: Does not inherit parent animation settings or animation types.

2. Animation mode settings (corresponding to the previous Keyframe animation mode one by one, you can choose one to set)

Uiviewkeyframeanimationoptioncalculationmodelinear: continuous operation mode.

Uiviewkeyframeanimationoptioncalculationmodediscrete: discrete operation mode.

uiviewkeyframeanimationoptioncalculationmodepaced: Uniform execution operation mode.

Uiviewkeyframeanimationoptioncalculationmodecubic: smooth operation mode.

uiviewkeyframeanimationoptioncalculationmodecubicpaced: Smooth uniform operation mode.

Note: There are two forms of keyframe animation, as shown above, which shows the property value Keyframe animation, the path Keyframe animation is currently uiview not supported.

iOS animation (3) Keyframe animation