鼠标跟随特效代码 跟随鼠标移动特效 收藏 0

浅谈Authorware中的鼠标跟随动画效果

李丹1， 谢景卫2

1.大连经济技术开发区中等职业技术专业学校 电工电子教研室，辽宁 大连 116600； 2.大连大学 素质教育基地，辽宁 大连 116622

摘要：本文通过案例分析的方式，探究在Authorware中制作对象跟随鼠标移动的动画制作方法，达到举一反三、灵活应用的目的。

0引言

鼠标跟随的动画效果在各类多媒体作品中都有应用，这种动画效果不仅使得作品的感染力和表现力大大增加，还增加了作品的灵动性，因此深受动漫设计者的喜爱。然而，一提到鼠标跟随的动画效果，很自然地就想到了Flash。Flash中对象跟随鼠标移动的特效制作已经在各类Flash动画作品中得到大量的使用，大大增强了作品的感染力和表现力［1］，有关Flash动画作品中的鼠标跟随效果比比皆是，在Flash中制作鼠标跟随的动画效果很方便，也很简单。但是，本文要介绍的却是在Authorware中制作鼠标跟随的动画效果，在Authorware中制作这种动画效果也能像在Flash中一样方便、简单，且具有相同的感染力、表现力和灵动性。

Authorware是一种基于流程线的多媒体集成软件，它提供了许多系统变量和函数，用以根据用户响应的情况，执行特定的功能［2］，制作出意想不到的动画效果。它提供了丰富的交互功能和程序控制功能，特别适合用来开发各种交互式的多媒体作品［3］。本文要介绍的鼠标跟随，就用到了Authorware中提供的两个关键的系统变量：CursorX和CursorY。CursorX存放活动窗口中当前鼠标位置距左边界的距离(单位为像素)；CursorY存放活动窗口中当前鼠标位置距上边界的距离(单位为像素)。若用户长时间没有得到响应或响应错误，则用CursorX和CursorY的值来获知用户鼠标在屏幕上的位置参数。本文就是利用这两个数据来完成制作鼠标跟随的动画效果。

下面介绍一种简单、典型的在Authorware中制作鼠标跟随动画的方法，只要掌握这种方法，灵活运用该方法，举一反三，就可以制作出更多、更好、更富有创意的多媒体作品。

下面就以蝴蝶跟随鼠标移动的动画制作为例进行介绍。

1动画效果

当鼠标在窗口中移动时，会有蝴蝶紧随其后，就像在空中飞舞；而当鼠标静止不动时，它也会在鼠标旁扇动翅膀。如图1、图2所示。

制作这样的一个动画效果，只需要四步就可完成。在这个作品中增加了第五步，该步只是要作一个特效而已，突出对象跟随鼠标的灵动性。如图3所示。

第一步：放一个计算图标到主流程线上，双击打开其输入窗口，输入：ResizeWindow(600,400)，完成演示窗口大小的重新设置。如图4所示。

这里简单说明一下设置窗口大小的函数ResizeWindow(width, height)的作用。ResizeWindow重新设定当前窗口，使之与指定的width，height参数相符合。ResizeWindow只能用在计算图标中，不能在表达式中使用或嵌入。ResizeWindow和系统变量WindowHeight、WindowWidth、WindowTop、WindowLeft一起工作，这四个系统变量提供当前窗口的规格和位置信息。

第二步：导入背景图片，在主流程线上自动生成显示图标，背景图片衬托出主题，在此仅是美化作品。

第三步：导入一个蝴蝶的Gif动画。如图5所示。

为了让作品的效果更好一些，对Gif动画作了透明设置。如图6所示。

第四步：这是最关键的一步，在主流程线上放上一个移动图标，设置移动对像为上一步的蝴蝶Gif动画；移动类型设置为：指向固定区域内某点；设置区域大小如图7。

在目标点输入：CursorX、CursorY。执行方式：永久。远端范围：循环。为了达到紧随其后的跟随效果，将时间设置为0.05 s。移动图标的属性设置参数如图8所示。

以上四步已经完成了在Authorware中制作鼠标跟随的效果，但是为了更有效地衬托出蝴蝶跟随鼠标的移动效果，增加一个静态的图标作为对比。最后一步的操作方法和第三步是一样的，只是第三步中对导入的Gif图标作了移动设置，而此步不用移动设置而已。

至此，鼠标跟随的动画作品制作完成，执行一下，可以看到不错的效果。也可以根据自己的需要作更改。总之一个移动图标的简单设置就能完成鼠标跟随的动画设置，这种方法方便有效地解决了动漫设计者、多媒体作品开发者和教学者的困扰，从而不再需要那些繁琐的变量定义、编程和逻辑运算。

参考文献

［1］ 唐小健. Flash 中元件跟随鼠标移动的特效制作之探究［J］. 电脑知识与技术，2013(32):73347736.

［2］ 赵佩华，眭碧霞. 多媒体技术应用［M］. 北京：高等教育出版社， 2012.

［3］ 范翠香.Authorware7中访问SQL数据库数据的两种方法研究［J］.微型机与应用,2014,33(17):7678.

让交互更加生动！有意思的鼠标跟随 3D 旋转动效

今天，群友问了这样一个问题，如下所示的鼠标跟随交互效果，如何实现：

简单分析一下，这个交互效果主要有两个核心：

1. 借助了 CSS 3D 的能力
2. 元素的旋转需要和鼠标的移动相结合

本文，就将讲述如何使用纯 CSS 实现类似的交互效果，以及，借助 JavaScript 绑定鼠标事件，快速还原上述效果。

如果不借助 JavaScript，仅仅只是 CSS，如何实现类似的 3D 旋转效果呢？

这里会运用到一种名为正反旋转相消或者是正负旋转相消的小技巧。嗯，名字起的很奇怪，好像数学概念一样。

在动画中，旋转是非常常用的属性，

如果我们给不同的层级的元素，添加不同方向的旋转，会发生什么呢？

首先假设一下场景，我们有这样的一层 HTML 结构：

样式如下：

.content 内是我们的主要内容，好了，现在想象一下，如果父元素 .rotate 进行正向 linear 360° 旋转，最外层的父级元素 .reverseRotate 进行反向 linear 360° 旋转，效果会是啥样？

CSS 代码如下：

我们可以得到这样一种动画（注意，下图是 GIF 不是 PNG）：

神奇！因为一正一反的旋转，且缓动函数一样，所以整个 .content 看上去依然是静止的！注意，这里整个 .content 静止的非常重要。

有读者看到这里就要骂人了，作者你个智障，静止了不就没动画了吗？哪来的动画技巧？

别急！虽然看上去是静止的，但是其实祖先两个元素都是在旋转的！这会看上去风平浪静的效果底下其实是暗流涌动。用开发者工具选取最外层祖先元素是这样的：

既然如此，我们继续思考，如果我在其中旋转的一个父元素上，添加一些别的动画会是什么效果？想想就很刺激。

首先，我们先给这几个元素添加 CSS 3D 转换：

接着，尝试修改上面的旋转动画，在内层旋转上额外添加一个 rotateX：

效果如下：

Wow，这里需要好好理解一下。由于内容 .content 层是静止的但其实外层两个图层都在旋转，通过设置额外的 rotateX(40deg)，相当于叠加多了一个动画，由于正反旋转抵消了，所有整个动画只能看到旋转的 rotateX(40deg) 这个动画，产生了上述的效果。

这样，在没有 JavaScript 介入的情况下，我们就模拟了题图所示的 3D 效果。当然，仅仅是这样，与用户的联动是不够的，如果一定要结合鼠标移动，我们就需要 JavaScript 的一些辅助了。

我们的目标是实现这样一个动画效果：

这里，我们其实有两个核心元素：

1. 鼠标活动区域
2. 旋转物体本身

鼠标在鼠标活动区域内的移动，会影响旋转物体本身的 3D 旋转，而旋转的方向其实可以被分解为 X 轴方向与 Y 轴方向。

我们来看一下，假设我们的 HTML 结构如下：

得到这样一个图形：

这里，body 的范围就是整个鼠标可活动区域，也是我们添加鼠标的 mousemove 事件的宿主 target，而 #element 就是需要跟随鼠标一起转动的旋转物体本身。

因为整个效果是需要基于 CSS 3D 的，我们首先加上简单的 CSS 3D 效果：

效果如下：

没有什么不一样。这是因为还没有添加任何的 3D 变换，我们给元素添加 X、Y 两个方向的 rotate() 试一下（注意，这里默认的旋转圆心即是元素中心）：

效果如下，是有那么点意思了：

好，接下来，我们的目标就是通过结合 mouseover 事件，让元素动起来。

当然，为了更加容易理解，我们把动画拆分为 X、Y 两个方向上的移动。首先看 X 方向上的移动：

这里，我们需要以元素的中心为界：

1. 当鼠标在中心右侧连续移动，元素绕 Y 轴移动，并且值从 0 开始，越来越大，范围为(0, +∞)deg
2. 反之，当鼠标在中心左侧连续移动，元素绕 Y 轴移动，并且值从 0 开始，越来越小，范围为(-∞, 0)deg

这样，我们可以得到这样一个公式：

rotateY = (鼠标 x 坐标 – 元素左上角 x 坐标 – 元素宽度的一半)deg

通过绑定 onmousemove 事件，我们尝试一下：

效果如下：

好吧，旋转的太夸张了，因此，我们需要加一个倍数进行控制：

通过一个倍数约束后，效果好了不少：

同理，我们利用上述的方式，同样可以控制 Y 方向上的移动：

效果如下：

当然，在这里，我们会发现方向是元素运动的方向是反的，所以需要做一下取反处理，修改下 calcX 的值，乘以一个 -1 即可：

OK，到这里，我们只需要把上述的结果合并一下即可，同时，上面我们使用的是 onmousemove 触发每一次动画移动。现代 Web 动画中，我们更倾向于使用 requestAnimationFrame 去优化我们的动画，确保每一帧渲染一次动画即可。

完整的改造后的代码如下：

至此，我们就能简单的实现题图所示的鼠标跟随 3D 旋转动效：

现在，还有最后一个问题，就是当我们的鼠标离开活动区域时，元素的 transform 将停留在最后一帧，正确的表现应该是复原到原状。因此，我们还需要添加一些事件监听做到元素的平滑复位。

通过一个 mouseleave 事件配合元素的 transition 即可。

至此，我们就可以完美的实现平滑出入，整体效果最终如下：

文章来自https://www.cnblogs.com/coco1s/p/16194072.html

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com