円の中に正方形を描いて、その正方形の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