跳到主要内容

使用CreatJS制作鼠标追踪效果

2 分钟阅读

开始

使用的是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自动生成的,我们只需要在自动生成的文件里找到生成舞台的字段,直接在下面写入追踪效果的代码即可

评论
0条评论

添加新评论

昵称
邮箱
网址