码迷,mamicode.com
首页 > 其他好文 > 详细

让动画动起来

时间:2015-08-05 18:21:22      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:ios   动画   uiview   animation   function   

 要学习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 = [CABasicAnimationanimationWithKeyPath: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"];






版权声明:本文为博主原创文章,未经博主允许不得转载。

让动画动起来

标签:ios   动画   uiview   animation   function   

原文地址:http://blog.csdn.net/wjsxiaoweige/article/details/47300861

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!