//
// HeartView.h
// DrawHeart
//
// Created by WQL on 16/3/1.
// Copyright ? 2016年 WQL. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface HeartView : UIView
/**
 * 比率
 */
@property (nonatomic,assign) CGFloat rate;
/**
 * 填充的顏色
 */
@property (nonatomic,strong) UIColor *fillColor;
/**
 * 線條的顏色
 */
@property (nonatomic,strong) UIColor *strokeColor;
/**
 * 線條的寬度
 */
@property (nonatomic,assign) CGFloat lineWidth;
@end

//
// HeartView.m
// DrawHeart
//
// Created by WQL on 16/3/1.
// Copyright ? 2016年 WQL. All rights reserved.
//

#import "HeartView.h"
//間距
NSInteger const spaceWidth = 5;
//波浪的振幅
NSInteger const waveAmplitude = 5;
@interface HeartView ()
{
  CGFloat t;
}
@end

@implementation HeartView

- (instancetype)initWithFrame:(CGRect)frame
{
  self = [super initWithFrame:frame];
  if (self) {
    [self loadTimer];
  }
  return self;
}

- (void)drawRect:(CGRect)rect
{
  [super drawRect:rect];
  
  //上面的兩個半圓 半徑為整個frame的四分之一
  CGFloat radius = MIN((self.frame.size.width-spaceWidth*2)/4, (self.frame.size.height-spaceWidth*2)/4);
  
  //左側(cè)圓心 位于左側(cè)邊距＋半徑寬度
  CGPoint leftCenter = CGPointMake(spaceWidth+radius, spaceWidth+radius);
  //右側(cè)圓心 位于左側(cè)圓心的右側(cè) 距離為兩倍半徑
  CGPoint rightCenter = CGPointMake(spaceWidth+radius*3, spaceWidth+radius);
  
  //左側(cè)半圓
  UIBezierPath *heartLine = [UIBezierPath bezierPathWithArcCenter:leftCenter radius:radius startAngle:M_PI endAngle:0 clockwise:YES];

  //右側(cè)半圓
  [heartLine addArcWithCenter:rightCenter radius:radius startAngle:M_PI endAngle:0 clockwise:YES];
  
  //曲線連接到新的底部頂點 為了弧線的效果，控制點，坐標(biāo)x為總寬度減spaceWidth，剛好可以相切，平滑過度 y可以根據(jù)需要進行調(diào)整，y越大，所畫出來的線越接近內(nèi)切圓弧
  [heartLine addQuadCurveToPoint:CGPointMake((self.frame.size.width/2), self.frame.size.height-spaceWidth*2) controlPoint:CGPointMake(self.frame.size.width-spaceWidth, self.frame.size.height*0.6)];
  
  //用曲線 底部的頂點連接到左側(cè)半圓的左起點 為了弧線的效果，控制點，坐標(biāo)x為spaceWidth，剛好可以相切，平滑過度。y可以根據(jù)需要進行調(diào)整，y越大，所畫出來的線越接近內(nèi)切圓?。ㄐЧ窃脚郑?
  [heartLine addQuadCurveToPoint:CGPointMake(spaceWidth, spaceWidth+radius) controlPoint:CGPointMake(spaceWidth, self.frame.size.height*0.6)];
  
  //線條處理
  [heartLine setLineCapStyle:kCGLineCapRound];
  //線寬
  [self setHeartLineWidthWithPath:heartLine];
  //線條的顏色
  [self setHeartStrokeColor];
  
  //根據(jù)坐標(biāo)點連線
  [heartLine stroke];
  //clipToBounds 切掉多余的部分
  [heartLine addClip];
  
  
  //初始化波浪的構(gòu)成
  UIBezierPath *waves = [UIBezierPath bezierPath];
  
  //首先 把起始點設(shè)置為左側(cè) x坐標(biāo)為spaceWidth 心形從下往上填充,y坐標(biāo)需要滿足一定的函數(shù)關(guān)系式，當(dāng)rate為0時，位置為總高度－2倍的留白距離（spaceWidth）＋波浪的振幅；當(dāng)rate為1時，位置為留白距離（spaceWidth）－振幅。由這兩個狀態(tài)構(gòu)建函數(shù)表達式，即可得到如下表達式
  CGPoint startPoint = CGPointMake(spaceWidth, (self.frame.size.height-3*spaceWidth+waveAmplitude*2)*(1-self.rate)+spaceWidth-waveAmplitude);
  [waves moveToPoint:startPoint];
  
  //關(guān)鍵的地方來了 波浪線怎么畫？
  //首先，x坐標(biāo)是從左往右連續(xù)的 y坐標(biāo)是起始的高度加上一定的波動 這里選擇了cos函數(shù)。5是波動的幅度大小，50控制的是波峰的間距，t是為了讓其動起來，隨時間發(fā)生波動
  for (int i = 0; i<self.frame.size.width-spaceWidth*2+self.lineWidth*2; i++) {
    //x是要考慮線寬的 不然的話，會導(dǎo)致填充的寬度不夠 y就是在某個值附近波動
    CGPoint middlePoint = CGPointMake(spaceWidth+i-self.lineWidth, startPoint.y+waveAmplitude*cos(M_PI/50*i+t));
    
    [waves addLineToPoint:middlePoint];
  }
  
  //畫波浪線的右端 到底部的垂直線
  [waves addLineToPoint:CGPointMake(self.frame.size.width-spaceWidth*2, self.frame.size.height-spaceWidth*2)];
  //畫右側(cè)底部的點 到達左側(cè)底部的點之間的橫線
  [waves addLineToPoint:CGPointMake(spaceWidth, self.frame.size.height-spaceWidth*2)];
  //設(shè)置填充顏色
  [self setHeartFillColor];
  //填充
  [waves fill];
  
}
//設(shè)置線條寬度 默認為1
- (void)setHeartLineWidthWithPath:(UIBezierPath*)path
{
  CGFloat lineW;
  if (self.lineWidth) {
    lineW = self.lineWidth;
  }else{
    lineW = 1;
  }
  
  [path setLineWidth:lineW];
}

//設(shè)置線條顏色
- (void)setHeartStrokeColor
{
  UIColor *strokColor;
  if (self.strokeColor) {
    strokColor = self.strokeColor;
  }else{
    strokColor = [UIColor blackColor];
  }
  
  [strokColor set];
}
//設(shè)置填充的顏色
- (void)setHeartFillColor
{
  UIColor *fillColor;
  if (self.fillColor) {
    fillColor = self.fillColor;
  }else{
    fillColor = [UIColor orangeColor];
  }
  
  [fillColor set];

}

//為了實現(xiàn)動態(tài)的效果，加一個Timer
- (void)loadTimer
{
  NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:0.02 target:self selector:@selector(timerAction) userInfo:nil repeats:YES];
  [timer fire];
}
//t 是一個影響波浪線的參數(shù)，每次修改之，再畫，則每次的都不一樣，則有動態(tài)的效果
- (void)timerAction
{
  t += M_PI/50;
  
  if (t == M_PI) {
    t = 0;
  }
  //修改了t之后 要調(diào)用draw方法
  [self setNeedsDisplay];
}

@end一些關(guān)鍵點，我已經(jīng)注釋啦～

//
// ViewController.m
// DrawHeart
//
// Created by WQL on 16/3/1.
// Copyright ? 2016年 WQL. All rights reserved.
//

#import "ViewController.h"
#import "HeartView.h"

NSInteger const heartWidth = 200;
NSInteger const heartHeight = 200;

@interface ViewController ()
{
 HeartView *heartView;
}
@end

@implementation ViewController

- (void)viewDidLoad {
 [super viewDidLoad];
 heartView = [[HeartView alloc]initWithFrame:CGRectMake((self.view.frame.size.width-heartWidth)/2, (self.view.frame.size.height-heartHeight)/2, heartWidth, heartHeight)];

 heartView.rate = 0.5;
 heartView.lineWidth = 1;
 heartView.strokeColor = [UIColor blackColor];
 heartView.fillColor = [UIColor redColor];
 heartView.backgroundColor = [UIColor clearColor];
 [self.view addSubview:heartView];
 
 [self loadSlider];
}

- (void)loadSlider
{
 UISlider *valueSlider = [[UISlider alloc]initWithFrame:CGRectMake((self.view.frame.size.width-300)/2, self.view.frame.size.height-150, 300, 50)];
 valueSlider.minimumValue = 0.0;
 valueSlider.maximumValue = 1.0;
 valueSlider.value = 0.5;
 [valueSlider addTarget:self action:@selector(valueChangedAction:) forControlEvents:UIControlEventValueChanged];
 [self.view addSubview:valueSlider];
}

- (void)valueChangedAction:(UISlider*)slider
{
 heartView.rate = slider.value;
}


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

@end