iPhone ルート2長方形 円から

円の中に正方形を描いて、その正方形の2辺を円に接するように延ばしていくとルート2長方形の完成です。というのをiPhoneアプリで描いてみます。


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

サンプルコード

#import “ViewController.h”

#import <QuartzCore/QuartzCore.h>

@interface ViewController ()

{

    UILabel *word;

}

@end

@implementation ViewController

– (void)viewDidLoad

{

    [super viewDidLoad];

    self.view.backgroundColor = [self color:0];

    [self createGridSheet];

    

    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(start)];

    [self.view addGestureRecognizer:tap];

}

– (void)start

{

    [self createCircle];

    [self performSelector:@selector(createSquare) withObject:nil afterDelay:3.0];

    [self performSelector:@selector(createSquareRootRectangle) withObject:nil afterDelay:6.0];

}

– (void)createCircle

{

    word = [[UILabel alloc] init];

    word.frame = CGRectMake(50, 40, 220, 50);

    word.text = @”1. 円を描きます;

    word.textAlignment = NSTextAlignmentCenter;

    word.font = [UIFont systemFontOfSize:18];

    word.textColor = [UIColor whiteColor];

    word.backgroundColor = [UIColor blackColor];

    [self.view addSubview:word];

    word.transform = CGAffineTransformMakeTranslation(0, –400);

    [UIView animateWithDuration:0.3 animations:^{

        word.transform = CGAffineTransformIdentity;

    } completion:^(BOOL finished) {

        UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(40, 180, 240, 240)];

        CAShapeLayer *sl = [CAShapeLayer layer];

        sl.fillColor = [UIColor clearColor].CGColor;

        sl.strokeColor = [self color:1].CGColor;

        sl.lineWidth = 2;

        sl.path = path.CGPath;

        [self.view.layer addSublayer:sl];

        

        [self startDraw:sl];

    }];

}

– (void)createSquare

{

    word = [[UILabel alloc] init];

    word.frame = CGRectMake(50, 40, 220, 50);

    word.text = @”2. 円の中に正方形;

    word.textAlignment = NSTextAlignmentCenter;

    word.font = [UIFont systemFontOfSize:18];

    word.textColor = [UIColor whiteColor];

    word.backgroundColor = [UIColor blackColor];

    [self.view addSubview:word];

    word.transform = CGAffineTransformMakeTranslation(0, –400);

    [UIView animateWithDuration:0.3 animations:^{

        word.transform = CGAffineTransformIdentity;

    } completion:^(BOOL finished) {

        float w = 240.0 / sqrt(2);

        CGPoint origin = CGPointMake(160 – w/2.0, 300 – w/2.0);

        UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(origin.x, origin.y, w, w)];

        CAShapeLayer *sl = [CAShapeLayer layer];

        sl.fillColor = [UIColor clearColor].CGColor;

        sl.strokeColor = [self color:4].CGColor;

        sl.lineWidth = 2;

        sl.path = path.CGPath;

        [self.view.layer addSublayer:sl];

        [self startDraw:sl];

    }];

}

– (void)createSquareRootRectangle

{

    word = [[UILabel alloc] init];

    word.frame = CGRectMake(50, 40, 220, 50);

    word.text = @”3. 2辺を延ばす;

    word.textAlignment = NSTextAlignmentCenter;

    word.font = [UIFont systemFontOfSize:16];

    word.textColor = [UIColor whiteColor];

    word.backgroundColor = [UIColor blackColor];

    [self.view addSubview:word];

    word.transform = CGAffineTransformMakeTranslation(0, –400);

    [UIView animateWithDuration:0.3 animations:^{

        word.transform = CGAffineTransformIdentity;

    } completion:^(BOOL finished) {

        float w = 240.0 / sqrt(2);

        UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, w, w)];

        CAShapeLayer *sl = [CAShapeLayer layer];

        sl.fillColor = [UIColor clearColor].CGColor;

        sl.strokeColor = [self color:3].CGColor;

        sl.lineWidth = 2;

        sl.path = path.CGPath;

        [self.view.layer addSublayer:sl];

        

        // for scale

        CGPoint origin = CGPointMake(160 – w/2.0, 300 – w/2.0);

        sl.frame = CGRectMake(origin.x, origin.y, w, w);

        sl.anchorPoint = CGPointMake(0.5, 0.5);

        sl.position = CGPointMake(160, 300);

        sl.transform = CATransform3DMakeScale(1, sqrt(2), 1);

                

        CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@”transform.scale.y”];

        scale.fromValue = @1;

        scale.toValue = @(sqrt(2));

        scale.duration = 1.0;

        [sl addAnimation:scale forKey:nil];

    }];

}

#pragma mark – utility methods

– (void)createGridSheet

{

    UIBezierPath *path = [UIBezierPath bezierPath];

    float size = 32;

    for (int i=0; i<320/size; i++) {

        [path moveToPoint:CGPointMake(i * size, 0)];

        [path addLineToPoint:CGPointMake(i * size, 568)];

    }

    

    for (int i=0; i<568/size; i++) {

        [path moveToPoint:CGPointMake(0, i*size)];

        [path addLineToPoint:CGPointMake(320, i*size)];

    }

    

    CAShapeLayer *sl = [[CAShapeLayer alloc] init];

    sl.strokeColor = [self color:2].CGColor;

    sl.lineWidth = 1;

    sl.lineDashPattern = @[@3, @2];

    sl.path = path.CGPath;

    

    [self.view.layer addSublayer:sl];

}

– (void)startDraw:(CAShapeLayer*)l

{

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

    a.duration = 1.0;

    a.fromValue = @0;

    a.toValue = @1;

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

    

    if (l.strokeEnd == 0) {

        l.strokeEnd = 1.0;

    }

}

#define UIColorHex(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

– (UIColor*)color:(int)i

{

    switch (i) {

        case 0:

            return UIColorHex(0xFFECAA);

        case 1:

            return UIColorHex(0xE81D53);

        case 2:

            return UIColorHex(0xFF821F);

        case 3:

            return UIColorHex(0x258A77);

        case 4:

            return UIColorHex(0x5DB58A);

        default:

            break;

    }

    return nil;

}

– (void)didReceiveMemoryWarning

{

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

@end