PIXI
PIXI_动画基础
动画效果的实现原理
由多张连续的图片以超快的速度(肉眼无法察觉)切换看到的一种视觉效果一、概念1、帧影像/动画中的单幅画面，构成影像或画面的一种最小单元一帧就是一副静止的图片，连续的帧就形成了动画2、帧频每秒钟播放的帧数扩展知识1、FPS:每秒传输的帧数{显卡图形计算(FPS:显卡算力)-显示器放映(刷新率Hz)-观众}2、刷新率(单位Hz):显示器每秒钟显示的帧数，60Hz就是每秒钟能够显示60帧显卡核心核心类型、流处理器数量和核心频率核心类型：就是显卡的定位流处理器数量相同的话，那么显卡核心频率越高，性能也就越好显卡的核心频率直接影响显卡的性能，越高越好app.ticker.add(帧频函数):添加帧频函数，不需要添加监听的
代码
//舞台var app=new PIXI.Application(500,700);document.body.appendChild(app.view);// 背景var back=new PIXI.Sprite.fromImage('../img/bg.jpg');app.stage.addChild(back);// 飞机1var plane=new PIXI.Sprite.fromImage('../img/plane1.png');app.stage.addChild(plane);plane.y=400;plane.x=100;plane.anchor.set(0.5,0.5)//一、自定义帧频函数(有什么意义取决于他用于什么地方)function sky(){//二、每一帧要完成的动作//当Y轴的坐标大于-50时执行，飞机向前移动if(plane.y>-50){plane.y -=3;}else{//超出则回到坐标为400的位置plane.y=400;}}// 自动调用sky，每秒调用自己电脑Hz的峰值//三、app.ticker.add():添加帧频函数app.ticker.add(sky);
效果图
PIXI
PIXI_动画基础
动画效果的实现原理
由多张连续的图片以超快的速度(肉眼无法察觉)切换看到的一种视觉效果一、概念1、帧影像/动画中的单幅画面，构成影像或画面的一种最小单元一帧就是一副静止的图片，连续的帧就形成了动画2、帧频每秒钟播放的帧数扩展知识1、FPS:每秒传输的帧数{显卡图形计算(FPS:显卡算力)-显示器放映(刷新率Hz)-观众}2、刷新率(单位Hz):显示器每秒钟显示的帧数，60Hz就是每秒钟能够显示60帧显卡核心核心类型、流处理器数量和核心频率核心类型：就是显卡的定位流处理器数量相同的话，那么显卡核心频率越高，性能也就越好显卡的核心频率直接影响显卡的性能，越高越好app.ticker.add(帧频函数):添加帧频函数，不需要添加监听的
代码
//舞台var app=new PIXI.Application(500,700);document.body.appendChild(app.view);// 背景var back=new PIXI.Sprite.fromImage('../img/bg.jpg');app.stage.addChild(back);// 飞机1var plane=new PIXI.Sprite.fromImage('../img/plane1.png');app.stage.addChild(plane);plane.y=400;plane.x=100;plane.anchor.set(0.5,0.5)//一、自定义帧频函数(有什么意义取决于他用于什么地方)function sky(){//二、每一帧要完成的动作//当Y轴的坐标大于-50时执行，飞机向前移动if(plane.y>-50){plane.y -=3;}else{//超出则回到坐标为400的位置plane.y=400;}}// 自动调用sky，每秒调用自己电脑Hz的峰值//三、app.ticker.add():添加帧频函数app.ticker.add(sky);
效果图