Animate CC实现倒计时功能

功能背景:

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

《Animate CC实现倒计时功能》

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

1. 创建场景

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

2. 添加背景和组件

1 添加背景至场景中

《Animate CC实现倒计时功能》

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

《Animate CC实现倒计时功能》

3. 创建32帧(包含2个关键帧)

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

《Animate CC实现倒计时功能》

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目录,然后即可出现最终效果。如下:

《Animate CC实现倒计时功能》

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

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注