控制台

定位精度圈标扩散效果

该demo展示了如何实现定位圈向外扩展的动画效果
iOS Android
下载源代码
00:00 / 00:12
体验移动端 扫码体验移动端

使用场景

在地图中的定位图标展示时，呈现出定位圈向外扩散的动画效果。让定位展示效果更加明显、酷炫。

用到产品

iOS 地图SDK

核心类/接口

类

接口

说明

版本

RadialCircleAnnotationView

----

继承自MAAnnotationView，实现脉冲圈向外缩放的动画效果

----

MAMapView

- (void)addAnnotation:(id )annotation;

向地图窗口添加标注

V4.0.0起

核心难点

增加RadialCircleAnnotationView

Objective-CSwift
- (MAAnnotationView *)mapView:(MAMapView *)mapView viewForAnnotation:(id<MAAnnotation>)annotation
{
    if ([annotation isKindOfClass:[MAPointAnnotation class]])
    {
        static NSString *pointReuseIdentifier = @"pointReuseIdentifier";
        RadialCircleAnnotationView *annotationView = (RadialCircleAnnotationView*)[mapView dequeueReusableAnnotationViewWithIdentifier:pointReuseIdentifier];
        if (annotationView == nil)
        {
            annotationView = [[RadialCircleAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:pointReuseIdentifier];
            annotationView.canShowCallout = YES;

            //脉冲圈个数
            annotationView.pulseCount = 4;
            //单个脉冲圈动画时长
            annotationView.animationDuration = 8.0;
            //单个脉冲圈起始直径
            annotationView.baseDiameter = 8.0;
            //单个脉冲圈缩放比例
            annotationView.scale = 30.0;
            //单个脉冲圈fillColor
            annotationView.fillColor = [UIColor colorWithRed:24.f/255.f green:137.f/255.f blue:234.f/255.f alpha:1.0];
            //单个脉冲圈strokeColor
            annotationView.strokeColor = [UIColor colorWithRed:35.f/255.f green:35.f/255.f blue:255.f/255.f alpha:1.0];
        }
        return annotationView;
    }

    return nil;
}

/* 增加RadialCircleAnnotationView. */
func mapView(_ mapView: MAMapView!, viewFor annotation: MAAnnotation!) -> MAAnnotationView! {
        if annotation is MAPointAnnotation {
            let pointReuseIndetifier = "pointReuseIdentifier"

            var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: pointReuseIndetifier) as? RadialCircleAnnotationView

            if annotationView == nil {
                annotationView = RadialCircleAnnotationView(annotation: annotation, reuseIdentifier: pointReuseIndetifier)
            }

            annotationView?.canShowCallout  = true

            //脉冲圈个数
            annotationView?.pulseCount = 4
            //单个脉冲圈动画时长
            annotationView?.animationDuration = 8.0
            //单个脉冲圈起始直径
            annotationView?.baseDiameter = 8.0
            //单个脉冲圈缩放比例
            annotationView?.scale = 30.0
            //单个脉冲圈fillColor
            annotationView?.fillColor = UIColor(red: 24.0/255.0, green: 137.0/255.0, blue: 234.0/255.0, alpha: 1.0)
            //单个脉冲圈strokeColor
            annotationView?.strokeColor = UIColor(red: 35.0/255.0, green: 35.0/255.0, blue: 255.0/255.0, alpha: 1.0)

            //更改设置后重新开始动画
            annotationView?.startPulseAnimation()

            return annotationView
        }

        return nil
    }
下载源代码
00:00 / 00:12
体验移动端 扫码体验移动端

使用场景

在地图中的定位图标展示时，呈现出定位圈向外扩散的动画效果。让定位展示效果更加明显、酷炫。

用到产品

Android 地图SDK Android 定位 SDK

核心类/接口

类

接口

说明

版本

AMapLocationClient

startLocation()

开始定位

----

AMapLocation

getAccuracy()

获取定位精度

----

AMap

addCircle(CircleOptions options)

添加circle表示定位精度圈

V2.0.0起

Circle

setRadius(double radius)

设置circle的半径

V2.0.0起

核心难点

实现定位精度圈动画

Java
//加载精度圈动画
public void Scalecircle(final Circle circle) {
    start = SystemClock.uptimeMillis();
    mTimerTask = new circleTask(circle, 1000);
    mTimer.schedule(mTimerTask, 0, 30);
}
//定位精度圈半径变化的定时器
private  class circleTask extends TimerTask {
    private double r;
    private Circle circle;
    private long duration = 1000;

    public circleTask(Circle circle, long rate){
        this.circle = circle;
        this.r = circle.getRadius();
        if (rate > 0 ) {
            this.duration = rate;
        }
    }
    @Override
    public void run() {
        try {
            long elapsed = SystemClock.uptimeMillis() - start;
            float input = (float)elapsed / duration;
            //外圈放大后消失
            float t = interpolator1.getInterpolation(input);
            double r1 = (t + 1) * r;
            circle.setRadius(r1);
            if (input > 2){
                start = SystemClock.uptimeMillis();
            }
        } catch (Throwable e) {
            e.printStackTrace();
        }
    }
}

 

返回顶部 示例中心 常见问题 智能客服 公众号
二维码