停止功能并启动另一个功能

Question

我正在尝试制作一个小动画（使用Velocity.js），当单击svg时，它会在两个循环状态之间切换。第一个状态从scaleX(1)到scaleX(2.5)水平从scaleX(1)返回scaleY(1)，第二个状态从scaleY(1)垂直scaleY(8)返回scaleY(1) 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>