0

私の index.html には次のものがあります。

<ellipse id="ellipseRed" cx="500" cy="1300" rx="40" ry="150" />

私のjavascriptファイルには次のものがあります：

$('ellipse').click(function() {
  $(this).attr('transform', 'translate(0 -350) rotate(0)');
});

変換は機能しますが、スムーズではありません。つまり、新しい場所に移行するのではなく、新しい場所に「ジャンプ」しているように見えます。

SVG 楕円をクリックして、ゆっくりと垂直に上に移動させたいと思います。次に、もう一度クリックすると、ゆっくりと下に移動します。

私は新しい html、SVG、および jQuery/Javascript です

私はこれについて正しい方法で進んでいますか？この SVG をアニメーション化するために jQuery を使用する必要がありますか?

4

2 に答える 2

2

jQuery を使用して SVG をアニメーション化することは確かに可能ですが、扱いにくく、あまり効率的ではありません。RaphaelやD3など、SVG を適切にサポートするライブラリを使用することをお勧めします。

これは、jQuery で行う方法です。

//jQuery way, not recommended
$('#ellipseRed').click(function() {
    //min-height is just a placeholder value
    //so jquery knows what values to put into
    //the transformation
    $(this)
    .css({"min-height": 0})
    .animate(
      {"min-height": -350},
      {duration: 1000,
       step: function( top ){
           this.setAttribute("transform", "translate(0,"+top+")");
         }
       });
});

これが D3 でどれほど明確かを比較してください。

d3.select("#ellipseBlue").on("click", function(){
  d3.select(this)
      .attr("transform", "translate(0,0)")
      .transition()
        .duration(1000)
        .ease("in-out")
        .attr("transform", "translate(0,-350)")
});

ここでデモを見つけることができます: http://jsfiddle.net/LupTw/

</p>

于 2012-10-02T05:14:58.897 に答える
0

アニメーションの場合は、変換を使用する必要があります。ここで見ることができる例http://www.the-art-of-web.com/css/css-animation/#4

于 2012-10-02T04:58:57.137 に答える