这个动画是我们的app<柠檬跑步>1.6.0版本中的一个主要功能，先看效果：
运动轨迹.gif
我们只看轨迹回放相关的动画组，拆分后包含如下几个主要动画：
1、轨迹路径动画
2、轨迹渐变
3、领头点的路径动画
4、公里标记等元素动画
首先说明一下，地图轨迹是基于自定义的渲染器GradientPolylineRenderer并重写其drawMapRect方法绘制的（具体实现可参考我之前的文章），而这样在渲染器中绘制的轨迹是无法实现回放动画效果的（至少我没想到方法，如果有好的方案，也欢迎讨论）所以我的想法是，先不加载地图轨迹，用layer构建完动画组并播放后再移除layer，然后渲染地图。基于这种方案，动画组内各动画的实现原理如下
1：轨迹路径动画
我用的是CAShapeLayer绘制，CAShapeLayer 是 CALayer 的子类，但是比 CALayer 更灵活，可以画出各种图形
#pragma mark - 构造shapeLayer
- (void)initShapeLayerWithPath:(CGPathRef)path{
self.shapeLayer = [[CAShapeLayer alloc] init];
self.shapeLayer.strokeColor = [UIColor greenColor].CGColor;
self.shapeLayer.fillColor = [UIColor clearColor].CGColor;
self.shapeLayer.lineJoin = kCALineCapRound;
self.shapeLayer.path = path;
}
而无论动画1还是动画2，既然有路径，就需要以坐标点来构建Path(CGPathRef):
//cPoints为传参 即下段代码中的CLLocationCoordinate2D *smoothTrackPoints
CGPoint *points = [self pointsForCoordinates:cPoints count:count];
CGPathRef path = [self pathForPoints:points count:count];
//smoothTrackArray为我代码中轨迹平滑算法处理后的坐标点数组（主要看起内部结构即可） smoothTrackCount = smoothTrackArray.count;
float *velocity;
smoothTrackPoints = malloc(sizeof(CLLocationCoordinate2D)*smoothTrackCount);
velocity = malloc(sizeof(float)*smoothTrackCount);
for(int i=0;i<smoothTrackCount;i++){
@autoreleasepool {
NSDictionary *dic = [smoothTrackArray objectAtIndex:i];
CLLocationDegrees latitude = [dic[@"latitude"] doubleValue];
CLLocationDegrees longitude = [dic[@"longitude"] doubleValue];
CLLocationCoordinate2D coordinate = CLLocationCoordinate2DMake(latitude, longitude);
velocity[i] = [dic[@"speed"] doubleValue];
smoothTrackPoints[i] = coordinate;
}
}
#pragma mark - 经纬度转屏幕坐标, 调用者负责释放内存!
- (CGPoint *)pointsForCoordinates:(CLLocationCoordinate2D *)coordinates count:(NSUInteger)count{
if (coordinates == NULL || count <= 1)
{
return NULL;
}
/* 申请屏幕坐标存储空间. */
CGPoint *points = (CGPoint *)malloc(count * sizeof(CGPoint));
/* 经纬度转换为屏幕坐标. */
for (int i = 0; i < count; i++)
{
points[i] = [self.mapView convertCoordinate:coordinates[i] toPointToView:self.mapView];
}
return points;
}
#pragma mark - 构建path, 调用者负责释放内存!
- (CGMutablePathRef)pathForPoints:(CGPoint *)points count:(NSUInteger)count{
if (points == NULL || count <= 1){
return NULL;
}
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddLines(path, NULL, points, count);
return path;
}
图层有了，为其添加动画：
CAAnimation *shapeLayerAnimation = [self constructShapeLayerAnimation];
shapeLayerAnimation.delegate = self;
shapeLayerAnimation.removedOnCompletion = NO;
shapeLayerAnimation.fillMode = kCAFillModeForwards;
[self.shapeLayer addAnimation:shapeLayerAnimation forKey:@"shape"];
#pragma mark - 构建shapeLayer的basicAnimation
- (CAAnimation *)constructShapeLayerAnimation{
CABasicAnimation *theStrokeAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
theStrokeAnimation.duration = kAnimationDuration;
theStrokeAnimation.fromValue = @0.f;
theStrokeAnimation.toValue = @1.f;
theStrokeAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
return theStrokeAnimation;
}
2：轨迹渐变
上面的方法只能绘制纯色的回放动画，若想有渐变效果，就要引入CAGradientLayer，至于CAGradientLayer的渐变原理、参数等本文不做详述了，可查阅API文档
#pragma mark - 构造gradientLayer
- (void)initGradientLayerWithPoints:(CGPoint *)points Count:(NSUInteger)count{
if(count<1){
return;
}
self.gradientLayer = [[CALayer alloc] init];
for(int i=0;i<count-1;i++){
@autoreleasepool {
CGPoint point1 = points[i];
CGPoint point2 = points[i+1];
double xDiff = point2.x-point1.x;
double yDiff = point2.y-point1.y;
CGPoint startPoint,endPoint;
double offset = 0.;
CAGradientLayer *gradientLayer = [[CAGradientLayer alloc] init];
//相邻两个最标点 构造一个渐变图层
[gradientLayer setFrame:CGRectMake(MIN(point1.x, point2.x)-3, MIN(point1.y, point2.y)-3, fabs(xDiff)+6, fabs(yDiff)+6)];
//渐变方向
if(xDiff>0.){
if(yDiff>0.){
if(xDiff>yDiff){
offset = yDiff/xDiff;
startPoint = CGPointMake(0, 0);
endPoint = CGPointMake(offset, 1);
}else{
offset = xDiff/yDiff;
startPoint = CGPointMake(0, 0);
endPoint = CGPointMake(1, offset);
}
}else{
if(xDiff>fabs(yDiff)){
offset = fabs(yDiff)/xDiff;
startPoint = CGPointMake(1, 0);
endPoint = CGPointMake(1, offset);
}else{
offset = xDiff/fabs(yDiff);
startPoint = CGPointMake(1, 0);
endPoint = CGPointMake(0, offset);
}
}
}else{
if(yDiff>0.){
if(fabs(xDiff)>yDiff){
offset = yDiff/fabs(xDiff);
startPoint = CGPointMake(0, 1);
endPoint = CGPointMake(offset, 0);
}else{
offset = fabs(xDiff)/yDiff;
startPoint = CGPointMake(1, 0);
endPoint = CGPointMake(1-offset, 1);
}
}else{
if(fabs(xDiff)>fabs(yDiff)){
offset = fabs(yDiff)/fabs(xDiff);
startPoint = CGPointMake(1, 1);
endPoint = CGPointMake(1-offset, 0);
}else{
offset = fabs(xDiff)/fabs(yDiff);
startPoint = CGPointMake(1, 1);
endPoint = CGPointMake(0, 1-offset);
}
}
}
gradientLayer.cornerRadius = 6;
gradientLayer.startPoint = startPoint;
gradientLayer.endPoint = endPoint;
gradientLayer.colors = @[[[StaticVariable sharedInstance].gradientColors objectAtIndex:i],
[[StaticVariable sharedInstance].gradientColors objectAtIndex:i+1]];
[self.gradientLayer addSublayer:gradientLayer];
}
}
[self.gradientLayer setMask:self.shapeLayer];
[self.mapView.layer addSublayer:self.gradientLayer];
}
上面代码的作用是构建多个gradientLayer（有多少轨迹点就铺多少gradientLayer），而其中的gradientColors数组是地图渲染时的颜色拷贝
- (void) velocity:(float*)velocity ToHue:(float**)_hue count:(int)count{
*_hue = malloc(sizeof(float)*count);
for (int i=0;i<count;i++){
float curVelo = velocity[i];
if(curVelo>0.){
curVelo = ((curVelo < V_MIN) ? V_MIN : (curVelo > V_MAX) ? V_MAX : curVelo);
(*_hue)[i] = H_MIN + ((curVelo-V_MIN)*(H_MAX-H_MIN))/(V_MAX-V_MIN);
}else if(curVelo==kPauseSpeed){
//暂停颜色
(*_hue)[i] = kPauseSpeed;
}else{
//超速颜色
(*_hue)[i] = 0.;
}
//填充轨迹渐变数组
UIColor *color;
if(curVelo>0.){
color = [UIColor colorWithHue:(*_hue)[i] saturation:1.0f brightness:1.0f alpha:1.0f];
}else{
color = [UIColor colorWithHue:(*_hue)[i] saturation:1.0f brightness:1.0f alpha:0.0f];
}
[[StaticVariable sharedInstance].gradientColors addObject:(__bridge id)color.CGColor];
}
}
上面代码中关于颜色计算的部分已在我之前文章中阐述，这里只是为了展示gradientColors的颜色是与地图渲染的颜色一致的，毕竟动画播放完渲染地图的时候不能有色差。
3：领头点的路径动画
仔细看动画效果，前面一直有个发光的点，对mapview上的大头针Annotation添加关键帧动画即可
MKAnnotationView *annotationView = [self.mapView viewForAnnotation:self.headAnnotation];
CAAnimation *annotationAnimation = [self constructAnnotationAnimationWithPath:path];
[annotationView.layer addAnimation:annotationAnimation forKey:@"annotation"];
[annotationView.annotation setCoordinate:cPoints[count - 1]];
#pragma mark - 构建Annotation动画
- (CAAnimation *)constructAnnotationAnimationWithPath:(CGPathRef)path{
if (path == NULL){
return nil;
}
CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
keyFrameAnimation.duration = kAnimationDuration;
keyFrameAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
keyFrameAnimation.path = path;
keyFrameAnimation.calculationMode = kCAAnimationPaced;
return keyFrameAnimation;
}
4：公里标记等元素动画
这些基本上是对view的frame进行变更，主要的是展现时机，基于动画的代理方法加上些时间推算的逻辑即可，这里就不摘代码了。（为什么要推算时机而不是path移动到相应点的事件？一是根本没有这样的方法，二是iOS的动画其实不是逐渐的改变大小或者位置，在动画播放之前frame或者point就已经发生变化了，这个可以打印输出看）
- (void)animationDidStart:(CAAnimation *)anim;
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;
以上基本构建出了轨迹回放的动画效果
