这是一个创建于 3520 天前的主题，其中的信息可能已经有所发展或是发生改变。
炫酷的样子.
https://events.google.com/io2016/ 这种倒计时怎么做到的? 有大神详细的解释一下吗?
 | 1 ziki 2016-03-02 09:36:51 +08:00 这种应该是 canvas 画的，设计 0-9 这 10 个数字就行了，然后根据时间去填 |
 | 2 easing 2016-03-02 09:44:54 +08:00 太难看了 |
 | 3 hronro 2016-03-02 10:07:47 +08:00 那个动态变换的动画，怎么做的 |
 | 4 learnshare 2016-03-02 10:25:42 +08:00 <countdown-timer> 数字是 SVG 的图形，绘制是 Canvas 来做的，麻烦一点的就是动画和变形 |
 | 5 Exin 2016-03-02 11:20:17 +08:00 变形的实现想不通啊，真是高端 |
 | 6 lihua1358 2016-03-02 11:40:41 +08:00 主要问的就是变形的效果是怎么实现的，还有跑马灯效果，很厉害的样子 |
 | 7 SilentDepth 2016-03-02 12:40:05 +08:00 为什么 0 、 1 、 8 是平面的而其他是立体的 |
 | 8 Science 2016-03-02 13:12:24 +08:00 @SilentDepth 同问~~ |
 | 9 endlessroad1991 2016-03-02 13:12:54 +08:00 @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 ） |
| 10 learnshare 2016-03-02 13:26:36 +08:00 @endlessroad1991 代码量不小，可以挖一下基本思路，然后自己尝试实现。 |
 | 11 glongzh 2016-03-02 13:37:36 +08:00 @SilentDepth 估计是要一条封闭线来画吧 |
| 12 hronro 2016-03-02 14:27:29 +08:00 @endlessroad1991 我想请教一下，如何 debug 找到具体是哪一行代码在 update canvas 的？ |
Select Language