产品服务
解决方案
文档与支持
定价

Marker点动画

下载开发文档

Marker帧动画

自2.0.3版本起,SDK提供了给Marker增加帧动画的功能,一次传入一个Icon列表,通过interval设定刷新的帧间隔。

示例代码如下:

const images = [new ImageEntity('rawfile://icon_marka.png'),new ImageEntity('rawfile://icon_markb.png'),new ImageEntity('rawfile://icon_markc.png')]
this.marker = new Marker({
position: new LatLng(39.904835, 116.403119),
icons: images,
interval: 160
});
this.mapController?.addOverlay(this.marker)

运行结果如下:

Marker动画

除了可以自定义的帧动画,Marker还支持设置旋转、缩放、平移、透明、和组合动画效果。通过Marker类setAnimation方法设置。

类型说明

Transformation

平移

RotateAnimation

旋转

ScaleAnimation

缩放

SingleScaleAnimation

X 或 Y 轴方向单独缩放

AlphaAnimation

透明

AnimationSet

动画集合

平移动画效果的示例代码如下:

getTransformation():Transformation {
const latLngA = new LatLng(39.904835, 116.403119);
const latLngB = new LatLng(40, 116.403);
const transformation = new Transformation([latLngA,latLngB]);
transformation.setDuration(1000);// 设置动画时间
transformation.setRepeatMode(SysEnum.MarkerRepeatMode.REVERSE);// 动画重复模式
transformation.setRepeatCount(1);// 动画重复次数
return transformation;
}
const animation = this.getTransformatio()
this.marker.setAnimation(animation);
animation.start();

展示效果如图:

加载Marker时增加动画

SDK提供了加载Marker时的动画效果,有如下四种效果供开发者选择:

类型说明

AnimateDefine.NONE

无效果

AnimateDefine.DROP

从天上掉下

AnimateDefine.GROW

从地下生长

AnimateDefine.JUMP

跳跃

通过IMarkerOption中的animateType属性设置。

DROP动画示例代码如下:

let image: ImageEntity = new ImageEntity('rawfile://map_marker_red.png');
this.marker = new Marker({
position: new LatLng(39.904835, 116.403119),
icon: image,
located: SysEnum.Located.CENTER,
animateType: SysEnum.AnimateDefine.DROP // 设置动画类型
});
this.mapController.addOverlay(this.marker);

效果如图:

上一篇

位置短地址分享

下一篇

请求状态码说明

本篇文章对您是否有帮助?