あかとみどりのゆらゆらボール

　

　

あかいぼたん、みどりのぼたんを押してみよう。
　
同じ色の、ひもの上をゆらゆらボールが動いていくよ！
　
という感じの子供向けiPhoneアプリのサンプルコードを書きました。
　

ポイント
　
UIBezierPathを赤、緑の２種類用意して、
　
２重らせんのように赤と、緑のひもを交差させています。
　
ボールの動く軌跡もこの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