ltaoo's web

模仿 velocity.js 实现 DOM 动画类库（三）

发表于  |    |   分类于

先来解决开始值与结束值单位不一致的问题。

单位转换

原理分析

假设动画元素初始宽度为300px，现在需要将其改变为50%，这就肯定需要将单位与值进行转换了，计算300px是百分之多少，或者计算50%是多少像素，这都和父容器宽度有关，所以首先是要获取到父容器了。

但是，velocity并没有获取父容器的宽度，而是将动画元素的宽度设为10%，再获取到宽度则为父容器宽度的10%，再除以10就得到比率。

用实际例子来说明，假设父容器宽度为1314px，动画元素宽度为300px，首先是将动画元素宽度设为10%后使用getComputedStyle得到宽度为131.4px，再除以10就得到13.14，最后300/1/13.14得到300px占父容器的百分比。

而这个值，恰恰是300/1314/100也能够计算得到的结果。

实际代码

OK，现在开始写代码，上面的原理对应的代码就是：

1
2
3
4
5
6
// 计算换算比率
function calculateUnitRatios (element, property) {
    const measurement = 10
    setPropertyValue(element, property, measurement + '%')
    return (parseFloat(getPropertyValue(element, property)) || 1) / measurement
}

在什么时候调用这个函数呢？

在获取到开始值与结束值的单位后，就可以判断两个单位是否相同，如果不同则计算换算比率：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 保存要改变的属性集合
let propertiesContainer = {}
for(let property in propertiesMap) {
    // 拿到开始值
    const startSeparatedValue = separateValue(property, getPropertyValue(element, property))
    let startValue = parseFloat(startSeparatedValue[0]) || 0
    const startValueUnitType = startSeparatedValue[1]
    // 结束值
    const endSeparatedValue = separateValue(property, propertiesMap[property])
    const endValue = parseFloat(endSeparatedValue[0]) || 0
    const endValueUnitType = endSeparatedValue[1]
	// 判断两个单位是否一致
    if (startValueUnitType !== endValueUnitType) {
        const ratios = calculateUnitRatios(element, property)
        startValue *= 1 / ratios
    }

    propertiesContainer[property] = {
        startValue,
        endValue,
        // 单位用结束值的单位，因为将开始值转换为了结束值相同单位的数值
        unitType: endValueUnitType
    }
}

生命周期

由于颜色动画比较复杂，所以暂时不实现颜色动画，先来增加生命周期，也就是回调函数，当动画开始前、执行中、结束后分别调用用户自定义的函数。

动画开始前

只要在tick()前（步骤4）判断配置项中是否存在begin字段，如果存在就调用。

动画开始中与动画结束都是同理，只是调用位置不同。

常用动画选项

jQuery存在预先设置好的动画函数，比如滑动slideDown显示被隐藏的元素，slideUp隐藏显示的元素等。

其实原理很简单，就是调用我们已经声明好的animation函数，将高度变为0或者恢复高度即可。