PIXI

admin管理员组

文章数量:1130349

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);

效果图

本文标签： PIXI