iOS-嗶哩嗶哩動畫_開機動畫

最近因為需要,做了下嗶哩嗶哩動畫這個應用缤底。從數(shù)據顾患、素材的抓取、分類个唧、測試江解,到應用的基本功能實現(xiàn),確實用了一段時間徙歼。下面是做嗶哩嗶哩動畫的開機動畫效果的實現(xiàn)犁河。

![Uploading LuanchImage設置_552569.png . . .]](http://upload-images.jianshu.io/upload_images/2023147-b27b7518b9e7f8c7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

動畫開機圖.png

從圖一到圖二,中間的人物從小到大魄梯,從透明到呈現(xiàn)的過程桨螺。
實現(xiàn)這個效果并不難,步驟如下
1.在LuanchImage設置開機圖片

LuanchImage設置.png
LuanchImage.png

2.使用CABasicAnimationGroup實現(xiàn)動畫效果
這里創(chuàng)建了一個視圖控制器類LaunchViewController酿秸,用于實現(xiàn)動畫效果灭翔。
設置兩個屬性,其中bgImageView是背景圖辣苏,playImageView是做動畫的圖片肝箱。

@property (nonatomic,strong)UIImageView  *bgImageView;
@property (nonatomic,strong)UIImageView  *playImageView;

給這兩個屬性懶加載

- (UIImageView *)bgImageView{
   
   if(!_bgImageView){
       _bgImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight)];
       _bgImageView.image = [UIImage imageNamed:@"bilibili_splash_iphone_bg"];
   }
   return _bgImageView;
}

- (UIImageView *)playImageView{
   
   if(!_playImageView){
       _playImageView = [[UIImageView alloc] initWithFrame:CGRectMake(ScreenWidth/2, ScreenHeight/2-100, 1, 1.3)];
       _playImageView.image = [UIImage imageNamed:@"bilibili_splash_default"];
   }
   return _playImageView;
}

viewDidLoad中把視圖添加上去

    [self.view addSubview:self.bgImageView];
    [self.bgImageView addSubview:self.playImageView];
    [self performSelector:@selector(animationLunch) withObject:self afterDelay:0];

animationLunch中實現(xiàn)組合動畫效果

- (void)animationLunch{
    
    CGFloat duration = 1.5;
    CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scale.fromValue = @1;
    scale.toValue = @(ScreenWidth - 40);
    scale.duration = duration;
    scale.repeatCount = 1;
    scale.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    
    CABasicAnimation *opacity = [CABasicAnimation animationWithKeyPath:@"opacity"];
    opacity.fromValue = @0;
    opacity.toValue = @1;
    opacity.duration = duration;
    scale.repeatCount = 1;
    
    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
    animationGroup.animations = @[scale,opacity];
    animationGroup.duration = duration;
    animationGroup.repeatCount = 1;
    //如果是一個動畫CAAnimation,則需要將其removedOnCompletion設置為NO,要不然fillMode不起作用
    animationGroup.removedOnCompletion = NO;
    //決定當前在非active時間段的行為,比如動畫開始之前,動畫結束之后
    animationGroup.fillMode =kCAFillModeForwards;
    animationGroup.delegate = self;
    [self.playImageView.layer addAnimation:animationGroup forKey:nil];
}

LaunchViewController遵循代理哄褒,并實現(xiàn)CAAnimationDelegate協(xié)議

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    [NSThread sleepForTimeInterval:2.0];
    //移除開機動畫
    [self.bgImageView removeFromSuperview];
}

這個類要做的事情完成了,回到AppDelegate中煌张,導入剛創(chuàng)建的類頭文件呐赡,在application: didFinishLaunchingWithOptions:中加入以下代碼,把動畫添加到場景中

  _launchVC = [[LaunchViewController alloc] init];
    //添加到場景
    [self.window addSubview:_launchVC.view];
    //放到最頂層
    [self.window bringSubviewToFront:_launchVC.view];
    [self performSelector:@selector(removeLunch) withObject:self afterDelay:2.0];

到此,嗶哩嗶哩動畫的開機動畫效果就實現(xiàn)了骏融。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末链嘀,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子绎谦,更是在濱河造成了極大的恐慌管闷,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,734評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件窃肠,死亡現(xiàn)場離奇詭異包个,居然都是意外死亡,警方通過查閱死者的電腦和手機冤留,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評論 3 394
  • 文/潘曉璐 我一進店門碧囊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人纤怒,你說我怎么就攤上這事糯而。” “怎么了泊窘?”我有些...
    開封第一講書人閱讀 164,133評論 0 354
  • 文/不壞的土叔 我叫張陵熄驼,是天一觀的道長。 經常有香客問我烘豹,道長瓜贾,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,532評論 1 293
  • 正文 為了忘掉前任携悯,我火速辦了婚禮祭芦,結果婚禮上,老公的妹妹穿的比我還像新娘憔鬼。我一直安慰自己龟劲,他們只是感情好,可當我...
    茶點故事閱讀 67,585評論 6 392
  • 文/花漫 我一把揭開白布轴或。 她就那樣靜靜地躺著昌跌,像睡著了一般。 火紅的嫁衣襯著肌膚如雪照雁。 梳的紋絲不亂的頭發(fā)上避矢,一...
    開封第一講書人閱讀 51,462評論 1 302
  • 那天,我揣著相機與錄音,去河邊找鬼审胸。 笑死亥宿,一個胖子當著我的面吹牛,可吹牛的內容都是我干的砂沛。 我是一名探鬼主播烫扼,決...
    沈念sama閱讀 40,262評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼碍庵!你這毒婦竟也來了映企?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,153評論 0 276
  • 序言:老撾萬榮一對情侶失蹤静浴,失蹤者是張志新(化名)和其女友劉穎堰氓,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體苹享,經...
    沈念sama閱讀 45,587評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡双絮,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,792評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了得问。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片囤攀。...
    茶點故事閱讀 39,919評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖宫纬,靈堂內的尸體忽然破棺而出焚挠,到底是詐尸還是另有隱情,我是刑警寧澤漓骚,帶...
    沈念sama閱讀 35,635評論 5 345
  • 正文 年R本政府宣布蝌衔,位于F島的核電站,受9級特大地震影響蝌蹂,放射性物質發(fā)生泄漏噩斟。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,237評論 3 329
  • 文/蒙蒙 一叉信、第九天 我趴在偏房一處隱蔽的房頂上張望亩冬。 院中可真熱鬧艘希,春花似錦硼身、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至撒顿,卻和暖如春丑罪,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評論 1 269
  • 我被黑心中介騙來泰國打工吩屹, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留跪另,地道東北人。 一個月前我還...
    沈念sama閱讀 48,048評論 3 370
  • 正文 我出身青樓煤搜,卻偏偏與公主長得像免绿,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子擦盾,可洞房花燭夜當晚...
    茶點故事閱讀 44,864評論 2 354

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,117評論 25 707
  • 翻譯自“Collection View Programming Guide for iOS” 0 關于iOS集合視...
    lakerszhy閱讀 3,864評論 1 22
  • 食材 : 面粉100g 酵母1g 做法步驟 : 酵母用溫水和開 倒入面粉中 攪成絮狀嘲驾,揉成光滑的面團...
    秭歸橙子和水果閱讀 368評論 0 1
  • 哈哈哈,說是“北漂”第一天迹卢,但是準確來說辽故,還沒開始漂起來。 早上腐碱,在學校東苑食堂吃了我最愛的青椒雞肉的餡餅誊垢,在心里...
  • 今天出去爬山,回來的很晚喻杈,晚上看了一會書彤枢,正練字途中累的睡著了,很開心筒饰,有種高三的感覺
    文叔哥哥閱讀 140評論 0 1