iOS動畫--發(fā)送禮物

場景:直播間刷禮物時(shí),會從發(fā)送按鈕處飄一個(gè)選中的禮物到主播的頭像處涝缝。
原理:找到發(fā)送按鈕和主播頭像所在它們共同的父視圖的位置,然后進(jìn)行組合動畫操作

實(shí)現(xiàn)一個(gè)類烦衣,來完成這個(gè)功能
#import <Foundation/Foundation.h>

NS_ASSUME_NONNULL_BEGIN

@interface GiftAnimation : NSObject
//這個(gè)的gift可以作為外部送禮物的URL進(jìn)行展示,userID可以作為唯一標(biāo)識來處理特殊業(yè)務(wù)邏輯
+ (void)animationGiftWithFromRect:(CGRect)from startPoint:(CGPoint)startPoint toRect:(CGRect)to giftBean:(NSString *)gift micUser:(NSInteger)userID superView:(nonnull UIView *)aView;

@end

NS_ASSUME_NONNULL_END
#import "GiftAnimation.h"

@implementation GiftAnimation

+ (void)animationGiftWithFromRect:(CGRect)from startPoint:(CGPoint)startPoint toRect:(CGRect)to giftBean:(NSString *)gift micUser:(NSInteger)userID superView:(nonnull UIView *)aView{
    if (to.size.width == 0) {
        return;
    }
    UIImageView * contentView = [UIImageView new];
    contentView.frame = from;
    //可以使用傳過來的入?yún)⑦M(jìn)行網(wǎng)絡(luò)圖片加載摘投,暫時(shí)用本地演示
    contentView.image = IMAGE(@"gift");
    //業(yè)務(wù)邏輯中可以使用userID作為唯一標(biāo)識
    contentView.tag = userID;
    
    CGPoint endPoitnt = CGPointMake(to.origin.x+ to.size.width/2, to.origin.y + to.size.height/2);
    
    CGFloat  height = startPoint.y - endPoitnt.y;
    CGFloat  width = startPoint.x - endPoitnt.x;

    CGPoint ceterPoint1 = CGPointMake(startPoint.x - width/2, startPoint.y - height /3);
    CGPoint ceterPoint2 = CGPointMake(startPoint.x - 2*width/3, startPoint.y - 2*height /3);
    
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:startPoint]; // 起點(diǎn)
    // 設(shè)置終點(diǎn) 和兩個(gè)控制點(diǎn)(拐點(diǎn))
    
    [path addCurveToPoint:endPoitnt controlPoint1:ceterPoint1 controlPoint2:ceterPoint2];
    
    //第二步:創(chuàng)建關(guān)鍵幀動畫
    CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    //pathAnimation.calculationMode = kCAAnimationPaced;// 我理解為節(jié)奏
    pathAnimation.fillMode = kCAFillModeForwards;
    pathAnimation.removedOnCompletion = NO;// 是否在動畫完成后從 Layer 層上移除  回到最開始狀態(tài)
    pathAnimation.duration = 1.0f;// 動畫時(shí)間
    pathAnimation.delegate = (id)aView;
    pathAnimation.repeatCount = 1;// 動畫重復(fù)次數(shù)```
    pathAnimation.path = path.CGPath;
    
    ///第三步:透明動畫
    CABasicAnimation *opacityAnim = [CABasicAnimation animationWithKeyPath:@"opacity"];
    opacityAnim.fromValue = [NSNumber numberWithFloat:1.0];
    opacityAnim.toValue = [NSNumber numberWithFloat:0.0];
    opacityAnim.beginTime = 1.0;
    opacityAnim.duration = 2.0;
    opacityAnim.removedOnCompletion = NO;
    opacityAnim.fillMode = kCAFillModeForwards;
    
    //動畫組
    CAAnimationGroup *animGroup = [CAAnimationGroup animation];
    animGroup.animations = [NSArray arrayWithObjects:pathAnimation, opacityAnim, nil];
    animGroup.duration = 3.0;
    animGroup.delegate = (id)aView;
    animGroup.fillMode = kCAFillModeForwards;
    animGroup.removedOnCompletion = NO;
    
    
    //第四步: 添加動畫
    [contentView.layer addAnimation:animGroup forKey:[NSString stringWithFormat:@"myAnimation"]];// 添加動畫
    [aView addSubview:contentView];
    
    //防止UIImage只生成不銷毀妄帘,占用內(nèi)存唆鸡,動畫完實(shí)時(shí)銷毀
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(20 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [contentView removeFromSuperview];
    });
}
@end

外部使用:

例子:一個(gè)發(fā)送按鈕fromBtn,點(diǎn)擊fromBtn脑慧,會從fromBtn處飄一個(gè)禮物到頭像toIcon處

//獲取fromBtn所在父視圖的坐標(biāo)位置CGRect
    CGRect fromRec = [self.fromBtn convertRect:self.fromBtn.bounds toView:self.view];
//獲取禮物初始位置魄眉,即fromBtn的中心點(diǎn)位置
    CGPoint point = CGPointMake(fromRec.origin.x + (fromRec.size.width/2), fromRec.origin.y + (fromRec.size.height/2));
//獲取toIcon所在父視圖的坐標(biāo)位置CGRect
    CGRect toRec = [self.toIcon convertRect:self.toIcon.bounds toView:self.view];
//調(diào)用方法,開始動畫闷袒,micUser和giftBean可以根據(jù)具體業(yè)務(wù)具體處理坑律,不需要的可以去除
    [GiftAnimation animationGiftWithFromRect:rec startPoint:point toRect:toRec giftBean:@"" micUser:32 superView:self.view];
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市囊骤,隨后出現(xiàn)的幾起案子晃择,更是在濱河造成了極大的恐慌,老刑警劉巖也物,帶你破解...
    沈念sama閱讀 216,496評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件宫屠,死亡現(xiàn)場離奇詭異,居然都是意外死亡焦除,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評論 3 392
  • 文/潘曉璐 我一進(jìn)店門作彤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來膘魄,“玉大人,你說我怎么就攤上這事竭讳〈雌希” “怎么了?”我有些...
    開封第一講書人閱讀 162,632評論 0 353
  • 文/不壞的土叔 我叫張陵绢慢,是天一觀的道長灿渴。 經(jīng)常有香客問我,道長胰舆,這世上最難降的妖魔是什么骚露? 我笑而不...
    開封第一講書人閱讀 58,180評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮缚窿,結(jié)果婚禮上棘幸,老公的妹妹穿的比我還像新娘。我一直安慰自己倦零,他們只是感情好误续,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著扫茅,像睡著了一般蹋嵌。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上葫隙,一...
    開封第一講書人閱讀 51,165評論 1 299
  • 那天栽烂,我揣著相機(jī)與錄音,去河邊找鬼。 笑死愕鼓,一個(gè)胖子當(dāng)著我的面吹牛钙态,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播菇晃,決...
    沈念sama閱讀 40,052評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼册倒,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了磺送?” 一聲冷哼從身側(cè)響起驻子,我...
    開封第一講書人閱讀 38,910評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎估灿,沒想到半個(gè)月后崇呵,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,324評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡馅袁,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評論 2 332
  • 正文 我和宋清朗相戀三年域慷,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片汗销。...
    茶點(diǎn)故事閱讀 39,711評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡犹褒,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出弛针,到底是詐尸還是另有隱情叠骑,我是刑警寧澤,帶...
    沈念sama閱讀 35,424評論 5 343
  • 正文 年R本政府宣布削茁,位于F島的核電站宙枷,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏茧跋。R本人自食惡果不足惜慰丛,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望瘾杭。 院中可真熱鬧璧帝,春花似錦、人聲如沸富寿。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽页徐。三九已至苏潜,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間变勇,已是汗流浹背恤左。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1 269
  • 我被黑心中介騙來泰國打工贴唇, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人飞袋。 一個(gè)月前我還...
    沈念sama閱讀 47,722評論 2 368
  • 正文 我出身青樓戳气,卻偏偏與公主長得像,于是被迫代替她去往敵國和親巧鸭。 傳聞我的和親對象是個(gè)殘疾皇子瓶您,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評論 2 353

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

  • 2017.02.22 可以練習(xí),每當(dāng)這個(gè)時(shí)候纲仍,腦袋就犯困呀袱,我這腦袋真是神奇呀,一說讓你做事情郑叠,你就犯困夜赵,你可不要太...
    Carden閱讀 1,342評論 0 1
  • 用兩張圖告訴你,為什么你的 App 會卡頓? - Android - 掘金 Cover 有什么料乡革? 從這篇文章中你...
    hw1212閱讀 12,714評論 2 59
  • 2022.1.12 完成飄屏功能 2021.1.7 1寇僧、更新了美顏,顯示有問題沸版,需要測測嘁傀,已解決,美顏設(shè)置 2推穷、完...
    六道Peter閱讀 397評論 1 3
  • 全局創(chuàng)建context心包? 創(chuàng)建一個(gè)全局的context类咧,然后退出SDK層房間時(shí)不銷毀只是停止context馒铃。 SD...
    Carden閱讀 1,432評論 0 2
  • * 不重要,不緊急痕惋,**重要 不緊急区宇,***緊急不重要,****重要 緊急 2021.1.4 1值戳、進(jìn)入直播間的邏輯...
    六道Peter閱讀 170評論 0 0