Question

mainFunc(){
 firstFunc();
 SecondFunc();
 Playball();
}


function Playball () {

var paper = new Raphael(0, 0, 800, 500);
var backGround = paper.rect(0, 0, 800, 500);

var ball = paper.circle(400, 0, 30);
ball.attr({fill: "blue"});

function step1() {
    ball.animate({cx: 400, cy: 600}, 2500);
}

step1();
};

这是我到目前为止所写的内容，我有更多需要连续执行的功能。我知道我可以使用一个简单的回调函数，但我不能让它工作，Step2永远不会执行。以下是我尝试过的内容。还有一个更好的方法，我可以在这种情况下使用，因为我有多个功能。由于我的主要功能是在点击事件上触发的，因此我无法使用SetTimeout。

function Playball (callback) {

var paper = new Raphael(0, 0, 800, 500);
var backGround = paper.rect(0, 0, 800, 500);

var ball = paper.circle(400, 0, 30);
ball.attr({fill: "blue"});

function step1() {
    ball.animate({cx: 400, cy: 600}, 2500);
}

step1();
return true;
};

Playball(step2());

Answer 1

我假设你喜欢step2在step1的动画之后开始，这样做有用吗？

function Playball (callback) {

  var paper = new Raphael(0, 0, 800, 500);
  var backGround = paper.rect(0, 0, 800, 500);

  var ball = paper.circle(400, 0, 30);
  ball.attr({fill: "blue"});
  //http://dmitrybaranovskiy.github.io/raphael/reference.html#Element.animate
  function step1() {
    ball.animate(
      {cx: 400, cy: 600}//params
      , 2500            //number of milliseconds for animation to run
      ,undefined        //easing type
      ,callback         //callback function. Will be called at the end of animation
    );
  }

  step1();
  return true;
};

Playball(step2);

可以找到一个示例小提琴here。

JavaScript，函数

1 个答案: