AnimationCircle

AnimationCircle

  • 用四條曲線拼接出小球的形狀，逆時針開始，分別是弧AB，弧BC，弧CD，弧DA，每條弧都是兩個弧頂點加上兩個控制點，一共四個點繪制的三次貝塞爾曲線。
  • 界面布局如圖所示
界面布局圖.png
  • 創(chuàng)建繼承自CALayer的CircleLayer類，具體代碼如下 
    //  CircleLayer.h
#import <QuartzCore/QuartzCore.h>
@interface CircleLayer : CALayer
/** 滑塊的進度值 */
@property(nonatomic, assign)CGFloat progress;
@end

//  CircleLayer.m
#import "CircleLayer.h"
#import <UIKit/UIKit.h>

// 移動點的枚舉
typedef enum MovingPoint {
    POINT_D,
    POINT_B,
} MovingPoint;

// 宏定義
#define outsideRectSize 90

@interface CircleLayer()

/** 外接矩形 */
@property(nonatomic, assign)CGRect outsideRect;

/** 記錄上一次的progress，方便做差得出滑動方向 */
@property(nonatomic, assign)CGFloat lastProgress;

/** 實時記錄滑動方向 */
@property(nonatomic, assign)MovingPoint movePoint;

@end

@implementation CircleLayer

// 初始化滑塊的滑動值
- (instancetype)init
{
    self = [super init];
    if (self) {
        self.lastProgress = 0.5;
    }
    return self;
}

// 初始化動畫的Layer
- (instancetype)initWithLayer:(CircleLayer *)layer{
    self = [super initWithLayer:layer];
    if (self) {
        self.progress = layer.progress;
        self.outsideRect = layer.outsideRect;
        self.lastProgress = layer.lastProgress;
    }
    return self;
}

// 繪制小球
-(void)drawInContext:(CGContextRef)ctx {

    // 外接矩形頂點和控制點的距離，當(dāng)它為正方形邊長的1/3.6倍時，畫出來的圓弧完美貼合圓形
    CGFloat offset = self.outsideRect.size.width / 3.6;

    // 外接矩形頂點需要移動的距離
    CGFloat movedDistance = (self.outsideRect.size.width * 1 / 6) * fabs(self.progress - 0.5) * 2;

    // 外接矩形的中心點坐標(biāo)
    CGPoint rectCenter = CGPointMake(self.outsideRect.origin.x + self.outsideRect.size.width / 2, self.outsideRect.origin.y + self.outsideRect.size.height / 2);

    // 外接矩形頂點的坐標(biāo)
    CGPoint pointA = CGPointMake(rectCenter.x, self.outsideRect.origin.y + movedDistance);
    CGPoint pointB = CGPointMake(self.movePoint == POINT_D ? rectCenter.x + self.outsideRect.size.width / 2 : rectCenter.x + self.outsideRect.size.width / 2 + movedDistance * 2, rectCenter.y);
    CGPoint pointC = CGPointMake(rectCenter.x, rectCenter.y + self.outsideRect.size.height / 2 - movedDistance);
    CGPoint pointD = CGPointMake(self.movePoint == POINT_D ? self.outsideRect.origin.x - movedDistance * 2 : self.outsideRect.origin.x, rectCenter.y);

    // 外接矩形控制點的坐標(biāo)
    CGPoint c1 = CGPointMake(pointA.x + offset, pointA.y);
    CGPoint c2 = CGPointMake(pointB.x, self.movePoint == POINT_D ? pointB.y - offset : pointB.y - offset + movedDistance);
    CGPoint c3 = CGPointMake(pointB.x, self.movePoint == POINT_D ? pointB.y + offset : pointB.y + offset -movedDistance);
    CGPoint c4 = CGPointMake(pointC.x + offset, pointC.y);
    CGPoint c5 = CGPointMake(pointC.x - offset, pointC.y);
    CGPoint c6 = CGPointMake(pointD.x, self.movePoint == POINT_D ? pointD.y + offset - movedDistance : pointD.y + offset);
    CGPoint c7 = CGPointMake(pointD.x, self.movePoint == POINT_D ? pointD.y - offset + movedDistance : pointD.y - offset);
    CGPoint c8 = CGPointMake(pointA.x - offset, pointA.y);

    // 繪制外接虛線矩形
    UIBezierPath *rectPath = [UIBezierPath bezierPathWithRect:self.outsideRect];
    CGContextAddPath(ctx, rectPath.CGPath);
    CGContextSetStrokeColorWithColor(ctx, [UIColor blackColor].CGColor);
    CGContextSetLineWidth(ctx, 1.0);
    CGFloat dash[] = {5.0, 5.0};
    CGContextSetLineDash(ctx, 0.0, dash, 2);
    CGContextStrokePath(ctx);

    // 圓的邊界
    UIBezierPath *ovalPath = [UIBezierPath bezierPath];
    [ovalPath moveToPoint:pointA];
    [ovalPath addCurveToPoint:pointB controlPoint1:c1 controlPoint2:c2];
    [ovalPath addCurveToPoint:pointC controlPoint1:c3 controlPoint2:c4];
    [ovalPath addCurveToPoint:pointD controlPoint1:c5 controlPoint2:c6];
    [ovalPath addCurveToPoint:pointA controlPoint1:c7 controlPoint2:c8];
    [ovalPath closePath];

    CGContextAddPath(ctx, ovalPath.CGPath);
    CGContextSetStrokeColorWithColor(ctx, [UIColor blackColor].CGColor);
    CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);
    CGContextSetLineDash(ctx, 0, NULL, 0);
    CGContextDrawPath(ctx, kCGPathFillStroke);

    // 標(biāo)記出每個點并連線
    CGContextSetFillColorWithColor(ctx, [UIColor yellowColor].CGColor);
    CGContextSetStrokeColorWithColor(ctx, [UIColor blackColor].CGColor);
    NSArray *points = @[[NSValue valueWithCGPoint:pointA], [NSValue valueWithCGPoint:pointB], [NSValue valueWithCGPoint:pointC], [NSValue valueWithCGPoint:pointD], [NSValue valueWithCGPoint:c1], [NSValue valueWithCGPoint:c2], [NSValue valueWithCGPoint:c3], [NSValue valueWithCGPoint:c4], [NSValue valueWithCGPoint:c5], [NSValue valueWithCGPoint:c6], [NSValue valueWithCGPoint:c7], [NSValue valueWithCGPoint:c8]];
    [self drawPoint:points withContext:ctx];

    // 連接輔助線
    UIBezierPath *helperline = [UIBezierPath bezierPath];
    [helperline moveToPoint:pointA];
    [helperline addLineToPoint:c1];
    [helperline addLineToPoint:c2];
    [helperline addLineToPoint:pointB];
    [helperline addLineToPoint:c3];
    [helperline addLineToPoint:c4];
    [helperline addLineToPoint:pointC];
    [helperline addLineToPoint:c5];
    [helperline addLineToPoint:c6];
    [helperline addLineToPoint:pointD];
    [helperline addLineToPoint:c7];
    [helperline addLineToPoint:c8];
    [helperline closePath];

    CGContextAddPath(ctx, helperline.CGPath);

    CGFloat dash2[] = {2.0, 2.0};
    CGContextSetLineDash(ctx, 0.0, dash2, 2);
    CGContextStrokePath(ctx);
}

// 在某個point位置畫一個點，方便觀察運動情況
-(void)drawPoint:(NSArray *)points withContext:(CGContextRef)ctx {

    for (NSValue *pointValue in points) {
        CGPoint point = [pointValue CGPointValue];
        CGContextFillRect(ctx, CGRectMake(point.x - 2, point.y - 2, 4, 4));
    }
}

// 設(shè)置滑塊的移動位置
-(void)setProgress:(CGFloat)progress {

    _progress = progress;

    // 外接矩形在左側(cè)，B點動
    if (progress <= 0.5) {
        self.movePoint = POINT_B;
        NSLog(@"B點動");
    } else {
        self.movePoint = POINT_D;
        NSLog(@"D點動");
    }
    self.lastProgress = progress;

    CGFloat origin_x = self.position.x - outsideRectSize / 2 + (progress - 0.5) * (self.frame.size.width - outsideRectSize);
    CGFloat origin_y = self.position.y - outsideRectSize / 2;

    self.outsideRect = CGRectMake(origin_x, origin_y, outsideRectSize, outsideRectSize);

    [self setNeedsDisplay];
}

@end
  • 創(chuàng)建繼承自UIView的CircleView類，具體代碼如下 
    //  CircleView.h

#import <UIKit/UIKit.h>
#import "CircleLayer.h"

@interface CircleView : UIView

/** 圓的layer層 */
@property(nonatomic, strong)CircleLayer *circleLayer;

@end

//  CircleView.m

#import "CircleView.h"

@implementation CircleView

+(Class)layerClass {
    return [CircleLayer class];
}

-(instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.circleLayer = [CircleLayer layer];
        self.circleLayer.frame = CGRectMake(0, 0, frame.size.width, frame.size.height);
        self.circleLayer.contentsScale = [UIScreen mainScreen].scale;
        [self.layer addSublayer:self.circleLayer];
    }
    return self;
}

@end
  • 控制器代碼如下所示 
    //  ViewController.m
#import "ViewController.h"
#import "CircleView.h"

@interface ViewController ()

/** 滑塊 */
@property (weak, nonatomic) IBOutlet UISlider *mySlider;
/** 滑塊的值 */
@property (weak, nonatomic) IBOutlet UILabel *currentValueLabel;
/** 圓視圖 */
@property(nonatomic, strong)CircleView *cv;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    [self.mySlider addTarget:self action:@selector(valuechange:) forControlEvents:UIControlEventValueChanged];

    self.cv = [[CircleView alloc] initWithFrame:CGRectMake(self.view.frame.size.width / 2 - 320 / 2, self.view.frame.size.height / 2 - 320 / 2, 320, 320)];
    [self.view addSubview:self.cv];

    // 首次進入
    self.cv.circleLayer.progress = _mySlider.value;
}

// 滑塊值改變
-(void)valuechange:(UISlider *)sender {

    self.currentValueLabel.text = [NSString stringWithFormat:@"Current: %f", sender.value];
    self.cv.circleLayer.progress = sender.value;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end
  • 運行結(jié)果如圖所示
運行結(jié)果圖.gif
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 玩轉(zhuǎn)貝塞爾曲線 歷史：由法國雷諾汽車的工程師皮諾爾·貝塞爾發(fā)明，應(yīng)用于雷諾汽車設(shè)計原理鋪墊：給定 n+1個數(shù)據(jù)點，...
    百草紀(jì)閱讀 1,256評論 1贊 9
  • #define kBlackColor [UIColor blackColor] //.h //劃線 + (voi...
    CHADHEA閱讀 872評論 0贊 1
  • Quartz2D以及drawRect的重繪機制字?jǐn)?shù)1487 閱讀21 評論1 喜歡1一、什么是Quartz2D Q...
    PurpleWind閱讀 930評論 0贊 3
  • 前言 前段時間看到一個挺有趣的動畫效果，于是就想著實現(xiàn)一下，順便練下手，這里是第一篇教程，介紹了啟動動畫的制作，示...
    Arthury閱讀 737評論 5贊 11
  • 我愛你 我不敢說 不想說給山川 也不想說給大地 卻被風(fēng)兒泄露了秘密 風(fēng)兒知道了 全世界就知道了 我愛你
    驚濤的詩閱讀 291評論 5贊 13

友情鏈接更多精彩內(nèi)容