iOS 關(guān)于千聊錄音動畫的簡單實現(xiàn)

首先看下效果展示:


動畫.gif

  Core Animation(核心動畫)是一組功能強大裂垦、效果華麗的動畫API寺枉,無論在iOS系統(tǒng)或者在你開發(fā)的App中括蝠,都有大量應(yīng)用来候。

樓主簡單的利用UIBezierPath繪畫圓,然后利用CABasicAnimationopacity調(diào)整視圖的透明度左敌,然后利用CABasicAnimationtransform.scale來實現(xiàn)圓的放大縮小瘾蛋,如果想要了解更多傳送門:
http://www.imlifengfeng.com/blog/?p=548

廢話不多所上代碼
基本都是通過懶加載實現(xiàn)
創(chuàng)建CAShapeLayer

- (CAShapeLayer *)shapeLayer{
    if (_shapeLayer==nil) {
        _shapeLayer = [CAShapeLayer layer];
        _shapeLayer.frame = CGRectMake(100, 100, 100, 100);
        _shapeLayer.fillColor = [UIColor blueColor].CGColor;
        _shapeLayer.strokeColor = [UIColor blackColor].CGColor;
        //通過貝塞爾曲線繪制圓
        CGFloat startAngle = 0.0;
        CGFloat endAngle = M_PI *2;

        UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50, 50) radius:50 startAngle:startAngle endAngle:endAngle clockwise:YES];
        _shapeLayer.path = bezierPath.CGPath;

    }
    return _shapeLayer;
}

添加動畫組這里用到CAAnimationGroup

- (CAAnimationGroup *)animaGroup{
    if (_animaGroup == nil) {
        CABasicAnimation * _opacityAnima = [CABasicAnimation animationWithKeyPath:@"opacity"];
        _opacityAnima.fromValue = @(0.7);
        _opacityAnima.toValue = @(0.3);
        
        CABasicAnimation *expandAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
        expandAnimation.fromValue = [NSNumber numberWithFloat:1]; // 開始時的倍率
        expandAnimation.toValue = [NSNumber numberWithFloat:1.5]; // 結(jié)束時的倍率
        
        
        _animaGroup = [CAAnimationGroup animation];
        _animaGroup.animations = @[ expandAnimation,_opacityAnima];
        _animaGroup.duration = 3;
        _animaGroup.repeatCount = HUGE;
        _animaGroup.autoreverses = YES;
    }
    return _animaGroup;
   
}

具體里面的屬性可以點擊上文鏈接了解不多解釋,只實現(xiàn)
動畫開始矫限、停止方法

/Start Animation
- (void)startAnimation{
    [self.layer addSublayer:self.shapeLayer];
    [self.shapeLayer addAnimation:self.animaGroup forKey:@"scaleGroup"];
}
//Stop Animation
- (void)stopAnimation{
    if (_shapeLayer) {
        [self.shapeLayer removeAllAnimations];
        [self.shapeLayer removeFromSuperlayer];

    }
}

代碼地址:https://github.com/lanjiaoli/Animation
有不足的地方大家多多指出哺哼,謝謝

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市叼风,隨后出現(xiàn)的幾起案子取董,更是在濱河造成了極大的恐慌,老刑警劉巖无宿,帶你破解...
    沈念sama閱讀 218,284評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件茵汰,死亡現(xiàn)場離奇詭異,居然都是意外死亡孽鸡,警方通過查閱死者的電腦和手機蹂午,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來梭灿,“玉大人画侣,你說我怎么就攤上這事”ざ剩” “怎么了配乱?”我有些...
    開封第一講書人閱讀 164,614評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長皮迟。 經(jīng)常有香客問我搬泥,道長,這世上最難降的妖魔是什么伏尼? 我笑而不...
    開封第一講書人閱讀 58,671評論 1 293
  • 正文 為了忘掉前任忿檩,我火速辦了婚禮,結(jié)果婚禮上爆阶,老公的妹妹穿的比我還像新娘燥透。我一直安慰自己,他們只是感情好辨图,可當(dāng)我...
    茶點故事閱讀 67,699評論 6 392
  • 文/花漫 我一把揭開白布班套。 她就那樣靜靜地躺著,像睡著了一般故河。 火紅的嫁衣襯著肌膚如雪吱韭。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,562評論 1 305
  • 那天鱼的,我揣著相機與錄音理盆,去河邊找鬼痘煤。 笑死,一個胖子當(dāng)著我的面吹牛猿规,可吹牛的內(nèi)容都是我干的衷快。 我是一名探鬼主播,決...
    沈念sama閱讀 40,309評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼坎拐,長吁一口氣:“原來是場噩夢啊……” “哼烦磁!你這毒婦竟也來了养匈?” 一聲冷哼從身側(cè)響起哼勇,我...
    開封第一講書人閱讀 39,223評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎呕乎,沒想到半個月后积担,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,668評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡猬仁,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,859評論 3 336
  • 正文 我和宋清朗相戀三年帝璧,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片湿刽。...
    茶點故事閱讀 39,981評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡的烁,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出诈闺,到底是詐尸還是另有隱情渴庆,我是刑警寧澤,帶...
    沈念sama閱讀 35,705評論 5 347
  • 正文 年R本政府宣布雅镊,位于F島的核電站襟雷,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏仁烹。R本人自食惡果不足惜耸弄,卻給世界環(huán)境...
    茶點故事閱讀 41,310評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望卓缰。 院中可真熱鬧计呈,春花似錦、人聲如沸征唬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,904評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽鳍鸵。三九已至苇瓣,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間偿乖,已是汗流浹背击罪。 一陣腳步聲響...
    開封第一講書人閱讀 33,023評論 1 270
  • 我被黑心中介騙來泰國打工哲嘲, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人媳禁。 一個月前我還...
    沈念sama閱讀 48,146評論 3 370
  • 正文 我出身青樓眠副,卻偏偏與公主長得像,于是被迫代替她去往敵國和親竣稽。 傳聞我的和親對象是個殘疾皇子囱怕,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,933評論 2 355

推薦閱讀更多精彩內(nèi)容