高仿映客之七视频播放的点赞动画和弹幕文字

前言####

本文是高仿映客项目的续集篇，如果想了解高仿映客项目的更多详细资料可以点击以下链接：
映客源码下载地址：高仿映客项目源码
映客系列详细解说目录:映客系列详细解说目录

点赞和弹幕动画.gif

点赞动画####

点赞动画仔细观察不难发现，其实是一个组动画，凡是什么复杂的动画都可以一步一步拆解为简单的动画一一实现
组动画的构成：路径动画和关键帧动画组成

首先点击点赞按钮的时候创建一个imageView

UIImage *praise = [UIImage imageNamed:@"me_other_followed"];

UIImageView *praiseView = [[UIImageView alloc]initWithImage:praise];
praiseView.frame = CGRectMake(LZBSCREEN__WIDTH * 0.5 - praise.size.width *0.5, LZBSCREEN__HEIGHT, praise.size.width, praise.size.width);
[self.view insertSubview:praiseView belowSubview:self.view];

绘制这个imageView移动的路径

//动画初始值

CGFloat animationH = LZBSCREEN__HEIGHT * 0.5;
//绘制动画路径
CGFloat offset = 150;
UIBezierPath *animationPath = [UIBezierPath bezierPath];
CGPoint startPoint = praiseView.center;
CGPoint endPoint = CGPointMake(praiseView.center.x, LZBSCREEN__HEIGHT * 0.5);
CGPoint controlPoint1 = CGPointMake(praiseView.center.x -arc4random_uniform(offset) ,LZBSCREEN__HEIGHT - animationH/4);
CGPoint controlPoint2 = CGPointMake(praiseView.center.x +arc4random_uniform(offset), LZBSCREEN__HEIGHT - animationH*3/4);
[animationPath moveToPoint:startPoint];
[animationPath addCurveToPoint:endPoint controlPoint1:controlPoint1 controlPoint2:controlPoint2];
 //关键帧动画,实现整体图片位移
CGFloat duration = 3.0;
CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
keyFrameAnimation.path = animationPath.CGPath;
keyFrameAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];
keyFrameAnimation.duration = duration ;//往上飘动画时长,可控制速度

实现imageView放大缩小的关键帧动画

  //关键帧动画,实现整体图片放大缩小

CAKeyframeAnimation *scale = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
scale.values = @[@1.0,@1.4,@1.8,@2.0,@1.8,@1.6,@1.4,@1.0];
scale.duration = duration;
scale.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];

实现组动画叠加

 //增加组动画

CAAnimationGroup *grounp = [CAAnimationGroup animation];
grounp.animations = @[scale,keyFrameAnimation];
grounp.duration = duration;
[praiseView.layer addAnimation:grounp forKey:@"positionAniamtion"];

最后imageView移出动画区域 移除imageView
//消失动画

[UIView animateWithDuration:duration animations:^{

    praiseView.alpha = 0.0;
} completion:^(BOOL finished) {
    [praiseView removeFromSuperview];
}];

文字评论弹幕动画###

弹幕动画使用的是自定义LZBFlyLabel来做的

//text弹幕文字    open打开随机颜色  velocity移动速度

 - (instancetype)initWithFlyText:(NSString *)text openRandColor:(BOOL)open moveVelocity:(CGFloat)velocity;

具体实现

  - (instancetype)initWithFlyText:(NSString *)text openRandColor:(BOOL)open moveVelocity:(CGFloat)velocity

{
self.offsetY = arc4random()%(200);  //200表示随机的最大偏移量
self.font = LZBFlyLabel_Font;  //设置字体
self.text = text;
 if(self = [super initWithFrame:CGRectMake(getScreenWidth(), self.offsetY, getScreenWidth(), ceil([self getTextSize].height))])
  {
   self.textColor = open?[self getRandColor]:[UIColor redColor];   //设置颜色
   self.textAlignment = NSTextAlignmentCenter;
   self.numberOfLines = 0;
   [self addFlyAnimationWithVelocity:velocity];  //增加滚动动画
  }
return self;
}

增加动画效果

   - (void)addFlyAnimationWithVelocity:(CGFloat)velocity

{
LZBWeakSelf(weakSelf);
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView animateWithDuration:20.0 animations:^{
    weakSelf.frame = CGRectMake(-weakSelf.frame.size.width, weakSelf.offsetY, weakSelf.frame.size.width, ceil([self getTextSize].height));
} completion:^(BOOL finished) {
   [weakSelf removeFromSuperview];
}];

}