控制台

Marker/MAAnnotation上浮效果

该示例向您展示苹果地图App上的标点效果是如何实现的，Android 地图 SDK 中对应的是 Marker，iOS 地图 SDK中对应是 MAAnnotation。我们称这个效果为点的上浮效果。
iOS Android
下载源代码
00:00 / 00:12
体验移动端 扫码体验移动端

使用场景

只要涉及到在地图上标点/打点，都可以应用该效果。

用到产品

iOS 地图 SDK

核心类/接口

类

接口

说明

版本

CABasicAnimation

- (void)willMoveToSuperview:(UIView *)newSuperview

继承自MAAnnotationView，实现了annotation被添加至superView前做动画

---

核心难点

绘制 Animation 时添加上浮动画效果。

Objective-CSwift
- (void)willMoveToSuperview:(UIView *)newSuperview
{
    [super willMoveToSuperview:newSuperview];

    if (newSuperview == nil) {
        return;
    }

    if (CGRectContainsPoint(newSuperview.bounds, self.center)) {
        CABasicAnimation *growAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
        growAnimation.delegate = (id<CAAnimationDelegate>)self;
        growAnimation.duration = 0.5f;
        growAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

        growAnimation.fromValue = [NSNumber numberWithDouble:0.0f];

        growAnimation.toValue = [NSNumber numberWithDouble:1.0f];

        [self.layer addAnimation:growAnimation forKey:@"growAnimation"];
    }
}
override func willMove(toSuperview newSuperview: UIView?) {
        super.willMove(toSuperview: newSuperview)

        if(newSuperview?.bounds.contains(self.center))! {
            let growAnimation = CABasicAnimation.init(keyPath: "transform.scale")
            growAnimation.delegate = self
            growAnimation.duration = 1.5;
            growAnimation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionLinear)
            growAnimation.fromValue = 0
            growAnimation.toValue = 1.0

            self.layer.add(growAnimation, forKey: "growAnimation")
        }
    }
下载源代码
00:00 / 00:12
体验移动端 扫码体验移动端

使用场景

只要涉及到在地图上标点/打点，都可以应用该效果。

用到产品

Android 地图 SDK

核心类/接口

类

接口

说明

版本

Marker

setAnimation(MarkerOptions opt)

设置Marker动画的接口

V2.4.1版本起


startAnimation()

启动预设动画

V4.0.0版本起

MarkerOptions

position(Latlng mLatlng)

设置Marker的经纬度接口

V2.4.1版本起

Animation

ScaleAnimation(int x,int tox,int y,int toy)

初始化生长效果动画

V4.0.0版本起

核心难点

1、添加marker

Java
MarkerOptions options = new MarkerOptions();
options.position(markerPosition);
Marker marker = mAMap.addMarker(options);

2、设置marker动画

Java
Animation markerAnimation = new ScaleAnimation(0, 1, 0, 1); //初始化生长效果动画
markerAnimation.setDuration(1000);  //设置动画时间 单位毫秒
marker.setAnimation(markerAnimation);

3、启动marker动画

Java
marker.startAnimation();

 

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