欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CreateJS开始使用文档翻译

程序员文章站 2024-03-16 21:20:52
...
EaselJS
	1.在项目中引入 EaselJS 库
		<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>

	2.在<body>中创建一个<canvas>，并当<body>加载完成后，调用一个 '回调函数'(这里命名为 'init')
		<body onload="init();">
			<canvas id="demoCanvas" width="500" height="500"></canvas>
		</body>

	3.创建 'init' 函数，可以放到<head>或<body>中，我们在 'init' 中，来使用 EaselJS
		<script>
			function init(){
				// 这里使用 EaselJS
			}
		</script>

	4.传递<canvas>元素的id，创建一个新的 'Stage' 实例，来定义一个 'stage'。创建的 'stage' 将保存我们所有的显示对象，并作为我们项目的 '可视化容器'
		var stage = new createjs.Stage('demoCanvas');

	5.创建一个形状。首先，需要一个 'Shape' 实例。然后，使用 'Shape' 的图形API，来给它颜色和边界。使用x和y来定位到canvas上，并添加个 'stage'
		var circle = new createjs.Shape();
		circle.graphics.beginFill('DeepSkyBlue').drawCircle(0, 0, 500);
		circle.x = 100;
		circle.y = 100;
		stage.addChild(circle);

	6.最后，我们需要更新 'stage'，来显示我们刚刚添加的形状。
		stage.update();


TweenJS
	1.如果已经添加了 'EaselJS'，以同样的方式添加 TweenJS 库
		<script src="https://code.createjs.com/tweenjs-0.6.2.min.js"></script>

	2.删除上方 EaselJS 示例，'init' 方法，底部的 'stage.update()'。
		在删除后的空白地方，我们来加入 'tweenJS' 代码。首先，首先获取我们的圆形实例，并传入 'loop: true'，我们的动画将会无限运行。我们看到的 '.to()' 方法来告诉对象要做什么和去哪里，以及需要多长时间和使用什么 'easing'(缓动函数)。更改 'x'，将使对象水平移动；更改 'alpha'，将使对象淡入或淡出。
		createjs.Tween.get(circle, {loop: true})
			.to({x: 400}, 1000, createjs.Ease.getPowInOut(4))
			.to({alpha: 0, y: 175}, 500, createjs.Ease.getPowInOut(2))
			.to({alpha: 0, y: 225}, 100)
			.to({alpha: 1, y: 200}, 500, createjs.Ease.getPowInOut(2))
			.to({x: 100}, 800, createjs.Ease.getPowInOut(2));

	3.记住我们已经从脚本中，移除了 'stage.update()'。这是因为 'Tween' 有自己的刷新 'stage' 的方式。首先，设置 'FPS'(你希望每秒更新 'stage' 的次数)。其次，添加事件监听器到同样的 'Ticker' 类，每次捕获到 'tick'，都会导致 'stage' 刷新。
		createjs.Ticker.setFPS(60);
		createjs.Ticker.addEventListener('tick', stage);


SoundJS
	1.在项目中引入 SoundJS 库
		<script src="https://code.createjs.com/soundjs-0.8.2.min.js"></script>

	2.有很多方式来加载和播放声音。由于我们希望能够重复使用这个声音，我们将在<body>上加载一次，并随时点击我们希望的元素时，播放声音。
		<body onload="loadSound();">
			<button onclick="playSound();" class="play-sound">播放声音</button>
		</body>

	3.在这个基本示例中，只需要一个声音文件。我们在全局作用于内，定义一个 '声音ID'，以便访问。
		var soundID = 'thunder';

	4.现在加载声音。在文档头部，访问 'Sound' 类，并调用 'registerSound()' 方法，传递2个参数：声音文件路径，以及我们关联的 '声音ID'
		function loadSound(){
			createjs.Sound.registerSound('thunder.mp3', soundID);
		}

	5.传递 '声音ID' 给 'play()' 方法，来播放声音
		function playSound(){
			createjs.Sound.play(soundID);
		}


PreloadJS
	1.在项目中引入 PreloadJS 库
		<script src="https://code.createjs.com/preloadjs-0.6.2.min.js"></script>

	2.有几种方式来触发资源的加载。我们想要实现的是：当点击按钮，调用加载函数。
		<button onlick="loadImage();" class="load-image">加载图片</button>

	3.在本教程中，实例化一个我们可以使用的新的 'LoadQueue' 类。由于我们想在资源加载完成时，调用一个函数，需要给 '队列实例' 应用一个事件监听器，来监听 'fileload' 事件，并在事件触发时，调用 'handleFileComplete' 函数。使用 'loadFile()' 方法，来加载资源文件
		function loadImage(){
			var preload = new createjs.LoadQueue();
			preload.addEventListener('fileload', handleFileComplete);
			preload.loadFile('demo.png');
		}

	4.PreloadJS 识别文件烈性，并相应地设置 '追加的HTML元素'。跟多信息，查看 'LoadQueue' 文档。
		将返回的资源结果，追加到<body>
		function handleFileComplete(event){
			document.body.appendChild(event.result);
		}

	关于跨域错误问题，查看 'PreloadJS' 文档获取更多信息

相关标签： CreateJS EaselJS TweenJS SoundJS PreloadJS

上一篇： 09 Physijs约束物体的移动范围（Three.js的物理引擎）

下一篇： Babylon.js实现物体碰撞检测

推荐阅读