Question

我正在尝试在HTML5中制作打字效果。为了渲染并将它们放在一起，我正在使用这个pixi.js插件。

到目前为止，我已经能够使其工作（部分），尽管似乎负责更新update()对象内的文本的PIXI.TEXT方法不愿意停止动画间隔。

请参阅下文。

RPGtext.js

define(['pixi', 'jquery'], function (PIXI, $){
    var RPGText = (function(text, style,  pos) 
    {
        var self = this; 
        var default_style =  {
            font : 'bold 36px Arial',
            fill : '#FFF',
            stroke : '#4a1850',
            strokeThickness : 5,
            dropShadow : true,
            dropShadowColor : '#000000',
            dropShadowAngle : Math.PI / 6,
            dropShadowDistance : 6,
            wordWrap : true,
            wordWrapWidth : 440
        };

        var config = {
            update_interval : 30 //// Miliseconds ////
        };

        self.cur_pos = 1;

        var _construct = function(){
            var font_style = $.extend({}, default_style, style);
            _init(font_style);
        };

        var _init = function(font_style){
            self.model = new PIXI.Text(text.substring(0, config.cur_pos), font_style);
            self.model.x =  pos.x;
            self.model.y = pos.y;
            update(self.cur_pos, (text.length - 1) );
        };

        var update = function (x, y) {
            if( self.cur_pos <= text.length){ //// this condition is not making it all stop for some reason /// 
                requestAnimationFrame(update);
                self.cur_pos  = (self.cur_pos + 1);
                self.model.text = text.substring(0, config.cur_pos);
            }else{
                console.log("Stopping"); /// IS nto triggered at all..///
            }
        };

        _construct();

        return self.model;
    });

    return RPGText;
});

////这就是它被初始化/使用的方式///

MsgBozx.js

....
    var text = new RPGText(msg.text, config.font.text.style, config.font.text.pos);

    msgbox.addChild(text);

...

我测试了self.cur_pos和text.length的输出（使用console.info（））。尽管更新从未停止，但两者都显示了预期的结果。

任何想法都可能在这里出错？

Answer 1

我认为我的代码中某处缺少requestAnimationFrame()或者必须存在一些存储在缓存中的东西导致了奇怪的行为。就像今天我运行代码一样，一切都运行得很好。

虽然我也改变了更新文本的方式（参见下面的jfidle示例）。

JSFiddle

麻烦停止动画

1 个答案: