Question

我正在使用Snap.svg点击动画的基本代码。它看起来像这样：

var s = Snap(500, 500);

var circle = s.rect(100,100,100,100);

circle.click(function(){
  var width = circle.attr('width');
  var height = circle.attr('height');

  circle.animate({
    width: width/2,
    height :height/2
  }, 2000);


});

我在容器的左上角制作一个矩形，并在点击时为其设置宽度动画。然而，然而，我想在第二次点击时做一些不同的事情，例如将其恢复到原始状态。

我也很高兴知道如何处理Javascript中的第二次点击。例如：按此按钮一次，幻灯片导航将打开。点按第二次，导航就会消失。

提前致谢！

Answer 1

您可以使用event.detail属性执行此操作。在你的情况下，那将是：

circle.click(function(e) {
  var width = circle.attr('width');
  var height = circle.attr('height');
  if (e.detail == 1) {
    circle.animate({
      width: width/2,
      height :height/2
    }, 2000);
  } else if (e.detail == 2) {
    circle.animate({ //example
      width:width,
      height:height
    }, 2000);
  }
});

在那里，当用户执行双击（因此快2倍）时，将播放更改回原始大小的动画。如果你基本上想要切换元素，而不是在双击时恢复它，你可以简单地检查元素是否具有width或height样式而不是其初始width或{{1 }}：

height

当circle.click(function(e) { var width = circle.attr('width'); var height = circle.attr('height'); if (parseInt(this.style.width) == parseInt(width) || !this.style.width) { circle.animate({ width: width/2, height :height/2 }, 2000); } else { circle.animate({ //example width:width, height:height }, 2000); } });属性等于if()样式，或者width样式为空/未定义时，width将返回true。

Answer 2

您希望存储点击的状态。

有很多不同的方法可以解决这个问题，但我会选择两种：

创建一个计数器变量（比如counter）并在每次click处理程序运行时递增它。然后，每次，决定做什么，看看数字是偶数还是奇数：

var counter = 0;
circle.click(function(){
  if(counter % 2 == 0){
    //action1
  }else{
    //action2
  }
  counter++;
});

或者，您可以使用每次更改的布尔值来跟踪要执行的操作。

var flag = true;
circle.click(function(){
  if(flag){
    //action1
    flag = false;
  }else{
    //action2
    flag = true;
  }
});

使用Snap.svg在第二次单击时执行某些操作

2 个答案: