-
Notifications
You must be signed in to change notification settings - Fork 48
Expand file tree
/
Copy pathanimation.html
More file actions
383 lines (347 loc) · 15.4 KB
/
animation.html
File metadata and controls
383 lines (347 loc) · 15.4 KB
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="DragonBones,DragonBones官网,DragonBonesPro,DragonBonesPro官网,龙骨,龙骨官网,Egret,白鹭时代,Spine破解, Spine免费,动画编辑器,免费动画编辑器,骨骼动画,骨骼动画编辑器,免费骨骼动画编辑器,游戏动画制作,动漫编辑器" />
<meta name="description" content="DragonBones是白鹭时代推出的面向设计师的2D游戏动画和富媒体内容创作平台，他提供了2D骨骼动画解决方案和动态漫画解决方案。包含了集成式创作工具DragonBonesPro，Flash动画导出插件，以及支持各大平台主流引擎的运行库。实现了动画的一次制作，全平台使用。DragonBones开始于2012年10月，是全球最早的2D骨骼动画解决方案。在全球超过50个国家有超过5万名设计师用户使用DragonBones，并制作出上千款游戏上线于各大移动应用商店。">
<link rel="icon" href="favicon.ico">
<title>DragonBones 动画解决方案</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/html5media/1.1.8/html5media.js"></script>
<script src="js/jquery.typetype.min.js"></script>
<link href="css/g.css" rel="stylesheet">
<link href="css/animation.css" rel="stylesheet">
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?61a11cfe86ade3ab5dd628ba6bac4fc5";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>
<div style='margin:0 auto;width:0px;height:0px;overflow:hidden;'>
<img src="img/logo512.png" alt="DragonBones green dragon logo" width='700'>
</div>
<header class="headerDark">
<div class="container-fluid">
<h2 class="logo">
<img src="img/logo.png" alt="DragonBones logo">
</h2>
<div class="authentication">
<ul>
<li>
<a href="/cn/animation.html" style="color:#FFF;">中文</a> /
<a href="/en/animation.html">English</a>
</li>
<li style="margin-top: 10px;">
<style>
.octicon-mark-github{
display: inline-block;
vertical-align: text-top;
fill: currentColor;
padding-bottom: 2px;
}
</style>
<a href="https://github.com/DragonBones/" aria-label="Homepage" class="site-footer-mark" title="GitHub">
<svg aria-hidden="true" class="octicon octicon-mark-github" height="24" version="1.1" viewBox="0 0 16 16" width="24"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
</a>
</li>
</ul>
</div>
<div class="nav-wrap">
<ul class="group" id="example-one">
<li>
<a href="index.html">首页</a>
</li>
<li class="">
<a href="http://blog.dragonbones.com/cn/">博客</a>
</li>
<li class="current_page_item">
<a href="animation.html">动画特性</a>
</li>
<li>
<a href="comic.html">动漫特性</a>
</li>
<li>
<a href="download.html">下载</a>
</li>
<li>
<a href="learn.html" >学习</a>
</li>
<li id="magic-line" style="width: 63px; left: 0px; overflow: hidden;"></li>
</ul>
</div>
</div>
</header>
<!-- container -->
<div class="main mainHome">
<section>
<div class="videoSec">
<img style="visibility: visible; width: 100%; height: auto;" src="img/animtion/banner.png" alt="banner with laptop and creative assets" />
<div class="bgPattern"></div>
<div class="videoCon">
<div class="tableDisplay">
<div class="vCenter">
<h1>DragonBones 动画解决方案</h1>
<div class="des">
<p>全球最早的2D骨骼动画解决方案</p>
<p>打通游戏动画设计和开发工作流</p>
<p>更少的美术成本 更生动的动画效果</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="one">
<div class="container">
<div class="oneimg1 col-md-6" style="text-align: -webkit-center;">
<img src="img/animtion/2.png" alt="avatar system"/>
</div>
<div class="col-md-6">
<div class="content">
<h3>轻松动态换装</h3>
<div class="des">
<p>动画角色中的任何图片,</p>
<p>都是可以通过一行代码在运行时替换的，</p>
<p>轻松实现动态换装的功能。</p>
</div>
</div>
</div>
<div class="col-md-6">
<img src="img/animtion/2.png" alt="avatar system"/>
</div>
</div>
</section>
<section class="two">
<div class="container">
<div class="col-md-6">
<img src="img/animtion/1.png" alt="robot warrior animation with modular art assets"/>
</div>
<div class="col-md-6">
<div class="content">
<h3>美术需求更少</h3>
<div class="des">
<p>只保存各部分切图组成的纹理集和动画数据，</p>
<p>只需要极少的原画，便可完成千变万化的动作动画组合。</p>
<p>在动画制作时，只需要完成对关键帧的编辑，通过动画补间，</p>
<p>便可自动生成流畅的动画动作。</p>
</div>
</div>
</div>
</div>
</section>
<section class="three">
<div class="container">
<h2>更多功能</h2>
<div class="">
<div class="texing22 texing">
<div class="row">
<style>
.dbmoreItem{
padding-bottom: 25px;
}
</style>
<div class="col-xs-12 col-md-4 dbmoreItem">
<div class="texing1">
<img src="img/animtion/more/1.png" alt="DragonBones tool showing pivot on bones">
<span class="gongneng-name"> 骨骼操作</span>
<div class="gongneng-span-name">
<span class="span-name2">为图片绑定骨骼制作动画，制作角色动作更方便，动作更逼真，动画更流畅。</span>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 dbmoreItem">
<div class="texing1 center-block">
<img src="img/animtion/more/2.png" alt="movie clip example">
<span class="gongneng-name"> 基本动画项目</span>
<div class="gongneng-span-name">
<span class="span-name2">
基本动画适合制作广告营销类的动画，支持补间动画和序列帧动画，操作简单，所见即所得。
</span>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 dbmoreItem">
<div class="texing1">
<img src="img/animtion/more/3.png" alt="timeline for animation">
<span class="gongneng-name"> 时间轴</span>
<div class="gongneng-span-name">
<span class="span-name2">时间轴是动画制作的核心，这里可以宏观的调节各个元件动画的关键帧，调节播放速度、动画补间等细节。</span>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 dbmoreItem">
<div class="texing1">
<img src="img/animtion/more/4.png" alt="mesh and FFD example">
<span class="gongneng-name"> 网格和自由变形</span>
<div class="gongneng-span-name">
<span class="span-name2">在图片矩形边界内自定义多边形，提高纹理集的空间使用率。通过移动网格点来变形图片，实现网格的扭曲，拉伸，转面等伪3D效果。</span>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 dbmoreItem">
<div class="texing1">
<img src="img/animtion/more/5.png" alt="IK and Constraint">
<span class="gongneng-name"> IK骨骼约束</span>
<div class="gongneng-span-name">
<span class="span-name2">在骨骼动画中可以通过反向动力学的方式为角色摆姿势，建立反向动力学约束，使得动作的编辑操控更方便，生成的动作更自然更逼真。</span>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 dbmoreItem">
<div class="texing1">
<img src="img/animtion/more/6.png" alt="Skinning Animation">
<span class="gongneng-name"> 骨骼权重和蒙皮动画</span>
<div class="gongneng-span-name">
<span class="span-name2">将网格中的点绑定骨骼权重，骨骼的运动带动网格变形，产生图片整体的弯曲，飘动等效果。</span>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 dbmoreItem">
<div class="texing1">
<img src="img/animtion/more/7.png" alt="Curve Editor">
<span class="gongneng-name"> 曲线编辑器</span>
<div class="gongneng-span-name">
<span class="span-name2">在曲线编辑器中可以通过调整贝塞尔曲线来控制两帧之间的差值，以实现栩栩如生的动画效果。</span>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 dbmoreItem">
<div class="texing1">
<img src="img/animtion/more/8.png" alt="Onion Skin">
<span class="gongneng-name"> 洋葱皮工具</span>
<div class="gongneng-span-name">
<span class="span-name2">使用洋葱皮功能可以同时看到前后若干帧的影图，方便更加精准的调节动画细节。</span>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 dbmoreItem">
<div class="texing1">
<img src="img/animtion/more/9.png" alt="Nested Animation Symbol">
<span class="gongneng-name"> 元件嵌套</span>
<div class="gongneng-span-name">
<span class="span-name2">项目中可以创建多个动画元件并进行任意的嵌套重用。</span>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 dbmoreItem">
<div class="texing1">
<img src="img/animtion/more/10.png" alt="Import Adobe PhotoShop images with layers">
<span class="gongneng-name"> 导入</span>
<div class="gongneng-span-name">
<span class="span-name2">可以导入PS生成的分层图、DragonBonesPro和FlashPro导出的龙骨数据格式、Spine和Cocos等第三方动画格式。</span>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 dbmoreItem">
<div class="texing1">
<img src="img/animtion/more/11.png" alt="Packaging and Export">
<span class="gongneng-name"> 导出和纹理集打包</span>
<div class="gongneng-span-name">
<span class="span-name2">支持纹理集打包和JSON、XML格式的动画数据导出。支持序列图导出和Egret的MovieClip格式的动画数据导出。</span>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 dbmoreItem">
<div class="texing1">
<img src="img/animtion/more/12.png" alt="Preview and Publish">
<span class="gongneng-name"> 预览和发布</span>
<div class="gongneng-span-name">
<span class="span-name2">在真实的运行环境预览动画效果，所见及所得。一键发布H5动画，无需编码控制，动画即可在终端设备运行。</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="downDisplay">
<a sys='win' href=""><button type="button" class="btn btn-success"><img src="img/windowsicon.png"> Windows 版</button></a>
<a sys='mac' href=""><button type="button" class="btn btn-success"><img src="img/macicon.png"> Mac 版</button></a>
</div>
</div>
</div>
</div>
</section>
<section class="footer1">
<div class="container">
<div class="col-md-4 des">
<p>
<a href="http://www.egret.com/about">关于我们</a>
</p>
<p>技术支持邮箱：support@egret.com</p>
</div>
<div class="col-md-4 des">
<p>
<a href="http://www.egret.com/join">参与交流</a>
</p>
<p>官方QQ 群：530077872</p>
<p><a target="_blank" href="https://jq.qq.com/?_wv=1027&k=5ABjHo9"><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="DragonBones官方群" title="DragonBones官方群"></a></p>
</div>
<div class="col-md-4 des">
<p>
<a href="http://www.egret.com">Egret官网</a> | <a href="https://www.facebook.com/dragonbonesteam/">FaceBook</a> | <a href="https://twitter.com/dragonbonesteam">Twitter</a>
</p>
<div class="span6" style="width: 155px;width: 155px;margin: 0;padding: 0;padding-top: 5px;">
<!-- AddThis Button -->
<!--
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_preferred_5"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script async type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-50879ffb6b4eb16f"></script>
<style>
.addthis_counter.addthis_bubble_style a.addthis_button_expanded{
color: #000000;
}
</style>
-->
</div>
</div>
<div class="col-md-12" style="margin: 30px 0 10px 0; font-size:16px; color: #c1c1c1; border-bottom: 1px solid #000;border-bottom: 1px solid #353535;line-height: 2">合作伙伴</div>
<div class="col-md-12">
<div class="footer1hzhb">
<img style="width: 100%;" src="img/hzhb/partners.jpg" alt="DragonBones partners"/>
</div>
</div>
</div>
</section>
<section class="footer2">
<div class="container-fluid">
Copyright © 2012-2017 dragonbones.com
</div>
</section>
</div>
</body>
</html>
<script src="js/common.js"></script>
<script>
window.onresize = function(){
};
window.onload = function(){
ajaxJson();
};
function ajaxJson(){
$.getJSON('json/down.json',function(data){
for(var i=0;i<data.prerelease.length;i++){
var item = $('[sys='+data.prerelease[i].sys+']')[0];
if(item){
$(item).attr('href',data.prerelease[i].url);
}
}
});
}
</script>