股票场内基金交易,没时间盯盘?
基本的动画效果包括以下几种:
- 运动(改变值例如 left、right、width、height、opacity)
- 缓冲运动
- 多物体运动
- 任意值变化
- 链式运动
- 同时运动
简单动画
简单的动画效果直接通过改变元素的属性即可,下面的例子要实现一个动画效果,当鼠标移动到分享按钮时,元素框会向右移动,当鼠标移开时,元素框还原到原来位置。思路是通过设定定时器改变元素的属性值,当属性值达到期望的效果时删除定时器。
See the Pen js 基本运动 – 简单运动 by FengChenming (@koromon) on CodePen.
这里需要注意的是对定时器的清除:
1 2 |
clearInterval(timer); |
因为定时器可以一直叠加,如果我们在对象进行运动的同时再次触发移入事件,会造成多个定时器叠加,因此每次触发移入事件要先清除定时器。
缓冲动画
缓冲动画和简单动画的思路是一致的,唯一的区别就是会有变速的效果,因此需要添加一个会变化的变量控制动画速度。在本例中会不断变化的值就是要改变的属性值和最终值之间的差距。需要修改的代码如下:
1 2 3 4 5 6 |
// 6、避免动画速度过快,我们可以降低变化 var speed = (iTarget - oleft) * 0.1; // 7、因为 speed 减速后不为整数,并且会有精度丢失的情况,因此需要通过 Math 函数来取整动画速度。 // 当速度大于 0 时向上取整,避免速度取整为 0 造成无运动;反之向下取整,避免速度取整为 0 造成无运动。 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); |
See the Pen js 基本运动 – 缓冲运动 by FengChenming (@koromon) on CodePen.
多物体动画
多物体动画即多个物体一起运动,实现方法和上面的例子类似,但要注意的是,如果我们直接为每个物体添加动画,会导致以下情况发生:
可以发现当同时触发多个物体运动时,会导致动画效果无法正常运作。关键点在于定时器的设置,在前面的例子中我们是这样清除定时器的:
1 2 |
clearInterval(timer); |
这意味着每个对象都拥有相同的定时器,当新的对象运动时,即使旧的定时器还未完成任务也会被清除。因此我们需要辨别不同对象的定时器。我们给不同的对象设置定时器即可:
1 2 |
obj.timer; |
See the Pen js 基本运动 – 多物体运动 by FengChenming (@koromon) on CodePen.
任意值变化
现在我们的基本动画框架已经差不多实现了,但是动画效果有很多种,宽、高、透明度等,如果为每个效果都重写一次方法无疑是很浪费的,接下来让我们来完善我们的框架:
要适配多种属性,需要先给函数添加一个新的属性参数
1 2 |
startAnimate(obj, attr ,iTarget) |
然后我们把函数里面之前的固定属性都替换为参数值 attr。
但是基本动画中透明度和其他位置动画是有一定区别的,因为透明度是没有 px 的,因此在函数中需要新增 if else 判断。
获取透明度
1 2 3 |
// 此处未考虑 IE9 之前的兼容,乘100的原因是为了兼容下面的 speed 设置 var oAttr = getStyle(obj,attr) * 100; |
改变透明度
1 2 |
obj.style.opacity = (oAttr + speed)/100; |
See the Pen js 基本运动 – 任意值变化 by FengChenming (@koromon) on CodePen.
链式动画
链式动画即当元素完成一个动画后立即完成下一个动画,换句话说就是元素依次完成不同的动画,也就是当前动画完成后执行下一个动画,即清除当前定时器后执行下一段动画。
参考以下代码:
1 2 3 4 5 6 7 8 |
xx.onmousemove = function() { recursion(obj,attr,iTarget,function(){ recursion(obj,attr,iTarget,function(){ // code }); }); } |
完善后的代码如下:
See the Pen js 基本运动 – 链式运动 by FengChenming (@koromon) on CodePen.
同时运动
同时运动即一个元素在实现某个动画的同时实现另外一个动画,比如长宽透明度同时变化等。这里我们需要使用到 JSON 格式传递数据。关于 JSON 的简单介绍可以参考维基百科或者百度百科。
和多物体运动的思路类似,此时我们需要给同一个元素传递不同的运动属性,使用 forin 循环配合 JSON 即可实现。
首先需要修改函数参数
1 2 |
function startAnimate(obj, json, fn){} |
在定时器内循环 JSON 为每个动画属性赋值
1 2 3 |
// 添加不同的动画效果 attr 即每个属性,json[attr] 即属性值 for (var attr in 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 能够更加快速的实现动画效果,但是不仅仅是知道怎么用,也要对其基本实现有个大概了解,而通过上面的几个基本例子,相信大家对动画效果的实现思路也有了大概的理解。
想获得去掉 5 元限制的证券账户吗?

如果您想去掉最低交易佣金 5 元限制,使用微信扫描左边小程序二维码,访问微信小程序「优财助手」,点击底部菜单「福利」,阅读文章「通过优财开证券账户无最低交易佣金 5 元限制」,按照文章步骤操作即可获得免 5 元证券账户,股票基金交易手续费率万 2.5。
请注意,一定要按照文章描述严格操作,如错误开户是无法获得免 5 元证券账户的。