Question

所以我有两个SVG箭头的代码点击时（通过Snap.svg）斜视，我希望其中一个沿y轴在一个循环中上下移动，使它看起来像＆＃39;在另一个人活跃时点击（点击）。

Snap documentation有一些关于翻译矩阵的内容，但没有任何关于它们动画的内容。我假设使用Snap（某种方式或其他方式）可以实现这一点，那么它是如何完成的？

＆＃13;

var suspend = true;

Array.prototype.slice.call(document.querySelectorAll('.arrow_button')).forEach(function(el) {

  var s = Snap(el.querySelector('svg')),
    path = s.select('path'),
    squint = el.getAttribute('data-path-squint'),
    resetPath = path.attr('d'),
    callback = function() {
      path.animate({
        'path': resetPath
      }, 1300, mina.elastic);
      setTimeout(function() {
        suspend = true;
      }, 150)
    };

  el.addEventListener('click', function() {
    if (suspend) {
      path.animate({
        'path': squint
      }, 100, mina.linear, callback);
      suspend = false;
    };

  });

});

＆＃13;

.arrow_button {
  width: 55px;
  height: 79.8px;
  position: fixed;
  top: 50%;
  margin-top: -40.5px;
  cursor: pointer;
}
.arrow_styles {
  fill: none;
  stroke: #000;
  stroke-width: 10;
  stroke-linecap: round;
}
.left {
  left: 7px;
}
.right {
  right: 7px;
}

＆＃13;

<script src="https://cdn.jsdelivr.net/snap.svg/0.4.1/snap.svg-min.js"></script>
<div class="left arrow_button" onclick="" preserveAspectRatio="none" data-path-squint="M46.2,16.1L14,35.5C8.4,40,8.6,47,14,51.1l32.2,19.6">
  <svg id="left_arrow" class="arrow_styles" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 86.8">
    <path d="M43.7,8.1L20.2,33.2c-5.1,5.5-5.1,14.6,0,20.1l23.5,25.3" />
  </svg>
</div>
<div class="right arrow_button" onclick="" preserveAspectRatio="none" data-path-squint="M9.9,16.1l32.2,19.4c5.6,4.5,5.5,11.5,0,15.5L9.9,70.6">
  <svg id="right_arrow" class="arrow_styles" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 86.8">
    <path d="M16.3,8.1l23.5,25.1c5.1,5.5,5.1,14.6,0,20.1L16.3,78.6" />
  </svg>
</div>

＆＃13;

在snap.svg中为Matrix.translate（x，y）设置动画

0 个答案: