Svg 基于我的点击创建气球，并使用Raphael.js制作屏幕顶部的动画（X轴的随机位置）

使用这段代码，我可以根据我的点击创建一个以线为气球的圆，并将其动画化到矩形的中心位置，同时动画线不以圆圈为气球，以及如何移动屏幕上X轴的随机位置而不是中心位置

代码：

$document.readyfunction{

        var canvas = Raphael(0, 0, 920, 940);
        var backboard = canvas.rect(0, 0, 920, 940).attr({ fill: 'white', stroke: 'none' });
        backboard.click(function (event, x, y) {

            var bbox = backboard.getBBox();
            var x_ratio = x / bbox.width;
            var y_ratio = y / bbox.height;
            var color = 'rgb(' + Math.floor(x_ratio * 255) + ',0,' + Math.floor(y_ratio * 255) + ")";

            // Circle
            var transient_circle = canvas.circle(x, y, 25).attr({ fill: color, stroke: 'black', 'stroke-width': 1 });
            transient_circle.animate({ cx: bbox.width / 2, cy: bbox.width / 3, 'fill-opacity': 0.25 }, 3000, ">",
            function () {
                transient_circle.animate({ 'stroke-opacity': 0, 'fill-opacity': 0 }, 2500, function () { transient_circle.remove(); });
            });

            // Line
            var transient_pathline = canvas.path("M" + x + " " + (y + 25) + "C" + (x - 80) + " " + (y + 200) + " " + (x + 100) + " " + (y + 400) + " " + (x - 100) + " " + (y + 120)).attr({ fill: '#fff', stroke: color, 'stroke-width': 1 });
            var _transformedPath = Raphael.transformPath('M' + (bbox.width / 2) + " " + (bbox.width / 3) + "C" + (x - 80) + " " + (y + 200) + " " + (x + 100) + " " + (y + 400) + " " + (x - 100) + " " + (y + 120), 'T300,0');
            transient_pathline.animate({ path: _transformedPath }, 1000);} }); });

---

请帮助我如何像气球一样沿直线将圆圈移动到屏幕顶部。

基于用户单击创建气球的代码

function derivateElement(element) {

            var movAmplitude = 236

            var nx = -movAmplitude * .5 + Math.random() * movAmplitude
            var ny = -movAmplitude * .5 + Math.random() * movAmplitude

            var timing = 800 + Math.random() * 400

            element.animate({ transform: "T" + nx + ", " + ny }, timing, "easeInOut", function () { derivateElement(element) });
        }

        var canvas = Raphael(0, 0, 920, 940);
        var backboard = canvas.rect(0, 0, 920, 940).attr({ fill: 'white', stroke: 'none' });
        var index = 0;
        backboard.click(function (event, x, y) {

            var bbox = backboard.getBBox();
            var x_ratio = x / bbox.width;
            var y_ratio = y / bbox.height;
            var color = 'rgb(' + Math.floor(x_ratio * 255) + ',0,' + Math.floor(y_ratio * 255) + ")";

            // Circle
            var _circle = canvas.circle(x, y, 25).attr({ fill: color, stroke: 'black', 'stroke-width': 1 });
            //path
            var _pathline = canvas.path("M" + x + " " + (y + 25) + "C" + (x - 80) + " " + (y + 200) + " " + (x + 100) + " " + (y + 400) + " " + (x - 100) + " " + (y + 120)).attr({ fill: '#fff', stroke: color, 'stroke-width': 1 });

            _circle.connections = [];
            _pathline.startElement = _circle;
            _circle.connections.push(_pathline);
            _circle.connected = true;
            var CircleSet = []
            CircleSet[index] = canvas.set();
            CircleSet[index].push(_circle, _pathline);
            derivateElement(CircleSet[index]);
            index++;
        });

---

嗨@Mike C。请帮我画一个气球并给它做动画。