あかいぼたん、みどりのぼたんを押してみよう。
同じ色の、ひもの上をゆらゆらボールが動いていくよ!
という感じの子供向けiPhoneアプリのサンプルコードを書きました。
ポイント
UIBezierPathを赤、緑の2種類用意して、
2重らせんのように赤と、緑のひもを交差させています。
ボールの動く軌跡もこのpathを利用。
環境
このiPhoneアプリサンプルは、
XcodeのiOS6 iPhone Simulatorで動かしています。
サンプルコード
#import “ViewController.h”
#import <QuartzCore/QuartzCore.h>
@interface ViewController () {
UIBezierPath *pathRed;
UIBezierPath *pathGreen;
UIView *mark;
}
@end
@implementation ViewController
– (void)viewDidLoad
{
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
[self createWaveLineA];
[self createWaveLineB];
[self createUI];
}
– (void)createWaveLineA
{
float y1 = 50;
float y2 = 200;
pathRed = [[UIBezierPath alloc] init];
[pathRed moveToPoint:CGPointMake(0, y1)];
[pathRed addCurveToPoint:CGPointMake(50, y2) controlPoint1:CGPointMake(50, y1) controlPoint2:CGPointMake(0, y2)];
[pathRed addCurveToPoint:CGPointMake(100, y1) controlPoint1:CGPointMake(100, y2) controlPoint2:CGPointMake(50, y1)];
[pathRed addCurveToPoint:CGPointMake(150, y2) controlPoint1:CGPointMake(150, y1) controlPoint2:CGPointMake(100, y2)];
[pathRed addCurveToPoint:CGPointMake(200, y1) controlPoint1:CGPointMake(200, y2) controlPoint2:CGPointMake(150, y1)];
[pathRed addCurveToPoint:CGPointMake(250, y2) controlPoint1:CGPointMake(250, y1) controlPoint2:CGPointMake(200, y2)];
[pathRed addCurveToPoint:CGPointMake(300, y1) controlPoint1:CGPointMake(300, y2) controlPoint2:CGPointMake(250, y1)];
CAShapeLayer *sl = [[CAShapeLayer alloc] initWithLayer:self.view.layer];
sl.fillColor = [UIColor clearColor].CGColor;
sl.strokeColor = [UIColor redColor].CGColor;
sl.lineWidth = 3;
sl.path = pathRed.CGPath;
[self.view.layer addSublayer:sl];
}
– (void)createWaveLineB
{
float y1 = 200;
float y2 = 50;
pathGreen = [[UIBezierPath alloc] init];
[pathGreen moveToPoint:CGPointMake(0, y1)];
[pathGreen addCurveToPoint:CGPointMake(50, y2) controlPoint1:CGPointMake(50, y1) controlPoint2:CGPointMake(0, y2)];
[pathGreen addCurveToPoint:CGPointMake(100, y1) controlPoint1:CGPointMake(100, y2) controlPoint2:CGPointMake(50, y1)];
[pathGreen addCurveToPoint:CGPointMake(150, y2) controlPoint1:CGPointMake(150, y1) controlPoint2:CGPointMake(100, y2)];
[pathGreen addCurveToPoint:CGPointMake(200, y1) controlPoint1:CGPointMake(200, y2) controlPoint2:CGPointMake(150, y1)];
[pathGreen addCurveToPoint:CGPointMake(250, y2) controlPoint1:CGPointMake(250, y1) controlPoint2:CGPointMake(200, y2)];
[pathGreen addCurveToPoint:CGPointMake(300, y1) controlPoint1:CGPointMake(300, y2) controlPoint2:CGPointMake(250, y1)];
CAShapeLayer *sl = [[CAShapeLayer alloc] initWithLayer:self.view.layer];
sl.fillColor = [UIColor clearColor].CGColor;
sl.strokeColor = [UIColor greenColor].CGColor;
sl.lineWidth = 3;
sl.path = pathGreen.CGPath;
[self.view.layer addSublayer:sl];
}
– (void)createUI
{
UIView *red = [[UIView alloc] initWithFrame:CGRectMake(20, 300, 100, 100)];
red.backgroundColor = [UIColor redColor];
red.layer.cornerRadius = 5;
[self.view addSubview:red];
UITapGestureRecognizer *tapR = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(startRed)];
[red addGestureRecognizer:tapR];
UIView *green = [[UIView alloc] initWithFrame:CGRectMake(200, 300, 100, 100)];
green.backgroundColor = [UIColor greenColor];
green.layer.cornerRadius = 5;
[self.view addSubview:green];
UITapGestureRecognizer *tapG = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(startGreen)];
[green addGestureRecognizer:tapG];
}
– (void)startRed
{
mark = [[UIView alloc] initWithFrame:CGRectMake(-50, 0, 50, 50)];
mark.backgroundColor = [UIColor redColor];
mark.layer.cornerRadius = 25;
CAKeyframeAnimation *ka = [CAKeyframeAnimation animationWithKeyPath:@”position”];
ka.path = pathRed.CGPath;
ka.duration = 5;
ka.delegate = self;
[mark.layer addAnimation:ka forKey:@”wave”];
[self.view addSubview:mark];
[self performSelector:@selector(removeView:) withObject:mark afterDelay:5.1];
}
– (void)startGreen
{
mark = [[UIView alloc] initWithFrame:CGRectMake(-50, 0, 50, 50)];
mark.backgroundColor = [UIColor greenColor];
mark.layer.cornerRadius = 25;
CAKeyframeAnimation *ka = [CAKeyframeAnimation animationWithKeyPath:@”position”];
ka.path = pathGreen.CGPath;
ka.duration = 5;
ka.delegate = self;
[mark.layer addAnimation:ka forKey:@”wave”];
[self.view addSubview:mark];
[self performSelector:@selector(removeView:) withObject:mark afterDelay:5.1];
}
– (void)removeView:(UIView*)v
{
[v removeFromSuperview];
}
– (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end