JessyInk制作SVG格式网页版动画

https://gitee.com/jmxhyz/JessyInk

http://www.timteatro.net/2010/08/12/a-tutorial-introduction-to-jessyink-presentations-in-inkscape/

使用Inkscape的插件JessyInk制作SVG格式网页版动画演示。添加了播放面板。可以基于nodejs进行远程控制。forked from https://launchpad.net/jessyink

制作幻灯片的新选择 - Inkscape + JessyInk
用过MS的PPT，会纠结于不甚专业的排版效果，特别是数学公式的插入，PPT似乎缺乏LaTeX源码的方便导入，手边有大把LaTeX现成公式却不能直接应用，这使得大多数依靠于LaTeX编辑的workflow变得相当复杂。
也用过==Beamer==，专注于内容是LaTeX的理念，但看常了会场上千篇一律的白底儿蓝色block的beamer样式，实在有些吐槽无力，有时候会希望有一些特殊效果，对这些效果，LaTeX不是不能做，而是对于模式之外的内容需要大把时间做定制，例如在beamer里画一个箭头就要考虑tikz的编码，每次编辑过后需要反复调试看效果，这其实完全违背了LaTeX专注于内容的初衷。而Presentation的重点就是抓住人的眼球，以一种最快速的方式把信息传递给观众，这种时候，一点点的eyeball candy甚至是必需的。
现在终于摸索出自己的一套幻灯片制作套路，这就是Inkscape+JessyInk。没错，Inkscape就是著名的开源矢量图编辑器，而JessyInk以前只是Inkscape的一个扩展插件，需要额外安装。JessyInk的开发者Hannes Hochreiner当年在加拿大读化工的PhD，应该比较了解用户的需求。最近Inkscape的0.48版已经把JessyInk集中到随带的扩展包中，这才使我有机会尝试新东西，一下子就体验到了JessyInk作幻灯片的快感。

基本流程其实很简单。幻灯片里的每一页其实是Inkscape中的一个个图层，只要把想添加的东西加到图层里即可。
这是一个非常好的入门练习:
A Tutorial Introduction to JessyInk: Presentations in Inkscape

Inkscape本身就是非常趁手的图形图像处理程序，其实完全堪比Illustrator，在其中做幻灯片简直是方便之至，所有的元素都可以做各种变换，小至贝塞尔曲线节点的调节，大至页面尺寸色彩透明度，各种快捷键，alignment & distribution的辅助工具，网格。当为LaTeX敲代码敲到手抽筋的时候，这种直观的简单粗暴不能不说是一种享受。

另外，其矢量图特点使得幻灯片质量很高，默认SVG的格式更是便于网络发布，幻灯片可以直接通过浏览器播放。

特别是最近的HTML5对SVG的支持增强，以及SVG中可以内嵌javascript的优势，动画效果不在话下。例如，之前有一个商业软件Preiz，颠覆了传统线性幻灯播放的套路，它的播放顺序更像是鸟瞰，从一个大的视角上俯视所需要提到的各个要点，需要的话可以深入进去，这种方式使得观众更能够抓住思维网络，宏观把握idea。这个招牌式的产品特色，在JessyInk里很容易就被实现了，正因为是矢量图，无论放大多少倍，画质都不会降低，通过对SVG图动态编码实现transform，可以zoom in/out，可以旋转，使得幻灯片惊艳无比。
例如这个：
W3C and the Social Web

Inkscape中的插件LaTeX Formula非常方便，直接插入公式，甚至可以调用其他LaTeX的宏包，理工类Presentation的必备。当然，Inkscape 内置的 LaTeX 插件只能直接生成矢量图，LaTeX 代码并不保存。如果需要经常改动，Tex Text 插件是一个更好的选择，它除了能够从 LaTeX 生成公式，还会在文件中保存原始 LaTeX ，方便二次修改。新建公式时，点击 extension -> Tex Text；修改时选中生成的公式对象，同样选择即可。

JessyInk里有一个Master模式，实际就是一个主背景模板，使得每一页都能应用这个视觉效果。

JessyInk里有Auto text，可以实现一个文本效果后，使得其他页的文本效果也一样。例如标题采用了镜面+色彩渐变+高斯羽化，指定auto text后，以后每一页都可以自动生成；或者是页号的自动生成。

JessyInk里的Effects就对应PPT里的淡入淡出，或者LaTeX Beamer包中的overlay

JessyInk里有一个动画效果，可以插入视频文件，采用了HTML5的一些特性，这个没有试过。

JessyInk里的View就是前面提到的可以无限zoom in/out 或者旋转的特效，只要指定矩形区域，指定触发的次序，一切OK

这套方法最重要的一点是免费开源，如果需要特殊效果的话，可以直接在扩展包里写入代码，加入自己想要的东西（需要了解Python，Javascript和SVG）。

当然如果需要，最终的SVG可以转化为PDF，成为传统幻灯片。
这个过程如下：
用Firefox打开生成的SVG文件，单击"e"键，会将SVG重新下载（这个新文件经过了浏览器的转化，图层分离），生成类似于*.part的文件。再次用Inkscape打开此文件，选择菜单栏中的"save as"，保存格式为选择为JessyInk zipped pdf or png，保存之（这里我改了扩展里的源码-因为我的安装路径和初始写入的路径不同），就会产生一个含PDF文件的压缩包。当然里面含很多PDF文件，每一个文件储存一个图层，个文件的文件名已经按照页序命名。为了得到单一便携的PDF文件，需要将这些储存单个图层的PDF文件整合为一个文件，Linux下一个简单方式就是使用pdftk，然后使用命令
pdftk *.pdf cat output merged.pdf
这将自动按照文件名中的序号整合，得到的就是用以播放幻灯的传统的PDF文件。

在浏览器播放幻灯片时，使用快捷键可以对幻灯片进行操作。常见快捷键为：
上下左右、page up/down键：和一般幻灯片一样，用于翻页导航
“home/end”，第一页，最后一页
“i”，可以在大纲模式与与单页幻灯模式间切换
“d”，幻灯模式与绘图模式间切换，绘图模式里可以使用光标在幻灯片上做标记。绘图模式下，1，3，5，7，9 用于改变笔触的粗细，b，c，g，k，m，o，r，w，y 用于设置笔触颜色，z 用于undo
“p”，显示进度条
“n”，临时新增一张白板，结合绘图模式可以做公式推导这样需要现场涂写的演示
“e”，导出幻灯片，介绍如上

如何在幻灯片中插入SVG动画？
例如，沿指定路径（path），移动一个对象（object）： 选择要移动的object，点击菜单栏"Edit->XML Editor"（Shift-Ctrl-X），
假定我们已经有了一个要沿着移动的路径，它的XML节点（node）为<svg:path id="my_path">，
要移动的对象假设为一个矩形（rect），它的XML节点为<svg:rect id="my_rect">
在对象<svg:rect id="my_rect">下插入一个新XML节点，输入svg:animateMotion，即表示要插入一个动画。对它插入属性：dur="10s",repeat="indefinite"，新生成的动画节点显示为<svg:animateMotion id="my_animate">
在动画节点下再插入选定的路径节点，输入svg:mpath，插入属性xlink:href="#my_path"，即指定之前设定的路径即可。

（插入节点，点击XML编辑器左上角的“new element node”，然后输入svg:animateMotion等即可； 插入属性，首先点击某XML节点，在右下角的单行文本框中输入属性名，下方的编辑框里输入属性值，按下Ctrl+Enter即可生效）

如果习惯文本编辑，亦可编辑如下例：

    <path id="my_path" style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 149.28826,291.91001 C 242.95932,346.0636 -11.708883,556.09168 263.44987,459.4934 538.60862,362.89512 545.19486,128.71746 545.19486,128.71746" inkscape:connector-curvature="0" />

    <rect
       id="my_rect" style="fill:#000080;fill-opacity:1;stroke:none"
       width="101.72092" height="116.35703" 
       x="104.64814" y="212.87506" rx="0.99285716" ry="0.85483873">
      
      <animateMotion dur="10s" repeatCount="indefinite">
        
        <mpath xlink:href="#my_path" />
      </animateMotion>
    </rect>
关于SVG的动画制作，可以参见这里：
http://wiki.inkscape.org/wiki/index.php/SVG_Animation
<a href="http://msdn.microsoft.com/zh-cn/library/ie/hh771834(v=vs.85).aspx">微软HTML5开发范例</a>
http://edutechwiki.unige.ch/en/SVG/SMIL_animation_tutorial