Как оживить смещение градиента с помощью Velocity.js

Question

Я хочу анимацию градиента, чтобы «переместить» вправо, и для этого мне нужно оживить свойство смещения стоп-элемента, но прямо сейчас я преуспеваю в анимации остановки, цвет свойство.

<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>

Надеются, что это помогает! (Даже если я, вероятно, слишком поздно)

Лоик

EDIT:

На самом деле я думаю, оживляющий смещение должны работать, но это не делает, так что я думаю, переместив весь градиент вокруг использования значений x1/x2/y1/y2 является вариантом, он сделал то, что я хотел