0

このコードを使用すると、クリックに基づいて線(風船のような)で円を作成し、長方形の中心位置にアニメーション化できますが、線のアニメーション化は風船のような円と一緒に行われず、画面の移動方法(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);} }); });

風船のように円を線と一緒に画面の上部に移動する方法を教えてください。

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 に答える