要学习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"];
版权声明:本文为博主原创文章,未经博主允许不得转载。