html图片渲染时间太长,十几秒以后动画渲染时间变长,帧率变慢,是怎么回事?

我在一个sprite中添加了一个进度条,一个序列帧动画,一个图片,让这个sprite左右来回移动.

我的做法是启动frameLoop, 每帧移动3个像素.

结果是开始帧率在60,渲染时间保持在16, 过了大概15秒以后,渲染时间就会增加,帧率变慢,请问是什么原因导致的?

/*************************************************************************************\

* 飞行物

*************************************************************************************/

class DollGunRole extends GunRole{

public _box: GunBox;

// toset:

/** 飞行的范围, 用于计算飞行路径 */

private _fly_site:Site = new SiteEntity( 10, 10, -1, 400 );

public static _ani_cached:boolean = false;

// toset:

/** 飞行物的中心点, 参照物为魔鬼, 用于确定瞄准点和整体的中心点 */

private _pivot_demon:Point = { x: 50, y: 50 };

/** 特指血条+魔鬼的大小, 用于计算飞行物整体大小 */

private _top_area:Area = { w: -1, h: -1 };

/** 血条 */

private _blood_chart: Laya.ProgressBar;

// toset:

private _blood_area: Area = new AreaEntity( 100, 20 );

public _blood_value: number;

/** 魔鬼 */

private _demon_ani: Laya.Animation;

// toset:

private _demon_area: Area = new AreaEntity( 100, 100);

/** 靶心,参照物是魔鬼 */

private _target_ani: Laya.Animation;

// toset:

private _target_area: Area = new AreaEntity( 40, 40 );

/** 娃娃 */

private _doll_img:Laya.Image;

public _doll_area:Area = { w: -1, h: -1 };

// toset:

/** 速度 */

private _speed: number = 2;

/* 以下用于计算移动位置 */

/** 下一步位置 */

private _to_pos:Point = { x: -1, y: -1 };

/** 步数 */

private _step: number;

/** 路径起点 */

private _head_pos: Point = { x: -1, y: -1 };

/** 路径终点 */

private _tail_pos: Point = { x: -1, y: -1 };

/** 路径X轴投影间距 */

private _path_space_x: number;

/** 路径Y轴投影间距 */

private _path_space_y: number;

/** 路径长度 */

private _path_length: number;

// toset:

/** 路径的长度范围 */

private _path_min: number = 100;

private _path_max: number = 200;

/** 路径角度 */

private _path_angle: number;

/** 路径弧度 */

private _path_radians: number;

/** 是否移除 */

public _to_remove: number;

constructor(){

super(GunRoleType.LIVE_DOLL);

}

init( box: GunBox, doll_item: DollItem, doll_area: Area ):void {

// if(!this._body_ani)

// {

// this._body_ani = new Laya.Animation();

// this.addChild(this._body_ani);

// }

// this._body_ani.play(0, true, doll_item.animation_name);

this._box = box;

this._fly_site.w = this._box._area.w - 20;

this._box.graphics.drawLine( 0, this._fly_site.h, this._box._area.w, this._fly_site.h, "#ff0000", 1 );

// 当更新房间时

if( this._doll_area.w != doll_area.w

|| this._doll_area.h != doll_area.h ) {

this._doll_area.w = doll_area.w;

this._doll_area.h = doll_area.h;

}

// 设置容器的宽高

this.width = Math.max( this._blood_area.w, this._demon_area.w, this._doll_area.w );

this.height = this._blood_area.h + this._demon_area.h + this._doll_area.h;

this.graphics.drawRect( 0, 0, this.width, this.height, null, "#ff0000", 1);

if( ! DollGunRole._ani_cached ) {

DollGunRole._ani_cached = true;

Laya.Animation.createFrames( ["ui/gun_box/plane.png"], "demon_fly" );

Laya.Animation.createFrames( ["ui/gun_box/img_target_blank.png", "ui/gun_box/img_target.png"], "doll_target" );

}

/** 用于设置对象的位置 */

let y_sp = 0;

// 设置血条

if( ! this._blood_chart ) {

this._blood_chart = new Laya.ProgressBar( "ui/start/progress.png" );

this._blood_chart.size( this._blood_area.w, this._blood_area.h );

this._blood_chart.pivot( this._blood_chart.width / 2, 0 );

this.addChild( this._blood_chart );

}

this._blood_chart.pos( this.width / 2, y_sp );

this._blood_value = 100;

this._blood_chart.value = this._blood_value / 100;

y_sp += this._blood_chart.height;

// 设置魔鬼

if( ! this._demon_ani ) {

this._demon_ani = new Laya.Animation();

this._demon_ani.size( this._demon_area.w, this._demon_area.h );

this._demon_ani.pivot( this._demon_ani.width / 2, 0 );

this.addChild( this._demon_ani );

this._demon_ani.zOrder = 0;

this._demon_ani.interval = 200;

this._demon_ani.play( 0, true, "demon_fly" );

}

this._demon_ani.pos( this.width / 2, y_sp );

// 设置靶心

if( ! this._target_ani ) {

this._target_ani = new Laya.Animation();

this._target_ani.size( this._target_area.w, this._target_area.h );

this._target_ani.pivot( this._target_ani.width / 2, this._target_ani.height / 2 );

this.addChild( this._target_ani );

this._target_ani.zOrder = 9;

this._target_ani.interval = 200;

this._target_ani.play( 0, true, "doll_target" );

}

this._target_ani.pos( this.width / 2 - this._demon_ani.width / 2 + this._pivot_demon.x, y_sp + this._pivot_demon.y );

// 将容器轴心点设置到准星位置

this.pivot( this._target_ani.x, this._target_ani.y ) ;

y_sp += this._demon_ani.height;

if( ! this._doll_img ) {

this._doll_img = new Laya.Image( );

this.addChild( this._doll_img );

this._doll_img.zOrder = 1;

}

// this._target_animation.pos( room_area.w/2 - 20, room_area.h/2 - 20 );

this._doll_img.size( this._doll_area.w, this._doll_area.h );

this._doll_img.pivot( this._doll_img.width / 2, 0 );

this._doll_img.pos( this.width / 2, y_sp );

this._doll_img.skin = doll_item.img;

/** 初始化变量 */

this._to_remove = 0;

// 设置终点

// tofix:

this.x = BaseUtils.rand_number( this._fly_site.x, this._fly_site.x + this._fly_site.w );

this.y = BaseUtils.rand_number( this._fly_site.y, this._fly_site.y + this._fly_site.h );

// totest:

this._path_angle = 0;

// 设置路径

this.set_path( );

}

set_path( ) : void {

// 设置起点

// 由于取整带来的计算偏差,会导致娃娃实际到达的终点一般不会与计算的终点一致

// 因此将娃娃此时的位置作为起点

// this._head_pos.x = this._tail_pos.x;

// this._head_pos.y = this._tail_pos.y;

this._head_pos.x = this.x;

this._head_pos.y = this.y;

this._step = 0;

// totest: 此处为测试使用

this._path_length = 150;

this._path_angle = 180 - this._path_angle;

this._path_radians = Math.PI / 180 * this._path_angle ;

this._tail_pos.x = Math.floor( this._head_pos.x + this._path_length * Math.cos( this._path_radians ) );

this._tail_pos.y = Math.floor( this._head_pos.y + this._path_length * Math.sin( this._path_radians ) );

// // 确保路径的终点不能超出范围

// while( true ) {

// // 路径的长度和角度

// this._path_length = BaseUtils.rand_number( this._path_min, this._path_max );

// this._path_angle = BaseUtils.rand_number( 0, 360 );

// // 计算弧度，用于sin和cos函数

// this._path_radians = Math.PI / 180 * this._path_angle ;

// // 设置终点

// this._tail_pos.x = Math.floor( this._head_pos.x + this._path_length * Math.cos( this._path_radians ) );

// this._tail_pos.y = Math.floor( this._head_pos.y + this._path_length * Math.sin( this._path_radians ) );

// // 路径选择条件

// if( this._tail_pos.x > this._fly_site.x

// && this._tail_pos.y > this._fly_site.y

// && this._tail_pos.x < this._fly_site.x + this._fly_site.w

// && this._tail_pos.y < this._fly_site.y + this._fly_site.h )

// break;

// }

this._path_space_x = Math.abs( this._tail_pos.x - this._head_pos.x );

this._path_space_y = Math.abs( this._tail_pos.y - this._head_pos.y );

// console.log("set path head_pos:" + this._head_pos.x + ":" + this._head_pos.y);

// console.log("set path tail_pos:" + this._tail_pos.x + ":" + this._tail_pos.y);

// console.log("set path space:" + this._path_space_x + ":" + this._path_space_y);

}

move( ) : void {

// 在上一帧累加会导致误差增大

// 因此采用步数来确定位置

this._step ++;

this._to_pos.x = Math.floor( this._head_pos.x + this._speed * this._step * Math.cos( this._path_radians ) );

this._to_pos.y = Math.floor( this._head_pos.y + this._speed * this._step * Math.sin( this._path_radians ) );

// 超出路径,重新设置路径

if ( Math.abs( this._to_pos.x - this._head_pos.x ) > this._path_space_x

|| Math.abs( this._to_pos.y - this._head_pos.y ) > this._path_space_y ) {

this.set_path( );

this._to_pos.x = Math.floor( this._head_pos.x + this._speed * this._step * Math.cos( this._path_radians ) );

this._to_pos.y = Math.floor( this._head_pos.y + this._speed * this._step * Math.sin( this._path_radians ) );

}

this.x = this._to_pos.x;

this.y = this._to_pos.y;

this._box.graphics.drawLine( this._head_pos.x, this._head_pos.y, this.x, this.y, "#00ff00", 1 );

}

dispose( ) : void {

if ( ! this._to_remove ) {

this.move();

}

// 移动后什么条件下消失?

// todo:

}

hurt( damage: number ) : void {

this._blood_value -= damage;

if( this._blood_value <= 0 )

this._blood_value = 0;

this._blood_chart.value = this._blood_value / 100;

if( this._blood_value == 0 ) {

this._to_remove = 1;

}

}

}

class GunBox{

public start(): void {

// 启动定时器

Laya.timer.frameLoop( 1, this, this.loop );

}

public loop():void {

// 遍历BOX中所有的子对象

this._doll_role.dispose( );

}