-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathhow.html
126 lines (113 loc) · 6.61 KB
/
how.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="keywords" content="iSparta,PNG,APNG,WebP,格式转换,有损压缩" />
<meta name="description" content="iSparta－PNG压缩与格式转换工具" />
<meta name="author" content="jeakeyliang" />
<title>iSparta－PNG压缩与格式转换工具</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="img/favicon.ico" />
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=38517185" charset="UTF-8"></script>
</head>
<body>
<div class="wrapper inner-wrapper">
<div class="header">
<div class="logo">
<img src="img/logo.png"/>
<h1>iSparta</h1>
<p>PNG压缩与格式转换工具</p>
</div>
<div class="nav">
<a href="index.html">首页</a>
<a href="how.html" class="on">PNG如何转换为APNG</a>
<a href="apngviewer.html">APNG在线查看器</a>
<a href="https://github.com/iSparta/iSparta">Github</a>
</div>
</div>
<div class="content">
<div class="row">
<div class="how-area clearfix">
<div class="how-bd">
<h3>一、下载iSparta</h3>
<div class="content">
<p>在此链接：<a href="https://github.com/iSparta/iSparta/releases">https://github.com/iSparta/iSparta/releases</a> 下载对应电脑系统的 iSparta ，也可以通过本文档附带的“iSparta安装包”来获取，并安装好。目前支持windows、mac、linux 三个系统版本。安装后打开iSparta。</p>
<p>
<img src="pic/1.png">
</p>
</div>
<h3>二、导入文件</h3>
<div class="content">
<ul>
<li>
<p>1、文件序列化：将需转换的每一帧PNG（每一帧的图片尺寸必须相同）的文件名按照序列来命名（如xxx01.png、xxx02.png、xxx03.png…xxx11.png）。注：数字的位数要保持一致，比如有15帧，第一帧的数字应该是01，以此类推
</p>
<p>
<img src="pic/2.png">
</p>
</li>
<li>
<p>导入文件：将序列化好的文件（或者包含序列化好的文件的文件夹）拖到 iSpata 面板，或者直接点击面板中心区选择目录。</p>
<p>
<img src="pic/3.png">
</p>
<p>
<img src="pic/4.png">
</p>
</li>
</ul>
</div>
<h3>三、 参数配置</h3>
<div class="content">
<p>把 png 图片拖进去后，“输出设置”面板也就是下图的 A 区会自动出现，也可以手动点击右下角的设置icon，也就是下图的 B 区打开。可配置参数为：帧频（默认26帧/秒）、循环次数（默认无限循环）、输出文字、输出格式、压缩质量（默认为80%）。</p>
<p>（1） 这些配置项更改后均会保存起来，下次打开应用程序时会恢复上一次的设置。</p>
<p>（2）其中，压缩比越高输出的质量越好，如果对输出的图片质量不满意，可以尝试修改压缩比来提高输出的图片质量。</p>
<p>（3）如果某些帧之间需要延时，可以将需要延时的帧图片复制几张（按延时长短决定复制数量），然后再重新按序列命名图片。</p>
<p>（4）输出目录默认是在每帧 png 图片所在的目录。也可以通过点击 C 区重新选择输出目录。</p>
<p>
<img src="pic/5.png">
</p>
<p>
<img src="pic/6.png">
</p>
</div>
<h3>四、 输出</h3>
<div class="content">
<p>点击“开始”按钮，转换过程会花费一定的时间，请耐心等待。面板会提示转换进度。</p>
<p>
<img src="pic/7.png">
</p>
<p>
<img src="pic/8.png">
</p>
</div>
<h3>五、 查看</h3>
<div class="content">
<p>在相应的输出目录找到输出的APNG图片，使用firefox浏览器打开该图片即可看到图片动态效果。</p>
<p>或者使用浏览器（chrome）打开<a href="apngviewer.html">APNG在线查看器</a>，将生成的apng图片拖入即可查看。</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="author-area claerfix">
<h3>作者:</h3>
<p><span>[email protected]</span></p>
<p><span>[email protected]</span></p>
<p><span>[email protected]</span></p>
</div>
</div>
<div class="copyright"></div>
</div>
<div class="bg">
<img src="img/bg.jpg">
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>