我正在尝试将“ ActionScript 3.0：游戏编程大学”中的效果转换为HTML5 Canvas渲染，更具体地说是Create / EaselJS。
这是我正在处理的代码：
private var flipStep:uint;
private var isFlipping:Boolean = false;
private var flipToFrame:uint;
// begin the flip, remember which frame to jump to
public function startFlip(flipToWhichFrame:uint) {
isFlipping = true;
flipStep = 10;
flipToFrame = flipToWhichFrame;
this.addEventListener(Event.ENTER_FRAME, flip);
}
// take 10 steps to flip
public function flip(event:Event) {
flipStep--; // next step
if (flipStep > 5) { // first half of flip
this.scaleX = .20*(flipStep-6);
} else { // second half of flip
this.scaleX = .20*(5-flipStep);
}
// when it is the middle of the flip, go to new frame
if (flipStep == 5) {
gotoAndStop(flipToFrame);
}
// at the end of the flip, stop the animation
if (flipStep == 0) {
this.removeEventListener(Event.ENTER_FRAME, flip);
}
}
在意识到这一点之前，我已经走了一半，大约需要逐步推动每一帧才能正确设置动画。这是HTML5中我的JS等效项：
function FlipTile(e)
{
if (!TileFlipping)
{
var flipStep = 30;
var sprite = e.currentTarget;
console.log(sprite);
TileFlipping = true;
flipStep--;
if (flipStep > 15)
{
sprite.scaleX = .02 * (flipStep-6);
} else {
sprite.scaleX = .02 * (5 - flipStep);
}
if (flipStep == 0)
{
TileFlipping = false;
}
}
}
这种效果就好像是一张卡片在中心翻转一样，但是如果没有逐步操作，这会破坏并严重扭曲“精灵”翻转。它也只会发射一次，打破翻转计数器。这使它寻找等效的ENTER_FRAME ..或一种替代方法。此刻，我很沮丧。
不太确定我的问题是否正确-但您应该Ticker在舞台上使用CreateJS更新内容，请在此处检查文档：http : //www.createjs.com/docs/easeljs/classes/Ticker.html您可以替换为Event.ENTER_FRAME，"tick"并保持与AS3示例中的逻辑相同。
在内部，Ticker使用window.requestAnimationFrame其通常运行每秒60次（= 60帧）。https://developer.mozilla.org/zh-CN/docs/Web/API/window/requestAnimationFrame
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句