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 = 可见，aTextOff = notVisible）但我现在会满足于不透明度。我也试过

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

那也没用

问题 2 仅适用于第一次点击...不知道为什么会这样！

任何帮助将不胜感激！谢谢

附言。如果您也有关于平滑过渡渐变变化的提示……那也很酷。

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 上创建了一个属性，以告诉我状态（真/假）是什么，然后基于动画圆和文本来创建切换效果。代码如下：

 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 回答