CreateJS开始使用文档翻译

最新推荐文章于 2022-11-10 18:46:33 发布

beyond__devil

最新推荐文章于 2022-11-10 18:46:33 发布

阅读量939

点赞数

分类专栏： CreateJS 文章标签： CreateJS EaselJS TweenJS SoundJS PreloadJS

本文链接：https://blog.csdn.net/beyond__devil/article/details/79001272

版权

CreateJS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

	2.在<body>中创建一个<canvas>，并当<body>加载完成后，调用一个 '回调函数'(这里命名为 'init')
		<body οnlοad="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 οnlοad="loadSound();">
			<button οnclick="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' 文档获取更多信息

beyond__devil

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CreateJS开始使用文档翻译

EaselJS 1.在项目中引入 EaselJS 库 2.在中创建一个，并当加载完成后，调用一个 '回调函数'(这里命名为 'init') 3.创建 'init' 函数，可以放到或中，我们在 'init' 中，来使用 EaselJS function init(){ // 这里使用 EaselJS } 4.传递元素的id，创建
复制链接

扫一扫