AE时间计时表达式 保姆级教程
异端设计
编辑于 2022年11月14日 01:31
收录于文集
共5篇

前一阵子偷懒，出了两个视频，本来认为做两个表达式模板就能满足各位小伙伴的需求，现在看来还是有很多问题，所以决定仔细写篇文章来说说时间计时表达式。

两个视频主要是模板使用说明

01:40
AE时间计时表达式
2万
0
01:31
AE时间计时表达式2.0模板
8334
1

一切的开始都源自小伙伴的一个问题

小伙伴的问题截图

贴上解决代码，0-8秒，00:00到20:30

代码块
JavaScript
自动换行
复制代码
num = Math.floor(linear(time, 0, 8, 0, 1230));
sec = num % 60;
min = Math.floor(num / 60);
if(sec<10) sec = "0" + sec;
if(min<10) min = "0" + min;
min + ":" + sec
复制成功

忘记上边的代码，让我们开始吧！！

做一个便于修改的表达式，首先把可修改的部分都定义变量。

时间数字

1、定义一个开始时间数字和结束时间数字：

代码块
JavaScript
自动换行
复制代码
// 从00:00开始 startTimeNumberArray
st = [0,0];

// 到10:30开始 endTimeNumberArray
et = [10,30];
复制成功

*如果是从00:30开始到15:40结束：

代码块
JavaScript
自动换行
复制代码
// 从00:30开始 starTimeNumberArray
st = [0,30];

// 到15:40开始 endTimeNumberArray
et = [15,40];
复制成功

PS：我用了数组的形式，主要是不想写成下面这样。当然你觉得易于阅读，也可以这样写：

代码块
JavaScript
自动换行
复制代码
// 从00:00开始 starTimeNumber
stMin = 0;
stSec = 0;

// 到10:30开始 endTimeNumber
etMin = 10;
etSec = 30;
复制成功

动画时长

2、下边来定义时间计时的时间，这里的时间是指动画时长：

代码块
JavaScript
自动换行
复制代码
// 从0秒开始 starTime
startTime = 0;

// 到8秒结束 endTime
endTime = 8;
复制成功

*如果是从时间线的1秒开始到6秒结束：

代码块
JavaScript
自动换行
复制代码
// 从1秒开始 starTime
startTime = 1;

// 到8秒结束 endTime
endTime = 6;
复制成功

最后的返回值

3、为了将时间数字都转为数字，我们需要再定义两个变量。

代码块
JavaScript
自动换行
复制代码
// 从00:00开始 startTimeNumberArray
st = [0,0];
// 到10:30开始 endTimeNumberArray
et = [10,30];

// 将开始时间数字转为数字 startNumber 返回0 —> 0*60+0=0
// st[0] = 开始时间分钟数， st[1] = 开始时间秒数
sn = st[0] * 60 + st[1];
// 将结束时间数字转为数字 endNumber 返回630 —> 10*60+30=630
// et[0] = 开始时间分钟数， et[1] = 开始时间秒数
en = et[0] * 60 + et[1];
复制成功

可能有小伙伴不懂数组和数组索引，这里简单解释一下。

代码块
JavaScript
自动换行
复制代码
// 举 个 栗 子 
// 数 组 写 法
Array = [1, 2, 3];

// 数组索引写法
Array[0] //返回1
Array[1] //返回2
Array[2] //返回3
复制成功

另外别纠结为啥索引数字从0开始，这是乌龟的屁股——规定写法。。。

0-8秒 0-630数字递增

数字递增的文章可以看下面两个

AE数字递增的表达式 保姆级教程
专栏
异端设计
2.9万阅读  81回复
【第二期】AE数字递增的表达式 保姆级教程
专栏
异端设计
4539阅读  6回复

4、定义一个数字递增的变量，利用linear()线性插值，让它动起来，用于后边向分秒去传递数据。

代码块
JavaScript
自动换行
复制代码
//定义一个递增效果的变量 0-8秒 0-630的数字递增
num = Math.floor(linear(time,startTime,endTime,sn,en));
复制成功

0-60循环

5、众所周知，就像那个笑话说的，在非洲，毎60秒，就有一分钟过去。

巧了不是

关键的来了！利用% 取模（余数），将变量num转变为秒。

代码块
JavaScript
自动换行
复制代码
//秒数 0-60循环
sec = num % 60;
复制成功

分钟直接除以60，然后对值取整。

代码块
JavaScript
自动换行
复制代码
//秒数 num模60的取余计算
sec = num % 60;
//分钟 秒除以60 （数值要取整）
min = Math.floor(num / 60);
复制成功

最后再加一句，合并输出分秒。

代码块
JavaScript
自动换行
复制代码
//秒数 0-60循环
sec = num % 60;
//分钟 秒除以60 （数值取整数部分）
min = Math.floor(num / 60);

//分 + 冒号 + 秒
min + ":" + sec
复制成功

效果如下

分秒

6、感觉不太对劲，秒数在个位数只有1位。所以我们要给它补0。

*里边的”0“是字符串类型，字符串+数字，最后转变成字符串类型，还是有点意思的。

代码块
JavaScript
自动换行
复制代码
//对sec 秒判断小于10，加0
if(sec < 10) sec = "0" + sec;
//对min 分判断小于10，加0
if(min < 10) min = "0" + min;

//分 + 冒号 + 秒
min + ":" + sec
复制成功

效果如下：

分秒 补0

最后完整代码，无注释：

代码块
JavaScript
自动换行
复制代码
st = [0,0];
et = [10,30];
startTime = 0;
endTime = 8;
sn = st[0] * 60 + st[1];
en = et[0] * 60 + et[1];
num = Math.floor(linear(time,startTime,endTime,sn,en));
sec = num % 60;
min = Math.floor(num / 60);
if(sec < 10) sec = "0" + sec;
if(min < 10) min = "0" + min;
min +":"+ sec
复制成功

7、最后的最后，回答一个小伙伴的问题：

小伙伴的问题

带2位毫秒的秒表效果，取巧直接利用toFixed保留2位小数点：

代码块
JavaScript
自动换行
复制代码
st = [0,0];
et = [30,25];
startTime = 0;
endTime = 8;
sn = st[0] * 60 + st[1];
en = et[0] * 60 + et[1];
num = linear(time,startTime,endTime,sn,en);
sec = (num % 60).toFixed(2);
min = Math.floor(num / 60);
if(sec < 10) sec = "0" + sec;
if(min < 10) min = "0" + min;
min +":"+ sec
复制成功

效果如下：

秒表效果

你也可以这样写：

代码块
JavaScript
自动换行
复制代码
//先定义速度
speed = 1;

//分
min = Math.floor((time * speed) / 60);
//秒
sec = Math.floor((time * speed) % 60);
//毫秒
ms = Math.floor(((time * speed) * 100) % 100);

//补0
if(min < 10) min = "0" + min;
if(sec < 10) sec = "0" + sec;
if(ms < 10) ms = "0" + ms;

//输出
min + ":" + sec + "." + ms
复制成功

正常速度的秒表效果

正常速度 秒表

修改speed=10的效果，相当于正常速度的10倍。

10倍速度 秒表

8、最后最后的最后，感谢各位的支持！希望这篇对各位有用！下期再见！

AE AE表达式
本文为我原创，未经授权禁止转载
cv19723932