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);
		// 飞机1
		var 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);

效果图