Home Sign Up Sign In
gkiwi

sublimetext 首页动画制作原理

  •   
  •   gkiwi · Apr 23, 2015 · 3074 views
    This topic created in 4087 days ago, the information mentioned may be changed or developed.
    刚刚看canvas相关,结果了解到这个:
    http://www.zhihu.com/question/20449279
    大概意思就是找图这些帧图片间的不同,然后切割出来拼出一张新的图片,在html通过js反向解析渲染.
    思路极佳,棒极了!

    英文介绍文章:http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.html
    对应lib库:https://github.com/sublimehq/anim_encoder

    跑了下例子,13张70kb的图,拼接后大概有131KB的大小,还是蛮划算的!
    同时作者提供了一个抓图的功能,全套就齐备了:)
  • 70kb
  • 131kb
  • 齐备
    7 replies  •  2015-05-10 05:43:47 +08:00
    Septembers
        1
    Septembers  
       Apr 23, 2015
    抓图可用屏录软件录制下来，然后再利用ffmpeg导出成png序列
    NemoAlex
        2
    NemoAlex  
       Apr 24, 2015
    这是3年前的事情啦
    现在其实不用管那些老浏览器，直接用 Video 就好啦
    gkiwi
        3
    gkiwi  
    OP
       Apr 24, 2015
    @Septembers
    库里自带啦:)

    @NemoAlex
    嗯嗯.其实这个还有个好处就是文件小(不确定video压缩起来会咋样),不过现在的带宽都还不错,这个影响都不算不太大了:)
    Septembers
        4
    Septembers  
       Apr 24, 2015   ❤️ 1
    @gkiwi
    刚刚测了下用ScriptPNG对最终的example_packed.png可压缩到32KiB
    整体发布的整体大小在40KiB以内
    gkiwi
        5
    gkiwi  
    OP
       Apr 24, 2015
    @Septembers

    http://css-ig.net/scriptpng 这个么?暂时打不开.
    不过看到其他资料了,学习了:)

    @NemoAlex 也来瞅瞅这个:)
    Septembers
        6
    Septembers  
       Apr 24, 2015
    @gkiwi 恩 我是使用的"[8] PNG8+A"选项
    eeeeeeve
        7
    eeeeeeve  
       May 10, 2015
    @NemoAlex 现在没有必要用那种方法了么？
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1171 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 23:22 · PVG 07:22 · LAX 16:22 · JFK 19:22
    ♥ Do have faith in what you're doing.