如何使用 velocityjs 为 svg 多边形点的位置设置动画？

Question

我有一个看起来像这样的 svg:

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

它有点像三角形。我想弄清楚如何为点数组设置动画：

points="0 0 439.837891 0 720 1024 0 1024

看起来像这样：

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

本质上就是把形状做成一个长方形。使用 translateX 之类的东西，我不确定如何与实际的 points 对话。

我可以移动整个 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
    });
}

但这不是我想要完成的。任何建议将不胜感激！

Answer 1

目前您需要使用进度回调，并手动更改属性。当 Velocity v2 发布时，您应该能够直接将其动画化为属性（免责声明：我是 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);
   }
});

当 Velocity v2（目前是 develop 分支）发布时，您将能够更轻松地完成它：

polygon.velocity({
   points: ["0 0 439.837891 0 720 1024 0 1024", "0 0 720 0 720 1024 0 1024"]
}, {
   duration: 500
});

如何使用 velocityjs 为 svg 多边形点的位置设置动画？

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

animation

svg

css-animations

velocity.js