使用Animate和CreateJS设计H5页面

H5页面缓存问题解决方案，在新版本上线后部分用户无法获取最新的页面文件，在引用js时加上动态版本号，例如<script src="index.js?v=2.5.0" />

加载库中的影片剪辑，修改尺寸和注册点

以下是使用createjs编写H5页面的示例代码，用于加载库中的影片剪辑名为"S"，将其设置为100x100大小、位于(10, 10)坐标处，并将它的注册点设为其中心：

// 创建舞台
var stage = new createjs.Stage("canvas");

// 加载资源并完成后执行回调函数
var loader = new createjs.LoadQueue();
loader.addEventListener("complete", handleComplete);
loader.loadManifest([
    {id: "s_clip", src: "s_clip.png"} // 假设资源名为"s_clip"
]);

function handleComplete() {
    // 创建影片剪辑实例
    var sClip = new createjs.MovieClip(loader.getResult("s_clip"));

    // 设置影片剪辑属性
    sClip.scaleX = sClip.scaleY = 100 / sClip.getBounds().width; // 缩放到100x100大小
    sClip.regX = sClip.getBounds().width / 2; // 将注册点设为中心
    sClip.regY = sClip.getBounds().height / 2;
    sClip.x = 10; // 设置位置
    sClip.y = 10;

    // 添加影片剪辑到舞台
    stage.addChild(sClip);

    // 更新舞台
    stage.update();
}

以上代码利用 LoadQueue 对象从资源文件中加载clip，并在加载完成时执行 handleComplete() 回调函数。回调函数创建影片剪辑实例，根据需要缩放和设置注册点位置。最后将剪辑添加到舞台并更新它。

多维数组

以下是使用Animate和CreateJS遍历带键值多维数组的示例代码，它将设置一个包含示例数据的数组，当键值中包含某个特定值时，它将显示该数据：

// 创建示例数据数组
var data = [
    {
        name: 'John',
        age: 25,
        interests: [
            'Sports',
            'Music',
            'Coding'
        ]
    },
    {
        name: 'Amy',
        age: 32,
        interests: [
            'Movies',
            'Art',
            'Yoga'
        ]
    },
    {
        name: 'David',
        age: 19,
        interests: [
            'Reading',
            'Hiking',
            'Cooking'
        ]
    }
];

// 遍历数据数组
for (var i = 0; i < data.length; i++) {
    var person = data[i];
    for (var key in person) {
        if (key.indexOf('interests') !== -1) { // 检查键名是否包含 "interests"
            console.log(person.name + "'s interests:");
            for (var j = 0; j < person.interests.length; j++) {
                console.log('- ' + person.interests[j]);
            }
        }
    }
}

以上代码通过遍历带有键值的多维数组来展示如何遍历、寻找特定值以及输出嵌套内容。例如，我们可以检查每个数组元素的所有键，如果其中包含 "interests"，则遍历并显示 "interests" 的详细信息。

在本示例中，我们定义了一个多维数组 data，并使用两个 for 循环嵌套来遍历每个元素和其属性。在内部循环中，我们检查每个键是否包含 "interests"，如果是则输出该用户的兴趣信息。

注意：此代码仅在控制台上输出信息，您可以按照需求修改，如通过 DOM 操作将标签动态添加到HTML中来显示输出内容。

创建一个矩形，并用Tween动画为其添加旋转效果

// 定义舞台
var stage = new createjs.Stage("canvas");

// 创建矩形
var rect = new createjs.Shape();
rect.graphics.beginFill("#FF0000").drawRect(0, 0, 100, 100);
rect.x = 50;
rect.y = 50;

// 添加到舞台并更新
stage.addChild(rect);
stage.update();

// 创建Tween动画
createjs.Tween.get(rect, { loop: true })
    .to({ rotation: 360 }, 1000);

鼠标悬停时缓慢移动图像

// 定义舞台
var stage = new createjs.Stage("canvas");

// 创建位图对象
var img = new createjs.Bitmap("image.png"); // 图像文件名 "image.png"
img.scaleX = img.scaleY = 0.5;
img.x = stage.canvas.width / 2 - img.getBounds().width * img.scaleX / 2;
img.y = stage.canvas.height + img.getBounds().height * img.scaleY;

// 添加到舞台
stage.addChild(img);

// 更新舞台
stage.update();

// 注册鼠标事件
img.addEventListener("mouseover", function() {
    createjs.Tween.get(img)
        .to({ y: stage.canvas.height / 2 - img.getBounds().height * img.scaleY / 2 }, 500 /* 持续时间 */);
});

img.addEventListener("mouseout", function() {
    createjs.Tween.get(img)
        .to({ y: stage.canvas.height + img.getBounds().height * img.scaleY }, 500 /* 持续时间 */);
});

在画布上绘制文本和形状

// 定义舞台
var stage = new createjs.Stage("canvas");

// 创建文本对象
var text = new createjs.Text("Hello, World!", "bold 36px Arial", "#000000");
text.x = 50;
text.y = 50;

// 创建形状
var shape = new createjs.Shape();
shape.graphics.beginFill("#FF0000")
              .drawRect(150, 50, 100, 100);

// 添加到舞台并更新
stage.addChild(text, shape);
stage.update();

以下是使用Animate 2023和CreateJS创建文本区域的示例代码，可以自动换行、两端对齐并左对齐：

// 创建Shape对象作为底板
var shape = new createjs.Shape();
shape.graphics.beginFill("#CCCCCC").drawRect(50, 50, 400, 100);

// 添加底板到舞台
stage.addChild(shape);

// 创建文本对象
var text = new createjs.Text("你好，世界，我正在挖掘Animate 2023和CreateJS的深层次功能可以帮助您获得更多的动画效果和交互性。", "18px Arial", "#000000");
text.lineWidth = 400; // 宽度等于底板宽度
text.lineHeight = 25;  // 设定每一行的高度
text.textAlign = "justify"; // 自动拉伸字距实现两端对齐
text.x = 50;
text.y = 50;

// 添加文本到舞台
stage.addChild(text);

以上代码中，我们通过创建一个Shape对象作为底板，并指定其位置和大小。然后，我们创建一个Text对象，并将文本内容赋值给它，指定文字样式，以及设置行宽为底板宽度，设定每一行的高度，文本自动拉伸字距生效后达到两端对齐效果，同时文本左对齐。最后，我们将文本和底板添加到舞台。

本节将介绍创建图形动画,精灵表位图动画,DOM元素动画.

例子1 图形动画

<!DOCTYPE html>
<html>
<head>
	<meta charset="gbk">
	<script type="text/javascript" src="easeljs-0.6.0.min.js"></script>
</head>
<body>
	<canvas id="myCanvas" width="200" height="200">
		你的浏览器不支持canvas标签
	</canvas>
	<script>
		var myCanvas=document.getElementById("myCanvas");
		var stage=new createjs.Stage(myCanvas);
		var shape=new createjs.Shape();
		shape.graphics.beginFill("red").drawRect(0,0,50,50);
		createjs.Ticker.addEventListener("tick",tick);
		function tick(event){
			if(shape.x>stage.canvas.width){
				shape.x=0;
			}
			shape.x++;
			stage.update();
		}
		stage.addChild(shape);
		stage.update();
	</script>
</body>
</html>

createjs.Ticker.addEventListener("tick",tick);
增加时间监听器,每隔一定时间执行,参数一为事件类型,参数二为相应回调函数.

if(shape.x>stage.canvas.width){
shape.x=0;
}
如果shape的x坐标大于canvas标签宽度则回到原处.
shape.x++;
shape的x坐标加1(向右移动).

例子2 精灵表位图动画

<!DOCTYPE html>
<html>
<head>
	<meta charset="gbk">
	<script type="text/javascript" src="easeljs-0.6.0.min.js"></script>
</head>
<body>
	<canvas id="myCanvas" width="800" height="200"></canvas>
	<script>
        var myCanvas=document.getElementById("myCanvas");
		var stage=new createjs.Stage(myCanvas);
		var data={
			"animations":
				{
				"all": [0, 25],
				},
				"images": ["test.png"],
				"frames":
					{
						"height": 256,
						"width":128,
						"regX": 0,
						"regY": 0,
						"count": 26
					}
			}
		var spriteSheet = new createjs.SpriteSheet(data);
		var bitmapAnimation = new createjs.BitmapAnimation(spriteSheet);
		bitmapAnimation.x = 0;
		bitmapAnimation.y = 20;
		bitmapAnimation.gotoAndPlay("all");
		stage.addChild(bitmapAnimation);
		createjs.Ticker.setFPS(24);
		createjs.Ticker.addEventListener("tick", stage);
		bitmapAnimation.addEventListener("tick", tickEvent);
		function tickEvent(event){
			if(bitmapAnimation.x>stage.canvas.width){
				bitmapAnimation.x=0;
			}
			bitmapAnimation.x+=5;
		}
	</script>
</body>
</html>

var data={
"animations":
{
"all": [0, 25],
},
"images": ["test.png"],
"frames":
{
"height": 256,
"width":128,
"regX": 0,
"regY": 0,
"count": 26
}
}
创建SpriteSheet数据,animations包含动画集合,frames包含帧相关属性,images包含图片数据.test.png为以下图片,另存为即可.

var spriteSheet = new createjs.SpriteSheet(data);
创建SpriteSheet对象,参数一为SpriteSheet数据.

var bitmapAnimation = new createjs.BitmapAnimation(spriteSheet);
创建BitmapAnimation对象,参数一为SpriteSheet对象.

bitmapAnimation.gotoAndPlay("all");
跳到"all"并开始播放,参数一为位置标记或帧位置.

createjs.Ticker.setFPS(24);
设置每秒帧数为24.bitmapAnimation.addEventListener("tick", tickEvent);
增加tick事件监听.

例子3 DOM元素动画

<!DOCTYPE html>
<html>
<head>
	<meta charset="gbk">
	<script type="text/javascript" src="easeljs-0.6.0.min.js"></script>
	<style>
		#content{
			text-align:center;
			background-color: #000;
			color:#FFF;
			width:400px;
			height:250px;
		}
	</style>
</head>
<body>
	<div class="canvasHolder">
		<div id="content">
			<h2>例子3 DOM网页元素动画</h2>
			教程制作<br/>
			<button width="100" οnclick="alert('教程制作')">测试按钮</button>
            
		</div>
		<canvas id="myCanvas" width="400" height="250"></canvas>
	</div>
	<script>
		var myCanvas=document.getElementById("myCanvas");
		var stage=new createjs.Stage(myCanvas);
		var myCanvas=document.getElementById("content");
		var dOMElement = new createjs.DOMElement(content);
		dOMElement.regX=400;
		dOMElement.regY=250;
		dOMElement.x=400;
		dOMElement.y=250;
		stage.addChild(dOMElement);
		createjs.Ticker.addEventListener("tick", tick);
		function tick(event){
			if(dOMElement.x<document.body.clientWidth){
				dOMElement.x+=3;
			}
			stage.update();
		}
	</script>
</body>
</html>

var myCanvas=document.getElementById("content")
获取id为content的div元素.

var dOMElement = new createjs.DOMElement(content);
创建DOMElement对象,参数一为DOM元素.