IOS easing tween animation effect

In iOS development, to do an animation effect, we will use Cakeyframeanimation. This library provides some control over frame animations, what is frame animation? Frame animation is like television animation, by a lattice of pictures (can also be imagined as frame) composition, quickly play the picture is animated. The concept of cakeyframeanimation is the same, you only need to provide keyframe information, the program will automatically complete the "picture" between keyframe. If you have used Adobe Flash this tool, it is equivalent to Motion/shape tween. Well, for example, it's quite clear. If you want to do a pop-up animation of a graphic, use Cakeyframeanimation to write a

1http://www.aliyun.com/zixun/aggregation/19060.html ">234567891011121314151617181920cakeyframeanimation * Boundsovershootanimation = [cakeyframeanimation animationwithkeypath:@ "Bounds.size"]; Cgsize startingsize = Cgsizezero; Cgsize targetsize = Cgsizemake (100,100); Cgsize overshootsize = Cgsizemake (120,120); Cgsize undershootsize = Cgsizemake (80,80); Nsarray *boundsvalues = [Nsarray arraywithobjects:[nsvalue valuewithcgsize:startingsize], [NSValue valueWithCGSize: Targetsize], [Nsvalue valuewithcgsize:overshootsize], [Nsvalue valuewithcgsize:undershootsize], [NSValue Valuewithcgsize:targetsize], nil]; [Boundsovershootanimation setvalues:boundsvalues]; Nsarray *times = [Nsarray arraywithobjects:[nsnumber numberwithfloat:0.0f], [NSNumber numberwithfloat:0.5f], [NSNumber NUMBERWITHFLOAT:0.8F], [NSNumber numberwithfloat:0.9f], [NSNumber numberwithfloat:1.0f], nil]; [Boundsovershootanimation setkeytimes:times];boundsovershootanimation.duration = 1.0;

This pop-up animation contains 5 Keyframe, which is designed to make a bounce-back feel. [Boundsovershootanimation Setvalues:boundsvalues] This line of code sets the animation's keyframe. Another important element is time, Cakeyframeanimation provides keyframe time control, if not set will be developed in a straight line. And this animation will appear in the form of slow and fast, why? See [Boundsovershootanimation Setkeytimes:times] this passage. Animation of one second, from 0-0 to 5 seconds will be startingsize to targetsize animation, 0.5-0.8 seconds will be targetsize to overshootsize animation. So the analogy will make the first slow and quick effect.

Cakeyframeanimation also provides other ways to control keyframe, and the following is a transparent fade out animation.

123456CABasicAnimation *opacityanimation = [cabasicanimation animationwithkeypath:@ "opacity"];o Pacityanimation.fromvalue = [NSNumber numberwithfloat:1.0f]; Opacityanimation.tovalue = [NSNumber numberwithfloat:0.0f];opacityanimation.timingfunction:[camediatimingfunction Functionwithname:kcamediatimingfunctioneasein]]; Easein curve//opacityanimation.timingfunction:[camediatimingfunction Functionwithname: Kcamediatimingfunctioneaseout]]; Easeout curve//opacityanimation.timingfunction = [Camediatimingfunction functionwithcontrolpoints:1.0:0.0:1.0:0. 1]; Bézier curve

Opacityanimation.timingfunction is used to control the linear development of animations. where [Camediatimingfunction functionwithcontrolpoints:1.0:0.0:1.0:0.1] is a control method of a Bezier curve. This also allows the animation to slow down quickly or quickly after the result. You ask, how do I know what the effect will be? Here is a graphical tool to illustrate the digital linear relationship http://netcetera.org/camtf-playground.html

Cakeyframeanimation provides a good feature, but for some of the more complex animation effects, cakeyframeanimation configuration will become complex, the code will be very long. Let's say I'm going to do something like a ball bounce. We want to calculate the position of each keyframe, and then configure the animation time for each keyframe. To make such an effect, there will be a lot of keyframe. So after referencing the tween animation of ActionScript, we developed a tween effect library for iOS. The basic principle is to use some tween function package to calculate the change value of the formula, and then extend cakeyframeanimation automatically according to tween function to calculate keyframe. Here is the effect of the ball beating.

123EasingFunction EASINGFN = [easing getbounce]; Cakeyframeanimation *transanimi = [cakeyframeanimation animationwithkeypath:@ "position.x" easeFunction: Easingfn.easeout fromvalue:0.0 tovalue:200];transanimi.duration = 3.0;

[Easing getbounce] is a formula for the bounce effect in tween animation library. [Cakeyframeanimation animationwithkeypath:@ "position.x" EaseFunction:easingFn.easeOut fromvalue:0.0 tovalue:200] Is the extension of the cakeyframeanimation. The return is a general cakeyframeanimation, which can be used directly on UIView objects. The Tween animation library provides the following effects, which can be graphically http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html

-elastic
-bounce
-back
-linear
-expo
-quad
-cubic
-quart
-quint
-sine
-circ

Tween Animation library can be extended. Refer to the following linear formula, T is the current time value, B is the property start value, C is the property change difference, D is the total time value, the return is the value of the T time property. We are free to change to create a new formula.

12345678910111213+ (easingfunction) getlinear{easingfunction ease = Ease.easein (Double t, double B, double C , double D) {return c*t/d + B;}; Ease.easeout = ^double (Double t, double b, double C, double D) {return c*t/d + B;}; Ease.easeinout = ^double (Double t, double b, double C, double D) {return c*t/d + B;}; return ease;

Demo Demo

Finally attach the source code, please message exchange advice.

Http://url.cn/EyBoWa

Thank you for your reading, this article by Tencent Isux Copyright, reprint, please specify the source, the offender will investigate, thank you for your cooperation.
Annotated source format: Tencent Isux (http://isux.tencent.com/ios-easing-tween-animation.html)