网页精美动效/动画制作 按钮鼠标悬浮动效的注意点 02《炫彩网页 iVX 无代码动效/动画制作》

一、按钮动效的使用

在上一节中，我们创建了一个动效，但是并没有使用，在此我们给按钮设置一个悬浮事件，当鼠标悬浮在按钮之上后就调用该动效，点击按钮添加事件：

在这里插入图片描述

点击按钮添加事件后将会出现一个事件编辑框，在事件编辑框中，选择触发时间为鼠标移入：

在这里插入图片描述

随后使用箭头选择对应的动效对象：

在这里插入图片描述

随后在选择动作时对应的选择重新播放即可：

在这里插入图片描述

此时将会出现一个回调时间，并不用理会：

在这里插入图片描述

最后点击预览按钮即可：

在这里插入图片描述

二、动效需要注意的情况

此时我们预览后发现效果如下：

请添加图片描述

此时发现动效是有了，但是移动的感觉不是很对，我们再到这个按钮周围添加对应的按钮查看一下效果：

在这里插入图片描述

效果如下：

请添加图片描述

接着我们查看绝对项目下的动效使用。

三、绝对定位下动效使用

首先我们将之前的步骤在绝对定位下进行重做，如下效果，或者将之前的动效上传即可：

在这里插入图片描述

接着重新设定按钮并且给予事件：

在这里插入图片描述

此时效果如下（当时录制有点卡画面有点丢帧）：

请添加图片描述

有些同学可能是如下情况：

请添加图片描述

这是由于该组件的原点（绘制点需要设置，默认是左上角），此时更替为中心即可，点击按钮，在属性面板中找到中心点，设置为垂直与水平都在 50% 处即可：

在这里插入图片描述

三、优化动效

此时我们发现，当前的按钮会自动缩回原来的大小，此时我们该如何保持大小呢？我们只需要使用事件即可更改：

在这里插入图片描述

在这里只需要在动效播放完毕后，在对应的动作中设置当前按钮的宽高即可，预览之后效果如下：

请添加图片描述

此时当鼠标移出并不会使其大小恢复，只需要增加一个动效，设置鼠标移出时返回其大小即可，首先编辑动效，设置初始关键帧为变化时的宽高：

在这里插入图片描述

接着设置最后一个关键帧为第一次鼠标悬浮进入第一次按钮时的宽高：

在这里插入图片描述

接着选择按钮添加事件：

在这里插入图片描述

在鼠标移出事件中使用鼠标悬浮出的按钮的动效即可：

在这里插入图片描述

此时效果如下：

请添加图片描述