Question

启动动画有延迟，是javascript代码还是snap.svg的问题？

＆＃13;

var paper = Snap('#mine');
var strokeHand = paper.path("M116.98 99.756c-4.347 0-6.336 3.407-6.613 5.696l-.022.178v.18l-.12 15.69c-2.794-2.294-4.58-2.86-5.046-2.977l-.19-.047-.193-.024a9.385 9.385 0 0 0-1.142-.073c-2.75 0-4.124 1.406-4.698 2.246-1.676 2.444-.625 5.526-.398 6.12l.11.284.16.26 12.998 20.815c5.61 9.182 14.307 9.895 16.84 9.895.563 0 .92-.032 1.018-.04l.033-.005.03-.004c8.792-1.07 13.16-5.847 15.276-9.666 2.23-4.026 2.43-7.748 2.444-8.16l.003-.058V128.286c.3-3.045-.68-4.9-1.567-5.923-1.66-1.92-3.857-2.072-4.28-2.084l-.078-.003-.077.002c-1.01.02-1.864.216-2.576.5-.522-2.457-2.468-4.685-5.658-4.685-1.012 0-1.9.22-2.656.6-1.193-1.646-3.092-2.442-4.758-2.492a7.51 7.51 0 0 0-.593-.024 6.76 6.76 0 0 0-2.012.293v-8.142c.004-.547-.088-3.012-1.88-4.83-1.122-1.14-2.63-1.744-4.36-1.744").attr({fill: "#E6E6E6"});
var handFill = paper.path("M116.98 102.927c3.12 0 3.074 3.39 3.074 3.39v21.536h2.11v-8.456s.687-2.047 3.065-2.047c.136 0 .278.007.427.02 0 0 2.306 0 2.834 2.247v6.122h2.11v-3.7s0-2.775 2.636-2.775c2.637 0 2.637 2.862 2.637 2.862v5.726h2.11s-.44-4.316 3.558-4.404c0 0 3.296.087 2.77 4.667v11.89s-.484 13.035-14.94 14.797c0 0-.253.025-.702.025-2.25 0-9.422-.643-14.15-8.394l-13.006-20.83s-1.557-4.056 2.143-4.056c.232 0 .483.016.757.05 0 0 3.34.836 8.92 7.574l.176-23.34s.35-2.907 3.47-2.907").attr({fill: "#ffffff"});
var handShadow = paper.path("M94.447 130.662c-.397 0-.793-.148-1.1-.446A10.932 10.932 0 0 1 90 122.304c0-6.07 4.928-11.01 10.984-11.01 1.87 0 3.716.48 5.34 1.387a1.587 1.587 0 0 1 .613 2.157 1.58 1.58 0 0 1-2.152.614 7.813 7.813 0 0 0-3.8-.985c-4.313 0-7.822 3.517-7.822 7.84 0 2.142.847 4.142 2.384 5.633.627.608.644 1.612.037 2.24-.31.323-.724.484-1.137.484M126.206 105.922c-.873 0-1.582-.71-1.582-1.586 0-4.322-3.508-7.838-7.82-7.838-4.314 0-7.822 3.516-7.822 7.838 0 .876-.708 1.586-1.582 1.586-.874 0-1.582-.71-1.582-1.586 0-6.07 4.928-11.01 10.985-11.01 6.057 0 10.985 4.94 10.985 11.01 0 .876-.708 1.586-1.582 1.586").attr({fill: "#E6E6E6"});
var hand = paper.g(strokeHand, handFill, handShadow);
var moveme = [
  {transform: 't0,-80'},
  {transform: 't0,0'},
  
  {transform: 't80,-80'},
  {transform: 't80, 0'},
  
  {transform: 't0,-80'},
  {transform: 't0,0'},
  
  {transform: 't-80,-80'},
  {transform: 't-80,0'},
  
  {transform: 't0,-80'},
  // {transform: 't0,0'}
];
(function animateHand(el, i) {
    el.animate(moveme[i], 1000, function() {
        animateHand(el, ++i in moveme ? i : 0);
    })
})(hand, 0);

＆＃13;

<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
<svg id="mine"></svg>

＆＃13;

Answer 1

var paper = Snap('#mine');
var strokeHand = paper.path("M116.98 99.756c-4.347 0-6.336 3.407-6.613 5.696l-.022.178v.18l-.12 15.69c-2.794-2.294-4.58-2.86-5.046-2.977l-.19-.047-.193-.024a9.385 9.385 0 0 0-1.142-.073c-2.75 0-4.124 1.406-4.698 2.246-1.676 2.444-.625 5.526-.398 6.12l.11.284.16.26 12.998 20.815c5.61 9.182 14.307 9.895 16.84 9.895.563 0 .92-.032 1.018-.04l.033-.005.03-.004c8.792-1.07 13.16-5.847 15.276-9.666 2.23-4.026 2.43-7.748 2.444-8.16l.003-.058V128.286c.3-3.045-.68-4.9-1.567-5.923-1.66-1.92-3.857-2.072-4.28-2.084l-.078-.003-.077.002c-1.01.02-1.864.216-2.576.5-.522-2.457-2.468-4.685-5.658-4.685-1.012 0-1.9.22-2.656.6-1.193-1.646-3.092-2.442-4.758-2.492a7.51 7.51 0 0 0-.593-.024 6.76 6.76 0 0 0-2.012.293v-8.142c.004-.547-.088-3.012-1.88-4.83-1.122-1.14-2.63-1.744-4.36-1.744").attr({fill: "#E6E6E6"});
var handFill = paper.path("M116.98 102.927c3.12 0 3.074 3.39 3.074 3.39v21.536h2.11v-8.456s.687-2.047 3.065-2.047c.136 0 .278.007.427.02 0 0 2.306 0 2.834 2.247v6.122h2.11v-3.7s0-2.775 2.636-2.775c2.637 0 2.637 2.862 2.637 2.862v5.726h2.11s-.44-4.316 3.558-4.404c0 0 3.296.087 2.77 4.667v11.89s-.484 13.035-14.94 14.797c0 0-.253.025-.702.025-2.25 0-9.422-.643-14.15-8.394l-13.006-20.83s-1.557-4.056 2.143-4.056c.232 0 .483.016.757.05 0 0 3.34.836 8.92 7.574l.176-23.34s.35-2.907 3.47-2.907").attr({fill: "#ffffff"});
var handShadow = paper.path("M94.447 130.662c-.397 0-.793-.148-1.1-.446A10.932 10.932 0 0 1 90 122.304c0-6.07 4.928-11.01 10.984-11.01 1.87 0 3.716.48 5.34 1.387a1.587 1.587 0 0 1 .613 2.157 1.58 1.58 0 0 1-2.152.614 7.813 7.813 0 0 0-3.8-.985c-4.313 0-7.822 3.517-7.822 7.84 0 2.142.847 4.142 2.384 5.633.627.608.644 1.612.037 2.24-.31.323-.724.484-1.137.484M126.206 105.922c-.873 0-1.582-.71-1.582-1.586 0-4.322-3.508-7.838-7.82-7.838-4.314 0-7.822 3.516-7.822 7.838 0 .876-.708 1.586-1.582 1.586-.874 0-1.582-.71-1.582-1.586 0-6.07 4.928-11.01 10.985-11.01 6.057 0 10.985 4.94 10.985 11.01 0 .876-.708 1.586-1.582 1.586").attr({fill: "#E6E6E6"});
var hand = paper.g(strokeHand, handFill, handShadow);
var moveme = [
  {transform: 't0,-80'},
  {transform: 't0,0'},
  
  {transform: 't80,-80'},
  {transform: 't80, 0'},
  
  {transform: 't0,-80'},
  {transform: 't0,0'},
  
  {transform: 't-80,-80'},
  {transform: 't-80,0'},
  
  {transform: 't0,-80'},
  {transform: 't0,0'}
];
(function animateHand(el, i) {
    el.animate(moveme[i], 1000, function() {
        animateHand(el, ++i in moveme ? i : 0);
    })
})(hand, 0);

<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
<svg id="mine"></svg>

如何避免动画重复的延迟？

1 个答案: