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

齐尹秦

已于 2024-06-12 20:38:37 修改

阅读量885

点赞数 15

分类专栏： Pixi.js学习文章标签：学习前端 javascript

于 2024-06-11 19:48:18 首次发布

齐尹秦

本文链接：https://blog.youkuaiyun.com/qq_56376552/article/details/139600102

版权

Pixi.js学习专栏收录该内容

8 篇文章

订阅专栏

前言

为了提高作者的代码编辑水品，作者在使用博客的时候使用的集成工具为 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 += 1
			    speed.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=x
				a.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 +=2
				if(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>

运行结果：