这是一个创建于 3223 天前的主题，其中的信息可能已经有所发展或是发生改变。
炫酷的样子.
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