IOS Learning 04 Tom Cat Development
Last Update:2015-06-08
Source: Internet
Author: User
<span id="Label3"></p><p><p>iOS development, a simple tom cat developed, is as Follows:</p></p><p><p></p></p><p><p>1.1 had always felt this small game is good, very fun, now learning iOS only to find that the program is really simple, in fact, this is not a complete, there is no sound, and then to Complete.</p></p><p><p>1.2 Create the project, import the picture, save the PNG picture in the project images.xcassets, here only save 6 key picture, picture file directly pull in can, for example:</p></p><p><p></p></p><p><p>1.3 believe that most people have played this little game, in fact, this is an animation, and the animation is a number of pictures connected to play together, and finally looks like Animation.</p></p><p><p>1.4 Know the principle of animation, it is good to do, we will import the corresponding animation group picture, These are the pictures we now do not exist images.xcassets inside,</p></p><p><p>We are now all saved in the project supporting files inside, and the same as above directly to the picture culture to pull in, such as:</p></p><p><p></p></p><p><p>This animations folder inside is therefore the animation to use the picture, animations folder inside also corresponds many subfolders,</p></p><p><p>Each subfolder here has animations that should be manipulated by a key event on the interface, such as:</p></p><p><p></p></p><p><p>1.5 In the Angry folder has 81 pictures, the picture of this folder is attached to play together, is the Tom Cat fell down an animation, other folders the Same.</p></p><p><p>2.1 Project creation and after the picture is loaded, it begins to design the interface, the interface puts a uiimage, fills the screen, sets the image property, in the project to find a Tom cat began the Picture.</p></p><p><p>Then put 11 button buttons on the interface to do 11 animation events, put a transparent button on the head, and a transparent button under the belly, two transparent button on two feet, and a transparent button on the tail, Then each 6 See Animation button button to set the corresponding image property, transparent keys are not visible here, interface such AS.</p></p><p><p></p></p><p><p>3.1 The interface here does not have long settings, the interface design is completed, then the corresponding page 11 buttons to create 11 click events, and then create an interface UIImage properties, as Follows.</p></p><pre><span style="color: #0000ff;"><span style="color: #0000ff;">#import</span></span> <span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">ViewController.h</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">@interface</span></span><span style="color: #000000;"><span style="color: #000000;">Viewcontroller ()</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Nod Event</span></span>-<span style="color: #000000;"><span style="color: #000000;">(ibaction) kuockout;</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Point Belly Events</span></span>-<span style="color: #000000;"><span style="color: #000000;">(ibaction) stomach;</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Point left foot event</span></span>-<span style="color: #000000;"><span style="color: #000000;">(ibaction) footleft;</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Point right foot event</span></span>-<span style="color: #000000;"><span style="color: #000000;">(ibaction) footright;</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Dot Tail Event</span></span>-<span style="color: #000000;"><span style="color: #000000;">(ibaction) angry;</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Point Hyderabad Events</span></span>-<span style="color: #000000;"><span style="color: #000000;">(ibaction) cambal;</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Milk Drinking event</span></span>-<span style="color: #000000;"><span style="color: #000000;">(ibaction) drink;</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Dot Bird Event</span></span>-<span style="color: #000000;"><span style="color: #000000;">(ibaction) eat;</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">farting Events</span></span>-<span style="color: #000000;"><span style="color: #000000;">(ibaction) fart;</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span>-<span style="color: #000000;"><span style="color: #000000;">(ibaction) pie;</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Catch Child event</span></span>-<span style="color: #000000;"><span style="color: #000000;">(ibaction) csrotch;</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Interface Picture Properties</span></span>@property (weak, Nonatomic) Iboutlet Uiimageview *<span style="color: #000000;"><span style="color: #000000;">tom;</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">@end</span></span></pre><span class="cnblogs_code_collapse"><span class="cnblogs_code_collapse">View Code</span></span><p><p>3.2 then the corresponding event and the interface corresponding to the key link, these are done, we have to think about how to write the animation event code?</p></p><p><p>3.3 Because it is mentioned that each animation is composed of a set of pictures connected to play, so the first one is to find the corresponding group of pictures for each Event.</p></p><p><p>3.4 Then is to put this picture group into the screen uiimage, let him play, ok, of course, The idea is good, you can implement the code, here we can encapsulate a method to do animation playback, the method is as follows, there is implementation code and each line of code, so here is no longer said.</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: #008000;"><span style="color: #008000;">load Animation method, Two parameters, the first one will pass in the picture file name, the second number of incoming animated pictures</span></span><span style="color: #008080;"><span style="color: #008080;">2</span></span>-(<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span>) animationwithimgname: (nsstring *) imgname imgcount: (<span style="color: #0000ff;"><span style="color: #0000ff;">int</span></span><span style="color: #000000;"><span style="color: #000000;">) Imgcount</span></span><span style="color: #008080;"><span style="color: #008080;">3</span></span> <span style="color: #000000;"><span style="color: #000000;">{</span></span><span style="color: #008080;"><span style="color: #008080;">4</span></span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">determine if the animation has finished playing, not finished, not let the next animation play. </span></span><span style="color: #008080;"><span style="color: #008080;">5</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">if</span></span>(self.tom.isAnimating)<span style="color: #0000ff;"><span style="color: #0000ff;">return</span></span><span style="color: #000000;"><span style="color: #000000;">;</span></span><span style="color: #008080;"><span style="color: #008080;">6</span></span> <span style="color: #008080;"><span style="color: #008080;">7</span></span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">define dynamic arrays to save loaded animated pictures</span></span><span style="color: #008080;"><span style="color: #008080;">8</span></span>Nsmutablearray *animationimages=<span style="color: #000000;"><span style="color: #000000;">[nsmutablearray array];</span></span><span style="color: #008080;"><span style="color: #008080;">9</span></span> <span style="color: #008080;"><span style="color: #008080;">Ten</span></span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Loop the number of pictures of the animation you are currently playing, and then add all the pictures to the dynamic array. </span></span><span style="color: #008080;"><span style="color: #008080;"></span> one</span> <span style="color: #0000ff;"><span style="color: #0000ff;"></span> for</span>(<span style="color: #0000ff;"><span style="color: #0000ff;">int</span></span>I=<span style="color: #800080;"><span style="color: #800080;">0</span></span>; i<span style="color: #000000;">) {</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;">get the file name of the animation,%02d is the station 2 number, if only one digit, front plus 0,</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>NSString *name=[nsstring stringwithformat:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">%@_%02d</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">, imgname,i];</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;">get the full path of the animated picture</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>NSString *path=[[nsbundle mainbundle] pathforresource:name ofType:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">jpg</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: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">load the picture and pass the picture of the path of the motion picture into the IMG variable</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>UIImage *image=<span style="color: #000000;"><span style="color: #000000;">[UIImage imagewithcontentsoffile:path];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> +</span> <span style="color: #008080;"><span style="color: #008080;"></span> a</span> <span style="color: #000000;"><span style="color: #000000;">[animationimages addobject:image];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> at</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: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Add all the loaded images to the uiimag;</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>self.tom.animationimages=<span style="color: #000000;"><span style="color: #000000;">animationimages;</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;">Set the animation time,</span></span><span style="color: #008080;"><span style="color: #008080;"></span> in</span>Self.tom.animationduration=animationimages.count *<span style="color: #800080;"><span style="color: #800080;">0.1</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> to</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">let the animation run once and repeat the animation if it's not set here</span></span><span style="color: #008080;"><span style="color: #008080;"></span> +</span>Self.tom.animationrepeatcount=<span style="color: #800080;"><span style="color: #800080;">1</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: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">start the animation execution</span></span><span style="color: #008080;"><span style="color: #008080;"></span> *</span> <span style="color: #000000;"><span style="color: #000000;">[self.tom startanimating];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> $</span> <span style="color: #008080;"><span style="color: #008080;">Panax Notoginseng</span></span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">5. Empty The image, that is, the cache is emptied, and iOS will cache every animation you perform</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: #000000;"><span style="color: #000000;">[self.tom performselector: @selector (setanimationimages:) withobject:nil afterDelay:self.tom.animationDuration ];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> +</span> <span style="color: #008080;"><span style="color: #008080;"></span> a</span> <span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008080;"><span style="color: #008080;"></span> +</span>}</pre><span class="cnblogs_code_collapse"><span class="cnblogs_code_collapse">View Code</span></span><p><p>3.5 This method passed two parameters, the first one will pass in the picture file name, the second number of incoming animation picture, so we can put the interface of all the animation of the implementation of the thing is encapsulated in a method, for the key event is simple, as Follows.</p></p><pre><span style="color: #008080;"><span style="color: #008080;">1</span></span>-<span style="color: #000000;"><span style="color: #000000;">(ibaction) kuockout {</span></span><span style="color: #008080;"><span style="color: #008080;">2</span></span> <span style="color: #008080;"><span style="color: #008080;">3</span></span>[self animationwithimgname:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">Knockout</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span>Imgcount:<span style="color: #800080;"><span style="color: #800080;">Bayi</span></span><span style="color: #000000;"><span style="color: #000000;">];</span></span><span style="color: #008080;"><span style="color: #008080;">4</span></span> <span style="color: #000000;"><span style="color: #000000;">}</span></span><span style="color: #008080;"><span style="color: #008080;">5</span></span> <span style="color: #008080;"><span style="color: #008080;">6</span></span>-<span style="color: #000000;"><span style="color: #000000;">(ibaction) Stomach {</span></span><span style="color: #008080;"><span style="color: #008080;">7</span></span>[self animationwithimgname:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">Stomach</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span>Imgcount:<span style="color: #800080;"><span style="color: #800080;"></span> the</span><span style="color: #000000;"><span style="color: #000000;">];</span></span><span style="color: #008080;"><span style="color: #008080;">8</span></span> <span style="color: #000000;"><span style="color: #000000;">}</span></span><span style="color: #008080;"><span style="color: #008080;">9</span></span> <span style="color: #008080;"><span style="color: #008080;">Ten</span></span>-<span style="color: #000000;"><span style="color: #000000;">(ibaction) Footleft {</span></span><span style="color: #008080;"><span style="color: #008080;"></span> one</span> <span style="color: #008080;"><span style="color: #008080;"></span> a</span>[self animationwithimgname:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">Footleft</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span>Imgcount:<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> <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;">(ibaction) Footright {</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>[self animationwithimgname:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">Footright</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span>Imgcount:<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> <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: #000000;"><span style="color: #000000;">(ibaction) Angry {</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>[self animationwithimgname:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">Angry</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span>Imgcount:<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> <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> at</span> <span style="color: #008080;"><span style="color: #008080;"></span> -</span>-<span style="color: #000000;"><span style="color: #000000;">(ibaction) Cambal {</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008080;"><span style="color: #008080;"></span> -</span>[self animationwithimgname:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">Cymbal</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span>Imgcount:<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> <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> in</span>-<span style="color: #000000;"><span style="color: #000000;">(ibaction) Drink {</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008080;"><span style="color: #008080;"></span> to</span>[self animationwithimgname:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">Drink</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span>Imgcount:<span style="color: #800080;"><span style="color: #800080;">Bayi</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: #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: #000000;"><span style="color: #000000;">(ibaction) Eat {</span></span><span style="color: #008080;"><span style="color: #008080;"></span> *</span> <span style="color: #008080;"><span style="color: #008080;"></span> $</span>[self animationwithimgname:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">Eat</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span>Imgcount:<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;">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: #000000;"><span style="color: #000000;">(ibaction) Fart {</span></span><span style="color: #008080;"><span style="color: #008080;"></span> +</span> <span style="color: #008080;"><span style="color: #008080;"></span> a</span>[self animationwithimgname:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">fart</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span>Imgcount:<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;">}</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: #000000;"><span style="color: #000000;">(ibaction) Pie {</span></span><span style="color: #008080;"><span style="color: #008080;"></span> $</span> <span style="color: #008080;"><span style="color: #008080;"></span> $</span>[self animationwithimgname:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">Pie</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span>Imgcount:<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> <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: #000000;"><span style="color: #000000;">(ibaction) Csrotch {</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008080;"><span style="color: #008080;">Wuyi</span></span>[self animationwithimgname:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">Scratch</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span>Imgcount:<span style="color: #800080;"><span style="color: #800080;"></span> about</span><span style="color: #000000;"><span style="color: #000000;">];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span>}</pre><span class="cnblogs_code_collapse"><span class="cnblogs_code_collapse">View Code</span></span><p><p></p></p><p><p>4.0 after these are written, the running program of our Tom Cat was developed and completed, such as:</p></p><p><p></p></p><p><p></p></p><p><p>IOS Learning 04 Tom Cat Development</p></p></span>
