1

我想为渐变设置动画以“向右移动”，为此我必须为停止元素的偏移属性设置动画，但现在我只是成功地为停止颜色属性设置动画。

<linearGradient id="gr-simple" x1="0" y1="0" x2="100%" y2="0%">
<stop id = "first"  stop-color="lightblue" offset="10%"/>
<stop id = "second" stop-color="red" offset="90%"/>
</linearGradient>

作品：

$("#first")
        .delay(1500)
        .velocity({stopColor: "#FF4E50" },{duration:1500});

不工作：

$("#first")
        .delay(1500)
        .velocity({offset: "50%"},{duration:1500});

非常感谢我能得到的任何帮助。谢谢

4

1 回答 1

0

正在寻找同样的东西并偶然发现了这支笔： http ://codepen.io/jorgeatgu/pen/niubs?editors=101

诀窍似乎是使用 x1、x2、y1 和 y2 值：

            <linearGradient id="background" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop id="one" offset="0%" stop-color="crimson"/>
            <stop id="two" offset="100%" stop-color="cyan"/>
        </linearGradient>

在你的 js 中：

$("#background")
        .delay(500)
        .velocity({x2: "100%", y2: "0%" },{duration:1500, easing: "linear"})

我还不知道这些属性，但你应该能够找到一些文档！

PS：一定要为 上的颜色<stop>和上的偏移设置动画<linearGradient>

希望这可以帮助 ！（即使我可能为时已晚）

洛伊克

编辑 ：

实际上我认为动画偏移应该可以工作，但它没有，所以我想使用 x1/x2/y1/y2 值移动整个渐变是一种选择，它做了我想要的

于 2015-06-22T17:37:00.447 回答