addToDOM = function(){
var self = this,
view = self.getView(), //获取底层div
style = view.style;
document.body.appendChild(view); //将底层div添加到body中
style.left = '0';//因为 HT 默认将组件的position设置为absolute 所以要设置位置
style.right = '0';
style.top = '0';
style.bottom = '0';
window.addEventListener('resize', function () { self.iv(); }, false);//窗口大小变化触发事件，调用最外层组件invalidate（即iv）函数进行更新。
}
现在刷新页面，你会看到一片空白，为什么？因为前面设置节点的大小为 0 啊，怎么会显示，这个 Demo 的效果就是从无到有，又从有到无。那接下来看看如何“从无到有”。
文本动画
就像我刚刚说过的，要想让节点显示，肯定是需要设置节点的大小为我们肉眼可视的范围才会出现，但是我的目的不仅是从无到有，也是从小到大，这个能够一气呵成么？感觉好像代码内容简单，但是代码量却不小的一个任务，我定义了一个函数用来将节点从无到有，从小到大：
function setSize(node) {
if(node) {
var s = 80,
size = node.getSize().width;//获取节点当前的大小中的宽度，因为我知道宽高都是一样的，所以简写了
var sw = s - size;
ht.Default.startAnim({//HT 封装的动画函数，内容也是 JSON 格式的对象
duration: 1000,// 动画周期毫秒数
easing: function(t) { return t*t },//动画缓动函数
action: function(v, t) {//action函数必须提供，实现动画过程中的属性变化 第一个参数v代表通过easing(t)函数运算后的值，t代表当前动画进行的进度[0~1]，一般属性变化根据v参数进行
node.setSize(//设置节点的大小 (有一个缓动的过程 通过 sw*v 实现的)
size + sw*v,
size + sw*v
);
}
});
}
}
从大到小，从有到无的过程也跟上面类似，我就不赘述了。
要让这些字母按照时间的先后顺序出现和消失，肯定需要用到 setTimeout 方法，要想实现一次的显示消失是非常容易的，但是我在实现的过程掉到了 setTimeout 的一个陷阱中，只能说自己学艺不精吧。因为我们需要给不同的字母设置不同的出现和消失时间，一般比较简单的方法就是设置一个固定的值，然后乘以对应节点专属的 index：
function animateIn() {
for(let i = 0; i < arr.length; i++) {
var name = 't' + arr[i];
animateLetterIn(window[name], i);//这个部分设置动画
}
}
可是如果我直接在 for 循环中设置 setTimeout 的时间为动态变化的，那么这个动态变化的值肯定是只取 for 循环的最后一个值，所以我将 setTimeout 的方法抽取出来作为一个单独的函数：
function animateLetterIn(node, i) {
setTimeout(function() {
setSize(node);
}, i * 200);//这时候这个 i 取的就是节点对应的 i 而不是最后一个值了
if(i === arr.length - 1) {//当节点为最后一个节点时，设置节点淡出动画
setTimeout(function() {
animateOut();//节点淡出动画
}, (arr.length + 3) * 200);
}
}
节点淡出动画也是类似的方法，只是需要循环调用这些动画函数，这样才能做到无限循环字母的大小控制。