目录
前言
一、动画效果
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 += 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>运行结果：
本文所用到的img图片以及源码地址：https://download.csdn.net/download/qq_56376552/89421558
总结
本文 动画效果与变量逻辑控制 就此结束，
如有错误或者网址更新，步骤更改，代码错误欢迎私信作者进行更正，
感谢您的观看。
