​

        import { Graph, VectorSource, Layer, Text, Circle, BgUtil, Animation, Easing, MathUtil, Color, Gradient } from "../../src/index.js";

​

        // 初始化graph对象

        let graph = new Graph({

            "target": "graphWrapper"

        });

​

        // 矩形

        let defs = [

            { "x": 50, "y": 50, "radius": 14,  "name":"easeIn", "easing": Easing.easeIn },

            { "x": 50, "y": 100, "radius": 14, "name":"easeOut", "easing": Easing.easeOut },

            { "x": 50, "y": 150, "radius": 14, "name":"inAndOut", "easing": Easing.inAndOut },

            { "x": 50, "y": 200, "radius": 14, "name":"linear", "easing": Easing.linear },

            { "x": 50, "y": 250, "radius": 14, "name":"upAndDown", "easing": Easing.upAndDown },

            { "x": 50, "y": 300, "radius": 14, "name":"easeInSine", "easing": Easing.easeInSine },

            { "x": 50, "y": 350, "radius": 14, "name":"easeOutSine", "easing": Easing.easeOutSine },

            { "x": 50, "y": 400, "radius": 14, "name":"easeInOutQuint", "easing": Easing.easeInOutQuint }

        ];

​

        // 显示辅助网格

        let bgLayer = BgUtil.generateGrid(Object.assign({ "interval": 10, "graph": graph }, graph.getSize()));

        bgLayer.getSource().add(new Text({

            "text": "缓动 Demo",

            "x": graph.getSize().width / 2,

            "y": graph.getSize().height / 2,

            "vectorSize": false,

            "style": { "lineWidth": 4, "fillStyle": 0, "fillColor": "#D0D0D0", "fontSize": 30, "fontName": "黑体", "textAlign": "center", "textBaseline": "middle" }

        }));

​

        // 增加数据层

        let layer = graph.addLayer({ "name": "数据层" });

        let colorSet = ["red", "yellow", "#B3B3FF", "green", "black", "#CCFFFF", "#FFE6CC", "#F7E5FF"];

        let minX = 50, maxX = 800;

        let times = 10;

​

        /**

         * 绘制缓动过程

         */

        function drawEasingStep(defIdx) {

            layer.getSource().clearData();

​

            // 过程

            for (let idx = 0; idx <= times; idx++) {

                let x = MathUtil.lerp(minX, maxX, defs[defIdx].easing(idx / times));

                let y = 100;

                if (defIdx == 4 && idx > 5) {

                    y = 160;

                }

​

                layer.getSource().add(

                    new Circle({

                        "x": x,

                        "y": y,

                        "radius": defs[defIdx].radius,

                        "style": { "color": "none", "fillStyle": 1, "fillColor": "green" }

                    }));

                layer.getSource().add(

                    new Text({

                        "text": idx,

                        "x": x,

                        "y": y,

                        "style": { "fontSize": 12, "fillColor": "white", "fontName": "黑体", "textBaseline": "middle", "textAlign": "center" }

                    }));

            }

​

            layer.getSource().add(

                new Text({

                    "text": defs[defIdx].name,

                    "x": defs[defIdx].x - defs[defIdx].radius,

                    "y": 40,

                    "style": { "fontSize": 24, "fillColor": "blue", "fontName": "Verdana", "textBaseline": "middle", "textAlign": "left" }

                }))

        }

​

        defs.forEach(def => {

            let button = $("<button class='btn'>" + def.name + "</button>");

            $("#buttons").append(button);

        });

        $("#buttons").find("button").on("click", function () {

            drawEasingStep($(this).index());

        })