Question

我正在尝试使用具有多个场景的Raphael创建详细的动画，但我遇到了一个问题;如果我想移动到另一个场景，我怎么能延迟元素的删除？在我的动画中，第一个“场景”是从一个水体中弹出的四个海豹，之后我希望它们在水下，这需要从那个场景中去除不需要的元素。但是我不确定如何在第一个场景结束时删除这些元素。我现在唯一能想到这样做的方法就是在页面上作弊和制作动画。此外，有没有办法从第一个场景将元素组合在一起，然后删除该组，而不是必须单独删除它们？这是我到目前为止所做的：

window.onload = function (){

    var paper = new Raphael( 0, 0, 800, 600);

    var backGround = paper.rect(0,0,800,600).attr({ fill: "90-white:60-#9dc8f3", stroke : "none"});

    var sun = paper.circle (400, 300, 60).attr({ fill: "90-orange-yellow", stroke : "none"})

    var water1 = paper.rect(0,200,800,400).attr({ fill: "#2e659c", stroke : "none"});

    var seal1 = paper.image("sealright.png", 190, 270, 140, 175);

    var water2 = paper.rect(0,280,800,400).attr({ fill: "#2e659c", stroke : "none"});

    var seal2 = paper.image("sealleft.png", 430, 350, 180, 225);

    var water3 = paper.rect(0,360,800,400).attr({ fill: "#2e659c", stroke : "none"});

    var seal3 = paper.image("sealright.png", 70, 430, 220, 275);

    var water4 = paper.rect(0,440,800,400).attr({ fill: "#2e659c", stroke : "none"});

    var seal4 = paper.image("shadeseal.png", 460, 510, 260, 327);

    var water5 = paper.rect(0,520,800,400).attr({ fill: "#2e659c", stroke : "none"});

    var iceright = paper.image("icerights.png", 584, 198, 276, 246.5);

    var iceleft = paper.image("icelefts.png", -60, 198, 276, 246.5);

    var opac = paper.rect(0,0,800,600).attr({ fill: "white", "fill-opacity": "0.4",stroke : "none"});

    var playButton = paper.path("M 300 180 R 500 300 300 420 z");

playButton.attr({fill: '#eff', stroke: '#9df', 'stroke-width': 10});

playButton.hover(function () {
    playButton.attr({"stroke": "#fff"});
  },
  function () {
    playButton.attr({"stroke": "#9df"});
  }
);

var sunanim = Raphael.animation({cy : 100, opacity: "0.4"}, 1000, "elastic");

var sealanim = Raphael.animation({y : 170}, 300, "backOut");

var sealanim2 = Raphael.animation({y : 210}, 300, "backOut");

var sealanim3 = Raphael.animation({y : 260}, 300, "backOut");

var sealanim4 = Raphael.animation({y : 310}, 300, "backOut");


var backgroundchange1 = Raphael.animation({ fill: "90-#0d0e46-#0b94da"}, 0);


function musicStart(){
    opac.remove();

    var clickSound = new Audio('Funk-tabulous.mp3');

    clickSound.play();
};

function musicStart(){
    opac.remove();

    var clickSound = new Audio('Funk-tabulous.mp3');

    clickSound.play();
};

function anim(){
    sun.animate(sunanim.delay(1000))

    seal1.animate(sealanim.delay(2000));

    seal2.animate(sealanim2.delay(2400));

    seal3.animate(sealanim3.delay(2800));

    seal4.animate(sealanim4.delay(3200));
};

function remove(){
    sun.remove();
};

function anim2(){
    backGround.animate(backgroundchange1.delay(3800));
};

function animation(){
    playButton.remove();

    musicStart();

    anim();

    anim2();
};

playButton.click(function(){
    animation();
});

};

Answer 1

你可以隐藏元素（否则你可以使用相同的原理并使函数实际删除元素，第4个animate元素是回调）。因此，这是一个组合，在另一个移动后跟一个隐藏顺序移动。在这里摆弄http://jsfiddle.net/Lmbvm/3/

var paper = new Raphael(100,0,2000,2000);
var rect = paper.rect(50,50,50,50);
var rect2 = paper.rect(100,100,100,100);
var set = paper.set();
set.push( rect, rect2 );

var animation = Raphael.animation({ x: 200 },200,"linear", animateCircle);

set.animate( animation );

var circle = paper.circle(50,50,50);
function animateCircle() {
    circle.animate({ cx : 200 }, 200, "linear", hideCircle);
};

function hideCircle() {
    set.hide();
}

编辑：我在这里更新了一个小提琴http://jsfiddle.net/Lmbvm/8/来移动一个集合

使用Raphael.js延迟删除元素

1 个答案: