ルート３長方形の書き方をアニメーションで表示するようなiPhoneアプリを作ってみます。ルート３長方形は、正方形からルート２長方形を作って、そこからさらにルート３に成長させるという流れです。
動作イメージ
XcodeからiOS6 iPhone Simulatorで動かすとこんな感じになります。
サンプルコード
#import “ViewController.h”
#import <QuartzCore/QuartzCore.h>
@interface ViewController () {
UIView *square;
int counter;
}
@end
@implementation ViewController
– (void)viewDidLoad
{
[super viewDidLoad];
self.view.backgroundColor = [self color:0];
}
– (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
switch (counter) {
case 0:
[self createSquare];
break;
case 1:
[self createRoot2Rectangle];
break;
case 2:
[self createRoot3Rectangle];
break;
default:
break;
}
counter++;
}
– (void)createSquare
{
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 0)];
[path addLineToPoint:CGPointMake(220, 0)];
[path addLineToPoint:CGPointMake(220, 220)];
[path addLineToPoint:CGPointMake(0, 220)];
[path closePath];
CAShapeLayer *sl = [CAShapeLayer layer];
sl.fillColor = [UIColor clearColor].CGColor;
sl.strokeColor = [self color:4].CGColor;
sl.lineWidth = 20;
sl.path = path.CGPath;
square = [[UIView alloc] initWithFrame:CGRectMake(180, 40, 220, 400)];
[square.layer addSublayer:sl];
[self.view addSubview:square];
[self startDraw:sl];
}
– (void)createRoot2Rectangle
{
[UIView animateWithDuration:0.5 animations:^{
square.center = CGPointMake(square.center.x – 60, square.center.y);
}];
[self performSelector:@selector(drawRoot2Arc) withObject:nil afterDelay:0.6];
[self performSelector:@selector(drawRoot2Frame) withObject:nil afterDelay:2.6];
}
– (void)drawRoot2Arc
{
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 220)];
[path addLineToPoint:CGPointMake(220, 0)];
[path addArcWithCenter:CGPointMake(0, 220) radius:220 * sqrt(2) startAngle:-M_PI/4.0 endAngle:0 clockwise:YES];
CAShapeLayer *sl = [CAShapeLayer layer];
sl.fillColor = [UIColor clearColor].CGColor;
sl.strokeColor = [self color:3].CGColor;
sl.lineWidth = 5;
sl.lineDashPattern = @[@10, @4];
sl.path = path.CGPath;
[square.layer addSublayer:sl];
[self.view addSubview:square];
[self startDraw:sl];
}
– (void)drawRoot2Frame
{
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 0)];
[path addLineToPoint:CGPointMake(220 * sqrt(2), 0)];
[path addLineToPoint:CGPointMake(220 * sqrt(2), 220)];
[path addLineToPoint:CGPointMake(0, 220)];
[path closePath];
CAShapeLayer *sl = [CAShapeLayer layer];
sl.fillColor = [UIColor clearColor].CGColor;
sl.strokeColor = [self color:2].CGColor;
sl.lineWidth = 12;
sl.path = path.CGPath;
[square.layer addSublayer:sl];
[self.view addSubview:square];
[self startDraw:sl];
}
– (void)createRoot3Rectangle
{
[UIView animateWithDuration:0.5 animations:^{
square.center = CGPointMake(square.center.x – 60, square.center.y);
}];
[self performSelector:@selector(drawRoot3Arc) withObject:nil afterDelay:0.6];
[self performSelector:@selector(drawRoot3Frame) withObject:nil afterDelay:2.6];
}
– (void)drawRoot3Arc
{
float r = hypot(220.0, 220.0 * sqrt(2));
float startAngle = atan2f(220.0, 220.0 * sqrt(2));
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 220.0)];
[path addLineToPoint:CGPointMake(220.0 * sqrt(2), 0)];
[path addArcWithCenter:CGPointMake(0, 220) radius:r startAngle:-startAngle endAngle:0 clockwise:YES];
CAShapeLayer *sl = [CAShapeLayer layer];
sl.fillColor = [UIColor clearColor].CGColor;
sl.strokeColor = [self color:2].CGColor;
sl.lineWidth = 5;
sl.lineDashPattern = @[@10, @4];
sl.path = path.CGPath;
[square.layer addSublayer:sl];
[self.view addSubview:square];
[self startDraw:sl];
}
– (void)drawRoot3Frame
{
float r = hypot(220.0, 220.0 * sqrt(2));
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 0)];
[path addLineToPoint:CGPointMake(r, 0)];
[path addLineToPoint:CGPointMake(r, 220)];
[path addLineToPoint:CGPointMake(0, 220)];
[path closePath];
CAShapeLayer *sl = [CAShapeLayer layer];
sl.fillColor = [UIColor clearColor].CGColor;
sl.strokeColor = [self color:1].CGColor;
sl.lineWidth = 6;
sl.path = path.CGPath;
[square.layer addSublayer:sl];
[self.view addSubview:square];
[self startDraw:sl];
}
– (void)startDraw:(CAShapeLayer*)l
{
CABasicAnimation *a = [CABasicAnimation animationWithKeyPath:@”strokeEnd”];
a.duration = 2.0;
a.fromValue = @0;
a.toValue = @1;
[l addAnimation:a forKey:@”strokeEnd”];
}
#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(0xC0AFFF);
case 1:
return UIColorHex(0xDD99E8);
case 2:
return UIColorHex(0xFF9299);
case 3:
return UIColorHex(0xE8AD8F);
case 4:
return UIColorHex(0xFFDFA3);
default:
break;
}
return nil;
}
– (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end