0

折れ線グラフに jquery.animate 関数を使用しています。

ここに画像の説明を入力

線と円の両方のシンボルをアニメーション化します。以下のコードを参照してください。

    _doLineAnimation: function() {
            var clipRect = $(this.chartObj.gSeriesEle).find("#" + this.gSeriesGroupEle.id + "_ClipRect").children();
            $(clipRect).animate(
                { width: parseFloat($(this.chartObj.gSeriesEle).find("#" + this.gSeriesGroupEle.id + "_ClipRect").children().attr("width")) },
                {
                    duration: 2000,

                    step: function(now) {
                        $(clipRect).attr("width", now);
                    }
                });

// the below code for animating the symbol
            var elements = $(this.chartObj.gSymbolGroupEle).children().not("defs");
            for (var i = 0; i < elements.length; i++) {
                var element = elements[i];
                this.animateSymbol(element);
            }

        }


animateSymbol:function(element) {
         var box = element.getBBox();
           var centerX = box.x + (box.width / 2);
           var centerY = box.y + (box.height / 2);
           var scaleVal;
               $(element).animate(
                   {
                       scale: 1,

                   },
                   {
                       duration: 2000,

                       step: function(now) {
                           scaleVal = now;
                           $(element).attr("transform", "translate(" + centerX + " " + centerY + ") scale(" + scaleVal + ") translate(" + (-centerX) + " " + (-centerY) + ")");


                       }
                   }
               );  
    },

私の問題は、線と記号の両方が同時にアニメーション化されていることです。ラインがポイントに到達するたびに、シンボル アニメーション (つまり、シンボルを拡大) を実行したいと考えています。

そのため、シンボル アニメーションの開始時間を設定する必要があります。これで、0 から開始し、2000 ミリ秒後に終了します。しかし、ラインが各ポイントに到達した後、各シンボルをアニメーション化するためにしばらく待つ必要があります。

また、animate() 関数で開始時間を設定する必要があります。この時間から開始し、2000 ミリ秒後に終了します。

アニメート機能にも初期値を設定する必要があります。

例: scale:1 は 0 から開始することを意味しますが、0.5 から 1 まで開始したいのですが、animate() 関数で初期値を設定するにはどうすればよいですか?

開始時間を設定し、スケール値を 0.5 に初期化する必要があります。

私は次のようなものを期待しています:

.animate ({
begintime: 1000

duartion:2000

initialvalue :scale :0.5
});
4

1 に答える 1

0

jQuery.delay()アニメーションの開始を遅らせるために使用できます。

$(element).delay(1000).animate({}, 2000, function () {});

遅延が機能しない場合は、要素を次のようにアニメーション化しますsetTimeout。

setTimeout(function () {
    $(element).animate({}, 2000, function () {});
}, 1000);
于 2013-06-11T05:42:11.550 に答える