zoukankan      html  css  js  c++  java
  • 关于在SVG中如何实现gif动画的问题?

     关于在SVG中如何实现gif动画的问题?
    由于svg不支持动画,我做了个替代方法如下
    step 1:先把多帧gif分成单帧并透明化
    <image id="gif0" width=... xlink:href="data:image/gif;base64,... />
    <image id="gif1" width=... xlink:href="data:image/gif;base64,... />
    <image id="gif2" width=...xlink:href="data:image/gif;base64,...  />
    <image id="gif3" width=... xlink:href="data:image/gif;base64,... />
    ..
    step 2: 合成
    <defs>
        <g id="animegif7" transform="translate(0,0) scale(1.0, 1.0)">
            <g>
                           <use xlink:href="#gif0"/><animate attributeName="visibility" values="visible;hidden;hidden;hidden;hidden;hidden;" keyTimes="0.0;0.5;1.0;1.5;2.0;2.5" dur="3.0s" repeatCount="indefinite"/>
            </g>
            <g>
                           <use xlink:href="#gif1"/><animate attributeName="visibility" values="hidden;visible;hidden;hidden;hidden;hidden;" keyTimes="0.0;0.5;1.0;1.5;2.0;2.5" dur="3.0s" repeatCount="indefinite"/>
            </g>
            <g>
                           <use xlink:href="#gif2"/><animate attributeName="visibility" values="hidden;hidden;visible;hidden;hidden;hidden;" keyTimes="0.0;0.5;1.0;1.5;2.0;2.5" dur="3.0s" repeatCount="indefinite"/>
            </g>
            <g>
                           <use xlink:href="#gif3"/><animate attributeName="visibility" values="hidden;hidden;hidden;visible;hidden;hidden;" keyTimes="0.0;0.5;1.0;1.5;2.0;2.5" dur="3.0s" repeatCount="indefinite"/>
            </g>
        </g>
    </defs>
    step 3: 使用动画
    <use xlink:href="#animegif7"/>
  • 相关阅读:
    嵌入式Linux的启动过程
    【转载】vim 中文帮助手册的安装
    面向对象之编写驱动程序--中断(linux系统、s3c6410开发板)
    【转】DBCC IND / DBCC PAGE
    【转】索引查询 sys.dm_db_index_physical_stats
    【tag】Enum.HasFlag 方法
    【tag】Tuple 类 使用介绍
    【fixed point】柯里化(currying) C#实现
    SqlDataAdapter 批量更新 DataTable
    sqlCacheDependency 使用
  • 原文地址:https://www.cnblogs.com/frogbag/p/483140.html
Copyright © 2011-2022 走看看