效果
如图，按钮的边缘慢慢显示出来，一个view 绕着转动。
实现过程，一个 CALayer 是 绕着转动的那个view. 一个 CAShapeLayer 用来画button的边框。
代码如下：
_qLayer = [CALayer layer];
_qLayer.backgroundColor = [UIColor blackColor].CGColor;
_qLayer.frame = CGRectMake(20,
0,
10,
10);
[_qbutton.layer addSublayer:_qLayer];
CAShapeLayer *_eyeballLayer = [CAShapeLayer layer];
CGMutablePathRef path=CGPathCreateMutable();
CGPathMoveToPoint(path,
&CGAffineTransformIdentity,
20, 0);
CGPathAddEllipseInRect(path, NULL, CGRectMake(0, 0, 150, 40));
_eyeballLayer.borderColor = [UIColor blackColor].CGColor;
_eyeballLayer.lineWidth = 4.f;
_eyeballLayer.path = path;
_eyeballLayer.fillColor = [UIColor clearColor].CGColor;
_eyeballLayer.strokeColor = [UIColor blackColor].CGColor;
_eyeballLayer.anchorPoint = CGPointMake(0.5, 0.5);
// _eyeballLayer.strokeEnd = 0;
[_qbutton.layer addSublayer:_eyeballLayer];
_eyeballLayer.frame = _qbutton.bounds;
添加layer 和 边框 下面是动画过程
/// 转圈动画示例 添加动画
CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
animation.keyPath = @"position";
CGMutablePathRef path=CGPathCreateMutable();
CGPathAddEllipseInRect(path, NULL, CGRectMake(0, 0, 150, 40));
animation.path=path;
CGPathRelease(path);
animation.repeatCount=MAXFLOAT;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
animation.duration = 4.0f;
animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[_qLayer addAnimation:animation forKey:@"keyani"];
CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation1.fromValue = @(0);
animation1.toValue = @(1);
animation1.duration = 4;
animation1.repeatCount = MAXFLOAT;
animation1.fillMode = kCAFillModeForwards;
animation1.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[_eyeballLayer addAnimation:animation1
forKey:@"2222"];
直播点赞效果实现如下图
点赞动画
右下角飘出的数字动画就是点赞的效果，如果把数字换成点赞的拇指就一切OK了，
这个实现版本比较简单，使用<code> CAEmitterLayer </code>苹果自带的粒子效果。就足以实现了。代码如下：<code>viewController</code>中加入如下属性
///粒子效果Cell
@property(nullable, copy) NSArray<CAEmitterCell *> *emitterCells;
//例子的发射位置
@property CGPoint emitterPosition;
// Z position
@property CGFloat emitterZPosition;
//每秒产生多少个粒子
@property float birthRate;
//声明时间 一个粒子可以存活多少秒 比如 设置为 3！！
@property float lifetime;
//声明时间范围 你可以用这个东西使粒子的lifetime产生少许变化。粒子系统会随机在这个区间中取一个lifetime出来(lifetime – lifetimeRange, lifetime + lifetimeRange) 在我们的程序中，粒子会存活2.5~3.5秒
@property float lifetimeRange;
//X Y Z 方向的加速度
@property CGFloat xAcceleration;
@property CGFloat yAcceleration;
@property CGFloat zAcceleration;
@property CGSize emitterSize;
@property CGFloat emitterDepth;
@property(copy) NSString *emitterShape;
@property(copy) NSString *emitterMode;
@property BOOL preservesDepth;
@property float velocity;
@property float scale;
@property float spin;
@property(copy) NSString *renderMode;
@property (nonatomic, strong) CAEmitterLayer *emitterLayer;
实现如下：
- (CAEmitterLayer *)emitterLayer
{
if (!_emitterLayer) {
CAEmitterLayer *emitterLayer = [CAEmitterLayer layer];
// 发射器在xy平面的中心位置
emitterLayer.emitterPosition = CGPointMake(self.view.frame.size.width-50,self.view.frame.size.height-50);
// 发射器的尺寸大小
emitterLayer.emitterSize = CGSizeMake(20, 20);
// 渲染模式
emitterLayer.renderMode = kCAEmitterLayerUnordered;
// 开启三维效果
_emitterLayer.preservesDepth = YES;
NSMutableArray *array = [NSMutableArray array];
// 创建粒子
for (int i = 1; i<10; i++) {
// 发射单元
CAEmitterCell *stepCell = [CAEmitterCell emitterCell];
// 粒子的创建速率，默认为1/s
stepCell.birthRate = 1;
// 粒子存活时间
stepCell.lifetime = arc4random_uniform(4) + 1;
// 粒子的生存时间容差
stepCell.lifetimeRange = 1.5;
// 颜色
// fire.color=[[UIColor colorWithRed:0.8 green:0.4 blue:0.2 alpha:0.1]CGColor];
UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"%d", i]];
// 粒子显示的内容
stepCell.contents = (id)[image CGImage];
// 粒子的名字
// [fire setName:@"step%d", i];
// 粒子的运动速度
stepCell.velocity = arc4random_uniform(100) + 100;
// 粒子速度的容差
stepCell.velocityRange = 80;
// 粒子在xy平面的发射角度
stepCell.emissionLongitude = M_PI+M_PI_2;;
// 粒子发射角度的容差
stepCell.emissionRange = M_PI_2/6;
// 缩放比例
stepCell.scale = 0.3;
[array addObject:stepCell];
}
emitterLayer.emitterCells = array;
[self.view.layer addSublayer:emitterLayer];
_emitterLayer = emitterLayer;
}
return _emitterLayer;
}
接下来只要在在viewdidload 中简单的调用这个方法，就可以实现，粒子飘出的点赞效果了。
当然还有更复杂的实现，就是用路径去实现。单一的动画，然后每个点赞的图片也自己管理。
没什么好总结的，就是好玩。
