点标记缩放动画

功能场景

需要在地图上突出展示位置信息时可使用此功能。

Android

iOS

//mapopen-website-wiki.bj.bcebos.com/demos/AndroidVideos/Android点标记缩放动画.mp4

1590746640|//mapopen-website-wiki.bj.bcebos.com/demos/newqrcodes/点标记缩放.png

扫码体验

使用产品

Android地图SDK|/index.php?title=androidsdk

>

点标记动画|/index.php?title=androidsdk/guide/render-map/animation

下载源码

//mapopen-website-wiki.bj.bcebos.com/demos/BaiduMapSDKExample.zip

核心接口

类

接口

描述

MarkerOptions

icon(BitmapDescriptor icon)

设置marker图标

MarkerOptions

position(LatLng position)

设置 marker 覆盖物的位置坐标

Marker

setAnimation(Animation animation)

设置Marker动画

Marker

startAnimation()

开始播放动画

Marker

cancelAnimation()

取消动画

ScaleAnimation

setDuration(long duration)

设置动画播放时间

ScaleAnimation

setRepeatCount(int repeatCount)

设置动画重复次数

ScaleAnimation

setRepeatMode(RepeatMode repeatMode)

设置动画重复播放模式

Animation.AnimationListener

onAnimationStart()

动画开始回调

Animation.AnimationListener

onAnimationEnd()

动画结束回调

Animation.AnimationListener

onAnimationCancel()

动画取消回调

Animation.AnimationListener

onAnimationRepeat()

动画重复回调

核心代码

1.创建动画

JAVA

/**
* 创建缩放动画
*/
private Animation createScaleAnimation() {
    ScaleAnimation scaleAnimation = new ScaleAnimation(1f, 2f, 1f);
    scaleAnimation.setDuration(2000);   // 动画播放时间
    scaleAnimation.setRepeatCount(2000);
    scaleAnimation.setRepeatMode(Animation.RepeatMode.RESTART); // 动画重复模式
    scaleAnimation.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart() {
        }

        @Override
        public void onAnimationEnd() {
        }

        @Override
        public void onAnimationCancel() {
        }

        @Override
        public void onAnimationRepeat() {
        }
    });
    return scaleAnimation;
}

mMarker.cancelAnimation();
mMarker.setAnimation(mAnimation);
mMarker.startAnimation();            
}
                

复制

深色

复制成功

2.初始化view，设置动画控制监听

JAVA

private void initView() {
    mMapView = findViewById(R.id.mapview);
    mAddAniLayout = findViewById(R.id.add_ani);
    mAddAniLayout.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mMarker.cancelAnimation();
            mMarker.setAnimation(mAnimation);
            mMarker.startAnimation();
        }
    });

    mRemoveAniLayout = findViewById(R.id.remove_ani);
    mRemoveAniLayout.setOnClickListener(new View.OnClickListener() {
        /**
            * Called when a view has been clicked.
            *
            * @param v The view that was clicked.
            */
        @Override
        public void onClick(View v) {
            mMarker.cancelAnimation();
            mMarker.setScale(1.0f);
        }
    });
}
                

复制

深色

复制成功

更多功能

添加文字和信息窗|/index.php?title=androidsdk/guide/render-map/text

//mapopen-website-wiki.bj.bcebos.com/demos/iosVideos/iOS点标记缩放动画.mov

1590746640|//mapopen-website-wiki.bj.bcebos.com/demos/ioscodes/点标记缩放动画@1xios.png

扫码体验

使用产品

iOS地图SDK|/index.php?title=iossdk

>

点标记动画|/index.php?title=iossdk/guide/map-render/animation

下载源码

//mapopen-website-wiki.bj.bcebos.com/BaiduMapSDKDemo.zip

核心接口

类

接口

描述

BMKPointAnnotation

- (instancetype)init

创建点标记实例

BMKPointAnnotation

CLLocationCoordinate2D coordinate;

设置点标记经纬度坐标

BMKPointAnnotation

NSString *title;

设置显示的标题

BMKPinAnnotationView

- (id)initWithAnnotation:(id<BMKAnnotation>)annotationreuseIdentifier:(NSString *)reuseIdentifier;

初始化并返回一个BMKPinAnnotationView实例

BMKMapView

- (void)addAnnotation:(id <BMKAnnotation>)annotation;

向地图窗口添加点标记

CABasicAnimation

+ (instancetype)animationWithKeyPath:(nullable NSString *)path;

基于CABasicAnimation完成缩放动画的添加，删除，暂停，恢复

核心代码

Objective-C

//添加动画
- (void)addAnimation {
    //缩放动画，按之前设置的锚点进行缩放
    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.duration = 1;
    scaleAnimation.repeatCount = HUGE_VALF;
    scaleAnimation.autoreverses = YES;
    //保证app切换到后台动画再切回来时动画依然执行
    scaleAnimation.removedOnCompletion = NO;
    scaleAnimation.fromValue = @(1.0);
    scaleAnimation.toValue = @(1.3);
    [self.layer addAnimation:scaleAnimation forKey:@"scale-layer"];
}

//移除动画
- (void)removeAnimation {
    [self.layer removeAllAnimations];
}

//暂停动画
- (void)pauseAnimation {
    CFTimeInterval pausedTime = [self.layer convertTime:CACurrentMediaTime() fromLayer:nil];
    self.layer.speed = 0.0;
    self.layer.timeOffset = pausedTime;
}
    
//恢复动画
- (void)resumeAnimation {
    CFTimeInterval pausedTime = [self.layer timeOffset];
    self.layer.speed = 1.0;
    self.layer.timeOffset = 0.0;
    self.layer.beginTime = 0.0;
    CFTimeInterval timeSincePause = [self.layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
    self.layer.beginTime = timeSincePause;
}                   
                

复制

深色

复制成功