How can I animate the position of an svg polygon point using velocityjs?

animation svg css-animations velocity.js

200 观看

1回复

1700 作者的声誉

I have an svg that looks like this:

<svg id="baseSplashGradient" width="720px" height="1024px" viewBox="0 0 720 1024" version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <linearGradient x1="41.1044918%" y1="0%" x2="50%" y2="101.663162%" id="linearGradient-1">
                <stop stop-color="#56CCF2" offset="0%"></stop>
                <stop stop-color="#2F80ED" offset="100%"></stop>
            </linearGradient>
        </defs>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <polygon id="left-background" fill="url(#linearGradient-1)"
                     points="0 0 439.837891 0 720 1024 0 1024"></polygon>
    </g>
</svg>

It makes kind of a triangle-ish shape. I am trying to figure out how to animate the points array:

points="0 0 439.837891 0 720 1024 0 1024

to look like this:

points="0 0 720 0 720 1024 0 1024"

In essence, making the shape be a rectangle. Using something like translateX, I'm not sure how to talk to the actual points.

I can move the entire svg:

var svg = $('#baseSplashGradient'),
    polygon = svg.find('polygon'),
    points = polygon.attr('points'),
    pointsArray = points.split(' ');

if (polygon.data('animating') === true) {
    //
} else {
    polygon.velocity({
        translateX: '200px'
    }, {
        duration: 500
    });
}

But that isn't what I'm trying to accomplish. Any suggestions would be greatly appreciated!

作者: Damon 的来源 发布者: 2017 年 12 月 27 日

回应 1


1

2241 作者的声誉

决定

Currently you'd need to use a progress callback, and change the property manually. When Velocity v2 gets released you should be able to animate it directly as a property (disclaimer: I'm the lead developer for v2).

polygon.velocity({
   tween: ["0 0 439.837891 0 720 1024 0 1024", "0 0 720 0 720 1024 0 1024"]
}, {
   duration: 500,
   progress: function(elements, complete, remaining, start, tweenValue) {
      elements[0].setAttribute("points", tweenValue);
   }
});

When Velocity v2 (currently the develop branch) is released, you'll be able to do it slightly more easily:

polygon.velocity({
   points: ["0 0 439.837891 0 720 1024 0 1024", "0 0 720 0 720 1024 0 1024"]
}, {
   duration: 500
});
作者: Rycochet 发布者: 2018 年 1 月 10 日
32x32