iOS development--animation programming OC Chapter & (V) Animation Group
Last Update:2015-06-04
Source: Internet
Author: User
<span id="Label3"></p><p><p><strong>One: Group Animation Simple Description</strong></p></p><p style="margin-left: 30px;"><p style="margin-left: 30px;">caanimation, You can save a group of animated objects, and after the Caanimationgroup object is added to the layer, all the animated objects in the group can run concurrently simultaneously</p></p><p style="margin-left: 30px;"><p style="margin-left: 30px;">Attribute Parsing:</p></p><p style="margin-left: 60px;"><p style="margin-left: 60px;">Animations: a nsarray used to hold a set of animated objects</p></p><p style="margin-left: 60px;"><p style="margin-left: 60px;">By default, a set of animated objects runs concurrently, or you can change the start time of an animation by setting the BeginTime property of the animated object</p></p><p><p><strong>Two: Grouping Animation code example</strong></p></p><p><p><strong>Code:</strong></p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre><span style="color: #008080;">1<span style="color: #0000ff;">#import<span style="color: #800000;">"<span style="color: #800000;">YYViewController.h<span style="color: #800000;">"<span style="color: #008080;">2<span style="color: #008080;">3<span style="color: #0000ff;">@interface<span style="color: #000000;">Yyviewcontroller ()<span style="color: #008080;">4 @property (weak, Nonatomic) iboutlet UIView *<span style="color: #000000;">iconview;<span style="color: #008080;">5<span style="color: #008080;">6<span style="color: #0000ff;">@end<span style="color: #008080;">7<span style="color: #008080;">8<span style="color: #0000ff;">@implementation<span style="color: #000000;">Njviewcontroller<span style="color: #008080;">9<span style="color: #008080;">10-(<span style="color: #0000ff;">Void) touchesbegan: (nsset *) touches withevent: (uievent *)<span style="color: #0000ff;">Event<span style="color: #008080;">11<span style="color: #000000;">{<span style="color: #008080;">12<span style="color: #008080;">13<span style="color: #008000;">//<span style="color: #008000;">Panning Animations<span style="color: #008080;">Cabasicanimation *A1 =<span style="color: #000000;">[cabasicanimation animation];<span style="color: #008080;">A1.keypath =<span style="color: #800000;">@"<span style="color: #800000;">Transform.translation.y<span style="color: #800000;">"<span style="color: #000000;">;<span style="color: #008080;">A1.tovalue = @ (<span style="color: #800080;">100<span style="color: #000000;">);<span style="color: #008080;">17<span style="color: #008000;">//<span style="color: #008000;">Zoom Animation<span style="color: #008080;">Cabasicanimation *A2 =<span style="color: #000000;">[cabasicanimation animation];<span style="color: #008080;">A2.keypath =<span style="color: #800000;">@"<span style="color: #800000;">Transform.scale<span style="color: #800000;">"<span style="color: #000000;">;<span style="color: #008080;">A2.tovalue = @ (<span style="color: #800080;">0.0<span style="color: #000000;">);<span style="color: #008080;">21st<span style="color: #008000;">//<span style="color: #008000;">Rotate animation<span style="color: #008080;">Cabasicanimation *A3 =<span style="color: #000000;">[cabasicanimation animation];<span style="color: #008080;">A3.keypath =<span style="color: #800000;">@"<span style="color: #800000;">Transform.rotation<span style="color: #800000;">"<span style="color: #000000;">;<span style="color: #008080;">A3.tovalue =<span style="color: #000000;">@ (m_pi_2);<span style="color: #008080;">25<span style="color: #008080;">26<span style="color: #008000;">//<span style="color: #008000;">Group Animations<span style="color: #008080;">Caanimationgroup *groupanima =<span style="color: #000000;">[caanimationgroup animation];<span style="color: #008080;">28<span style="color: #008080;">Groupanima.animations =<span style="color: #000000;"><span style="color: #000000;"> @[a1, a2, a3]; <span style="color: #008080;">30 <span style="color: #008080;">31 <span style="color: #008000;">//<span style=" Color: #008000; "> Set the group animation time <span style="color: #008080;">32 groupanima.duration = <span style="color: #800080; >2<span style=" color: #000000; ">; <span style="color: #008080;">33 groupanima.fillmode =<span style="color: #000000;"> Kcafillmodeforwards;<span style="color: #008080;">34 groupanima.removedoncompletion =<span style="color: #000000;"> No;<span style="color: #008080;"> <span style="color: #008080;">36 <span style="color: #000000;"> [self.iconView.layer Addanimation:groupanima forkey:nil]; <span style="color: #008080;">37 <span style="color: #000000;">}<span style="color: #008080;">38 <span style=" Color: #008080; ">39 <span style="color: #0000ff;"> @end </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p><span>Description: Pan-rotate-zoom executes as a set of Animations.</span></p></p><p><p>Execution Effect:</p></p><p style="margin-left: 30px;"><p style="margin-left: 30px;"></p></p><p style="margin-left: 30px;"><p style="margin-left: 30px;"></p></p><pre><span style="color: #008080;"><span style="color: #008080;">1</span></span> <span style="color: #008000;"><span style="color: #008000;">/*</span></span><span style="color: #008080;"><span style="color: #008080;">2</span></span> <span style="color: #008000;"><span style="color: #008000;">This walkthrough uses custom views to trigger the animation by gesture recognition</span></span><span style="color: #008080;"><span style="color: #008080;">3</span></span> <span style="color: #008080;"><span style="color: #008080;">4</span></span> <span style="color: #008000;"><span style="color: #008000;">1. Specify a point translation animation</span></span><span style="color: #008080;"><span style="color: #008080;">5</span></span> <span style="color: #008000;"><span style="color: #008000;">2. Path panning animation</span></span><span style="color: #008080;"><span style="color: #008080;">6</span></span> <span style="color: #008000;"><span style="color: #008000;">3. Bézier curve path animation</span></span><span style="color: #008080;"><span style="color: #008080;">7</span></span> <span style="color: #008000;"><span style="color: #008000;">4. Shaking Animations</span></span><span style="color: #008080;"><span style="color: #008080;">8</span></span> <span style="color: #008000;"><span style="color: #008000;">*/</span></span><span style="color: #008080;"><span style="color: #008080;">9</span></span>- (<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span><span style="color: #000000;"><span style="color: #000000;">) Viewdidload</span></span><span style="color: #008080;"><span style="color: #008080;">Ten</span></span> <span style="color: #000000;"><span style="color: #000000;">{</span></span><span style="color: #008080;"><span style="color: #008080;"></span> one</span> <span style="color: #000000;"><span style="color: #000000;">[super viewdidload];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> a</span> <span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">instantiate an animated view</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>Animationview *view = [[animationview Alloc]initwithframe:cgrectmake (<span style="color: #800080;"><span style="color: #800080;"></span> -</span>,<span style="color: #800080;"><span style="color: #800080;"></span> -</span>,<span style="color: #800080;"><span style="color: #800080;"></span> -</span>,<span style="color: #800080;"><span style="color: #800080;"></span> -</span><span style="color: #000000;"><span style="color: #000000;">)];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #000000;"><span style="color: #000000;">[self.view addsubview:view];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>Self.myview =<span style="color: #000000;"><span style="color: #000000;">view;</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">add an image to MyView</span></span><span style="color: #008080;"><span style="color: #008080;"></span> +</span>UIImage *image = [UIImage imagenamed:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">Avatar 1.png</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>Uiimageview *imageview =<span style="color: #000000;"><span style="color: #000000;">[[uiimageview alloc]initwithframe:view.bounds];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> +</span> <span style="color: #000000;"><span style="color: #000000;">[imageView setimage:image];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> a</span> <span style="color: #000000;"><span style="color: #000000;">[view addsubview:imageview];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> at</span> <span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Add a button to MyView</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>UIButton *button =<span style="color: #000000;"><span style="color: #000000;">[UIButton buttonwithtype:uibuttontyperoundedrect];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>[button Setframe:cgrectmake (<span style="color: #800080;"><span style="color: #800080;">Ten</span></span>,<span style="color: #800080;"><span style="color: #800080;"></span> -</span>,<span style="color: #800080;"><span style="color: #800080;"></span> the</span>,<span style="color: #800080;"><span style="color: #800080;"></span> +</span><span style="color: #000000;"><span style="color: #000000;">)];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>[button settitle:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">Hello</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">forstate:uicontrolstatenormal];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #000000;"><span style="color: #000000;">[view addsubview:button];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> in</span> <span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Gesture Recognition Monitoring</span></span><span style="color: #008080;"><span style="color: #008080;"></span> to</span>UITapGestureRecognizer *tap =<span style="color: #000000;"><span style="color: #000000;">[[uitapgesturerecognizer alloc]initwithtarget:self action: @selector (tapaction:)];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> +</span> <span style="color: #000000;"><span style="color: #000000;">[self.view addgesturerecognizer:tap];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">long-press gesture Monitoring</span></span><span style="color: #008080;"><span style="color: #008080;"></span> *</span>Uilongpressgesturerecognizer *longpress =<span style="color: #000000;"><span style="color: #000000;">[[uilongpressgesturerecognizer alloc]initwithtarget:self action: @selector (longtapaction:)];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> $</span> <span style="color: #000000;"><span style="color: #000000;">[self.myview addgesturerecognizer:longpress];</span></span><span style="color: #008080;"><span style="color: #008080;">Panax Notoginseng</span></span> <span style="color: #000000;"><span style="color: #000000;">}</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #0000ff;"><span style="color: #0000ff;">#pragma</span></span>Mark-animation Agent Method<span style="color: #008080;"><span style="color: #008080;"></span> +</span>- (<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span>) Animationdidstop: (caanimation *<span style="color: #000000;"><span style="color: #000000;">) anim finished: (BOOL) flag</span></span><span style="color: #008080;"><span style="color: #008080;"></span> a</span> <span style="color: #000000;"><span style="color: #000000;">{</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Remove Animation type</span></span><span style="color: #008080;"><span style="color: #008080;"></span> +</span>NSString *type = [anim valueforkey:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">Animationtype</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008080;"><span style="color: #008080;"></span> $</span> <span style="color: #0000ff;"><span style="color: #0000ff;">if</span></span>([type isequaltostring:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">Translationto</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">]) {</span></span><span style="color: #008080;"><span style="color: #008080;"></span> $</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Remove the target point and set the Self.center</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>Self.myView.center = [[anim valueforkey:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">TargetPoint</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">]cgpointvalue];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #000000;"><span style="color: #000000;"> }</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #000000;"><span style="color: #000000;">}</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008080;"><span style="color: #008080;">Wuyi</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">#pragma</span></span>Mark-gesture Recognition Monitoring method<span style="color: #008080;"><span style="color: #008080;"></span> the</span>- (<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span>) longtapaction: (uilongpressgesturerecognizer *<span style="color: #000000;"><span style="color: #000000;">) Recognizer</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #000000;"><span style="color: #000000;">{</span></span><span style="color: #008080;"><span style="color: #008080;"></span> wu</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">[(animationview *) Recognizer.view shakeanimation];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>Cakeyframeanimation *anim =<span style="color: #000000;"><span style="color: #000000;">[animationview shakeanimation];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> about</span> <span style="color: #008080;"><span style="color: #008080;"></span> $</span> <span style="color: #000000;"><span style="color: #000000;">[self.myView.layer Addanimation:anim forkey:nil];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #000000;"><span style="color: #000000;">}</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008080;"><span style="color: #008080;"></span> -</span>- (<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span>) tapaction: (uitapgesturerecognizer *<span style="color: #000000;"><span style="color: #000000;">) Recognizer</span></span><span style="color: #008080;"><span style="color: #008080;"></span> a</span> <span style="color: #000000;"><span style="color: #000000;">{</span></span><span style="color: #008080;"><span style="color: #008080;"></span> +</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">touch points to take out gestures</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span>Cgpoint location =<span style="color: #000000;"><span style="color: #000000;">[recognizer locationInView:self.view];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008080;"><span style="color: #008080;"></span> $</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">1. Instantiating animation groups</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span>Caanimationgroup *group =<span style="color: #000000;"><span style="color: #000000;">[[caanimationgroup alloc]init];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008080;"><span style="color: #008080;"></span> the</span>Cftimeinterval Duration =<span style="color: #800080;"><span style="color: #800080;">2.0</span></span><span style="color: #000000;"><span style="color: #000000;">;</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">2. Define animations in an animation group</span></span><span style="color: #008080;"><span style="color: #008080;"></span> in</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">cakeyframeanimation *anim1 = [animationview moverectwithduration:duration from:self.myView.center to:location];< /c8></span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span>Cakeyframeanimation *anim1 = [animationview movewithduration:duration from:self.myView.center to:location Controlpointcount:<span style="color: #800080;"><span style="color: #800080;">4</span></span><span style="color: #000000;"><span style="color: #000000;">];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span>Cabasicanimation *anim2 = [animationview rotationwithduration:duration from:<span style="color: #800080;"><span style="color: #800080;">0.0</span></span>To:<span style="color: #800080;"><span style="color: #800080;">2</span></span>*<span style="color: #000000;"><span style="color: #000000;">m_pi];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> about</span> <span style="color: #008080;"><span style="color: #008080;"></span> the</span>Cabasicanimation *scale = [animationview scalewithduration:duration from:<span style="color: #800080;"><span style="color: #800080;">2.0</span></span>To:<span style="color: #800080;"><span style="color: #800080;">0.5</span></span><span style="color: #000000;"><span style="color: #000000;">];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span>Cabasicanimation *opacity = [animationview opacitywithduration:duration from:<span style="color: #800080;"><span style="color: #800080;">0.1</span></span>To:<span style="color: #800080;"><span style="color: #800080;">1.0</span></span><span style="color: #000000;"><span style="color: #000000;">];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008080;"><span style="color: #008080;"></span> +</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">3. Adding a defined animation to an animation group</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #000000;"><span style="color: #000000;">[group setanimations:@[anim1, anim2, scale, opacity]];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008080;"><span style="color: #008080;">Bayi</span></span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">defines the length of time the animation group executes</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #000000;"><span style="color: #000000;">[group setduration:duration];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">5) Set the key value record the target position so that after the animation is over, fix the position</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">not all animation methods need to set the target point</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span>[group setValue:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">Translationto</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span>Forkey:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">Animationtype</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span>[group Setvalue:[nsvalue valuewithcgpoint:location] forkey:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">TargetPoint</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #000000;"><span style="color: #000000;">[group setdelegate:self];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">4. Adding an animation group to a layer of a view</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #000000;"><span style="color: #000000;">[self.myView.layer addanimation:group forkey:nil];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span>}</pre><p><p></p></p><p><p>iOS development--animation programming OC Chapter & (V) Animation Group</p></p></span>
