错开js svg动画
Stagger js svg animation
我正在使用 vivus.js 为重复多次的 svg 制作动画(作为 php 循环的一部分)。
我正在寻找一种错开动画的方法,以便 svg id 'hexx--0' 先动画,然后在完成后,svg id 'hexx--1' 动画等等。 ID 号在 php 循环中递增。
我试图将它们链接到第一个动画完成时触发的函数中,如下所示:
new Vivus('hexx--0', {
type: 'oneByOne',
duration: 100
}, function() {
new Vivus('hexx--1', {
type: 'oneByOne',
duration: 100,
});
});
这有效,但是 a) 意味着 svg 在动画触发之前是可见的并且 b) 在一个可能有任意数量的 svg 的循环中是混乱的和不可维护的。
是否可以在JavaScript中递增ID并循环生成新的Vivus?下面是一个复制问题的 fiddle,请注意,在实际情况下,html 是通过 php 循环生成的。
//all animating at same time
new Vivus('hexx--0', {
type: 'oneByOne',
duration: 100,
});
new Vivus('hexx--1', {
type: 'oneByOne',
duration: 100,
});
//attempt at staggering
new Vivus('hexx--2', {
type: 'oneByOne',
duration: 100
}, function() {
new Vivus('hexx--3', {
type: 'oneByOne',
duration: 100,
});
});
svg {
stroke: #000000;
}
<body>
<svg version="1.1" id="hexx--0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="236.275px" height="265.632px" viewBox="0 0 236.275 265.632" enable-background="new 0 0 236.275 265.632" xml:space="preserve">
<g>
<path fill="none" stroke-miterlimit="10" d="M118.046,1.007c-3.865,0-7.692,1.056-11.377,3.167
C73.449,23.21,40.564,42.238,12.778,58.341c-7.8,4.52-11.758,11.436-11.763,20.553c-0.019,35.954-0.021,71.906,0.002,107.86
c0.006,9.091,3.974,15.999,11.798,20.531c33.368,19.336,64.021,37.025,93.71,54.08c7.575,4.354,15.698,4.335,23.328-0.054
c30.902-17.775,61.802-35.635,93.377-53.891c7.991-4.621,12.043-11.68,12.042-20.98l-0.001-38.245l0.002-30.855
c0.003-12.791,0.006-25.582-0.009-38.373c-0.012-9.109-4.005-16.067-11.868-20.68c-6.162-3.615-12.562-7.301-18.208-10.551
l-22.8-13.16c-17.397-10.045-34.793-20.09-52.204-30.108C126.174,2.161,122.089,1.007,118.046,1.007" />
</g>
</svg>
<svg version="1.1" id="hexx--1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="236.275px" height="265.632px" viewBox="0 0 236.275 265.632" enable-background="new 0 0 236.275 265.632" xml:space="preserve">
<g>
<path fill="none" stroke-miterlimit="10" d="M118.046,1.007c-3.865,0-7.692,1.056-11.377,3.167
C73.449,23.21,40.564,42.238,12.778,58.341c-7.8,4.52-11.758,11.436-11.763,20.553c-0.019,35.954-0.021,71.906,0.002,107.86
c0.006,9.091,3.974,15.999,11.798,20.531c33.368,19.336,64.021,37.025,93.71,54.08c7.575,4.354,15.698,4.335,23.328-0.054
c30.902-17.775,61.802-35.635,93.377-53.891c7.991-4.621,12.043-11.68,12.042-20.98l-0.001-38.245l0.002-30.855
c0.003-12.791,0.006-25.582-0.009-38.373c-0.012-9.109-4.005-16.067-11.868-20.68c-6.162-3.615-12.562-7.301-18.208-10.551
l-22.8-13.16c-17.397-10.045-34.793-20.09-52.204-30.108C126.174,2.161,122.089,1.007,118.046,1.007" />
</g>
</svg>
<svg version="1.1" id="hexx--2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="236.275px" height="265.632px" viewBox="0 0 236.275 265.632" enable-background="new 0 0 236.275 265.632" xml:space="preserve">
<g>
<path fill="none" stroke-miterlimit="10" d="M118.046,1.007c-3.865,0-7.692,1.056-11.377,3.167
C73.449,23.21,40.564,42.238,12.778,58.341c-7.8,4.52-11.758,11.436-11.763,20.553c-0.019,35.954-0.021,71.906,0.002,107.86
c0.006,9.091,3.974,15.999,11.798,20.531c33.368,19.336,64.021,37.025,93.71,54.08c7.575,4.354,15.698,4.335,23.328-0.054
c30.902-17.775,61.802-35.635,93.377-53.891c7.991-4.621,12.043-11.68,12.042-20.98l-0.001-38.245l0.002-30.855
c0.003-12.791,0.006-25.582-0.009-38.373c-0.012-9.109-4.005-16.067-11.868-20.68c-6.162-3.615-12.562-7.301-18.208-10.551
l-22.8-13.16c-17.397-10.045-34.793-20.09-52.204-30.108C126.174,2.161,122.089,1.007,118.046,1.007" />
</g>
</svg>
<svg version="1.1" id="hexx--3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="236.275px" height="265.632px" viewBox="0 0 236.275 265.632" enable-background="new 0 0 236.275 265.632" xml:space="preserve">
<g>
<path fill="none" stroke-miterlimit="10" d="M118.046,1.007c-3.865,0-7.692,1.056-11.377,3.167
C73.449,23.21,40.564,42.238,12.778,58.341c-7.8,4.52-11.758,11.436-11.763,20.553c-0.019,35.954-0.021,71.906,0.002,107.86
c0.006,9.091,3.974,15.999,11.798,20.531c33.368,19.336,64.021,37.025,93.71,54.08c7.575,4.354,15.698,4.335,23.328-0.054
c30.902-17.775,61.802-35.635,93.377-53.891c7.991-4.621,12.043-11.68,12.042-20.98l-0.001-38.245l0.002-30.855
c0.003-12.791,0.006-25.582-0.009-38.373c-0.012-9.109-4.005-16.067-11.868-20.68c-6.162-3.615-12.562-7.301-18.208-10.551
l-22.8-13.16c-17.397-10.045-34.793-20.09-52.204-30.108C126.174,2.161,122.089,1.007,118.046,1.007" />
</g>
</svg>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.3.1/vivus.js"></script>
我终于想通了,为我的麻烦获得了一个风滚草徽章。
第 1 步: 在 JavaScript 中,使用 for 循环递增 ID:
//increment the ids
var i;
for (i = 0; i < 7; i++) {
new Vivus('hexx--' + i, {
type: 'scenario-sync'
});
}
我将类型更改为 'scenario-sync',这意味着您可以使用 html 数据属性设置持续时间和延迟。
第 2 步: 在 PHP 我将数据属性添加到路径中,如下所示:
path data-delay="<?php echo $delay ?>" data-duration="<?php echo $duration ?>"
并相应地增加 php 循环中的值。
我正在使用 vivus.js 为重复多次的 svg 制作动画(作为 php 循环的一部分)。
我正在寻找一种错开动画的方法,以便 svg id 'hexx--0' 先动画,然后在完成后,svg id 'hexx--1' 动画等等。 ID 号在 php 循环中递增。
我试图将它们链接到第一个动画完成时触发的函数中,如下所示:
new Vivus('hexx--0', {
type: 'oneByOne',
duration: 100
}, function() {
new Vivus('hexx--1', {
type: 'oneByOne',
duration: 100,
});
});
这有效,但是 a) 意味着 svg 在动画触发之前是可见的并且 b) 在一个可能有任意数量的 svg 的循环中是混乱的和不可维护的。
是否可以在JavaScript中递增ID并循环生成新的Vivus?下面是一个复制问题的 fiddle,请注意,在实际情况下,html 是通过 php 循环生成的。
//all animating at same time
new Vivus('hexx--0', {
type: 'oneByOne',
duration: 100,
});
new Vivus('hexx--1', {
type: 'oneByOne',
duration: 100,
});
//attempt at staggering
new Vivus('hexx--2', {
type: 'oneByOne',
duration: 100
}, function() {
new Vivus('hexx--3', {
type: 'oneByOne',
duration: 100,
});
});
svg {
stroke: #000000;
}
<body>
<svg version="1.1" id="hexx--0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="236.275px" height="265.632px" viewBox="0 0 236.275 265.632" enable-background="new 0 0 236.275 265.632" xml:space="preserve">
<g>
<path fill="none" stroke-miterlimit="10" d="M118.046,1.007c-3.865,0-7.692,1.056-11.377,3.167
C73.449,23.21,40.564,42.238,12.778,58.341c-7.8,4.52-11.758,11.436-11.763,20.553c-0.019,35.954-0.021,71.906,0.002,107.86
c0.006,9.091,3.974,15.999,11.798,20.531c33.368,19.336,64.021,37.025,93.71,54.08c7.575,4.354,15.698,4.335,23.328-0.054
c30.902-17.775,61.802-35.635,93.377-53.891c7.991-4.621,12.043-11.68,12.042-20.98l-0.001-38.245l0.002-30.855
c0.003-12.791,0.006-25.582-0.009-38.373c-0.012-9.109-4.005-16.067-11.868-20.68c-6.162-3.615-12.562-7.301-18.208-10.551
l-22.8-13.16c-17.397-10.045-34.793-20.09-52.204-30.108C126.174,2.161,122.089,1.007,118.046,1.007" />
</g>
</svg>
<svg version="1.1" id="hexx--1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="236.275px" height="265.632px" viewBox="0 0 236.275 265.632" enable-background="new 0 0 236.275 265.632" xml:space="preserve">
<g>
<path fill="none" stroke-miterlimit="10" d="M118.046,1.007c-3.865,0-7.692,1.056-11.377,3.167
C73.449,23.21,40.564,42.238,12.778,58.341c-7.8,4.52-11.758,11.436-11.763,20.553c-0.019,35.954-0.021,71.906,0.002,107.86
c0.006,9.091,3.974,15.999,11.798,20.531c33.368,19.336,64.021,37.025,93.71,54.08c7.575,4.354,15.698,4.335,23.328-0.054
c30.902-17.775,61.802-35.635,93.377-53.891c7.991-4.621,12.043-11.68,12.042-20.98l-0.001-38.245l0.002-30.855
c0.003-12.791,0.006-25.582-0.009-38.373c-0.012-9.109-4.005-16.067-11.868-20.68c-6.162-3.615-12.562-7.301-18.208-10.551
l-22.8-13.16c-17.397-10.045-34.793-20.09-52.204-30.108C126.174,2.161,122.089,1.007,118.046,1.007" />
</g>
</svg>
<svg version="1.1" id="hexx--2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="236.275px" height="265.632px" viewBox="0 0 236.275 265.632" enable-background="new 0 0 236.275 265.632" xml:space="preserve">
<g>
<path fill="none" stroke-miterlimit="10" d="M118.046,1.007c-3.865,0-7.692,1.056-11.377,3.167
C73.449,23.21,40.564,42.238,12.778,58.341c-7.8,4.52-11.758,11.436-11.763,20.553c-0.019,35.954-0.021,71.906,0.002,107.86
c0.006,9.091,3.974,15.999,11.798,20.531c33.368,19.336,64.021,37.025,93.71,54.08c7.575,4.354,15.698,4.335,23.328-0.054
c30.902-17.775,61.802-35.635,93.377-53.891c7.991-4.621,12.043-11.68,12.042-20.98l-0.001-38.245l0.002-30.855
c0.003-12.791,0.006-25.582-0.009-38.373c-0.012-9.109-4.005-16.067-11.868-20.68c-6.162-3.615-12.562-7.301-18.208-10.551
l-22.8-13.16c-17.397-10.045-34.793-20.09-52.204-30.108C126.174,2.161,122.089,1.007,118.046,1.007" />
</g>
</svg>
<svg version="1.1" id="hexx--3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="236.275px" height="265.632px" viewBox="0 0 236.275 265.632" enable-background="new 0 0 236.275 265.632" xml:space="preserve">
<g>
<path fill="none" stroke-miterlimit="10" d="M118.046,1.007c-3.865,0-7.692,1.056-11.377,3.167
C73.449,23.21,40.564,42.238,12.778,58.341c-7.8,4.52-11.758,11.436-11.763,20.553c-0.019,35.954-0.021,71.906,0.002,107.86
c0.006,9.091,3.974,15.999,11.798,20.531c33.368,19.336,64.021,37.025,93.71,54.08c7.575,4.354,15.698,4.335,23.328-0.054
c30.902-17.775,61.802-35.635,93.377-53.891c7.991-4.621,12.043-11.68,12.042-20.98l-0.001-38.245l0.002-30.855
c0.003-12.791,0.006-25.582-0.009-38.373c-0.012-9.109-4.005-16.067-11.868-20.68c-6.162-3.615-12.562-7.301-18.208-10.551
l-22.8-13.16c-17.397-10.045-34.793-20.09-52.204-30.108C126.174,2.161,122.089,1.007,118.046,1.007" />
</g>
</svg>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.3.1/vivus.js"></script>
我终于想通了,为我的麻烦获得了一个风滚草徽章。
第 1 步: 在 JavaScript 中,使用 for 循环递增 ID:
//increment the ids
var i;
for (i = 0; i < 7; i++) {
new Vivus('hexx--' + i, {
type: 'scenario-sync'
});
}
我将类型更改为 'scenario-sync',这意味着您可以使用 html 数据属性设置持续时间和延迟。
第 2 步: 在 PHP 我将数据属性添加到路径中,如下所示:
path data-delay="<?php echo $delay ?>" data-duration="<?php echo $duration ?>"
并相应地增加 php 循环中的值。