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

单位转换

原理分析

假设动画元素初始宽度为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也能够计算得到的结果。

separateValue

这次我们先来讨论如何正确分离属性值与单位，假设要实现下面的动画，
点击动画按钮，同时改变透明度、宽度以及旋转角度。

动画的原理就是每隔一段时间改变画面，这个时间小到眼睛无法识别，所以看起来就像是画面在动。

DOM 动画也是一样的，每隔 16 毫秒就改变 DOM 的某个 CSS 属性值，比如宽度、高度透明度等等，从而实现了我们所看到的 DOM 动画。

当然实现一个 DOM 动画类库并不是很困难，但一开始就要很完善很完美就很困难了，所以我准备从最简单的入手，先实现透明度动画，再实现透明度与宽度同时动画。