Google 2016 I/O 大会倒计时是怎么做的

[ahillgian]

炫酷的样子.
https://events.google.com/io2016/ 这种倒计时怎么做到的? 有大神详细的解释一下吗?

[ziki]

这种应该是 canvas 画的，设计 0-9 这 10 个数字就行了，然后根据时间去填

[easing]

太难看了

[hronro]

那个动态变换的动画，怎么做的

[learnshare]

<countdown-timer> 数字是 SVG 的图形，绘制是 Canvas 来做的，麻烦一点的就是动画和变形

[Exin]

变形的实现想不通啊，真是高端

[lihua1358]

主要问的就是变形的效果是怎么实现的，还有跑马灯效果，很厉害的样子

[SilentDepth]

为什么 0 、 1 、 8 是平面的而其他是立体的

[Science]

@SilentDepth 同问~~

[endlessroad1991]

@ziki @learnshare 同意:-)

画这些数字本身比较简单， inspect element 可以看到是用 canvas 画的，那个 canvas 元素上面的 svg 包含了 0-9 每个数字的 path ，画数字就是在 canvas 上画 path 。

至于变形，就是纯用 javascript 做的了。没有仔细跟着 debug ，看代码（ https://events.google.com/io2016/elements/elements.js 26333 行， IOWA.CountdownTimer.Band.prototype.update 函数），是利用变化前、变化后每个点的位置，计算出动画过程中每个点的位置，然后修改画在 canvas 上的 path 。

颜色没啥好说的，就是 path 画的时候分了很多段，每段画的时候先设置颜色（上面那个函数里有一句： ctx.strokeStyle = lastColor ）

[learnshare]

@endlessroad1991 代码量不小，可以挖一下基本思路，然后自己尝试实现。

[glongzh]

@SilentDepth 估计是要一条封闭线来画吧

[hronro]

@endlessroad1991 我想请教一下，如何 debug 找到具体是哪一行代码在 update canvas 的？