7

所以我正在使用 gRaphael 创建一些图表。这是创建一个很酷的条形图线，其中有一些点。这些点具有 ... 节点，其属性为 x=10 y=20。例子

矩形 x="135.8" y="115.8" width="8.399999999999999" height="8.399999999999999" r="0" rx="0" ry="0" fill="#ff0000" stroke="none"

如果可能，我想使用 jquery 为这个人制作动画。问题是如果我这样做

$("rect").click(函数({
 $(this).animate({
   'x'：30
 });
});

为了给 x 坐标设置动画，我猜出于明显的原因它不起作用？？呵呵。此外，我尝试将属性 x 设置为变量并尝试对其进行动画处理，但什么也没有。任何人都可以用 gRaphael 帮助我制作动画和 svg 吗？

例如，这有效

$("rect").live('click',function(){ $(this).attr('x',100);});
它移动节点，但当然不会为其设置动画

谢谢！

4

6 回答 6

11

我正在开发使用 svgs 的项目。当我完成上述工作时，动画值从 0 变为 where-ever，即使它在动画之前有一个值。所以我改用这个（cy的初始值为150）：

$('#navlet .li1').mouseenter(function(){
    $({cy:$('#nav_dot').attr('cy')})
    .animate(
    {cy: 60},
    {duration:200,step:function(now){$('#nav_dot').attr('cy', now);}});
});
于 2013-07-24T12:26:44.353 回答
10

您绝对可以通过这样做来为属性设置动画

$("rect")
    .animate(
        { x: 100 },
        {
            duration: 1000,
            step: function(now) { $(this).attr("x", now); }
        });

您不需要将该属性保存在 CSS 中。

于 2013-04-30T17:38:18.977 回答
3

事实上，有一种方法可以为特定属性设置动画：

$("rect").each(function(){
   $(this).css("MyX",$(this).attr("x"))
   .animate({MyX:500},{step:function(v1){$(this).attr("x",v1)}})
})
于 2013-01-29T10:14:02.073 回答
2

我找到了一种使用 jQuery 调用的方法，而不会遇到当动画开始时属性被重置为 0 的问题，就像这里的其他答案一样

假设我们要为带有 id 的 img 标签元素的widthand属性设置动画。要将其从当前值设置为 300 的动画，我们可以这样做：heightimage

var animationDiv= $("<div></div>"); //we don't add this div to the DOM
var image= $("img#image");
//could use any property besides "top" and "left", but the value must be valid, that means concatenating a "px" to numerical attributes if they don't have it already (and removing them in the step callback if they do)
animationDiv.css("left", image.attr("width")); 
animationDiv.css("top", image.attr("height")); 
animationDiv.animate(
    {
        left: 300,
        top: 300
    },
    {
        duration: 2500,
        step: function(value, properties) {
            if (properties.prop == "left")
                 image.attr("width", value + "px")
            else
                 image.attr("height", value + "px")
        }
    }
)

在这种方法中，我们使用一个不在 DOM 内部的 div 并在其中设置动画值，然后我们使用 div CSS 值来为我们的元素设置动画。不是很漂亮，但可以完成工作，如果您需要停止动画，您可以调用.stop()animationDiv。

jsfiddle

于 2014-12-31T10:31:24.863 回答
0

我和@rslm 一样，正在制作 SVG 动画，需要修改 viewBox 属性。这是我的解决方案：

（注意，我使用的是 ES6，所以你可能需要重写或使用 babel 来使代码与 ES5 兼容）

let scrollTimeOut;

/**
 * Animate the viewBox property for the logo
 * @param {object} start
 * @param {object} finish
 */
let animateLogo = (start, finish) => {
    let svg = $('.logo-container svg');

    $(start).finish().animate(finish, {duration: 400, step: (newVal, item) => {
        let split = svg.attr('viewBox').split(' ');
        let width = split[2];
        let height = split[3];


        if (item.prop === 'vbw') {
            width = newVal;
        } else {
            height = newVal;
        }


        svg.attr({viewBox: `${split[0]} ${split[1]} ${width} ${height}`})
    }});
};

/**
 * Set the height of the header
 */
let setHeaderHeight = () => {
    let split = $('.logo-container svg').attr('viewBox').split(' ');
    let finish;
    let start = {vbw: +split[2], vbh: +split[3]};

    if (window.scrollY < 50) {
        finish = {vbw: 1000, vbh: 1000};
    } else {
        finish = {vbw: 1600, vbh: 300};
    }

    if (finish.vbw !== start.vbw && finish.vbh !== start.vbh) {
        // If there is something to animate
        animateLogo(start, finish)
    }
};

$(window).off('scroll.staggered').on('scroll.staggered', () => {
    // Only do something every 50ms
    window.clearTimeout(scrollTimeOut);

    scrollTimeOut = window.setTimeout(() => {
        setHeaderHeight();
    }, 50);
});

为了完整起见，我添加了该$(window).off('scroll.staggered')....部分，但您只需根据需要将其更改为调用setHeaderHeight()。

于 2020-05-25T16:30:00.747 回答
-1

您只能为具有数值的有效 CSS 属性设置动画。颜色可以通过一些插件进行动画处理。由于 'x' 不是一个有效的 CSS 属性，您将无法使用 jQuery 内置的 .anmiate() 函数对其进行动画处理。

我认为您几乎必须编写自己的动画函数来增加x每个超时传递的值。

于 2011-07-12T21:07:29.060 回答