【IOS】动画-会动的翅膀

1.新建一个View当做画布;

FlyView *flyView = [[FlyView alloc]initWithFrame:CGRectMake(0, 0, 200, 200)];

flyView.backgroundColor = [UIColor groupTableViewBackgroundColor];


【IOS】动画-会动的翅膀_第1张图片

2.在View上添加两个View当做左右翅膀;

UIView *leftWing;

UIView *rightWing;

leftWing  = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.frame.size.width/2.0, self.frame.size.width/2.0)];

rightWing = [[UIView alloc]initWithFrame:CGRectMake(self.frame.size.width/2.0, 0, self.frame.size.width/2.0, self.frame.size.width/2.0)];

leftWing.center  = CGPointMake(leftWing.center.x, self.frame.size.height/2.0);

rightWing.center = CGPointMake(rightWing.center.x, self.frame.size.height/2.0);

rightWing.backgroundColor = [UIColor blackColor];

leftWing.backgroundColor = [UIColor blackColor];

[self addSubview:leftWing];

[self addSubview:rightWing];


【IOS】动画-会动的翅膀_第2张图片

3.先绘制左边的翅膀,要改变形状,必须先画出翅膀的大致形状;

//把画好的Layer加载view的Layer上便于观看;


CGSize size = view.frame.size;

[view.layer addSublayer:[self handleWingWithSize:size isleft:isleft]];

//开始画

CAShapeLayer *shapeLayer = [CAShapeLayer layer];

[shapeLayer setStrokeColor:[[UIColor redColor] CGColor]];

[shapeLayer setLineWidth:2.0];

CGMutablePathRef path = CGPathCreateMutable();

CGFloat jd = 0;

CGFloat scaleX = size.width/600.0f;

CGFloat scaleY = size.height/600.0f;

CGAffineTransform transform = CGAffineTransformMake(scaleX*cosf(jd), scaleY*sinf(jd), scaleX*sinf(jd), scaleY*cosf(jd), 0, 0);

//从右下角开始画 我这里使用600*600的像素画的

CGPathMoveToPoint(path, &transform, 600.0f, 600.0f);

CGPathAddQuadCurveToPoint(path, &transform, 585.0f, 200.0f, 400.0f, 185.0f);

CGPathAddQuadCurveToPoint(path, &transform, 30.0f, 150.0f, 0.0f, 0.0f);

CGPathAddQuadCurveToPoint(path, &transform, 0.0f, 194.0f, 120.0f, 200.0f);

CGPathAddQuadCurveToPoint(path, &transform, 100.0f, 394.0f, 240.0f, 400.0f);

CGPathAddQuadCurveToPoint(path, &transform, 200.0f, 594.0f, 600.0f, 600.0f);//回到起点

CGPathMoveToPoint(path, &transform, 545.0f, 372.0f);

CGPathAddArc(path, &transform, 525, 372, 20, 0, 2*M_PI,  NO);//增加一个圆

CGPathCloseSubpath(path);

[shapeLayer setPath:path];

CFRelease(path);

//加上一个动画便于观看画的过程

CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];

pathAnima.duration = 2.0f;

pathAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

pathAnima.fromValue = [NSNumber numberWithFloat:0.0f];

pathAnima.toValue = [NSNumber numberWithFloat:1.0f];

pathAnima.fillMode = kCAFillModeForwards;

pathAnima.removedOnCompletion = NO;

[shapeLayer addAnimation:pathAnima forKey:@"strokeEndAnimation"];


【IOS】动画-会动的翅膀_第3张图片

4.画好后开始改变View的形状,只改变一个方法就好了;这时候也不需要画笔和填充的颜色了;

[view.layer addSublayer:[self handleWingWithSize:size isleft:isleft]];

改成view.layer.mask = [self handleWingWithSize:size isleft:isleft];


【IOS】动画-会动的翅膀_第4张图片

5.右边的翅膀相当于左边的镜像

改变一下算法,翻转X轴;

transform = CGAffineTransformMake(-scaleX*cosf(jd), scaleY*sinf(jd), -scaleX*sinf(jd), scaleY*cosf(jd),size.width, 0);

这样两边就都弄好了;


【IOS】动画-会动的翅膀_第5张图片

6.让翅膀动起来,现加一个定时器当做动画的时间轴

count = 90;//默认90,会从原大小开始运动,因为是正弦运动90度的时候是最大值;

flyTime = [NSTimer scheduledTimerWithTimeInterval:0.02 target:self selector:@selector(changeCodeBtn:) userInfo:nil repeats:YES];

[[NSRunLoop currentRunLoop] addTimer:flyTime forMode:NSRunLoopCommonModes];

CATransform3D doctorTran = CATransform3DIdentity;

doctorTran.m11 = sinf(2.0*M_PI*(count/360.0f));

rightWing.layer.transform = doctorTran;

leftWing.layer.transform = doctorTran;

7.这样转起来会原地转,因为默认的锚点值是(0.5,0.5);改成

rightWing.layer.anchorPoint = CGPointMake(0, 0.5);

rightWing.center = CGPointMake(rightWing.center.x - rightWing.frame.size.width/2.0f, rightWing.center.y);

leftWing.layer.anchorPoint = CGPointMake(1.0, 0.5);

leftWing.center = CGPointMake(leftWing.center.x + leftWing.frame.size.width/2.0f, leftWing.center.y);

8.不让翅膀360度转,加个范围

if (count > 360) {

count = 0;}

if (count >= 90) {

if (!flyFlag) {

count = 97;}

flyFlag = YES;}

if (count <= 0) {

if (flyFlag) {

count = -10;}

flyFlag = NO;}

if (count < 90&&count > 0) {

CATransform3D doctorTran = CATransform3DIdentity;

doctorTran.m11 = sinf(2.0*M_PI*(count/360.0f));

rightWing.layer.transform = doctorTran;

leftWing.layer.transform = doctorTran;}

if (flyFlag) {

count--;}else{

count++;}


【IOS】动画-会动的翅膀_第6张图片

9.在加个侧移让3D效果看起来更逼真;也可以换个背景;

CGFloat jd = -0.5*M_PI_4;

self.transform = CGAffineTransformMake(0.5*cosf(jd), 0.8*sinf(jd), 0.5*-sinf(jd), 0.8*cosf(jd), 0, 0);


【IOS】动画-会动的翅膀_第7张图片
【IOS】动画-会动的翅膀_第8张图片






你可能感兴趣的:(【IOS】动画-会动的翅膀)