前言####
本文是高仿映客项目的续集篇，如果想了解高仿映客项目的更多详细资料可以点击以下链接：
映客源码下载地址：高仿映客项目源码
映客系列详细解说目录:映客系列详细解说目录
点赞和弹幕动画.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];
}];
}
