直播APP常用動畫效果

apqt8101 8年前發布 | 13K 次閱讀 iOS開發移動開發

介紹

記錄、總結開發遇到一些問題，大家一起交流學習。

這次帶來，對直播APP的常用動畫總結。

效果展示

下面是一個很多平臺都有的入門豪華禮物動畫——煙花。

一個復雜的禮物動畫，首先是美術給出 gif實現草圖 和素材，技術進行 動畫剖析 和 圖片壓縮 ，在程序中 加載圖片 和 實現動畫 ，其中要注意 內存和CPU占用 。

圖片壓縮、加載與裁剪

1、圖片壓縮

美術給出的圖片，即使是壓縮過，仍存在較大的壓縮空間，可以用這里或者更好的大小優化。

2、圖片加載

主要有 -imageNamed: 和 -imageWithContentsOfFile: 兩種方式。

AnimationImageCache 類是一個動畫圖片加載類，用單例實現且內部用NSCache持有引用。

注意，當收到內存不足警告時，NSCache會自動釋放內存。所以每次訪問NSCache，即使上一次已經加載過，也需要判斷返回值是否為空。

3、圖片裁剪

為了減少圖片資源的大小，有時候會把多個幀動畫做成連續的一張圖。這時需要程序加載一整張資源圖，并在相應的位置進行裁剪。

    UIImage* sourceImage = [UIImage imageNamed:@"image/animation/gift_boat"];
    CGSize sourceSize = sourceImage.size;
    CGImageRef cgimage = CGImageCreateWithImageInRect(sourceImage.CGImage,
                                                      CGRectMake(0, 0, const_position_boat_x, sourceSize.height));
    gWaveFrameImage = [UIImage imageWithCGImage:cgimage];
    CGImageRelease(cgimage);
    cgimage = CGImageCreateWithImageInRect(sourceImage.CGImage,
                                           CGRectMake(const_position_boat_x, 0, const_position_boat_width, sourceSize.height));
    gBoatFrameImage = [UIImage imageWithCGImage:cgimage];
    CGImageRelease(cgimage);
    cgimage = CGImageCreateWithImageInRect(sourceImage.CGImage,
                                           CGRectMake(const_position_boat_x + const_position_boat_width, 0, sourceSize.width - const_position_boat_x - const_position_boat_width, sourceSize.height));
    gShadowFrameImage = [UIImage imageWithCGImage:cgimage];
    CGImageRelease(cgimage);

動畫剖析與時間軸

下面這個是一個全屏類型的“天使”禮物動畫，我們來剖析下這個動畫的構成。

1、背景變暗，出現星空；
2、流星劃過、月亮出現、云彩飄動；
3、兩側浮空島震動，中間浮空島出現；
4、背光出現，天使落下，翅膀扇動；
5、星星閃爍、鳳凰出現；
6、漸隱消失；

時間軸實現

為了讓動畫按照時間順序一一執行，可以把動畫按時間和對象分成多個方法，通過GCD在指定的時間調用。

    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self playMeteorAnimation];
    });

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
    [self playLandAnimation];
});

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(6.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
    [self playLightAnimation];
});

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(7.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
    [self playStarAnimation];
});

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(TOTAL_TIME * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
    @weakify(self);
    [UIView animateWithDuration:0.5 animations:^{
        self.alpha = 0;
    } completion:^(BOOL finished) {
        @strongify(self);
        [self removeFromSuperview];
        [self callBackManager];
    }];
});</code></pre> 

常用動畫效果 
  1、視圖變暗、變大 
  alpha值屬性是透明度，把背景設置成淡黑色，然后調整alpha可以達到背景漸變的視圖效果； 
  UIView的transform是可以用仿射變換矩陣來控制平移、放大縮小等。 
      [UIView animateWithDuration:1.5 animations:^{
        self.mBackgroundView.alpha = 0.5;
        self.mAngelView.transform = CGAffineTransformMakeScale(1.2, 1.2);
    }]; 
  2、勻速運動、交錯效果 
  right是項目封裝的一個屬性，本質是對UIView的frame進行操作； 
  兩朵云， 左邊的朝右，右邊的朝左，即可達到交錯的效果。 
      [UIView animateWithDuration:TOTAL_TIME delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
        self.mAngelCloudView0.right += 250;
        self.mAngelCloudView1.right -= 190;
    } completion:nil]; 
  3、上下往返運動 
  CAKeyframeAnimation是關鍵幀動畫，對layer的postion的y坐標進行操作； 
  設定好起始位置、經過位置，最后回到起始位置，即可實現上下往返的效果。 
      CAKeyframeAnimation *upDownAnimation;
    upDownAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position.y"];
    upDownAnimation.values = @[@(self.mAngelLandView1.layer.position.y), @(self.mAngelLandView1.layer.position.y + 5), @(self.mAngelLandView1.layer.position.y)];
    upDownAnimation.duration = 2;
    upDownAnimation.fillMode = kCAFillModeBoth;
    upDownAnimation.calculationMode = kCAAnimationCubic;
    upDownAnimation.repeatCount = HUGE_VALF;
    [self.mAngelLandView1.layer addAnimation:upDownAnimation forKey:@"upDownAnimation"]; 
  4、閃爍效果 
  閃爍的本質是alpha的變化，但是UIView的block動畫不好實現重復效果； 
  UIView的alpha對應的是layer的opacity屬性，設定好起始、過度和結束的狀態，實現閃爍的效果。 
      CAKeyframeAnimation *opacityAnimation;
    opacityAnimation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
    opacityAnimation.values = @[@(0), @(1), @(0)];
    opacityAnimation.duration = 1.5;
    opacityAnimation.fillMode = kCAFillModeBoth;
    opacityAnimation.calculationMode = kCAAnimationCubic;
    opacityAnimation.repeatCount = HUGE_VALF;
    [self.mAngelStarView.layer addAnimation:opacityAnimation forKey:@"opacityAnimation"]; 
  5、貝塞爾曲線運動 
  貝塞爾曲線 是優化動畫體驗的很重要部分，比如說天上掉下來的羽毛，地上冒起來的氣泡，空中飄蕩的氣球，都可以用貝塞爾曲線來繪制，從而獲得很好的視覺體驗； 
  本質還是關鍵幀動畫，這次操作的屬性是position，通過path屬性來確定路徑； 
  給貝塞爾曲線設定好目標點后，把path賦值給關鍵幀動畫，再把動畫添加到layer上即可； 
      UIImage *image = [[AnimationImageCache shareInstance] getImageWithName:@"gift_castle_hot_air_balloon3.png"];
    UIImageView *hotAirBalloonView0 = [[UIImageView alloc] initWithFrame:CGRectMake(50, 100, image.size.width / 2, image.size.height / 2)];
    [self addSubview:hotAirBalloonView0];
    [hotAirBalloonView0 setImage:image];
    // 飄動
    CGPoint position = CGPointMake(self.width, hotAirBalloonView0.top);
    CGFloat duration = 5;
    CAKeyframeAnimation *positionAnimate = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    positionAnimate.repeatCount = 1;
    positionAnimate.duration = duration;
    positionAnimate.fillMode = kCAFillModeForwards;
    positionAnimate.removedOnCompletion = NO;
    UIBezierPath *sPath = [UIBezierPath bezierPath];
    [sPath moveToPoint:position];
    [sPath addCurveToPoint:CGPointMake(-image.size.width / 2, position.y) controlPoint1:CGPointMake(self.width / 3 * 2, position.y - 60) controlPoint2:CGPointMake(self.width / 3, position.y + 60)];
    positionAnimate.path = sPath.CGPath;
    [hotAirBalloonView0.layer addAnimation:positionAnimate forKey:@"positionAnimate"]; 
  6、遮罩動畫 
  遮罩效果可以實現彩虹出現、煙花爆炸、畫卷打開等效果，通過改變遮罩的大小，影響原始圖片的展示，達到動畫的效果； 
  先新建一個CAShapeLayer，并設置為layer的遮罩； 
  新建一個動畫，設定初始和結束狀態并賦值給CAShapeLayer，完成一個遮罩動畫。 
      UIBezierPath *maskStartPath = [UIBezierPath bezierPathWithRect:CGRectMake(CGRectGetWidth(rainbowView1.bounds), 0, CGRectGetWidth(rainbowView1.bounds), CGRectGetHeight(rainbowView1.bounds))];
    UIBezierPath *maskFinalPath = [UIBezierPath bezierPathWithRect:rainbowView1.bounds];
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    rainbowView1.layer.mask = maskLayer;
    maskLayer.path = maskFinalPath.CGPath;
    CABasicAnimation *maskLayerAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
    maskLayerAnimation.fromValue = (__bridge id)maskStartPath.CGPath;
    maskLayerAnimation.toValue = (__bridge id)maskFinalPath.CGPath;
    maskLayerAnimation.removedOnCompletion = NO;
    maskLayerAnimation.duration = 2.0;
    maskLayerAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [maskLayer addAnimation:maskLayerAnimation forKey:@"maskLayerAnimation"]; 
  7、旋轉效果 
  燈光掃動，花朵旋轉等旋轉效果，都可以transform的rotation.z屬性來實現； 
  同樣使用CAKeyframeAnimation實現，設定好初始、中間、結束狀態，動畫時間已經重復次數，并添加到layer，完成旋轉效果； 
      CAKeyframeAnimation* rotationAnimation;
    rotationAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];
    rotationAnimation.values = @[@(M_PI / 12), @(M_PI / 3), @(M_PI / 12)];
    rotationAnimation.duration = 2.5;
    rotationAnimation.fillMode = kCAFillModeBoth;
    rotationAnimation.calculationMode = kCAAnimationCubic;
    //    rotationAnimation.cumulative = YES;
    rotationAnimation.repeatCount = HUGE_VALF;

[self.mLightLeftView.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];</code></pre> 

8、幀動畫 
  某些復雜動畫不是靠對原始圖像操作進行操作就能實現，這時候就要用到 幀動畫 ； 
  幀動畫有兩種實現方式，一種是通過Timer（定時器），設定好時間間隔，手動替換圖片； 
  另外一種是通過UIImageView的支持，實現幀動畫。 
  UIImageView的幀動畫沒有回調，如果需要實現達到第幾幀之后，開始另外的動畫的效果，需要用第一種方法。 
      NSMutableArray





  *images = [NSMutableArray



     array]; for (int i = 0; i < 6; ++i) { UIImage *img = [[AnimationImageCache shareInstance] getDriveImageWithName:[NSString stringWithFormat:@"gift_animation_angel_phoenix%d.png", i]]; if (img) { [images addObject:img]; } } self.mAngelPhoenixView.image = [[AnimationImageCache shareInstance] getDriveImageWithName:@"gift_animation_angel_phoenix0.png"]; self.mAngelPhoenixView.animationImages = images; self.mAngelPhoenixView.animationDuration = 0.8; self.mAngelPhoenixView.animationRepeatCount = 1; [self.mAngelPhoenixView startAnimating]; 



   
  總結 
  UIView的block動畫中，completion持有的是強引用，需要避免造成循環引用。 
  但在調用完畢completion后，會釋放引用。 
  天使動畫的圖片大小為900KB，運行時占內存15MB，播放完畢后，如果收到內存不足的警告會釋放內存； 
  煙花動畫的圖片大小為400KB，運行時占用的內存為20MB，播放完畢后，會馬上釋放內存； 
  思考題 
  1、為什么煙花動畫的圖片大小比較小，運行時占用的內存反而更多？ 
  2、播放完畢馬上釋放和收到內存不足警告再釋放，兩種圖片加載方式的優缺點？ 
    
  來自：http://www.cocoachina.com/ios/20161114/18073.html


                    
                         本文由用戶 apqt8101 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                         轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                         本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                         本文地址：http://www.baiduhome.net/lib/view/open1479106438530.html
                         iOS開發 移動開發

直播APP常用動畫效果

介紹

效果展示

圖片壓縮、加載與裁剪

動畫剖析與時間軸

常用動畫效果

總結

相關經驗

相關資訊

相關文檔

目錄