“点标记缩放动画”的版本间的差异

2022年2月25日 (五) 17:24的最后版本

点标记缩放动画

功能场景

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

//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;
}

复制

深色

复制成功

@@ 第1行： / 第1行： @@
 <div id="examples_center"><!-- 页面标题 --><div class="title-hd">点标记缩放动画</div><!-- 标题下子标题及简介，可有多个 --><div class="title-mi">功能场景</div><div class="wrap-mi">需要在地图上突出展示位置信息时可使用此功能。</div><!--  --></div><div class="demos_wrap"><div class="header"><div class="andiord-header active">Android</div><div class="ios-header">iOS</div></div><div class="andiord-wrap wrap"><div class="wrap-wp"><div class="wrap_left"><div class="left-video"><div class="img-bg-and"></div><div class="phone-android"><div class="video-wrap infor"><div class="video-control"></div><!-- 安卓视频位置 (不写协议)--><pre>//mapopen-website-wiki.bj.bcebos.com/demos/AndroidVideos/Android点标记缩放动画.mp4</pre>
-</div><div class="video-icon-and"><div class="play play-and"></div><div class="stop stop-and"></div></div></div><div class="progressWrap-hide-and"></div><div id="videoControls-and"><div id="progressWrap-and"><div id="playProgress-and"></div></div></div></div><div class="left-qrCode"><!-- 安卓二维码位置 --><div class="qrCode-and">1590746640|//mapopen-website-wiki.bj.bcebos.com/demos/newqrcodes/点标记缩放.png</div><div>扫码体验</div></div></div><div class="wrap_right"><div class="wrap_right_nav"><div class="wrap_right_nav_l"><div>使用产品</div><div><!-- 安卓使用产品下选项，可有多个 --><!-- 产品1|/index.php?title=test --><div class="documentA">Android地图SDK|/index.php?title=androidsdk</div><div>></div><div class="documentA">点标记动画|/index.php?title=androidsdk/guide/render-map/animation</div></div></div><div class="wrap_right_nav_r">下载源码</div><!-- 安卓源码地址 --><div class="github-url-and">//mapopen-website-wiki.bj.bcebos.com/demos/BaiduMapSDKExample.zip</div></div><div class="wrap_table"><div class="table_nav"><div class="left-icon"></div><div>核心接口</div></div><div class="table_wrap"><div class="table_wrap_title"><div>类</div><div>接口</div><div>描述</div></div><!-- 表格接口，可有多个 --><div class="table_wrap_con"><div class="table_wrap_w"><div><div class="table-wrap-className">MarkerOptions</div></div><div><div>icon(BitmapDescriptor icon)</div></div><div><div>设置marker图标</div></div></div><!--  --><div class="table_wrap_w"><div><div class="table-wrap-className">MarkerOptions</div></div><div><div>position(LatLng position)</div></div><div><div>设置 marker 覆盖物的位置坐标</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Marker</div></div><div><div>setAnimation(Animation animation)</div></div><div><div>设置Marker动画</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Marker</div></div><div><div>startAnimation()</div></div><div><div>开始播放动画</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Marker</div></div><div><div>cancelAnimation()</div></div><div><div>取消动画</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">ScaleAnimation</div></div><div><div>setDuration(long duration)</div></div><div><div>设置动画播放时间</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">ScaleAnimation</div></div><div><div>setRepeatCount(int repeatCount)</div></div><div><div>设置动画重复次数</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">ScaleAnimation</div></div><div><div>setRepeatMode(RepeatMode repeatMode)</div></div><div><div>设置动画重复播放模式</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Animation.AnimationListener</div></div><div><div>onAnimationStart()</div></div><div><div>动画开始回调</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Animation.AnimationListener</div></div><div><div>onAnimationEnd()</div></div><div><div>动画结束回调</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Animation.AnimationListener</div></div><div><div>onAnimationCancel()</div></div><div><div>动画取消回调</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Animation.AnimationListener</div></div><div><div>onAnimationRepeat()</div></div><div><div>动画重复回调</div></div></div></div></div></div></div></div><div class="pre-nav"><div class="left-icon"></div><div>核心代码</div></div><div class="pre-nav"><div>1.创建动画</div></div><div class="pre-wrap"><div class="pre-wrap-nav"><div>JAVA</div></div><!-- 安卓示例代码位置 --><div class="pre-wrap-w pre-wrap-w-and"><pre class="prettyprint prettyprinted pre-and">/**
+</div><div class="video-icon-and"><div class="play play-and"></div><div class="stop stop-and"></div></div></div><div class="progressWrap-hide-and"></div><div id="videoControls-and"><div id="progressWrap-and"><div id="playProgress-and"></div></div></div></div><div class="left-qrCode"><!-- 安卓二维码位置 --><div class="qrCode-and">1590746640|//mapopen-website-wiki.bj.bcebos.com/demos/newqrcodes/点标记缩放.png</div><div>扫码体验</div></div></div><div class="wrap_right"><div class="wrap_right_nav"><div class="wrap_right_nav_l"><div>使用产品</div><div><!-- 安卓使用产品下选项，可有多个 --><div class="documentA">Android地图SDK|/index.php?title=androidsdk</div><div>></div><div class="documentA">点标记动画|/index.php?title=androidsdk/guide/render-map/animation</div></div></div><div class="wrap_right_nav_r">下载源码</div><!-- 安卓源码地址 --><div class="github-url-and">//mapopen-website-wiki.bj.bcebos.com/demos/BaiduMapSDKExample.zip</div></div><div class="wrap_table"><div class="table_nav"><div class="left-icon"></div><div>核心接口</div></div><div class="table_wrap"><div class="table_wrap_title"><div>类</div><div>接口</div><div>描述</div></div><!-- 表格接口，可有多个 --><div class="table_wrap_con"><div class="table_wrap_w"><div><div class="table-wrap-className">MarkerOptions</div></div><div><div>icon(BitmapDescriptor icon)</div></div><div><div>设置marker图标</div></div></div><!--  --><div class="table_wrap_w"><div><div class="table-wrap-className">MarkerOptions</div></div><div><div>position(LatLng position)</div></div><div><div>设置 marker 覆盖物的位置坐标</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Marker</div></div><div><div>setAnimation(Animation animation)</div></div><div><div>设置Marker动画</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Marker</div></div><div><div>startAnimation()</div></div><div><div>开始播放动画</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Marker</div></div><div><div>cancelAnimation()</div></div><div><div>取消动画</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">ScaleAnimation</div></div><div><div>setDuration(long duration)</div></div><div><div>设置动画播放时间</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">ScaleAnimation</div></div><div><div>setRepeatCount(int repeatCount)</div></div><div><div>设置动画重复次数</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">ScaleAnimation</div></div><div><div>setRepeatMode(RepeatMode repeatMode)</div></div><div><div>设置动画重复播放模式</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Animation.AnimationListener</div></div><div><div>onAnimationStart()</div></div><div><div>动画开始回调</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Animation.AnimationListener</div></div><div><div>onAnimationEnd()</div></div><div><div>动画结束回调</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Animation.AnimationListener</div></div><div><div>onAnimationCancel()</div></div><div><div>动画取消回调</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">Animation.AnimationListener</div></div><div><div>onAnimationRepeat()</div></div><div><div>动画重复回调</div></div></div></div></div></div></div></div><div class="pre-nav"><div class="left-icon"></div><div>核心代码</div></div><div class="pre-nav"><div>1.创建动画</div></div><div class="pre-wrap"><div class="pre-wrap-nav"><div>JAVA</div></div><!-- 安卓示例代码位置 --><div class="pre-wrap-w pre-wrap-w-and"><pre class="prettyprint prettyprinted pre-and">/**
 * 创建缩放动画
 */
@@ 第61行： / 第61行： @@
                  </pre>
 <div class="pre-btn"><div class="pre-btn-copy-and">复制</div><div class="pre-btn-cb-and">深色</div></div><div class="success">复制成功</div></div></div><div class="more-nav"><div class="left-icon"></div><div>更多功能</div></div><div class="more-wrap"><!-- 安卓更多功能下选项 --><!-- 点标记动画|/index.php?title=test --><div><div class="point"></div><div class="documentA">添加文字和信息窗|/index.php?title=androidsdk/guide/render-map/text</div></div></div></div><div class="ios-wrap wrap" style="display: none;"><div class="wrap-wp"><div class="wrap_left"><div class="left-video"><div class="img-bg-ios-sh"></div><div class="phone-ios"><div class="video-wrap infor"><div class="video-control"></div><!-- ios视频位置 --><pre>//mapopen-website-wiki.bj.bcebos.com/demos/iosVideos/iOS点标记缩放动画.mov</pre>
-</div><div class="video-icon-ios"><div class="play play-ios"></div><div class="stop stop-ios"></div></div></div><div class="progressWrap-hide-ios"></div><div id="videoControls-ios"><div id="progressWrap-ios"><div id="playProgress-ios"></div></div></div></div><div class="left-qrCode iosqrCode"><!-- ios二维码位置 --><div class="qrCode-ios">1590746640|//mapopen-website-wiki.bj.bcebos.com/demos/ioscodes/点标记缩放动画@1xios.png</div><div>扫码体验</div></div></div><div class="wrap_right"><div class="wrap_right_nav"><div class="wrap_right_nav_l"><div>使用产品</div><div><!-- IOS使用产品下选项，可有多个 --><!-- 产品1|/index.php?title=test --><div class="documentA">iOS地图SDK|/index.php?title=iossdk</div><!--  --><div>></div><div class="documentA">点标记动画|/index.php?title=iossdk/guide/map-render/animation</div></div></div><div class="wrap_right_nav_r">下载源码</div><!-- IOS源码地址 --><div class="github-url-ios">//mapopen-website-wiki.bj.bcebos.com/BaiduMapSDKDemo.zip</div></div><div class="wrap_table"><div class="table_nav"><div class="left-icon"></div><div>核心接口</div></div><div class="table_wrap"><div class="table_wrap_title"><div>类</div><div>接口</div><div>描述</div></div><!-- ios表格接口内容，可有多个 --><!-- 表格接口，可有多个 --><div class="table_wrap_con"><div class="table_wrap_w"><div><div class="table-wrap-className">BMKPointAnnotation</div></div><div><div>- (instancetype)init</div></div><div><div>创建点标记实例</div></div></div><!--  --><div class="table_wrap_w"><div><div class="table-wrap-className">BMKPointAnnotation</div></div><div><div>CLLocationCoordinate2D coordinate;</div></div><div><div>设置点标记经纬度坐标</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">BMKPointAnnotation</div></div><div><div>NSString *title;</div></div><div><div>设置显示的标题</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">BMKPinAnnotationView</div></div><div><div>- (id)initWithAnnotation:(id&lt;BMKAnnotation&gt;)annotationreuseIdentifier:(NSString *)reuseIdentifier;</div></div><div><div>初始化并返回一个BMKPinAnnotationView实例</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">BMKMapView</div></div><div><div>- (void)addAnnotation:(id &lt;BMKAnnotation&gt;)annotation;</div></div><div><div>向地图窗口添加点标记</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">CABasicAnimation</div></div><div><div>+ (instancetype)animationWithKeyPath:(nullable NSString *)path;</div></div><div><div>基于CABasicAnimation完成缩放动画的添加，删除，暂停，恢复</div></div></div></div></div></div></div></div><div class="pre-nav"><div class="left-icon"></div><div>核心代码</div></div><div class="pre-wrap"><div class="pre-wrap-nav"><div>Objective-C</div></div><div class="pre-wrap-w pre-wrap-w-ios code_container"><!-- ios示例代码位置 --><pre class="prettyprint prettyprinted pre-ios">//添加动画
+</div><div class="video-icon-ios"><div class="play play-ios"></div><div class="stop stop-ios"></div></div></div><div class="progressWrap-hide-ios"></div><div id="videoControls-ios"><div id="progressWrap-ios"><div id="playProgress-ios"></div></div></div></div><div class="left-qrCode iosqrCode"><!-- ios二维码位置 --><div class="qrCode-ios">1590746640|//mapopen-website-wiki.bj.bcebos.com/demos/ioscodes/点标记缩放动画@1xios.png</div><div>扫码体验</div></div></div><div class="wrap_right"><div class="wrap_right_nav"><div class="wrap_right_nav_l"><div>使用产品</div><div><!-- IOS使用产品下选项，可有多个 --><div class="documentA">iOS地图SDK|/index.php?title=iossdk</div><!--  --><div>></div><div class="documentA">点标记动画|/index.php?title=iossdk/guide/map-render/animation</div></div></div><div class="wrap_right_nav_r">下载源码</div><!-- IOS源码地址 --><div class="github-url-ios">//mapopen-website-wiki.bj.bcebos.com/BaiduMapSDKDemo.zip</div></div><div class="wrap_table"><div class="table_nav"><div class="left-icon"></div><div>核心接口</div></div><div class="table_wrap"><div class="table_wrap_title"><div>类</div><div>接口</div><div>描述</div></div><!-- ios表格接口内容，可有多个 --><!-- 表格接口，可有多个 --><div class="table_wrap_con"><div class="table_wrap_w"><div><div class="table-wrap-className">BMKPointAnnotation</div></div><div><div>- (instancetype)init</div></div><div><div>创建点标记实例</div></div></div><!--  --><div class="table_wrap_w"><div><div class="table-wrap-className">BMKPointAnnotation</div></div><div><div>CLLocationCoordinate2D coordinate;</div></div><div><div>设置点标记经纬度坐标</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">BMKPointAnnotation</div></div><div><div>NSString *title;</div></div><div><div>设置显示的标题</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">BMKPinAnnotationView</div></div><div><div>- (id)initWithAnnotation:(id&lt;BMKAnnotation&gt;)annotationreuseIdentifier:(NSString *)reuseIdentifier;</div></div><div><div>初始化并返回一个BMKPinAnnotationView实例</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">BMKMapView</div></div><div><div>- (void)addAnnotation:(id &lt;BMKAnnotation&gt;)annotation;</div></div><div><div>向地图窗口添加点标记</div></div></div><div class="table_wrap_w"><div><div class="table-wrap-className">CABasicAnimation</div></div><div><div>+ (instancetype)animationWithKeyPath:(nullable NSString *)path;</div></div><div><div>基于CABasicAnimation完成缩放动画的添加，删除，暂停，恢复</div></div></div></div></div></div></div></div><div class="pre-nav"><div class="left-icon"></div><div>核心代码</div></div><div class="pre-wrap"><div class="pre-wrap-nav"><div>Objective-C</div></div><div class="pre-wrap-w pre-wrap-w-ios code_container"><!-- ios示例代码位置 --><pre class="prettyprint prettyprinted pre-ios">//添加动画
 - (void)addAnimation {
      //缩放动画，按之前设置的锚点进行缩放

文档全面上新

2022年2月25日 (五) 17:24的最后版本