Pixi.js学习 （五）动画效果与变量逻辑控制

---

前言

为了提高作者的代码编辑水品，作者在使用博客的时候使用的集成工具为 HBuilderX。

下文所有截图使用此集成工具，读者随意。

此系列文章需要：HTML ，JavaScript 基础知识

操作系统：

版本    Windows 11 家庭中文版
版本    23H2
安装日期    ‎2024/‎5/‎28
操作系统版本    22631.3593
体验    Windows Feature Experience Pack 1000.22700.1003.0

---

一、动画效果

动画效果的实现原理：动画是由多张连续的图片以超快的速度（人类肉眼无法察觉）切换看到的视觉效果

1.1 帧频

就是影像动画中最小单位的单幅影像画面，相当于电影胶卷的每一格镜头

一帧就是一副静止的画面，练习的帧就形成了动画，如电视图像。

帧频：每秒钟放映或者显示的图片的数量。

FPS:每秒传输的帧数，FPS值越高，画面越流畅

刷新率：单位Hz，60Hz表示每秒可以扫描刷新60次，最高播放60帧。

运行效果：如果能够做到手动快速点击，移动效果就是动画。 可将手动点击改为自动控制。就可以实现真正的动画效果了。

1.2 帧频函数

帧频函数：被程序自动反复调用，每秒钟被调用60次。

			//当函数每执行一次，飞机上升十个单位function move(){plane.y -= 10;//如果飞机超过边界返回原点if(plane.y<-100){plane.y=600;}}//添加函数app.ticker.add(move);

运行效果：

---

二、变量逻辑控制

变量：可以保存数据，变量中存储的数据可以变化 常量：程序中出现的固定的数值，例如某个元素的x坐标为200，某个元素每次移动1px的距离 使用变量替换常量，达到通过改变变量的值控制元素的变化。

2.1 定义变量的语法

//在javascript中的变量可以存储任意类型的数据【弱类型】var 变量名;var 变量名;//定义变量
变量名 = 值;//为变量赋值 3
//定义变量同时赋值
var 变量名 = 值 ;var a = 10;// a表示整数10
var b =  new PIXI.Text();//b表示文本元素

1、先定义再使用

2、javascript中的var变量为全局变量，作用范围在整个应用中   

3、变量可以重复定义但新的变量会替换旧变量（旧变量将无法使用）

2.2 使用变量控制逻辑

使用变量替换常量，通过改变变量的值让元素产生变化

根据变量所存储的值不同，执行不同的逻辑代码

下面的代码就是使用变量控制常量，改变飞机速度。

//设置飞机速度var planespeed=2;function planemove(){plane.y += planespeed;if (plane.y > 500 ) {plane.y = 0;}else if (plane.y < 0) {plane.y = 500;}}var speed=new PIXI.Text("速度："+0);speed.x=280;speed.y=410;app.stage.addChild(speed);//点击上键增加速度			shang.on("click",speedup);function speedup(){planespeed += 1speed.text="速度："+planespeed;}//点击下键减少速度			xia.on("click",speeddown);function speeddown(){if(planespeed>0){planespeed -= 1			    }speed.text="速度："+planespeed;}

在这串代码中，我们先定义了速度这个变量

//设置飞机速度

var planespeed=2;

又在后面函数中通过对变量的增减分别实现了速度的增加和减少。

没有使用具体的数值，而是使用变量作为中转，这种思想就是使用变量控制逻辑。

2.3 使用变量控制追加效果

接下来我们先实现以下代码：

• 1.创建应用，穿800，高500
• 2，创建并添加相对应元素
• 3.小鸟一直向右运动，超出屏幕右边界，重新回到屏幕左边界，继续向右运动
• 4.背景图片中按下鼠标，小鸟向上飞，松开鼠标，小鸟向下飞
• 5.当小鸟超出窗口边界时，游戏结束

使用代码如下：

		<script type="text/javascript">var app=new PIXI.Application(800,500);document.body.appendChild(app.view);																							function add(img,x,y){//创建图片元素var a=new PIXI.Sprite.fromImage(img);//将元素添加到页面中app.stage.addChild(a);//调整位置a.x=xa.y=y //对当前元素直接开启监听a.interactive=true;return a;}var bg = add("img/bj_01.png",0,0);bg.width=800;var bird=add("img/bird.png",100,200);var gameover=add("img/gameover.png",150,0);gameover.visible=false;//小鸟移动方向 上下方向不移动//不移动 0向上 1 向下var direction=2 function animate(){				// 	//小鸟移动bird.x +=2if(direction==1){bird.y-=5				    }else if(direction==0){bird.y+=5}//判断小鸟是否超出边界if(bird.x>800){bird.x=0;}if(bird.y < 0 || bird.y > 480){gameover.visible=true;//移除动画效果app.ticker.remove(animate)}}app.ticker.add(animate)bg.on('mousedown',moveup)function moveup(){				direction=1;}bg.on('mouseup',movedown)function movedown(){direction=0;}				</script>

实现效果：

---

三、实战

例题一：完成天天酷跑

• 1.创建并添加应用，宽800，高500
• 2.添加示例图片对应元素
• 3.添加背景与道路向左移动的效果（道路要比背景移动速度快）
• 4.按下起跳按钮，人物跳起，到达一定高度，下降到起始点，人物在空中，点击起跳，不能有效果。

结果图：

例题一代码：

		<script type="text/javascript">var app = new PIXI.Application(800,500);document.body.appendChild(app.view);//添加元素的函数function add(img,x,y){//创建图片元素var a = new PIXI.Sprite.fromImage(img);//将元素添加到页面中app.stage.addChild(a);//调整元素位置a.x = x;a.y = y;//对当前元素直接开启监听a.interactive = true;return a;}var bg1 = add("img/bg_back_02.png",0,0);var bg2 = add("img/bg_front_02.png",0,251);var bg11 = add("img/bg_back_02.png",bg1.x+800,0);var bg22 = add("img/bg_front_02.png",bg2.x+800,251);var ground1 = add("img/ground03_1.png",0,380);var ground11 = add("img/ground03_1.png",ground1.x+800,380);app.ticker.add(bgmove);function bgmove(){bg1.x -= 2;bg11.x -= 2;bg2.x -= 2;bg22.x -= 2;ground1.x -= 8;ground11.x -= 8;if(bg1.x < -800 ){bg1.x = 0;bg11.x = bg1.x+800;bg2.x = 0;bg22.x = bg2.x+800;}if(ground1.x < -800){ground1.x = 0;ground11.x = ground1.x+800;}}var player = add("img/player012.png",200,288);var jumpBtn = add("img/jumpBtn.png",600,288);jumpBtn.on("click",btnjump);function btnjump(){if(player.y == 288){app.ticker.add(playerup);}}function playerup(){player.y -= 1;if(player.y<188){app.ticker.remove(playerup);app.ticker.add(playerdown);}}function playerdown(){player.y+=1;if(player.y>288){player.y = 288;app.ticker.remove(playerdown);}}</script>

运行结果：

本文所用到的img图片以及源码地址：https://download.csdn.net/download/qq_56376552/89421558

---

总结

本文 动画效果与变量逻辑控制 就此结束，

如有错误或者网址更新，步骤更改，代码错误欢迎私信作者进行更正，

感谢您的观看。