p5.js+场景管理.js+动画.js=h5动画工具


先看一下演示效果:http://www.liziyang.com/h5Templete/
首先,要感谢丁沐榕同学做的动态图。
这个例子用到了p5.js基础包,scenemanager.js(场景管理),p5.play.js(实现动画和碰撞触发)。请下载我做的templete文件

解压后会看到里面已经放好了需要用到的lib。
打开index.html文件,我将meta和css进行了修改,自适应手机屏幕并禁止上下拖动。除了加载了上面用到的库文件外,主要是加载了3个场景(3个js文件,mainScene.js、scene01、scene02)。
……

<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no,maximum-scale=1.5">
<meta content="telephone=no;email=no" name="format-detection">
<style> body {padding: 0; margin: 0;} canvas {vertical-align: top;position:fixed;} </style>
<script src="lib/p5.min.js"></script>
<script src="lib/p5.dom.min.js"></script>
<script src="lib/p5.sound.min.js"></script>
<script src="lib/p5.play.js"></script>
<script src="lib/scenemanager.js"></script>
<script src="mainScene.js"></script>
<script src="scene01.js"></script>
<script src="scene02.js"></script>

……
打开mainScene.js文件,这个文件是我们的入口文件,主要是设置画布的尺寸并加载Scene01场景。
打开scene01.js,之后所有场景都要用到以下格式进行场景的显示:

function Scene1(){
   this.setup = function(){
      //场景1初始化需要的内容
   }
   this.draw = function(){
      //场景1绘制的内容
   }
}

p5.play可以将任意图形变成sprite并实现动画和点击按钮触发功能,然后可以在点击后使用showScene(要切换的场景)函数进行场景的切换。
 
相关参考资料:
p5.js:https://p5js.org/
scenemanager.js:https://github.com/mveteanu/p5.SceneManager
p5.play.js:http://molleindustria.github.io/p5.play/


发表评论

您的电子邮箱地址不会被公开。