用path動畫繪製水波紋

標籤：

用path動畫繪製水波紋

 

效果

 

源碼

////  ViewController.m//  PathAnimation////  Created by YouXianMing on 15/7/3.//  Copyright (c) 2015年 YouXianMing. All rights reserved.//#import "ViewController.h"@interface ViewController ()@property (nonatomic, strong)  CAShapeLayer   *animationLayer;@property (nonatomic, strong)  NSTimer        *timer;@property (nonatomic)          CGPathRef       oldPath;@property (nonatomic)          CGPathRef       path;@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];        self.animationLayer               = [CAShapeLayer layer];    self.animationLayer.borderWidth   = 0.5f;    self.animationLayer.frame         = CGRectMake(0, 0, 200, 200);    self.animationLayer.position      = self.view.center;    self.animationLayer.path          = [self createPath].CGPath;    self.animationLayer.fillColor     = [UIColor redColor].CGColor;    [self.view.layer addSublayer:self.animationLayer];    _timer = [NSTimer scheduledTimerWithTimeInterval:0.5f target:self selector:@selector(event) userInfo:nil repeats:YES];}- (void)event {        _oldPath = self.animationLayer.path;    _path    = [self createPath].CGPath;        CABasicAnimation *basicAnimation   = [CABasicAnimation animationWithKeyPath:@"path"];    basicAnimation.duration            = 0.5;    basicAnimation.fromValue           = (__bridge id)(_oldPath);    basicAnimation.toValue             = (__bridge id)_path;    self.animationLayer.path           = _path;        [self.animationLayer addAnimation:basicAnimation forKey:@"animateCirclePath"];}- (UIBezierPath *)createPath {        static int count = 0;        CGFloat controlPoint1_X = 0;    CGFloat controlPoint1_Y = 0;    CGFloat controlPoint2_X = 0;    CGFloat controlPoint2_Y = 0;        if (count ++ % 2 == 0) {                controlPoint1_X = [self randomNum_70_79];        controlPoint1_Y = [self randomNum_70_79];                controlPoint2_X = [self randomNum_120_129];        controlPoint2_Y = [self randomNum_120_129];            } else {            controlPoint1_X = [self randomNum_70_79];        controlPoint1_Y = [self randomNum_120_129];                controlPoint2_X = [self randomNum_120_129];        controlPoint2_Y = [self randomNum_70_79];            }        // 擷取貝茲路徑    UIBezierPath* bezierPath = [UIBezierPath bezierPath];        // A    [bezierPath moveToPoint:CGPointMake(0, 100)];        // B (Curve)    [bezierPath addCurveToPoint:CGPointMake(200, 100)                  controlPoint1:CGPointMake(controlPoint1_X, controlPoint1_Y)                  controlPoint2:CGPointMake(controlPoint2_X, controlPoint2_Y)];        // C    [bezierPath addLineToPoint:CGPointMake(200, 200)];        // D    [bezierPath addLineToPoint:CGPointMake(0, 200)];        // 閉合曲線    [bezierPath closePath];        return bezierPath;}/** *  隨機數 70 - 79 * *  @return 隨機數 */- (CGFloat)randomNum_70_79 {    return (CGFloat)(arc4random() % 10 + 70);}/** *  隨機數 120 - 129 * *  @return 隨機數 */- (CGFloat)randomNum_120_129 {    return (CGFloat)(arc4random() % 10 + 120);}@end

 

核心

 

用path動畫繪製水波紋