四角の半分がさよならすると三角になるんだよ〜。さよならした三角がまたくると、四角に戻るんだよ！というのを子供に見せてあげるというコンセプトのiPhoneアプリを書いてみましょう。
動作イメージ
XcodeからiOS6 iPhone Simulatorで動かすとこんな感じになります。
ポイント
直角三角形のViewをUIBezierPathを使って作る処理を書いておき、２つの三角形を生成した後、片方を180度回転させてくっつけると、四角形になるようにしています。
サンプルコード
#import “ViewController.h”
#import <QuartzCore/QuartzCore.h>
@interface ViewController ()
{
UIView *sankakuA;
UIView *sankakuB;
}
@end
@implementation ViewController
– (void)viewDidLoad
{
[super viewDidLoad];
[self createSikaku];
[self createSankakuButton];
[self createSikakuButton];
}
– (void)createSikaku
{
sankakuA = [self createSankaku];
sankakuB = [self createSankaku];
sankakuB.transform = CGAffineTransformMakeRotation(M_PI);
}
– (UIView*)createSankaku
{
UIView *sankaku = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 220, 220)];
sankaku.center = CGPointMake(568.0/2.0, 120);
[self.view addSubview:sankaku];
UIBezierPath *path = [UIBezierPath bezierPath];
// frame
[path moveToPoint:CGPointMake(0, 0)];
[path addLineToPoint:CGPointMake(0, 220)];
[path addLineToPoint:CGPointMake(220, 220)];
[path closePath];
CAShapeLayer *sl = [[CAShapeLayer alloc] init];
sl.fillColor = [UIColor whiteColor].CGColor;
sl.path = path.CGPath;
[sankaku.layer addSublayer:sl];
return sankaku;
}
– (void)createSankakuButton
{
// sankaku
UIView *sankakuBtn = [[UIView alloc] initWithFrame:CGRectMake(50, 240, 50, 50)];
sankakuBtn.layer.cornerRadius = 25;
sankakuBtn.backgroundColor = [UIColor blackColor];
[self.view addSubview:sankakuBtn];
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(25, 5)];
[path addLineToPoint:CGPointMake(20 * cos(M_PI/4.0) + 25, 20 * sin(M_PI/4.0) + 25)];
[path addLineToPoint:CGPointMake(20 * cos(3.0 * M_PI/4.0) + 25, 20 * sin(3.0 * M_PI/4.0) + 25)];
CAShapeLayer *sl = [[CAShapeLayer alloc] init];
sl.fillColor = [UIColor whiteColor].CGColor;
sl.path = path.CGPath;
[sankakuBtn.layer addSublayer:sl];
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(sayonara)];
[sankakuBtn addGestureRecognizer:tap];
}
– (void)createSikakuButton
{
UIView *sikakuBtn = [[UIView alloc] initWithFrame:CGRectMake(468, 240, 50, 50)];
sikakuBtn.layer.cornerRadius = 25;
sikakuBtn.backgroundColor = [UIColor blackColor];
[self.view addSubview:sikakuBtn];
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(10, 10, 30, 30)];
CAShapeLayer *sl = [[CAShapeLayer alloc] init];
sl.fillColor = [UIColor whiteColor].CGColor;
sl.path = path.CGPath;
[sikakuBtn.layer addSublayer:sl];
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(matakite)];
[sikakuBtn addGestureRecognizer:tap];
}
– (void)sayonara
{
[UIView animateWithDuration:3.0 animations:^{
sankakuA.transform = CGAffineTransformMakeTranslation(-120, 0);
sankakuB.transform = CGAffineTransformMakeTranslation(120, 0);
}];
}
– (void)matakite
{
[UIView animateWithDuration:3.0 animations:^{
sankakuA.transform = CGAffineTransformIdentity;
sankakuB.transform = CGAffineTransformMakeRotation(M_PI);
}];
}
– (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end