让动画动起来

 要学习ios复杂的动画，要用到很多东西，你需要对一下类都有一定的了解。

1 CAyer以及其各个子类。2    CAAnimation以及其子类  3 UIBezierPath 4 CGContext 5 CATransform3D 5 UIView动画

一：绘制静态的图形

 这个主要是我们在绘制一些静态的正方形，长方形，五角星或者更复杂的图形的需求 着我们需要用到CALer类和CGContext来绘制图形。下面的代码是画一个多折线的构成的图形

1 CAyer

我们经常重写UIView，来实现自定义的view，我们可以重写drawrect方法，来实现不同view的变换。layer作为self.view.layer的的子层。这个变换是动画，当然我们可以通过快速的变换不同的alpha，frame等layer的属性，来实现不同的变化。

2 CGContext

     

CGContextSetStrokeColorWithColor (context, [UIColor grayColor].CGColor);

CGContextSetLineWidth(context, 1);

CGContextMoveToPoint(context, 0, self.frame.size.height);

NSInteger count = pointAy.count;

CGPoint  points[count];

for (int i = 0; i<count; i++) {

    CGPoint  point  = CGPointFromString((NSString *)[pointAy objectAtIndex:i]);

    points[i].x = point.x;

    points[i].y = point.y;     

 }

  CGContextAddLines(context, points, count);

  CGContextStrokePath(context);

绘制原型，五角星，网上有很多的代码。不再一一详述。 http://blog.csdn.net/rhljiayou/article/details/9919713

3  CATransform3D效果，也是我们常用到的一个效果，我们可以静态的设置某一个layer最后的3D效果是什么样的，通过对layer.Transform3D赋值可以设定layer的3D效果。

CATransform3D transform3d = CATransform3DIdentity ;

transform3d.m34 = 1.0f/700.0f;

transform3d = CATransform3DTranslate(transform3d, 200, 0, 0);

transform3d = CATransform3DRotate (transform3d, M_PI / 6 , 0 , 1 , 0 );

transform3d = CATransform3DScale (transform3d, 0.8 , 0.8 , 1 );

self . navigationController . view . layer . anchorPoint = CGPointMake ( 0.5 , 0.5 );

self.navigationController.view.layer.transform = transform3d;

二 让动画动起来

下面我们要做的就是让CAyer的绘制有一个过程，让UIBezierPath的路径有个过程，让CATrandform3D的效果从最初始的状态到我们需要的3D效果有一个过程。

让动画动起来，就要熟悉CAAnimation和UIview动画这两个动画的属性。

1   我们先让上面的破折线动起来，这就要用到UIBezierPath，通过UIBezierPath和CAyer的子类相结合，把path赋值给cayer的path

  UIBezierPath * bez = [ UIBezierPath bezierPath ];

  UIColor * color = [UIColor grayColor];

[color set ];

bez. lineWidth = 1 ;

bez. lineCapStyle = kCGLineCapRound ;

bez. lineJoinStyle = kCGLineJoinRound ;

[bez moveToPoint:CGPointMake(0, self.frame.size.height)];

for (int i = 0 ; i<pointAy.count; i++) {

     CGPoint   point  = CGPointFromString (( NSString *)[pointAy objectAtIndex :i]);

       

       [bez addQuadCurveToPoint:point controlPoint:point];

     }

 CAShapeLayer * lineLayer = [CAShapeLayer layer];

self . layer . frame = self . layer . frame ;

   

lineLayer.fillColor = [UIColor clearColor].CGColor;

lineLayer. path = bez. CGPath ;

让折线开始绘画

   

    CABasicAnimation * ani = [ CABasicAnimation animationWithKeyPath : NSStringFromSelector ( @selector (strokeEnd))];

    ani. fromValue = @0 ;
    ani. toValue = @1 ;
    ani. duration = 3 ;
   
    [lineLayer addAnimation :ani forKey : NSStringFromSelector ( @selector (strokeEnd))];
   

    [self.layer addSublayer:lineLayer];    

2 让3d动画有一个动画效果

我们可以用uiview的动画

 [ UIView animateWithDuration : 0.5f animations :^{

               

CATransform3D transform3d = CATransform3DIdentity ;

transform3d.m34 = 1.0f/700.0f;

transform3d = CATransform3DTranslate(transform3d, 200, 0, 0);

transform3d = CATransform3DRotate (transform3d, M_PI / 6 , 0 , 1 , 0 );

transform3d = CATransform3DScale (transform3d, 0.8 , 0.8 , 1 );

self . navigationController . view . layer . anchorPoint = CGPointMake ( 0.5 , 0.5 );

self.navigationController.view.layer.transform = transform3d;

         

           
        } completion :^( BOOL finished) {
           

           

        

        }];

};

也可以通过

 
        CATransform3D transform3d = CATransform3DIdentity ;
       
    
        transform3d. m34 = 1.0f / 700.0f ;
       
        transform3d = CATransform3DTranslate (transform3d, 100 , 0 , 0 );
        transform3d = CATransform3DRotate (transform3d, M_PI / 6 , 0 , 1 , 0 );
        transform3d = CATransform3DScale (transform3d, 0.5 , 0.5 , 1 );
       
                                        
        CABasicAnimation * animation = [ CABasicAnimation animation ];
       
        animation. fromValue = [ NSValue valueWithCATransform3D : CATransform3DIdentity ];
       
       
        NSValue * toValue = [ NSValue valueWithCATransform3D :transform3d];
       
        [animation setToValue :toValue];
        animation. timingFunction = [ CAMediaTimingFunction functionWithName : kCAMediaTimingFunctionEaseInEaseOut ];
        [animation setDuration : 0.5 ];
        animation. removedOnCompletion = YES ;

    

     

       [self.navigationController.view.layer addAnimation:animation forKey:@"transform"];