Question

我正在尝试创建类似于体育场中相机闪光灯的效果。所以我使用Tween来改变图像的alpha。预计每个闪光灯会在500毫秒内弹出并消失。当我在setInterval函数之外使用Tween时，它工作得很好。但是当我在里面使用它时，效果无法看到。图像只会弹出并消失。我该怎么做才能达到预期的效果？这是我的代码。

var flash = new createjs.Bitmap('flash.png');
flash.image.onload = function (){
    flash.image.crossOrigin = "Anonymous";
    flash.scaleX = flash.scaleY = 150/flash.image.width;
    flash.alpha = -1;
    stage.update();
}

setInterval(function (){
    flash.x = Math.floor(1281 * Math.random());
    flash.y = Math.floor(150 * Math.random() + 50);
    flash.alpha = 1;
    createjs.Tween.get(flash).to({alpha : -1}, 500);
    stage.update();
}, 1000);

Answer 1

你可以在没有setInterval的情况下做同样的事情这是代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script>
var stage;
var flash;

function init() 
{
    stage = new createjs.Stage("canvas");
    createjs.Ticker.setFPS(60);  //set some FPS
    createjs.Ticker.addEventListener("tick", stage); //set autiomatic refresh

    var image = new Image();
    image.src = "flash.png";
    image.onload = handleImageLoad;
}

function handleImageLoad(e) 
{
    var image = event.target;
    flash = new createjs.Bitmap(image);
    flash.image.crossOrigin = "Anonymous";
    flash.scaleX = flash.scaleY = 150/flash.image.width;
    flash.alpha=0;
    stage.addChild(flash);
    someAnim();     
}

function someAnim()
{
     var newX= Math.floor(1281 * Math.random());
     var newY=Math.floor(150 * Math.random());
     flash.alpha=1;
     createjs.Tween.get(flash).to({x:newX,y:newY}).to({alpha : 0}, 500).wait(1000).call(someAnim); //let's go without setInterval, but recursion

}
</script>
</head>
<body onload="init();">
    <canvas id="canvas" width="1281" height="150"></canvas>
</body>
</html>

在setInterval中使用Tweenjs可在每次图像属性发生变化时生效

1 个答案: