自定义动画

maptalks里内置了简单的动画功能,当你在阅读地图和图形的API时，你应该发现了地图和图形都提供了简单的的动画API

地图方面：

animateTo()
flyTo()

图形方面：

animateShow()
animate()

其实这些API背后都是 maptalks.animate在工作

import { animate } from "maptalks";

animate

animate是个函数用来动态创建一个动画函数，其用法：

var targetStyles = {
    symbol: {
        markerWidth: 200,
        markerHeight: 200,
    },
};

// animate by maptalks.animation.Animation
var player = maptalks.animate(
    targetStyles,
    {
        duration: 1000,
        easing: "out",
        repeat: true,
    },
    // callback of each frame
    function step(frame) {
        // if (frame.state.playState === 'running') {
        marker.updateSymbol(frame.styles.symbol);
        // }
    },
);

参数

targetStyles 样式对象,是个值为数字的对象
options 配置选线
- duration 持续时间
- easing 插值方法 in,out,linear,outExpo,outQuint,inAndOut,upAndDown
- repeat 是否重复动画
frameCallback - 动画过程中回调函数

TIP

maptalks version>=1.0.3后 easing 支持自定义函数

// animate by maptalks.animation.Animation
var player = maptalks.animate(
    targetStyles,
    {
        duration: 1000,
        easing: (k) => {
            // more animation easing functions https://echarts.apache.org/examples/zh/editor.html?c=line-easing
            return 1 - Math.sqrt(1 - k * k);
        },
        repeat: true,
    },
    // callback of each frame
    function step(frame) {
        // if (frame.state.playState === 'running') {
        marker.updateSymbol(frame.styles.symbol);
        // }
    },
);

返回值

返回的是个Player对象，其具有的方法有：

player()
pause()
cancel()
finish()

可以使用这些方法来控制动画的播放,暂停等

function play() {
    player.play();
}

function pause() {
    player.pause();
}
function cancel() {
    player.cancel();
}
function finish() {
    player.finish();
}

动画过程中回调函数

动画回调函数每次回调的值为frame,里面会记录当前的：

播放状态,播放进度等
样式值的当前值

// callback of each frame
function step(frame) {
    const playState = frame.playState;
    // is end
    if (playState === "finished") {
    }
    //is running
    if (playState === "running") {
    }

    //others state

    const styles = frame.styles;
    const symbol = frame.symbol;
}

样式动画

海拔动画例子

TIP

其他的动画可以照葫芦画瓢,如果你不喜欢maptalks自带的动画功能，或者觉得其功能不够强大也可以使用第三方动画库，tween.js anime.js gsap.js啥的,只需要在动画过程中动态的设置图形的样式，属性，海拔等值即可

自定义动画 ​

animate ​

参数 ​

返回值 ​

动画过程中回调函数 ​

自定义动画

animate

参数

返回值

动画过程中回调函数