Vivus 反向选择的路径
Vivus reverse selected paths
有没有办法反转绘制(实际上是擦除)在使用 Vivus for SVG 之前绘制的选定路径?
假设我们有一个像这样的 fiddle:
http://jsfiddle.net/z7x4ovn7/92/
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="keyhole" version="1.1" width="306" height="296" id="svg2">
<g transform="translate(-162.46995,-477.2863)" id="layer1">
<path d="m 314,480 l 0,100" stroke="#20552a" id="path2000" stroke-width="2" fill="none"/>
<path d="m 314.15745,481.69558 c -59.20089,0.53774 -114.80979,36.72219 -137.3125,95.34375 -29.39129,76.56693 8.83932,162.45246 85.40625,191.84375 l 34.03125,-88.6875 c -20.0678,-7.71358 -34.3125,-27.15324 -34.3125,-49.9375 0,-29.54723 23.95277,-53.5 53.5,-53.5 29.54723,0 53.5,23.95277 53.5,53.5 0,22.78426 -14.2447,42.22392 -34.3125,49.9375 l 34.03125,88.6875 c 39.29085,-15.08234 70.3239,-46.1154 85.40625,-85.40625 29.39129,-76.56693 -8.83932,-162.48371 -85.40625,-191.875 -17.94537,-6.88859 -36.40853,-10.07087 -54.53125,-9.90625 z" id="path2830" fill="#40aa54" stroke="#20552a" stroke-width="8" stroke-miterlimit="4"/>
</g>
</svg>
new Vivus('keyhole', {
type: 'oneByOne',
duration: 50
}, function doDone(obj) {
obj.el.classList.add('finished');
});
绘制完所有路径后,我想反向绘制 ID 为 path2000
的路径。你有什么想法吗?
该库有一些限制使其迂回,但如果将 SVG 分成两个内部 <svg>
标签,则可以达到效果。这使得它们可以针对不同的动画进行寻址,并且您可以向后播放其中之一:
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="keyhole" version="1.1" width="306" height="296">
<svg id="part1">
<path transform="translate(-162.46995,-477.2863)" d="m 314,480 l 0,100" stroke="#20552a" id="path2000" stroke-width="2" fill="none"/>
</svg>
<svg id="part2">
<path transform="translate(-162.46995,-477.2863)" d="m 314.15745,481.69558 c -59.20089,0.53774 -114.80979,36.72219 -137.3125,95.34375 -29.39129,76.56693 8.83932,162.45246 85.40625,191.84375 l 34.03125,-88.6875 c -20.0678,-7.71358 -34.3125,-27.15324 -34.3125,-49.9375 0,-29.54723 23.95277,-53.5 53.5,-53.5 29.54723,0 53.5,23.95277 53.5,53.5 0,22.78426 -14.2447,42.22392 -34.3125,49.9375 l 34.03125,88.6875 c 39.29085,-15.08234 70.3239,-46.1154 85.40625,-85.40625 29.39129,-76.56693 -8.83932,-162.48371 -85.40625,-191.875 -17.94537,-6.88859 -36.40853,-10.07087 -54.53125,-9.90625 z" id="path2830" fill="#40aa54" stroke="#20552a" stroke-width="8" stroke-miterlimit="4"/>
</svg>
</svg>
// started immediately
var inner = new Vivus('part1', {
duration: 20
}, function () {
// start outer animation after inner has been drawn
outer.play(1);
});
// started later
var outer = new Vivus('part2', {
duration: 50,
start: 'manual'
}, function (obj) {
obj.el.classList.add('finished');
// reverse inner animation after outer has been drawn
inner.play(-1);
});
有没有办法反转绘制(实际上是擦除)在使用 Vivus for SVG 之前绘制的选定路径? 假设我们有一个像这样的 fiddle: http://jsfiddle.net/z7x4ovn7/92/
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="keyhole" version="1.1" width="306" height="296" id="svg2">
<g transform="translate(-162.46995,-477.2863)" id="layer1">
<path d="m 314,480 l 0,100" stroke="#20552a" id="path2000" stroke-width="2" fill="none"/>
<path d="m 314.15745,481.69558 c -59.20089,0.53774 -114.80979,36.72219 -137.3125,95.34375 -29.39129,76.56693 8.83932,162.45246 85.40625,191.84375 l 34.03125,-88.6875 c -20.0678,-7.71358 -34.3125,-27.15324 -34.3125,-49.9375 0,-29.54723 23.95277,-53.5 53.5,-53.5 29.54723,0 53.5,23.95277 53.5,53.5 0,22.78426 -14.2447,42.22392 -34.3125,49.9375 l 34.03125,88.6875 c 39.29085,-15.08234 70.3239,-46.1154 85.40625,-85.40625 29.39129,-76.56693 -8.83932,-162.48371 -85.40625,-191.875 -17.94537,-6.88859 -36.40853,-10.07087 -54.53125,-9.90625 z" id="path2830" fill="#40aa54" stroke="#20552a" stroke-width="8" stroke-miterlimit="4"/>
</g>
</svg>
new Vivus('keyhole', {
type: 'oneByOne',
duration: 50
}, function doDone(obj) {
obj.el.classList.add('finished');
});
绘制完所有路径后,我想反向绘制 ID 为 path2000
的路径。你有什么想法吗?
该库有一些限制使其迂回,但如果将 SVG 分成两个内部 <svg>
标签,则可以达到效果。这使得它们可以针对不同的动画进行寻址,并且您可以向后播放其中之一:
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="keyhole" version="1.1" width="306" height="296">
<svg id="part1">
<path transform="translate(-162.46995,-477.2863)" d="m 314,480 l 0,100" stroke="#20552a" id="path2000" stroke-width="2" fill="none"/>
</svg>
<svg id="part2">
<path transform="translate(-162.46995,-477.2863)" d="m 314.15745,481.69558 c -59.20089,0.53774 -114.80979,36.72219 -137.3125,95.34375 -29.39129,76.56693 8.83932,162.45246 85.40625,191.84375 l 34.03125,-88.6875 c -20.0678,-7.71358 -34.3125,-27.15324 -34.3125,-49.9375 0,-29.54723 23.95277,-53.5 53.5,-53.5 29.54723,0 53.5,23.95277 53.5,53.5 0,22.78426 -14.2447,42.22392 -34.3125,49.9375 l 34.03125,88.6875 c 39.29085,-15.08234 70.3239,-46.1154 85.40625,-85.40625 29.39129,-76.56693 -8.83932,-162.48371 -85.40625,-191.875 -17.94537,-6.88859 -36.40853,-10.07087 -54.53125,-9.90625 z" id="path2830" fill="#40aa54" stroke="#20552a" stroke-width="8" stroke-miterlimit="4"/>
</svg>
</svg>
// started immediately
var inner = new Vivus('part1', {
duration: 20
}, function () {
// start outer animation after inner has been drawn
outer.play(1);
});
// started later
var outer = new Vivus('part2', {
duration: 50,
start: 'manual'
}, function (obj) {
obj.el.classList.add('finished');
// reverse inner animation after outer has been drawn
inner.play(-1);
});