Question

我在raphael中制作动画形状时遇到了很大的问题。第一种方法是分别保持形状和文字，但我面临问题，然后我悬停文字，形状不是动画（它应该），然后，我创建了具有形状和文本的集合。不是我可以从一个对象访问路径，但我不能动画它（我想仅动画形状，排除文本，但然后我悬停文本，形状应该是动画）。我怎么能解决这个问题？谢谢！

    this[0].animate is not a function

[打破此错误]

this [0] .animate（{fill：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) {

Answer 1

当你在raphael集中使用this[0]时，它实际上会引用DOM元素，它没有animate方法，因为它不是raphael对象。

我认为这是一种解决方法，因为将.hover应用于Raphael集它将实际迭代集合的元素并将相同的事件应用于集合中的所有元素。

有几种方法可以解决这个问题，如果您的代码非常简单，那么这可能就足够了：

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();
        });

仅设置路径/形状的动画，而不设置raphael.js中的文本

1 个答案: