基本的动画效果包括以下几种:

  • 运动(改变值例如 left、right、width、height、opacity)
  • 缓冲运动
  • 多物体运动
  • 任意值变化
  • 链式运动
  • 同时运动

简单动画

简单的动画效果直接通过改变元素的属性即可,下面的例子要实现一个动画效果,当鼠标移动到分享按钮时,元素框会向右移动,当鼠标移开时,元素框还原到原来位置。思路是通过设定定时器改变元素的属性值,当属性值达到期望的效果时删除定时器。

See the Pen js 基本运动 – 简单运动 by FengChenming (@koromon) on CodePen.

这里需要注意的是对定时器的清除:

因为定时器可以一直叠加,如果我们在对象进行运动的同时再次触发移入事件,会造成多个定时器叠加,因此每次触发移入事件要先清除定时器。

缓冲动画

缓冲动画和简单动画的思路是一致的,唯一的区别就是会有变速的效果,因此需要添加一个会变化的变量控制动画速度。在本例中会不断变化的值就是要改变的属性值和最终值之间的差距。需要修改的代码如下:

See the Pen js 基本运动 – 缓冲运动 by FengChenming (@koromon) on CodePen.

多物体动画

多物体动画即多个物体一起运动,实现方法和上面的例子类似,但要注意的是,如果我们直接为每个物体添加动画,会导致以下情况发生:

多物体运动

可以发现当同时触发多个物体运动时,会导致动画效果无法正常运作。关键点在于定时器的设置,在前面的例子中我们是这样清除定时器的:

这意味着每个对象都拥有相同的定时器,当新的对象运动时,即使旧的定时器还未完成任务也会被清除。因此我们需要辨别不同对象的定时器。我们给不同的对象设置定时器即可:

See the Pen js 基本运动 – 多物体运动 by FengChenming (@koromon) on CodePen.

任意值变化

现在我们的基本动画框架已经差不多实现了,但是动画效果有很多种,宽、高、透明度等,如果为每个效果都重写一次方法无疑是很浪费的,接下来让我们来完善我们的框架:

要适配多种属性,需要先给函数添加一个新的属性参数

然后我们把函数里面之前的固定属性都替换为参数值 attr。

但是基本动画中透明度和其他位置动画是有一定区别的,因为透明度是没有 px 的,因此在函数中需要新增 if else 判断。

获取透明度

改变透明度

See the Pen js 基本运动 – 任意值变化 by FengChenming (@koromon) on CodePen.

链式动画

链式动画即当元素完成一个动画后立即完成下一个动画,换句话说就是元素依次完成不同的动画,也就是当前动画完成后执行下一个动画,即清除当前定时器后执行下一段动画。

参考以下代码:

完善后的代码如下:

See the Pen js 基本运动 – 链式运动 by FengChenming (@koromon) on CodePen.

同时运动

同时运动即一个元素在实现某个动画的同时实现另外一个动画,比如长宽透明度同时变化等。这里我们需要使用到 JSON 格式传递数据。关于 JSON 的简单介绍可以参考维基百科或者百度百科

和多物体运动的思路类似,此时我们需要给同一个元素传递不同的运动属性,使用 forin 循环配合 JSON 即可实现。

首先需要修改函数参数

在定时器内循环 JSON 为每个动画属性赋值

修改上面两步后我们发现动画效果还有点小瑕疵,查看元素时会发现多个动画效果可能只有一个达到最终值,其余的动画效果可能均未实现最后效果。因为我们判断定时器的清除是按照是否完成动画效果来判断的,如果第一个动画效果完成后就会清楚定时器,但是同时运动时我们会有多个动画效果,因此需要等到最后一个效果完成才清楚定时器。

解决思路是创建一个 json1 变量深拷贝传入的 json,每当完成一个动画就删除 json1 中的属性值,然后判断 json1 中的元素个数,若为 0 即可清楚定时器。

See the Pen js 基本运动 – 同时运动 by FengChenming (@koromon) on CodePen.

至此为止,一个简单的 JS 动画框架就完成了。

动画实例

下面是一个利用刚才完成的框架实现动画效果的例子:

See the Pen js 基本运动 – 简单的实例 by FengChenming (@koromon) on CodePen.

总结

要用 JS 实现基本的动画效果,有几点需要留意:

  • 定时器的设定和清除时机
  • 对运动属性的获取和设置
  • 对于公共属性需要判断其所属的对象
  • JSON 对象的设置

当然,通过 JQuery 和 CSS3 能够更加快速的实现动画效果,但是不仅仅是知道怎么用,也要对其基本实现有个大概了解,而通过上面的几个基本例子,相信大家对动画效果的实现思路也有了大概的理解。

发表评论

电子邮件地址不会被公开。 必填项已用*标注