开始
使用的是Animate CC + CreatJS进行制作的所以有些步骤和直接使用CreatJS有所不同,不过主要内容完全一致。
第一种效果:跟随效果
JS部分(js文件名:"MyFileCopy"):
//导入舞台
exportRoot = new lib.MyFile();
stage = new lib.Stage(canvas);
//导入预先在An中制作好的素材:
var Shape = new lib.Shape();
Shape.x = 750;
Shape.y = 856.90;
exportRoot.addChild(Shape);
//为了保证就算鼠标离开画布跟踪物仍然可以追踪鼠标我们要在Stage中加入这行代码:
stage.mouseMoveOutside = true;
//鼠标跟踪事件:
stage.on("stagemousemove", function (evt) {
Shape.x = evt.stageX;
Shape.y = evt.stageY;
});
HTML部分:
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>鼠标追踪事件</title>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="MyFile.js"></script>
<script src="MyFileCopy.js"></script>
</head>
<body οnlοad="init();">
<div id="animation_container" style="background-color:rgba(153, 153, 204, 1.00); width:1500px; height:900px;margin: 0 auto;">
<canvas id="canvas" width="1500" height="900" style="position: absolute; display: block; background-color:rgba(153, 153, 204, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1500px; height:900px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
</body>
</html>
第二种效果:拖拽效果
JS部分:
//导入舞台
exportRoot = new lib.MyFile();
stage = new lib.Stage(canvas);
//导入预先在An中制作好的素材:
var Shape = new lib.Shape();
Shape.x = 750;
Shape.y = 856.90;
exportRoot.addChild(Shape);
//为了保证就算鼠标离开画布跟踪物仍然可以追踪鼠标我们要在Stage中加入这行代码:
stage.mouseMoveOutside = true;
//鼠标跟踪事件:
Shape.on("pressmove", function (evt) {
evt.currentTarget.x = evt.stageX;
evt.currentTarget.y = evt.stageY;
});
HTML部分与效果一相同。
PS:JS部分代码没有截全,因为JS代码是由Animate自动生成的,我们只需要在自动生成的文件里找到生成舞台的字段,直接在下面写入追踪效果的代码即可