iPhoneルート5四角形

正方形を右に、左にコロコロ傾けることで、ルート5長方形を書くようなiPhoneアプリを描いてみます。


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

サンプルコード

#import “ViewController.h”

#import <QuartzCore/QuartzCore.h>

@interface ViewController ()

@property (strong, nonatomic) UIView *square;

@property (nonatomic) int count;

@end

@implementation ViewController

– (void)viewDidLoad

{

    [super viewDidLoad];

    self.view.backgroundColor = [UIColor blackColor];

    

    [self createSquare];

}

– (void)createSquare

{

    self.square = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 160, 160)];

    self.square.backgroundColor = [UIColor clearColor];

    self.square.layer.borderColor = [UIColor lightGrayColor].CGColor;

    self.square.layer.borderWidth = 4;

    

    self.square.layer.anchorPoint = CGPointMake(0.5, 1);

    self.square.layer.position = CGPointMake(284, 280);

    

    [self.view addSubview:self.square];

}

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

{

    switch (self.count) {

        case 0:

            [self animationOne];

            break;

        case 1:

            [self animationTwo];

            break;

        case 2:

            [self animationThree];

            break;

            

        default:

            break;

    }

    

    self.count = (self.count + 1) % 3;

}

– (void)animationOne

{

    float r = 160.0 * sqrt(5) / 2.0;

    UIBezierPath *path = [UIBezierPath bezierPath];

    [path moveToPoint:CGPointMake(284, 280)];

    [path addLineToPoint:CGPointMake(284 + r, 280)];

    [path addLineToPoint:CGPointMake(284 + r, 280160)];

    [path addLineToPoint:CGPointMake(284, 280160)];

    

    CAShapeLayer *sl = [CAShapeLayer layer];

    sl.fillColor = [UIColor clearColor].CGColor;

    sl.strokeColor = [UIColor lightGrayColor].CGColor;

    sl.lineWidth = 5;

    sl.path = path.CGPath;

    

    [UIView animateWithDuration:0.5 animations:^{

        self.square.transform = CGAffineTransformMakeRotation(M_PI/2.85);

    } completion:^(BOOL finished) {

        [self.view.layer addSublayer:sl];

        [self startDraw:sl];

    }];

}

– (void)animationTwo

{

    float r = 160.0 * sqrt(5) / 2.0;

    UIBezierPath *path = [UIBezierPath bezierPath];

    [path moveToPoint:CGPointMake(284, 280)];

    [path addLineToPoint:CGPointMake(284 – r, 280)];

    [path addLineToPoint:CGPointMake(284 – r, 280160)];

    [path addLineToPoint:CGPointMake(284, 280160)];

    

    CAShapeLayer *sl = [CAShapeLayer layer];

    sl.fillColor = [UIColor clearColor].CGColor;

    sl.strokeColor = [UIColor lightGrayColor].CGColor;

    sl.lineWidth = 5;

    sl.path = path.CGPath;

    

    [UIView animateWithDuration:1.0 animations:^{

        self.square.transform = CGAffineTransformMakeRotation(-M_PI/2.85);

    } completion:^(BOOL finished) {

        [self.view.layer addSublayer:sl];

        [self startDraw:sl];

    }];

}

– (void)animationThree

{

    [UIView animateWithDuration:0.5 animations:^{

        self.square.transform = CGAffineTransformMakeRotation(0);

    } completion:^(BOOL finished) {

    }];

}

– (void)startDraw:(CAShapeLayer*)l

{

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

    a.duration = 2.0;

    a.fromValue = @0;

    a.toValue = @1;

    [l addAnimation:a forKey:@”strokeEnd”];

}

– (void)didReceiveMemoryWarning

{

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

@end