CoreAnimation实现简单直播点赞飘心效果

发表于 | 分类于 |
最近做直播需求时实现的一个点赞效果

最近项目中要做直播，做了一个飘心效果，做之前在网上搜索了一下没找到示例代码。自己写了一个。

####思路

有3个思路：

  • UIImageView + 心形图片，UIView动画，改变Y坐标。
  • CALayer + 图片，用AnimationGroup做。
  • CAShapeLayer + UIBezierPath + AnimationGroup。

第一种比较简单，效果稍微单调点。

第二种可以做的飘动效果灵活点，项目只有一种心形效果，所以用图片可以，刚好满足项目需求。

第三种可以设置很多种随机酷炫形状，随机颜色等，效果十分灵活。

###步骤1
4张心形图片

###步骤2
使用CALayer随机加载4张图片其中一张

###步骤3
使用CAAnimationGroup。

首先定义了一个常量来决定动画总时间

1
static const CFTimeInterval animationTime    = 4.0;

group中有以下几种效果：

渐变：

1
2
3
4
5
CABasicAnimation *fade = [CABasicAnimation new];
fade.keyPath = @"opacity";
fade.fromValue = @(1);
fade.toValue = @0;
fade.duration = animationTime;

x轴上左右晃动的效果

1
2
3
4
5
6
//x
CAKeyframeAnimation *x = [CAKeyframeAnimation new];
x.keyPath = @"transform.translation.x";
x.values = [self valuesForXAnimation];//这个函数返回随机生成的一个NSNumber数组
x.duration = animationTime;
x.additive = YES;

y轴的上飘效果

1
2
3
4
5
6
//y
CAKeyframeAnimation *y = [CAKeyframeAnimation new];
y.keyPath = @"transform.translation.y";
y.values = [self valuesForYAnimation]; //这个函数返回随机生成的一个NSNumber数组
y.duration = animationTime;
y.additive = YES;

心形刚出现的冒出效果

1
2
3
4
5
6
//冒出
CABasicAnimation *scale = [CABasicAnimation new];
scale.keyPath = @"transform.scale";
scale.fromValue = @0;
scale.toValue = @1;
scale.duration = 0.25;

合成一个动画组

1
2
3
CAAnimationGroup *group = [[CAAnimationGroup alloc] init];
group.animations = @[ scale,fade,x,y ];
group.duration = animationTime;

放到layer中

1
[layer addAnimation: group forKey: nil];

思路差不多就是这样。

###效果

效果

###总结

推荐一本书,电子的：CoreAnimation

示例代码在Github