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);
效果如图:

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