V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
ahillgian
V2EX  ›  问与答

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

  •  1
     
  •   ahillgian · 2016-03-02 09:31:58 +08:00 · 2554 次点击
    这是一个创建于 3187 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    12 条回复    2016-03-02 14:27:29 +08:00
    ziki
        1
    ziki  
       2016-03-02 09:36:51 +08:00
    这种应该是 canvas 画的,设计 0-9 这 10 个数字就行了,然后根据时间去填
    easing
        2
    easing  
       2016-03-02 09:44:54 +08:00
    太难看了
    hronro
        3
    hronro  
       2016-03-02 10:07:47 +08:00
    那个动态变换的动画,怎么做的
    learnshare
        4
    learnshare  
       2016-03-02 10:25:42 +08:00
    <countdown-timer> 数字是 SVG 的图形,绘制是 Canvas 来做的,麻烦一点的就是动画和变形
    Exin
        5
    Exin  
       2016-03-02 11:20:17 +08:00
    变形的实现想不通啊,真是高端
    lihua1358
        6
    lihua1358  
       2016-03-02 11:40:41 +08:00
    主要问的就是变形的效果是怎么实现的,还有跑马灯效果,很厉害的样子
    SilentDepth
        7
    SilentDepth  
       2016-03-02 12:40:05 +08:00
    为什么 0 、 1 、 8 是平面的而其他是立体的
    Science
        8
    Science  
       2016-03-02 13:12:24 +08:00
    @SilentDepth 同问~~
    endlessroad1991
        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 )
    learnshare
        10
    learnshare  
       2016-03-02 13:26:36 +08:00
    @endlessroad1991 代码量不小,可以挖一下基本思路,然后自己尝试实现。
    glongzh
        11
    glongzh  
       2016-03-02 13:37:36 +08:00
    @SilentDepth 估计是要一条封闭线来画吧
    hronro
        12
    hronro  
       2016-03-02 14:27:29 +08:00
    @endlessroad1991 我想请教一下,如何 debug 找到具体是哪一行代码在 update canvas 的?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2775 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 13:42 · PVG 21:42 · LAX 05:42 · JFK 08:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.