iOS仿抖音短视频
前言
前段时间比较忙,最近终于有时间就继续对仿抖音的demo进行更新,本次更新的主要是抖音上的几种动画,下面先来看下效果图:
抖音
说明
经过观察发现抖音主要要以下几种动画效果:
1、数据加载动画(两个小球来回切换)
2、视频加载动画(直线向两边扩散)
3、红心点赞动画(红心由小变大并向四周扩散)
4、双击点赞动画(多个红心由小变大并逐渐消失)
于是在经过各种资料查找及自我实践中完成了这四种动画,下面就这几种动画做一下简单说明
1、数据加载动画
数据加载
这个动画大致观察发现是一个红球一个绿球左右来回切换实现的,但仔细观察你会发现,在左右切换的过程中有个黑色小球在不断变大缩小,跟随最上面的球运动。
因此我们需要添加三个小球,绿球、红球、黑球,默认绿球在左红球在右,黑球在绿球上
self.containerView = [[UIView alloc] init];
self.containerView.center = self.center;
self.containerView.bounds = CGRectMake(0, 0, 2.1f * kBallWidth, 2.0f * kBallWidth);
[self addSubview:self.containerView];
// 绿球
self.greenBall = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kBallWidth, kBallWidth)];
self.greenBall.center = CGPointMake(kBallWidth * 0.5f, self.containerView.bounds.size.height * 0.5f);
self.greenBall.layer.cornerRadius = kBallWidth * 0.5f;
self.greenBall.layer.masksToBounds = YES;
self.greenBall.backgroundColor = GKColorRGB(35, 246, 235);
[self.containerView addSubview:self.greenBall];
// 红球
self.redBall = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kBallWidth, kBallWidth)];
self.redBall.center = CGPointMake(self.containerView.bounds.size.width - kBallWidth * 0.5f, self.containerView.bounds.size.height * 0.5f);
self.redBall.layer.cornerRadius = kBallWidth * 0.5f;
self.redBall.layer.masksToBounds = YES;
self.redBall.backgroundColor = GKColorRGB(255, 46, 86);
[self.containerView addSubview:self.redBall];
// 黑球
// 第一次动画是正向,绿球在上,红球在下,阴影显示在绿球上
self.blackBall = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kBallWidth, kBallWidth)];
self.blackBall.backgroundColor = GKColorRGB(12, 11, 17);
self.blackBall.layer.cornerRadius = kBallWidth * 0.5f;
self.blackBall.layer.masksToBounds = YES;
[self.greenBall addSubview:self.blackBall];