0

ラファエルでシェイプをアニメーション化するのに大きな問題があります。最初のアプローチは、形状とテキストを別々に保持することでしたが、10 の問題に直面しました。次に、テキストをホバーすると、形状がアニメーション化されません (そうあるべきです)。その後、形状とテキストを含むセットを作成しました。オブジェクトからパスにアクセスすることはできませんが、アニメーション化することはできません (テキストを除外して形状のみをアニメーション化したいのですが、テキストをホバーすると、形状がアニメーション化されるはずです)。どうすればこの問題を解決できますか? ありがとうございました！

    this[0].animate is not a function

[このエラーでブレーク]

this[0].animate({ 塗りつぶし: attributes.fill }, 300);

    var st = r.set();
        st.push(obj);
        st.push(text);
        console.log(st);
        st.hover(function () {
            console.log(this.id);
            this[0].animate({ fill: '#204250' }, 300);
            this[0].g = this.glow({ color: "#0e2e3b", width: 12 });
        }, function () {
            this[0].animate({ fill: attributes.fill }, 300);
            this[0].g.remove();
        }).click(function (e) {
4

1 に答える 1

0

this[0]raphael セット内で使用すると、実際には DOM 要素を参照しますが、これはラファエル オブジェクトではないため、animate メソッドがありません。

.hoverRaphael セットに適用すると、実際にはセットの要素を反復処理し、セット内のすべての要素に同じイベントを適用するため、これは回避策であると思います。

これを回避するにはいくつかの方法があります。投稿したコードと同じくらい単純な場合は、これで十分かもしれません。

var st = r.set();
        st.push(obj);
        st.push(text);
        console.log(st);
        st.hover(function () {
            var element = (this.type === "text") ? this.prev : this
            element.animate({ fill: '#204250' }, 300);
            element.g = element.glow({ color: "#0e2e3b", width: 12 });
        }, function () {
            var element = (this.type === "text") ? this.prev : this
            element.animate({ fill: attributes.fill }, 300);
            element.g.remove();
        });​
于 2012-07-03T02:15:26.307 に答える