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

我试图创建类似于体育场内相机闪光灯的效果。所以我使用Tween来改变图像的alpha值。预计每个闪光灯将在500毫秒内弹出并消失。当我在setInterval函数外部使用Tween时，它工作得很好。但是当我在里面使用它时，效果是看不到的。图像只是弹出并消失。我能做些什么来获得理想的效果？这是我的代码。在setInterval中使用Tweenjs可以在每次图像属性发生变化时产生效果

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);

来源

2017-06-22 Vishnu Paspunoor

是否要更新比你的时间间隔等的阶段？如果没有，那么在补间期间它不会画，只是第二。你应该定期更新舞台。 – Lanny

您可以在所有这里做到这同样不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>

来源

2017-07-19 23:22:45 gMirian

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

回答

相关问题