Question

我想动画渐变为“向右移动”，为了做到这一点，我必须为stop元素的offset属性设置动画，但是现在我只是成功设置了stop-color属性。

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

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

Answer 1

正在寻找同样的东西，偶然发现了这支笔： 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值移动整个渐变是一个选项，它做了我想要的

如何使用Velocity.js为渐变偏移设置动画

1 个答案: