0

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

代码：

$(文档).ready(函数 () {

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

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

4

1 回答 1

0

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

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++;
        });
于 2012-07-23T11:53:50.517 回答