javascript - 停止一个函数并启动另一个函数

Question

我正在尝试制作一个小动画(使用 Velocity.js )，它在单击 svg 时在两个循环状态之间交替。第一个状态是水平从 scaleX(1) 到 scaleX(2.5) 回到 scaleX(1) 在 scaleY(1) ，第二个是垂直scaleY(1)到scaleY(8)回到scaleY(1)在scaleX (2.5)。单击 svg 时，动画以水平状态开始，再次单击时，刚刚处于事件状态(水平)的状态应停止，替代状态应开始(垂直)，每次单击都会更改为替代状态。理想情况下，状态变化是无缝的，因为 svg 应该在轴上缩放到正确的比例，而不是动画，而新的事件状态正在动画。

这是我想要实现的 gif，蓝点表示点击:

我当前的结果是嵌入的，我遇到的问题是只发生一个状态变化，所以我需要停止之前的动画。另一个问题是在转换中，缩放不会同时发生，即新事件状态的动画不会与在新状态下没有动画的轴的缩放同时发生。任何指向正确方向的指示都将不胜感激。

// LINKs TO VELOCITY
// https://rawgit.com/julianshapiro/velocity/master/velocity.min.js
// https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js

var Rightscale = {
    chooser: 0,
    svg: $('#right').find('svg'),

    init: function() {
        this.bindEvents();
    },
    bindEvents: function() {
        Rightscale.svg.on("click", function() {
            console.log(Rightscale.chooser)
            if(Rightscale.chooser === 0) {
                Rightscale.chooser = 1;
                Rightscale.horizontal();
            } else {
                Rightscale.chooser = 0;
                Rightscale.vertical();
            }
        })
    },
    
    horizontal: function() {
        Rightscale.svg.velocity({
            scaleX: 2.5,
            scaleY: 1
        }, {
            duration: 3000,
            loop: true, 
            easing: "linear"
        })
    },

    vertical: function() {
        Rightscale.svg.velocity({
            scaleY: 8,
            scaleX: 2.5
        }, {
            duration: 3000,
            loop: true,
            easing: "linear"
        })
    },
}

$(document).ready(function() {
  Rightscale.init();
});

#right {
  width: 100vw;
  height: 100vh;
  background-color: blue;
  display: flex;
  justify-content: center;
  align-items: center;
}
.scale {
  width: 40%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<script src="https://rawgit.com/julianshapiro/velocity/master/velocity.min.js"></script>
<div id="right">
  <div class="scale">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 392 132" style="enable-background:new 0 0 392 132;" xml:space="preserve">
    <g>
      <path d="M76.1,26.4v100.7H44.5V26.2H20.2V3.6h80v22.8H76.1z"/>
      <path d="M113,127.1V3.6h69.5v22.6H145v27.3h32.4v22.6h-32.2v28.2h38.4v22.8H113z"/>
      <path d="M235.6,129.3c-26.7,0-40.7-11.9-40.7-34.6c0-4.5,0.2-6.6,1.1-11.5h26.4l-0.2,2.6c-0.2,2.3-0.2,4.5-0.2,6.6
        c0,10.7,4.7,16.4,13.7,16.4c8.1,0,12.8-5.1,12.8-13.7c0-7.5-3.6-13-9.8-15.6l-12.4-4.9C204.5,65.9,197,56.3,197,37.7
        C197,13.4,210.9,1,238.6,1c24.5,0,36.7,10,36.7,29.9c0,4.3-0.4,6.4-1.3,11.9h-26.5c0.6-4.5,0.8-6.2,0.8-8.8
        c0-8.5-3.6-12.8-10.2-12.8c-6.4,0-10.9,4.9-10.9,11.9c0,7.2,3.6,10.9,14.7,15.4l15.8,6.2c15.8,6.4,23.7,18.1,23.7,35.4
        C281.3,115.4,265.1,129.3,235.6,129.3z"/>
      <path d="M345.5,26.4v100.7h-31.6V26.2h-24.3V3.6h80v22.8H345.5z"/>
    </g>
    </svg>
  </div>
</div>

Answer 1

我不确定这是否是您想要的效果。但是我在你的点击处理程序中添加了一行来停止当前的动画。

// LINKs TO VELOCITY
// https://rawgit.com/julianshapiro/velocity/master/velocity.min.js
// https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js

var Rightscale = {
    chooser: 0,
    svg: $('#right').find('svg'),

    init: function() {
        this.bindEvents();
    },
    bindEvents: function() {
        Rightscale.svg.on("click", function() {
            Rightscale.svg.velocity("stop", true);
            console.log(Rightscale.chooser)
            if(Rightscale.chooser === 0) {
                Rightscale.chooser = 1;
                Rightscale.horizontal();
            } else {
                Rightscale.chooser = 0;
                Rightscale.vertical();
            }
        })
    },
    
    horizontal: function() {
        Rightscale.svg.velocity({
            scaleX: 2.5,
            scaleY: 1
        }, {
            duration: 3000,
            loop: true, 
            easing: "linear"
        })
    },

    vertical: function() {
        Rightscale.svg.velocity({
            scaleY: 8,
            scaleX: 2.5
        }, {
            duration: 3000,
            loop: true,
            easing: "linear"
        })
    },
}

$(document).ready(function() {
  Rightscale.init();
});

#right {
  width: 100vw;
  height: 100vh;
  background-color: blue;
  display: flex;
  justify-content: center;
  align-items: center;
}
.scale {
  width: 40%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<script src="https://rawgit.com/julianshapiro/velocity/master/velocity.min.js"></script>
<div id="right">
  <div class="scale">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 392 132" style="enable-background:new 0 0 392 132;" xml:space="preserve">
    <g>
      <path d="M76.1,26.4v100.7H44.5V26.2H20.2V3.6h80v22.8H76.1z"/>
      <path d="M113,127.1V3.6h69.5v22.6H145v27.3h32.4v22.6h-32.2v28.2h38.4v22.8H113z"/>
      <path d="M235.6,129.3c-26.7,0-40.7-11.9-40.7-34.6c0-4.5,0.2-6.6,1.1-11.5h26.4l-0.2,2.6c-0.2,2.3-0.2,4.5-0.2,6.6
        c0,10.7,4.7,16.4,13.7,16.4c8.1,0,12.8-5.1,12.8-13.7c0-7.5-3.6-13-9.8-15.6l-12.4-4.9C204.5,65.9,197,56.3,197,37.7
        C197,13.4,210.9,1,238.6,1c24.5,0,36.7,10,36.7,29.9c0,4.3-0.4,6.4-1.3,11.9h-26.5c0.6-4.5,0.8-6.2,0.8-8.8
        c0-8.5-3.6-12.8-10.2-12.8c-6.4,0-10.9,4.9-10.9,11.9c0,7.2,3.6,10.9,14.7,15.4l15.8,6.2c15.8,6.4,23.7,18.1,23.7,35.4
        C281.3,115.4,265.1,129.3,235.6,129.3z"/>
      <path d="M345.5,26.4v100.7h-31.6V26.2h-24.3V3.6h80v22.8H345.5z"/>
    </g>
    </svg>
  </div>
</div>