jQuery 1.9.1源码分析系列（十五）动画处理之缓动

在 jQuery 1.9.1 版本中，关于动画处理的核心组件 —— Tween 的相关源码分析具有极高的学习价值。对于那些热爱、研究源码的朋友们，以下是一些有关动画处理中 Tween 的核心内容的分享。

在 jQuery 的 Animation 内部函数中，createTweens() 方法被用来创建缓动动画组。这个方法的执行结果是一组原子动画的集合，每个原子动画都包含了其特定的信息。当我们深入 createTweens 函数时，我们发现它实际上遍历并调用了 tweeners数组中定义的函数。值得注意的是，这个数组中的函数并不是随意定义的，而是根据特定的属性动画需求进行设置的。

当我们查看 tweeners 数组中的函数时，我们发现它们主要负责处理动画过程中的数值变化。这些函数会获取动画的起始值、结束值以及单位等关键信息，然后通过迭代计算来生成平滑的过渡效果。其中有一个重要的函数，它负责处理除隐藏和显示动画之外的其他动画类型。这个函数通过封装动画组的关键数值如起始值、结束值和单位等，来实现对动画过程的控制。在这个过程中，还涉及到一些关键的计算步骤，如计算动画的迭代次数、调整动画的数值等。

这个函数的逻辑非常清晰，首先通过属性的值来获取结束值和单位。然后根据单位的不同，选择不同的处理方式。如果是像素单位，那么处理过程相对简单；如果是非像素单位，那么需要进行一系列的迭代计算来得到平滑的过渡效果。在这个过程中，通过不断地调整动画的数值，直到达到最终的动画效果。该函数还处理了一个重要的逻辑，即判断动画是否为相对动画。如果是相对动画，那么在计算动画数值时需要考虑动画的起始值和增量。

Tween 是 jQuery 动画处理中的核心组件之一，它负责生成平滑的动画效果。通过对源码的分析，我们可以深入理解其工作原理和流程，这对于我们更好地使用 jQuery 进行动画开发具有非常重要的指导意义。希望这篇文章能为大家带来一些启发和帮助。对于获取非像素单位的动画start值，我们确实经历了一番努力。在此过程中，一个关键步骤是使用了`this.createTween`来获取单个css属性的基础动画特征。实际上，在`animation.createTween`中，我们直接调用了jQuery.Tween来处理这些特征。接下来，让我们深入一下其中的细节。

jQuery.Tween的

我们看到`jQuery.Tween`的结构与jQuery非常相似。它是一个函数，其设计类似于一个构造函数，用于创建动画对象。这个对象包含了一些属性和方法，用于处理动画的各个阶段。其中，`init`方法是创建动画对象的主要入口点。

在`init`方法中，我们可以获取到动画元素的当前状态（start值），并设置动画的其他参数，如持续时间、缓动函数等。还有一个重要的方法`cur()`，用于获取当前css属性的值。这个方法的实现依赖于预先定义的钩子函数（hooks）。这些钩子函数可以让我们定制动画的行为，例如获取和设置特定的css属性值。

动画的核心处理过程

在动画处理过程中，最核心的两个步骤是：

1. 计算动画的当前进度和位置

这一步主要是根据动画的持续时间、缓动函数和当前时间计算出动画的进度和位置。如果设置了动画时长，我们使用jQuery的easing功能来计算缓动效果；否则，直接使用当前的百分比作为进度。然后，根据进度计算出当前动画的位置。

2. 设置css属性值

根据计算出的当前进度和位置，我们设置相应的css属性值。这一步也是通过之前定义的钩子函数来实现的。如果定义了特定的钩子函数，我们使用这些函数来设置属性值；否则，使用默认的钩子函数来设置。这一步是整个动画过程中最关键的部分之一，因为它直接影响到动画的最终效果。通过设置css属性值，我们可以控制元素的外观和行为在动画过程中的变化。同时注意到创建缓动动画组是整个动画的核心环节。每一个原子动画都包含了关于原子css属性动画的各种必要参数以及动画函数。这些参数和函数共同协作，使得动画能够按照预期的方式运行。值得注意的是隐藏和显示操作默认创建了包含所有属性的缓动动画组（默认单位均为像素），而其他类型的动画则在调用createTweens时创建缓动动画组。这保证了不同类型的动画都能得到恰当的处理方式以实现预期效果。jQuery.Tween的设计使得我们能够灵活地处理各种复杂的动画效果并赋予它们流畅而吸引人的表现方式。重温jQuery的动画世界：理解缓动动画核心Tween的实现

回想我们在创建动画时遇到的tick函数，这个函数在每个设定的时间间隔被调用一次。它的核心任务是什么呢？

当我们深入jQuery的源码，可以看到tick函数的主要职责是遍历所有的动画元素，并调用它们的run函数来执行动画。每一个原子动画都有自己的run函数，这是在创建缓动动画组时就设定好的。

现在，让我们梳理一下动画的核心流程：

1. 根据提供的参数，我们首先通过jQuery.speed方法获取动画的相关参数。这会返回一个包含完成回调、持续时间、缓动效果和动画队列等信息的对象。我们生成一个动画执行函数doAnimation，并将其压入队列立即执行。

2. 在doAnimation函数中，我们创建一个延时对象，并使用其promise方法构建一个动画对象animation。这个animation对象包含了动画的所有特征，并为其添加了完成后的回调函数。

3. 然后，我们使用jQuery的内部函数proFilter来修正css特征名，使其能被当前浏览器识别。某些复合的css特征（如padding）会被分解成更具体的部分。

4. 接下来，defaultPrefilter函数对动画的前提条件进行修正。例如，对于height和width的动画，我们需要确保display和overflow的值是正确的。特别值得一提的是，对于show和hide动画，我们会在defaultPrefilter中直接调用animation.createTween来为每一个CSS动画属性添加对应的缓动动画对象。

5. 除了show和hide动画，我们还会为其他的动画特征创建缓动动画对象。这些对象包含了动画参数和run函数，并被添加到animation.tweens中。

6. 启动动画计时器后，在每个时间点都会调用tick函数。这个函数会根据当前的进度百分比（通过计算得出）来设置相应的css特征值，从而刷新动画的显示。

那么，这个百分比的进度是如何计算的呢？其实很简单，它基于动画的剩余时间和总时间的比例来计算。通过这种方式，我们可以确保动画的每一帧都是基于时间规律的。

当动画完成后，我们会调用动画的完成回调。

以上就是关于jQuery 1.9.1源码中动画处理之缓动动画核心Tween的全部内容。如果你有任何问题或想法，欢迎与我联系。我将尽我所能为你解答。这是长沙网络推广为大家分享的内容，希望对你有所帮助。

（本文结束）有问题欢迎留言交流，我会尽快回复。通过cambrian.render('body')结束本文的渲染。