在 setInterval 中使用 Tweenjs 以在每次图像属性更改时产生效果答案

【问题标题】：Using Tweenjs in setInterval to give an effect every time the properties of an image change在 setInterval 中使用 Tweenjs 以在每次图像属性更改时产生效果
【发布时间】：2017-11-26 04:55:38
【问题描述】：

我正在尝试创建一种类似于体育场内相机闪光灯的效果。所以我使用 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);

【问题讨论】：

您是否在更新时间间隔以外的阶段？如果不是，那么它不会在补间期间绘制，只是每秒。您应该定期更新舞台。

标签： html5-canvas createjs tween.js

【解决方案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>

【讨论】：