炫酷的样子.
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 的?
|