html5点赞仿抖音,iOS仿抖音—加载点赞动画效果

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];