千鳥飛ばし

タッチで千鳥模様がくるっととぶようなiPhoneアプリを書いてみます。（千鳥のパスはイラストレータで書いてから、Objective-CのUIBezierPathのaddCurveにコンバートしました。）

動作イメージ
XcodeからiOS6 iPhone Simulatorで動かすとこんな感じになります。

サンプルコード

#import “ViewController.h”

#import <QuartzCore/QuartzCore.h>

@interface ViewController ()

@end

@implementation ViewController

– (void)viewDidLoad

{

    [super viewDidLoad];

    self.view.backgroundColor = [UIColor colorWithRed:0.5 green:0.5 blue:1.0 alpha:1.0];

}

– (UIView*)createChidori

{

    UIView *chidori = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 75, 65)];

    [self.view addSubview:chidori];

    

    // 

    UIBezierPath *path = [UIBezierPath bezierPath];

    [path moveToPoint: CGPointMake(18, 88)];

    [path addCurveToPoint: CGPointMake(92, 27) controlPoint1: CGPointMake(36, 81) controlPoint2: CGPointMake(54, 27)];

    [path addCurveToPoint: CGPointMake(141, 27) controlPoint1: CGPointMake(115, 27) controlPoint2: CGPointMake(117, 24)];

    [path addCurveToPoint: CGPointMake(222, 0) controlPoint1: CGPointMake(162, 10) controlPoint2: CGPointMake(202, 1)];

    [path addCurveToPoint: CGPointMake(273, 24) controlPoint1: CGPointMake(241, 0) controlPoint2: CGPointMake(269, 17)];

    [path addCurveToPoint: CGPointMake(247, 60) controlPoint1: CGPointMake(277, 31) controlPoint2: CGPointMake(252, 42)];

    [path addCurveToPoint: CGPointMake(258, 124) controlPoint1: CGPointMake(242, 78) controlPoint2: CGPointMake(250, 89)];

    [path addCurveToPoint: CGPointMake(196, 204) controlPoint1: CGPointMake(266, 159) controlPoint2: CGPointMake(222, 203)];

    [path addCurveToPoint: CGPointMake(136, 262) controlPoint1: CGPointMake(190, 205) controlPoint2: CGPointMake(125, 233)];

    [path addCurveToPoint: CGPointMake(71, 166) controlPoint1: CGPointMake(148, 262) controlPoint2: CGPointMake(78,255)];

    [path addCurveToPoint: CGPointMake(18, 88) controlPoint1: CGPointMake(79, 80) controlPoint2: CGPointMake(0, 95)];

    

    [path appendPath:[UIBezierPath bezierPathWithOvalInRect:CGRectMake(270, 130, 20, 10)]];

    [path appendPath:[UIBezierPath bezierPathWithOvalInRect:CGRectMake(240, 190, 20, 10)]];

    [path appendPath:[UIBezierPath bezierPathWithOvalInRect:CGRectMake(65, 60, 20, 20)]];

    

    [path moveToPoint:CGPointMake(240, 120)];

    [path addQuadCurveToPoint:CGPointMake(200, 180) controlPoint:CGPointMake(250, 160)];

    [path closePath];

    

    

    CAShapeLayer *sl = [CAShapeLayer layer];

    sl.fillColor = [UIColor yellowColor].CGColor;

    sl.path = path.CGPath;

    sl.fillRule = kCAFillRuleEvenOdd;

    sl.transform = CATransform3DMakeScale(0.25, 0.25, 0.25);

    [chidori.layer addSublayer:sl];

    

    return chidori;

}

– (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event

{

    UIView *v = [self createChidori];

    

    CGPoint p = [[touches anyObject] locationInView:self.view];

    UIBezierPath *path = [UIBezierPath bezierPath];

    float h = 300 – p.y;

    [path addArcWithCenter:CGPointMake(p.x, 320) radius:h startAngle:0 endAngle:M_PI clockwise:NO];

    

    CAKeyframeAnimation *a = [CAKeyframeAnimation animationWithKeyPath:@”position”];

    a.path = path.CGPath;

    a.duration = 2;

    [v.layer addAnimation:a forKey:nil];

    [v performSelector:@selector(removeFromSuperview) withObject:nil afterDelay:2];

    

    CAShapeLayer *sl = [CAShapeLayer layer];

    sl.fillColor = [UIColor clearColor].CGColor;

    sl.strokeColor = [UIColor colorWithWhite:1 alpha:0.6].CGColor;

    sl.lineWidth = 5;

    sl.lineCap = kCALineCapRound;

    sl.path = path.CGPath;

    [self.view.layer insertSublayer:sl below:v.layer];

    

    CABasicAnimation *da = [CABasicAnimation animationWithKeyPath:@”strokeEnd”];

    da.duration = 2;

    da.fromValue = @0;

    da.toValue   = @1;

    [sl addAnimation:da forKey:nil];

}

– (void)didReceiveMemoryWarning

{

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

@end