Question

使用此代码，我可以根据我的点击和动画到矩形的中心位置创建一个带线条的圆圈（如气球），而动画线条不像圆圈一样的圆圈以及如何移动屏幕（X轴的随机位置）位于中心位置。

代码：

$（document）.ready（function（）{

        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);} }); });

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

Answer 1

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

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++;
        });

根据我的点击创建气球，并使用Raphael.js动画到屏幕顶部（X轴的随机位置）

1 个答案: