iOS development--animation programming oc & (i) Basic Animation

Last Update:2015-06-04 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Basic animationsfirst, Brief IntroductionCore Animation, The Chinese translation is a central animation, it is a very powerful set of animation processing api, using it can make very beautiful animation effect, and often do more with less. In other words, very powerful functionality can be achieved with a small amount of code.Core animation is cross-platform and can be used on Mac OS X and iOS Platforms.The animation execution of Core animation is performed in the background and does not block the main thread. Without blocking the main thread, it can be understood that you can still tap (the Button) while performing the Animation.It is important to note that the Core animation is directly acting on the calayer, not UIVIEW.second, the use of Core animation steps1. Use it to first add quartzcore.framework frame and introduce the main header file <QuartzCore/QuartzCore.h> (iOS7 not required)2. Initialize a Caanimation object and set some animation-related properties3. Add the Caanimation object to Calayer by calling Calayer's Addanimation:forkey: method to start the animation4. You can stop the animation in Calayer by calling Calayer's Removeanimationforkey: methodthird, caanimationInheritance structure diagram of a class　　Caanimation is the parent class for all animation classes, but it cannot be used directly, and its subclasses should be Used.Common Properties Are:Duration: duration of animationRepeatcount: number of repetitions of an animationTimingfunction: controlling the rhythm of animation operationDescription: (1) only 4 subcategories of animated classes are available: cabasicanimation, cakeyframeanimation, catransition, caanimationgroup(2) Camediatiming is a protocol (protocol).Capropertyanimation is a subclass of caanimation, but cannot be used directly, to create an animated object, you should use its two subclasses: cabasicanimation and cakeyframeanimationIt has a nsstring type of KeyPath property, you can specify that a property of Calayer is named keypath, and the value of this property of Calayer is modified to achieve the corresponding animation Effect. For example, specifying @ "position" for KeyPath will modify the value of the position property of the Calayer to achieve a panning animation effectIv. Additional InformationThe parent class of all animated objects, which controls the duration and speed of the animation, is an abstract class that cannot be used directly and should use its specific subclassesAttribute Resolution: (red represents a property from the Camediatiming Protocol)Duration: Duration of animationrepeatcount: Number of repetitions of an animationrepeatduration: Repetition time of animationremovedoncompletion: The default is yes, which is removed from the layer after the animation has finished executing, and the drawing reverts to the state before the animation was Executed. If you want the layer to remain displayed after the animation has been executed, set it to no, but also set Fillmode to KcafillmodeforwardsFillmode: Determines the behavior of the current object during a non-active time period. for example, before the animation starts, the animation endsbeginTime: Can be used to set the animation delay execution time, If you want to delay 2s, set to Cacurrentmediatime () +2,cacurrentmediatime () is the current time of the layertimingfunction: Speed control function to control the rhythm of animation operationdelegate: Animation agent<pre>1 /**2 Customize a view, listen for gesture clicks, animate when gestures touch the screen3 4 1. Zooming5 2. Rotate6 7 to determine the principle of animation suspension and Continuation:8 9 depending on whether the animation is an animation (particle Effect) or a destructive animation (e.g., Big strokes, throwing knives, bullets, etc.)Ten one If the animation is dotted, you don't need to pause when you lose focus a if it's a destructive animation, you need to pause when you lose focus - - 3. In this example, exit the background pause animation, go back to the foreground, continue the animation the - Basic Animation Simple Summary - 1. Animate calayer by modifying the animated properties of the - 2. Fromvalue and Tovalue + 3. Steps used by the Animation: - 1> Instantiation + 2> Defining Properties a 3> Adding to a layer at - Note the point: - 1> Looping animations, If you need to continue after the focus is resumed, be sure to set the Removedoncompletion property to No - 2> for panning animations, you need to adjust the position of the object in the agent method at the end of the animation - 3> If you want to do the wireless cycle animation, you can set the following [anim setrepeatcount:huge_valf]; - 4> about pausing and continuing animations, you can refer to the code in */ - to- (void) Viewdidload + { - [super viewdidload]; the *UIView *myview = [[UIView Alloc]initwithframe:cgrectmake ( -, -, -, -)]; $ [myView Setbackgroundcolor:[uicolor redcolor];Panax Notoginseng [self.view addsubview:myview]; - theSelf.myview =myView; + } a the #pragmaMark-touch method +- (void) touchesbegan: (nsset *) touches withevent: (uievent *)Event - { $ //determine if the MyView has started spinning, and if it has already been rotated, stop $Caanimation *anim = [self.myView.layer animationforkey:@"Rotationanim"]; - if(anim) { - //Stop Animation the //[self.myView.layer removeallanimations]; - //If the animation is paused, continue, if it pauses in playbackWuyi //can be judged according to myView.layer.speed, speed = = 0, Pause the if(self.myView.layer.speed = =0.0) { - [self resumeanimation]; wu}Else { - [self pauseanimation]; about } $}Else { - [self rotationanimation]; - } - } a + #pragmaMark-animation Pause and resume the #pragmaMark Animation paused -- (void) PauseAnimation $ { the //1. Take out the current animation point in time, that is, the point of time to pause theCftimeinterval Pausetime =[self.myView.layer converttime:cacurrentmediatime () fromlayer:nil]; the //2. Set the time offset of the animation to specify the time offset to hold the animation at that point in time the [self.myView.layer settimeoffset:pausetime]; - in //3. Set the animation run speed to 0, the animation default speed is 1.0 the[self.myView.layer setspeed:0.0]; the } about the #pragmaMark Recovery Animation the- (void) Resumeanimation the { + //1. The time offset of the animation as the point in time when pausing -Cftimeinterval Pausetime =self.myView.layer.timeOffset; the //2. Calculate the exact start animation time according to the media time, and revise the time to pause the Animation.BayiCftimeinterval beginTime = Cacurrentmediatime ()-pausetime; the the //3. To clear the offset time by 0 -[self.myView.layer settimeoffset:0.0]; - //4. Set the start animation time for a layer the [self.myView.layer setbegintime:begintime]; the the[self.myView.layer setspeed:1.0]; the } - the #pragmaMark-animation method the #pragmaMark Rotate Animation the- (void) Rotationanimation94 { the //1. Instantiating basic animations the //rotate by default on Z axis theCabasicanimation *anim = [cabasicanimation animationwithkeypath:@"transform.rotation.z"];98 about[self.myView.layer Setanchorpoint:cgpointmake (0,0)]; - 101 //2. Set animation properties102 //Keep Spinning.103 //1) rotate for one week104[anim settovalue:@ (2*m_pi)]; the //2) nonstop rotation-animated Loop playback106 //Huge_valf is a very large floating point number, which specifies that this value can be considered an infinite loop of animation107 //maxfloat108 [anim setrepeatcount:huge_valf];109 the[anim setduration:0.5f];111 the //3) Delete When animation is complete113 //for the animated effect of looping, be sure to set removedoncompletion to no, otherwise you cannot resume the animation the [anim setremovedoncompletion:no]; the the //3. Adding animations117 //key can be arbitrarily specified to determine if the animation exists in the layer118[self.myView.layer Addanimation:anim forkey:@"Rotationanim"];119 } - 121 #pragmaMark Zoom Animation122- (void) Scaleanimation123 {124 //1. Instantiating basic animations theCabasicanimation *anim = [cabasicanimation animationwithkeypath:@"Transform.scale"];126 127 //2. Set animation properties - //Fromvalue & Tovalue129[anim setfromvalue:@ (1.0)]; the //shrink from the current size to half, then restore the initial size131[anim settovalue:@ (0.5)]; the //Auto-flip Animations133 [anim setautoreverses:yes];134 135 //Animation Duration136[anim setduration:0.5f];137 138 //3. Adding an animation to a layer139 [self.myView.layer Addanimation:anim forkey:nil]; $}</pre>iOS development--animation programming oc & (i) Basic Animation

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

iOS development--animation programming oc & (i) Basic Animation

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support