炫酷的样子.
https://events.google.com/io2016/ 这种倒计时怎么做到的? 有大神详细的解释一下吗?
This topic created in 3900 days ago, the information mentioned may be changed or developed.
 |
zikiMar 2, 2016
1
这种应该是 canvas 画的，设计 0-9 这 10 个数字就行了，然后根据时间去填
|
 |
easingMar 2, 2016
2
太难看了
|
 |
hronroMar 2, 2016
3
那个动态变换的动画，怎么做的
|
 |
learnshareMar 2, 2016
4
<countdown-timer> 数字是 SVG 的图形，绘制是 Canvas 来做的，麻烦一点的就是动画和变形
|
 |
ExinMar 2, 2016
5
变形的实现想不通啊，真是高端
|
 |
lihua1358Mar 2, 2016
6
主要问的就是变形的效果是怎么实现的，还有跑马灯效果，很厉害的样子
|
 |
SilentDepthMar 2, 2016
7
为什么 0 、 1 、 8 是平面的而其他是立体的
|
 |
ScienceMar 2, 2016
8
@SilentDepth 同问~~
|
 |
endlessroad1991Mar 2, 2016
9
@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 ） |
|
learnshareMar 2, 2016
10
@endlessroad1991 代码量不小，可以挖一下基本思路，然后自己尝试实现。
|
 |
glongzhMar 2, 2016
11
@SilentDepth 估计是要一条封闭线来画吧
|
|
hronroMar 2, 2016
12
@endlessroad1991 我想请教一下，如何 debug 找到具体是哪一行代码在 update canvas 的？
|
Select Language