先看看效果
环绕效果图
需求
这个需求是在为了吸引用户注意到某一个按钮, 或一个View里面的内容提出的. 例如: 滑动解锁按钮, 抽奖按钮等, 恩, 是的, 当你打开一个新的界面的时候, 里面的内容展示比较多的时候, 这样的效果确实能突出重点. 然后我接到需求的时候找了一下相关的知识, 发现没什么思路, 本来知乎上有个人提出的问题跟我的需求很像, 可是没有比较清晰的思路答案, 知乎的问题 iOS 一条线条绕贝塞尔曲线做动画?
直到我看到了这一篇iOS动画进阶 - CAKeyframeAnimation实现过山车动画然后找到了思路
实现
画出两个闪烁点得运动轨迹, 并给两个点设定运动轨迹
-(void)pathWithClockwise:(BOOL)clockwise {
CGFloat width = self.frame.size.width;
CGFloat height = self.frame.size.height;
CGPoint startPointOne = CGPointMake(height * 0.5, 0);//第一个闪烁开始的点
CGPoint startPointTwo = CGPointMake(width - height * 0.5, height);//第二个闪烁开始的点
//第一个闪烁的运动轨迹
UIBezierPath *pathOne = [UIBezierPath bezierPath];
//第二个闪烁的运动轨迹
UIBezierPath *pathTwo = [UIBezierPath bezierPath];
if (clockwise) {//顺时针
[pathOne moveToPoint:startPointOne];
[pathOne addLineToPoint:CGPointMake(width - height * 0.5, 0)];
[pathOne addArcWithCenter:CGPointMake(self.frame.size.width - height * 0.5, height * 0.5) radius:height * 0.5 startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:clockwise];
[pathOne addLineToPoint:CGPointMake(height * 0.5, height)];
[pathOne addArcWithCenter:CGPointMake(height * 0.5, height * 0.5) radius:height * 0.5 startAngle:M_PI_2 endAngle: -M_PI_2 clockwise:clockwise];
[pathTwo moveToPoint:startPointTwo];
[pathTwo addLineToPoint:CGPointMake(height * 0.5, height)];
[pathTwo addArcWithCenter:CGPointMake(height * 0.5, height * 0.5) radius:height * 0.5 startAngle:M_PI_2 endAngle: -M_PI_2 clockwise:clockwise];
[pathTwo addLineToPoint:CGPointMake(width - height * 0.5, 0)];
[pathTwo addArcWithCenter:CGPointMake(self.frame.size.width - height * 0.5, height * 0.5) radius:height * 0.5 startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:clockwise];
}else {//逆时针
[pathOne moveToPoint:startPointOne];
[pathOne addArcWithCenter:CGPointMake(height * 0.5, height * 0.5) radius:height * 0.5 startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:clockwise];
[pathOne addLineToPoint:startPointTwo];
[pathOne addArcWithCenter:CGPointMake(self.frame.size.width - height * 0.5, height * 0.5) radius:height * 0.5 startAngle:M_PI_2 endAngle: -M_PI_2 clockwise:clockwise];
[pathOne addLineToPoint:startPointOne];
[pathTwo moveToPoint:startPointTwo];
[pathTwo addArcWithCenter:CGPointMake(self.frame.size.width - height * 0.5, height * 0.5) radius:height * 0.5 startAngle:M_PI_2 endAngle: -M_PI_2 clockwise:clockwise];
[pathTwo addLineToPoint:startPointOne];
[pathTwo addArcWithCenter:CGPointMake(height * 0.5, height * 0.5) radius:height * 0.5 startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:clockwise];
[pathTwo addLineToPoint:startPointTwo];
}
//显示的轨迹
CAShapeLayer *pathLayer = [CAShapeLayer layer];
pathLayer.path = pathOne.CGPath;
pathLayer.lineCap = kCALineCapRound;
pathLayer.strokeColor = [UIColor orangeColor].CGColor;
pathLayer.lineWidth = 2;
pathLayer.fillColor = [UIColor clearColor].CGColor;
[self.layer addSublayer:pathLayer];
//开始两个闪烁动画
[self startAnimationWith:pathOne startPostion:startPointOne];
[self startAnimationWith:pathTwo startPostion:startPointTwo];
}
创建闪烁的点, 根据透明度拼成一条渐变的线段
-(void)startAnimationWith:(UIBezierPath *)path startPostion:(CGPoint)point {
for (int i = 0; i < 20; i++) {
//创建粒子
CALayer *dotLayer = [CALayer layer];
dotLayer.frame = CGRectMake(point.x, point.y, 4, 4);
dotLayer.backgroundColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:(1-0.05*i)].CGColor;
[self.layer addSublayer:dotLayer];
CAKeyframeAnimation *anim = [self animationWithPath:path withIndex:i];
[dotLayer addAnimation:anim forKey:nil];
}
}
然后给线段的每个点执行动画
-(CAKeyframeAnimation *)animationWithPath:(UIBezierPath *)path withIndex:(int)index{
//添加帧动画
CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
anim.keyPath = @"position";
anim.path = path.CGPath;
anim.repeatCount = MAXFLOAT;
anim.calculationMode = kCAAnimationPaced;
//动画速度为匀速
anim.calculationMode = kCAAnimationCubicPaced;
//动画角度是否调整
anim.rotationMode = kCAAnimationRotateAuto;
anim.fillMode = kCAFillModeForwards;
anim.removedOnCompletion = NO;
anim.duration = 1.5;
anim.beginTime = CACurrentMediaTime() + 0.01 * index;
anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
return anim;
}
另外一种思路
本来是想用CAShapeLayer作为运动的线段的, 而不是一个个点拼成的线段. CAShapeLayer上做 " strokeStart" 和 "strokeEnd"结合的. 但是细节看起来很丑, 可能是我处理的不够, 如果你有更好的思路欢迎告诉我.
最后附上 DEMO
