iOS 封裝打勾和打叉狀態(tài)動畫

沒啥知識點說的埋哟,就是利用UIBezierPath和CAShapeLayer劃線渤愁,然后動畫懂更,直接貼代碼。

@implementation LQYSuccessView
{
    UIView * _logoView;
}
- (instancetype)initWithFrame:(CGRect)frame withState:(BOOL)state
{
    self = [super initWithFrame:frame];
    if (self) {
        if (state) {
            [self drawSuccessLine];

        }else
        {
            [self drawFailLine];
 
        }
    }
    return self;
}

對勾方法

-(void)drawSuccessLine
{
    [_logoView removeFromSuperview];
    
    _logoView=[[UIView alloc]initWithFrame:self.frame];
    //曲線建立開始點和結束點
    //1. 曲線的中心
    //2. 曲線半徑
    //3. 開始角度
    //4. 結束角度
    //5. 順/逆時針方向
    UIBezierPath * path=[UIBezierPath bezierPathWithArcCenter:CGPointMake(self.centerX, self.centerY) radius:self.frame.size.width/2 startAngle:0 endAngle:M_PI*2 clockwise:YES];
    //對拐角和中心處理
    path.lineCapStyle=kCGLineCapRound;
    path.lineJoinStyle=kCGLineCapRound;
    
    
    //對號第一部分的起始
    
    [path moveToPoint:CGPointMake(self.frame.size.width/5, self.frame.size.width/2)];
    CGPoint pl =CGPointMake(self.frame.size.width/5*2, self.frame.size.width/4*3);
    [path addLineToPoint:pl];
    
    //對號第二部分起始
    CGPoint p2 = CGPointMake(self.frame.size.width/8.0*7, self.frame.size.width/4.0+8);
    [path addLineToPoint:p2];
    CAShapeLayer *layer = [[CAShapeLayer alloc] init];
    //內部填充顏色
    layer.fillColor = [UIColor clearColor].CGColor;
    //線條顏色
    layer.strokeColor = [UIColor colorWithHexString:@"60b0ff"].CGColor;
    //線條寬度
    layer.lineWidth = 5;
    layer.path = path.CGPath;
    //動畫設置
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:NSStringFromSelector(@selector(strokeEnd))];
    animation.fromValue = @0;
    animation.toValue = @1;
    animation.duration = 1;
    [layer addAnimation:animation forKey:NSStringFromSelector(@selector(strokeEnd))];
    
    [_logoView.layer addSublayer:layer];
    [self addSubview:_logoView];
                            
    
    
    
    
    
}

叉號方法

叉號和對號的區(qū)別就是調整一下會吐的起點和結束點

-(void)drawFailLine
{
    [_logoView removeFromSuperview];
    
    _logoView=[[UIView alloc]initWithFrame:self.frame];
    //曲線建立開始點和結束點
    //1. 曲線的中心
    //2. 曲線半徑
    //3. 開始角度
    //4. 結束角度
    //5. 順/逆時針方向
    UIBezierPath * path=[UIBezierPath bezierPathWithArcCenter:CGPointMake(self.centerX, self.centerY) radius:self.frame.size.width/2 startAngle:0 endAngle:M_PI*2 clockwise:YES];
    //對拐角和中心處理
    path.lineCapStyle=kCGLineCapRound;
    path.lineJoinStyle=kCGLineCapRound;
    
    
    //對號第一部分的起始
    
    [path moveToPoint:CGPointMake(self.frame.size.width/4, self.frame.size.width/4)];
    CGPoint pl =CGPointMake(self.frame.size.width/4*3, self.frame.size.width/4*3);
    [path addLineToPoint:pl];
    
    
    //對號第二部分起始

    [path moveToPoint:CGPointMake(self.frame.size.width/4*3, self.frame.size.width/4)];

    CGPoint p2 = CGPointMake(self.frame.size.width/4.0, self.frame.size.width/4*3);
    [path addLineToPoint:p2];
    
    CAShapeLayer *layer = [[CAShapeLayer alloc] init];
    //內部填充顏色
    layer.fillColor = [UIColor clearColor].CGColor;
    //線條顏色
    layer.strokeColor = [UIColor colorWithHexString:@"60b0ff"].CGColor;
    //線條寬度
    layer.lineWidth = 5;
    layer.path = path.CGPath;
    //動畫設置
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:NSStringFromSelector(@selector(strokeEnd))];
    animation.fromValue = @0;
    animation.toValue = @1;
    animation.duration = 1;
    [layer addAnimation:animation forKey:NSStringFromSelector(@selector(strokeEnd))];
    
    [_logoView.layer addSublayer:layer];
    [self addSubview:_logoView];
    

}

代碼里用了YYKit 里面的屬性推盛,如果你項目里沒有YYKit,修改一下self.centerX和self.centerX就行 谦铃。

具體項目地址請點擊demo

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末耘成,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子驹闰,更是在濱河造成了極大的恐慌瘪菌,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件嘹朗,死亡現(xiàn)場離奇詭異师妙,居然都是意外死亡,警方通過查閱死者的電腦和手機屹培,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進店門疆栏,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人惫谤,你說我怎么就攤上這事壁顶。” “怎么了溜歪?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵若专,是天一觀的道長。 經(jīng)常有香客問我蝴猪,道長调衰,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任自阱,我火速辦了婚禮嚎莉,結果婚禮上,老公的妹妹穿的比我還像新娘沛豌。我一直安慰自己趋箩,他們只是感情好,可當我...
    茶點故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布加派。 她就那樣靜靜地躺著叫确,像睡著了一般。 火紅的嫁衣襯著肌膚如雪芍锦。 梳的紋絲不亂的頭發(fā)上竹勉,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天,我揣著相機與錄音娄琉,去河邊找鬼次乓。 笑死吓歇,一個胖子當著我的面吹牛,可吹牛的內容都是我干的票腰。 我是一名探鬼主播照瘾,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼丧慈!你這毒婦竟也來了析命?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤逃默,失蹤者是張志新(化名)和其女友劉穎鹃愤,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體完域,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡软吐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了吟税。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片凹耙。...
    茶點故事閱讀 38,059評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖肠仪,靈堂內的尸體忽然破棺而出肖抱,到底是詐尸還是另有隱情,我是刑警寧澤异旧,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布意述,位于F島的核電站,受9級特大地震影響吮蛹,放射性物質發(fā)生泄漏荤崇。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一潮针、第九天 我趴在偏房一處隱蔽的房頂上張望术荤。 院中可真熱鬧,春花似錦每篷、人聲如沸瓣戚。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽带兜。三九已至,卻和暖如春吨灭,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背刑巧。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工喧兄, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留无畔,地道東北人。 一個月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓吠冤,卻偏偏與公主長得像浑彰,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子拯辙,可洞房花燭夜當晚...
    茶點故事閱讀 42,792評論 2 345

推薦閱讀更多精彩內容