当ios遇上css3动画系列(1) --ios动画之弹跳

导语：本文将依据http://daneden.github.io/animate.css/中的css动画，将css动画转换为ios的动画。

1.bounce 弹跳动画

先来看下css3动画的代码

@-webkit-keyframes bounce {
0%, 20%, 53%, 80%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
40%, 43% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0,-4px,0);
transform: translate3d(0,-4px,0);
}
}

可以看到，css主要使用了translate3d 和 transition-timing-function 属性。

在ios 的core animation 中存在相同的属性可以达到相同的效果，可以使用

CAKeyframeAnimation 关键帧动画。
附上OC版代码

- (void)bounce{ 
    CAKeyframeAnimation *keyAnim = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
    CATransform3D transform3D_1=  CATransform3DMakeTranslation( 0, 0 , 0);
    CATransform3D transform3D_2=  CATransform3DMakeTranslation( 0, -15, 0);
    CATransform3D transform3D_3=  CATransform3DMakeTranslation( 0, -30, 0);
    CATransform3D transform3D_4=  CATransform3DMakeTranslation( 0, -4, 0);

    NSMutableArray *transform3Ds = [NSMutableArray array];
    [transform3Ds addObject:[self getValueWithCATransform3D:transform3D_1]];
    [transform3Ds addObject:[self getValueWithCATransform3D:transform3D_1]];
    [transform3Ds addObject:[self getValueWithCATransform3D:transform3D_3]];
    [transform3Ds addObject:[self getValueWithCATransform3D:transform3D_3]];
    [transform3Ds addObject:[self getValueWithCATransform3D:transform3D_1]];
    [transform3Ds addObject:[self getValueWithCATransform3D:transform3D_2]];
    [transform3Ds addObject:[self getValueWithCATransform3D:transform3D_1]];
    [transform3Ds addObject:[self getValueWithCATransform3D:transform3D_4]];
    [transform3Ds addObject:[self getValueWithCATransform3D:transform3D_1]];
    [keyAnim setValues:transform3Ds];
    

    NSMutableArray *keyTimes = [NSMutableArray array];
    [keyTimes addObject:[self getNumberWithFloat:0]];
    [keyTimes addObject:[self getNumberWithFloat:.2]];
    [keyTimes addObject:[self getNumberWithFloat:.4]];
    [keyTimes addObject:[self getNumberWithFloat:.43]];
    [keyTimes addObject:[self getNumberWithFloat:.53]];
    [keyTimes addObject:[self getNumberWithFloat:.7]];
    [keyTimes addObject:[self getNumberWithFloat:.8]];
    [keyTimes addObject:[self getNumberWithFloat:.9]];
    [keyTimes addObject:[self getNumberWithFloat:1.0]];
    [keyAnim setKeyTimes:keyTimes];
    
    //设置每个关键位置速度的变化
    NSMutableArray *timings = [NSMutableArray array];
    [timings addObject:[self getFunctionWithControlPoints:0.215 :0.610 :0.355 :1]];
    [timings addObject:[self getFunctionWithControlPoints:0.215 :0.610 :0.355 :1]];
    [timings addObject:[self getFunctionWithControlPoints:0.755 :0.050 :0.855 :0.060]];
    [timings addObject:[self getFunctionWithControlPoints:0.755 :0.050 :0.855 :0.060]];
    [timings addObject:[self getFunctionWithControlPoints:0.215 :0.610 :0.355 :1]];
    [timings addObject:[self getFunctionWithControlPoints:0.755 :0.050 :0.855 :0.060]];
    [timings addObject:[self getFunctionWithControlPoints:0.215 :0.610 :0.355 :1]];
    [timings addObject:[self getFunctionWithControlPoints:0 :1 :0 :1]];
    [timings addObject:[self getFunctionWithControlPoints:0.215 :0.610 :0.355 :1]];
    [keyAnim setTimingFunctions:timings];
    
    [keyAnim setDuration:1];
    [keyAnim setCalculationMode:kCAAnimationCubic];
    [keyAnim setFillMode:kCAFillModeForwards];
    [keyAnim setRemovedOnCompletion:NO];
    [self.TextTest.layer addAnimation:keyAnim forKey:nil];
}

-(NSValue *)getValueWithCATransform3D:(CATransform3D)t{
    return [NSValue valueWithCATransform3D:t];    
}

-(NSNumber *)getNumberWithFloat:(float)num
{
    return [NSNumber numberWithFloat:num];
}
- (CAMediaTimingFunction*)getFunctionWithControlPoints:(float)c1x :(float)c1y :(float)c2x :(float)c2y{
    return [CAMediaTimingFunction functionWithControlPoints:c1x :c1y :c2x :c2y];

}

gif 效果图