02-ios Core Animation-first Lesson--viewanimations
Last Update:2015-05-21
Source: Internet
Author: User
<span id="Label3"></p><p style="white-space: normal;"><p style="white-space: normal;">I dig a hole for myself, I like the animation is good, but write out is another problem ~ ~ ~</p></p><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">In this article we say the animation API in uikit, which includes:</p></p><p style="white-space: normal;"><p style="white-space: normal;"></p></p> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <li><p>UIView.UIView.animateWithDuration</p></li> <li><p>Uiview.transitionwithview</p></li> <li><p>Uiview.animatekeyframeswithduration</p></li> </ul> </ul> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="width: 454.84375px;"> <li><p>Uiview.addkeyframewithrelativestarttime</p></li> </ul> </ul> </ul><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">Today's story will unfold around these apis, explaining his past Life.</p></p><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">Uikit Animation API is very simple and convenient to use, he avoids the complexity of core Animation, although in fact Uikit animation API is the bottom of the use of core Animation.</p></p><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;"><strong>Let's see the first one, UIView.UIView.animateWithDuration.</strong></p></p><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">Let's take a look at the function prototypes:</p></p><p style="white-space: normal;"><p style="white-space: normal;"></p></p> <blockquote style="white-space: normal; padding: 15px; color: #333333; font-family: 微软雅黑; font-size: 12px; border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-style: dashed; border-color: #00bbec; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;"> <blockquote style="white-space: normal; padding: 15px; color: #333333; font-family: 微软雅黑; font-size: 12px; border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-style: dashed; border-color: #00bbec; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;"> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">class func animatewithduration (duration:nstimeinterval, delay:nstimeinterval, usingspringwithdamping dampingRatio: cgfloat, initialspringvelocity velocity:cgfloat, options:uiviewanimationoptions, animations: () Void, Completion : ((Bool), Void)?)</p> </blockquote> </blockquote><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">Altogether seven parameters:</p></p> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <li><p>Duration</p></li> </ul> </ul> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="width: 454.84375px;"> <li><p>Represents the animation execution Time.</p></li> </ul> </ul> </ul> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <li><p>Delay</p></li> </ul> </ul> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="width: 454.84375px;"> <li><p>Animation delay Time.</p></li> </ul> </ul> </ul> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <li><p>Usingspringwithdamping</p></li> </ul> </ul> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="width: 454.84375px;"> <li><p>Represents a Flex Property.</p></li> </ul> </ul> </ul> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <li><p>Initialspringvelocity</p></li> </ul> </ul> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="width: 454.84375px;"> <li><p>Initial Speed.</p></li> </ul> </ul> </ul> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <li><p>Options</p></li> </ul> </ul> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="width: 454.84375px;"> <li><p>optional, some optional animation effects, including repetition etc.</p></li> </ul> </ul> </ul> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <li><p>Animations</p></li> </ul> </ul> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="width: 454.84375px;"> <li><p>Represents the animation content that is executed, including the gradient of transparency, movement, and Scaling.</p></li> </ul> </ul> </ul> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <li><p>Completion</p></li> </ul> </ul> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="width: 454.84375px;"> <li><p>Represents the content that is executed after the animation has finished Executing.</p></li> </ul> </ul> </ul><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">For these parameters, choose a column, try different parameters, so that you can better understand the meaning of each parameter.</p></p><p style="white-space: normal; text-align: center;"><p style="white-space: normal; text-align: center;"></p></p><p style="white-space: normal; text-align: center;"><p style="white-space: normal; text-align: center;">Nice ugly Animation.</p></p> <blockquote style="white-space: normal; padding: 15px; color: #333333; font-family: 微软雅黑; font-size: 12px; border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-style: dashed; border-color: #00bbec; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;"> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Self.animationView2.alpha = 0</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Self.animationView3.alpha = 0</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Uiview.animatewithduration (5, delay:0.5, usingspringwithdamping:0.5, initialspringvelocity:0, options:. Repeat, animations: {(), Void in</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Self.animationview.center.y + = 100</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">}) {(Bool), Void in</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">println ("finish")</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">}</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Uiview.animatewithduration (5, delay:0.5, usingspringwithdamping:0.5, initialspringvelocity:0, options:. Repeat, animations: {(), Void in</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Self.animationView2.alpha = 1</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">}) {(Bool), Void in</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">println ("finish")</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">}</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Uiview.animatewithduration (5, delay:0.5, usingspringwithdamping:0.5, initialspringvelocity:0, options:. Repeat, animations: {(), Void in</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">self.animationview3.center.y-= 100</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Self.animationView3.alpha = 1</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">}) {(Bool), Void in</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">println ("finish")</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">}</p></p> </blockquote><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">The code is not interpreted on a line-by-row basis, with three uiview.animatewithduration operating three blocks respectively. The first block is a moving animation, the second block is a transparency gradient animation, and the third block is a combination of moving and transparency gradients, which may not look very clear. I have to say, this animation is really ugly ~ ~ ~</p></p><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">UIView.UIView.animateWithDuration this API is, by and large, an attribute that gradually changes UIView, including: position, size, transparency, color, and so On.</p></p><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">Take a <strong>look at uiview.transitionwithview,</strong> which is an over-animation, used primarily for UIView to enter or leave the VIEW.</p></p><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">Let's take a look at this animated effect:</p></p><p style="white-space: normal; text-align: center;"><p style="white-space: normal; text-align: center;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">One of the animations that banner right away is the UIView.UIView.animateWithDuration mentioned above, and the animation used is the Uiview.transitionwithview that is now to be Spoken. It's like a page of pages flipping down the feeling Ha.</p></p><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">Let's take a look at the function prototypes</p></p><p style="white-space: normal;"><p style="white-space: normal;"></p></p> <blockquote style="white-space: normal; padding: 15px; color: #333333; font-family: 微软雅黑; font-size: 12px; border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-style: dashed; border-color: #00bbec; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;"> <blockquote style="white-space: normal; padding: 15px; color: #333333; font-family: 微软雅黑; font-size: 12px; border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-style: dashed; border-color: #00bbec; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;"> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">class func Transitionwithview (view:uiview, duration:nstimeinterval, options:uiviewanimationoptions, animations: ()-& Gt void, completion: ((Bool), void)?)</p> </blockquote> </blockquote><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">Altogether five parameters:</p></p><p style="white-space: normal;"><p style="white-space: normal;"></p></p> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <li><p>View</p></li> </ul> </ul> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="width: 454.84375px;"> <li><p>This is, of course, the object that specifies the animation to be Animated.</p></li> </ul> </ul> </ul> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <li><p>Duration</p></li> </ul> </ul> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="width: 454.84375px;"> <li><p>Same as Above. this parameter specifies the duration of the Animation.</p></li> </ul> </ul> </ul> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <li><p>Options</p></li> </ul> </ul> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="width: 454.84375px;"> <li><p>This is an optional parameter, although it is optional, but it is meaningless to not fill in the api, because the UIView how to enter the view is determined by this parameter. In the end is like the page to turn in, or like the shutters of the rotation is determined by this parameter, specifically what can be selected, point in to see the KNOW.</p></li> </ul> </ul> </ul> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <li><p>Animations</p></li> </ul> </ul> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="width: 454.84375px;"> <li><p>This option allows you to interpret it as uiview after the end of the Animation.</p></li> </ul> </ul> </ul> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <li><p>Completion</p></li> </ul> </ul> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="width: 454.84375px;"> <li><p>Code that runs after the animation ends.</p></li> </ul> </ul> </ul><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">The Code's probably long.</p></p><p style="white-space: normal;"><p style="white-space: normal;"></p></p> <blockquote style="white-space: normal; padding: 15px; color: #333333; font-family: 微软雅黑; font-size: 12px; border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-style: dashed; border-color: #00bbec; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;"> <blockquote style="white-space: normal; padding: 15px; color: #333333; font-family: 微软雅黑; font-size: 12px; border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-style: dashed; border-color: #00bbec; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;"> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Uiview.transitionwithview (status, duration:0.33, options:</p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">. Curveeaseout |. transitioncurldown, Animations: {</p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Self.yourView.hidden = False</p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">}, Completion:nil</p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">})</p> </blockquote> </blockquote><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">This part of the code has been uploaded Github,github address in the last side of the Article.</p></p><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">I believe that we can see the source Code.</p></p><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">Here we will show you an animation, which is also written in the previously mentioned function:</p></p><p style="white-space: normal; text-align: center;"><p style="white-space: normal; text-align: center;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">This show is too bad, I don't know what you see There.</p></p><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">Imitation 3D effect, The code is also in the upload of the demo, we see it ~</p></p><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">To the last function, uiview.animatekeyframeswithduration, let's take a look at the animated Effect.</p></p><p style="white-space: normal; text-align: center;"><p style="white-space: normal; text-align: center;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">Small plane ~ Fly ~ Fly ~</p></p><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">It's easy to see that this animation is done in a number of stages, and we can certainly use the first function we mentioned UIView.UIView.animateWithDuration to finish, but, you don't think nested nesting is very bad to see, we certainly have a better way to achieve, that is what we are going to say, first look at the function prototype:</p></p><p style="white-space: normal;"><p style="white-space: normal;"></p></p> <blockquote style="white-space: normal; padding: 15px; color: #333333; font-family: 微软雅黑; font-size: 12px; border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-style: dashed; border-color: #00bbec; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;"> <blockquote style="white-space: normal; padding: 15px; color: #333333; font-family: 微软雅黑; font-size: 12px; border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-style: dashed; border-color: #00bbec; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;"> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">class func animatekeyframeswithduration (duration:nstimeinterval, delay:nstimeinterval, options: uiviewkeyframeanimationoptions, animations: () void, completion: ((Bool), void)?)</p> </blockquote> </blockquote><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">Altogether five parameters:</p></p> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <li><p>Duration: the time of the entire animation process.</p></li> <li><p>Delay: How long it will take to Start.</p></li> <li><p>Options: optional, for example, repeat, pour over the effect, you have to try it.</p></li> <li><p>Animations: the animation that needs to be performed, which can be multiple Uiview.addkeyframewithrelativestarttime.</p></li> </ul> </ul> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="list-style-type: none;"> <ul class=" list-paddingleft-2" style="width: 454.84375px;"> <li><p>As for this uiview.addkeyframewithrelativestarttime method, which is similar to the first UIView.UIView.animateWithDuration we mentioned, is also a method of attribute gradation, but this method can only be written in his father Uivi Ew.addkeyframewithrelativestarttime in the animation parameter function Block.</p></li> </ul> </ul> </ul> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <ul class=" list-paddingleft-2" style="width: 478.796875px; white-space: normal;"> <li><p>Completion: code executed after the execution of the animation is Completed.</p></li> </ul> </ul><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">Let's take a look at the code that we realize this little plane ~ fly, Fly ~ ~</p></p><p style="white-space: normal;"><p style="white-space: normal;"></p></p> <blockquote style="white-space: normal; padding: 15px; color: #333333; font-family: 微软雅黑; font-size: 12px; border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-style: dashed; border-color: #00bbec; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;"> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Let Originalcenter = Planeimage.center</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Uiview.animatekeyframeswithduration (1.5, delay:0.0, Options:. Repeat, Animations: {</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Add keyframes</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Uiview.addkeyframewithrelativestarttime (0.0, relativeduration:0.25, animations: {</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Self.planeimage.center.x + = 80.0</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">self.planeimage.center.y-= 10.0</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">})</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Uiview.addkeyframewithrelativestarttime (0.1, Relativeduration:0.4) {</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Self.planeImage.transform = cgaffinetransformmakerotation (cgfloat (-m_pi_4/2))</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">}</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Uiview.addkeyframewithrelativestarttime (0.25, Relativeduration:0.25) {</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Self.planeimage.center.x + = 100.0</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">self.planeimage.center.y-= 50.0</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Self.planeImage.alpha = 0.0</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">}</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Uiview.addkeyframewithrelativestarttime (0.51, Relativeduration:0.01) {</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Self.planeImage.transform = cgaffinetransformidentity</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Self.planeImage.center = Cgpoint (x:0.0, y:originalcenter.y)</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">}</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Uiview.addkeyframewithrelativestarttime (0.55, Relativeduration:0.45) {</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Self.planeImage.alpha = 1.0</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">Self.planeImage.center = Originalcenter</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">}</p></p> <p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;"><p class="ue_t" style="margin-top: 0px; margin-bottom: 0px; padding: 0px;">}, Completion:nil)</p></p> </blockquote><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">The complete code is available in the source code provided Last.</p></p><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">The fact that the animation is to rely on the design, you see my animation above the draw, but in fact, the same code can write very beautiful Animation.</p></p><p style="white-space: normal;"><p style="white-space: normal;"></p></p><p style="white-space: normal;"><p style="white-space: normal;">Code uploaded Github:https://github.com/superxlx/ios_animation_test1</p></p><p><p>02-ios Core Animation-first Lesson--viewanimations</p></p></span>
