0

javacript で svg を使用して「iphone スタイル」のトグル ボタンを作成しました。コードは次のとおりです。

var btnsvg;
var aCircle;
var aTextOn;
var aTextOff;

function circle_click(evt) {
    var circle = evt.target;

    if ($(circle).position({ svgCx: 20 })) {
        $(circle).animate({ svgCx: 50 }, 400);
        $(aTextOn).animate({ svgFillOpacity: 1.0 }, 400);
        $(aTextOff).animate({ svgFillOpacity: 0.0 }, 400);
    }
    else {
        $(circle).animate({ svgCx: 20 }, 400);
        $(aTextOn).animate({ svgFillOpacity: 0.0 }, 400);
        $(aTextOff).animate({ svgFillOpacity: 1.0 }, 400);
   }
}

function drawToggleButton() {

    $('.toggleButton').each(function () {
        btnsvg = $(this).svg().svg('get');
        btnsvg.linearGradient('btnGrad',
            [[0, '#000000'], [1, '#000000', 0.32]], 50.168, 28, 50.168, 3,
            { gradientUnits: 'userSpaceOnUse'
            });
        btnsvg.linearGradient('offGrad',
            [[0, '#1F1F1F'], [1, '#A2A1A1']], 32.6685, 28, 32.6685, 3,
            { gradientUnits: 'userSpaceOnUse'
            });
        btnsvg.linearGradient('onGrad',
            [[0, '#1A2D49'], [1, '#304866']], 32.6685, 28, 32.6685, 3,
            { gradientUnits: 'userSpaceOnUse'
            });
        btnsvg.rect(10, 10, 50, 20, 10, 10,
            { fill: 'url(#offGrad)', stroke: 'black', strokeWidth: 1
            });
        aCircle = btnsvg.circle(20, 20, 10, { onclick: 'circle_click(evt)', fill: 'url(#btnGrad)' });

    });
}

それは一種の作品です...

問題1両方の単語が最初に表示されます。不透明度により、アニメーションで変更できますが、初期属性として設定できません。テキストをまとめて削除したいのですが (aTextOn = visible、a​​TextOff = notVisible)、ここでは不透明度で解決します。私も試しました

$(aTextOff).text({fill: 'rgb(0,0,0,0.0)'});

それもうまくいきませんでした

問題 2 最初のクリックでしか機能しない... なぜこれが起こっているのか見当がつかない!

どんな助けでも大歓迎です！ありがとう

ps。グラデーションのスムーズな移行に関するヒントもあれば..それもクールです。

4

1 に答える 1

0

不透明度の解決策を見つけました...使用して初期設定しようとしていました

$(aTextOff).text({fill: 'white', svgOpacity: 1.0});

しかし、そうすべきだった

$(aTextOff).text({fill: 'white', opacity: 1.0});

「svgOpacity」はアニメーション用で、「opacity」は属性用ですhttp://keith-wood.name/svg.html

また、テキストの後に作成されるように円を移動して、上に配置しました。クリック機能に関しては、svg ボタンがレンダリングされる div にプロパティを作成して、トグル効果を作成するために円とテキストをアニメーション化した状態 (true/false) に基づいていることを示します。コードは次のとおりです。

 function circle_click(evt) {
    var circle = evt.target;      
    var currentState = $('.toggleButton').attr('value') == 'true';

    if (!currentState) {
        $(circle).animate({ svgCx: 50 }, 400);
        $(aTextOn).animate({ svgOpacity: 1.0 }, 400);
        $(aTextOff).animate({ svgOpacity: 0.0 }, 400);
    }
    else {
        $(circle).animate({ svgCx: 20 }, 400);
        $(aTextOn).animate({ svgOpacity: 0.0 }, 400);
        $(aTextOff).animate({ svgOpacity: 1.0 }, 400);
    }

    $('.toggleButton').attr('value', !currentState);

}

次を呼び出して位置を使用しようとする前に

$(circle).position({ svgCx: 20 });

ただし、それが位置であるかどうかを確認するのではなく、位置を設定します。

グラデーションの解決策はまだありません...近日公開予定です........

グラデーション アニメーションのソリューション....

不透明度を低く設定した新しいグレースケールグラデーションで別の四角形を追加し、元の四角形の上に置きました。

 aRect = btnsvg.rect(10, 10, 55, 20, 10, 10,
   { fill: '#606060', stroke: 'black', strokeWidth: 1
   });
   btnsvg.rect(10, 10, 55, 20, 10, 10,
   { fill: 'url(#myGrad)', stroke: 'black', strokeWidth: 1
   });

「aRect」は、色をアニメーション化するもので、上に透明なグラデーションがあり、グラデーションが変化しているような錯覚を与えます..

$(aRect).animate({ svgFill: '#1A2D49' }, 400);
于 2013-03-21T18:37:08.897 に答える