最近做丰田金融的第二期项目，整个场景展示使用Animate CC(简称AN)来实现。但是，其中有一个功能是实现2017倒计时。实现效果如下：

为了保持和An项目一致，功能实现在Animate CC中添加事件的方式完成。操作步骤如下：

1. 创建场景

打开An，创建Html5 Canvas，并设置场景大小：1206 x 750 (横屏)。

2. 添加背景和组件

1 添加背景至场景中

2 添加image组件，并设置对应的id

3. 创建32帧（包含2个关键帧）

在图层Layer 1上插入 32 帧，指定第 1 帧和第 32 帧为关键帧。

4. 添加帧动作

在第 1 帧添加动作，插入如下代码：

function updateReleaseDate(){
    var dateNow = new Date();
    dateNow.setHours(dateNow.getHours() + 8); //8小时时间差
    var dateEnd = new Date('2018-01-01');
    var differTime = dateEnd.getTime() - dateNow.getTime();
    if (differTime < 0) {
        clearInterval(this);
        return;
    }

    var day = parseInt(differTime / 1000 / 60 / 60 / 24, 10);//计算剩余的天数
    var hour = parseInt(differTime / 1000 / 60 / 60 % 24, 10);//计算剩余的小时数
    var minute = parseInt(differTime / 1000 / 60 % 60, 10);//计算剩余的分钟数
    var second = parseInt(differTime / 1000 % 60, 10);//计算剩余的秒数

    if (day < 10) {
        $('#day').attr('src', 'images/'+ day +'.png');
    } else {
        $('#day').attr('src', 'images/9.png');
    }


    if (hour < 10) {
        $('#h0').attr('src', 'images/0.png');
        $('#h1').attr('src', 'images/' + hour +'.png');
    } else {
        $('#h0').attr('src', 'images/'+ Math.floor(hour/10) +'.png');
        $('#h1').attr('src', 'images/' + Math.floor(hour % 10) +'.png');
    }

    if (minute < 10) {
        $('#m0').attr('src', 'images/0.png');
        $('#m1').attr('src', 'images/' + minute +'.png');
    } else {
        $('#m0').attr('src', 'images/'+ Math.floor(minute/10) +'.png');
        $('#m1').attr('src', 'images/' + Math.floor(minute % 10) +'.png');
    }

    if (second < 10) {
        $('#s0').attr('src', 'images/0.png');
        $('#s1').attr('src', 'images/' + second +'.png');
    } else {
        $('#s0').attr('src', 'images/'+ Math.floor(second/10) +'.png');
        $('#s1').attr('src', 'images/' + Math.floor(second%10) +'.png');
    }

}

lib.interval = setInterval(updateReleaseDate, 1000);

在第 32 帧添加动作，插入如下代码：

clearInterval(lib.interval);
lib.interval = -1;

其中s0、s1等对应image组件id，分别表示 秒的十位和个位。

5. 测试并发布

点击测试，并添加0-10.png、D.png至发布的images目录，然后即可出现最终效果。如下：

注意：与场景动画融合时，需要给image组件创建时间轴和补间动画，与场景一起移动和消失。