自定义动画

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 - 动画过程中回调函数

返回值

返回的是个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;
}

自定义动画 ​

animate ​

参数 ​

返回值 ​

动画过程中回调函数 ​

自定义动画

animate

参数

返回值

动画过程中回调函数