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

2024-06-12 03:28

本文主要是介绍Pixi.js学习 (五)动画效果与变量逻辑控制,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

前言

一、动画效果

1.1 帧频

1.2 帧频函数

二、变量逻辑控制

2.1 定义变量的语法

2.2 使用变量控制逻辑

2.3 使用变量控制追加效果

三、实战

例题一:完成天天酷跑

例题一代码:

总结


前言

为了提高作者的代码编辑水品,作者在使用博客的时候使用的集成工具为 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


总结

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

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

感谢您的观看。

这篇关于Pixi.js学习 (五)动画效果与变量逻辑控制的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1053068

相关文章

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权,允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true (Spring security默认会带有ROLE_前缀),去

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

学习hash总结

2014/1/29/   最近刚开始学hash,名字很陌生,但是hash的思想却很熟悉,以前早就做过此类的题,但是不知道这就是hash思想而已,说白了hash就是一个映射,往往灵活利用数组的下标来实现算法,hash的作用:1、判重;2、统计次数;

变量与命名

引言         在前两个课时中,我们已经了解了 Python 程序的基本结构,学习了如何正确地使用缩进来组织代码,并且知道了注释的重要性。现在我们将进一步深入到 Python 编程的核心——变量与命名。变量是我们存储数据的主要方式,而合理的命名则有助于提高代码的可读性和可维护性。 变量的概念与使用         在 Python 中,变量是一种用来存储数据值的标识符。创建变量很简单,

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

引言 高斯过程(Gaussian Process,简称GP)是一种概率模型,用于描述一组随机变量的联合概率分布,其中任何一个有限维度的子集都具有高斯分布 文章目录 引言一、高斯过程1.1 基本定义1.1.1 随机过程1.1.2 高斯分布 1.2 高斯过程的特性1.2.1 联合高斯性1.2.2 均值函数1.2.3 协方差函数(或核函数) 1.3 核函数1.4 高斯过程回归(Gauss