https://wiki.synfig.org/api.php?action=feedcontributions&user=Zurba11&feedformat=atomSynfig Studio :: Documentation - User contributions [en]2024-03-28T09:15:30ZUser contributionsMediaWiki 1.26.3https://wiki.synfig.org/index.php?title=Advanced_Outline_Layer/ru&diff=18960Advanced Outline Layer/ru2014-01-23T15:56:50Z<p>Zurba11: /* Specific parameters for Advanced Outline Layer */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Улучшенная кривая}}<br />
{{Category|Layers}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Under construction! See {{l|Talk:Advanced_Outline_Layer|Advanced Outline Layer Talk}} page<br />
[[Image:Layer_geometry_advanced_outline_icon.png|64px]]<br />
<br />
== Что такое улучшенные кривые ==<br />
<br />
=== Отличия от контуров: Толщина кривой ===<br />
<br />
Контрольные точки ''Толщины'' определяют ширину обычной кривой в определённых местах.<br />
<br />
Обычная [[Outline Layer|кривая]] имеет ''Контрольные точки толщины'' которые связаны с вершинами кривой и определяют её форму в этих местах. Это значит что пользователь вынужден добавлять новую вершину каждый раз когда понадобится изменить толщину кривой в каком то конкретном месте. Это решение может оказаться проблематичным когда форма кривой достаточно проста, а вот её толщина меняется в широких пределах.<br />
<br />
Практика показывает что чаще всего возникает необходимость изменять толщину кривой независимо от расположения вершин на ней, именно эта функция и возложена на Улучшенную кривую ''Контрольные точки толщины'' которой устроены по другому принципу, они свободно перемещаются вдоль кривой и определяют её форму в любом произвольном месте.<br />
<br />
== Новые возможности ==<br />
<br />
Улучшенные кривые представляют новые возможности работы с кривыми которые показаны в этом видео [http://www.youtube.com/watch?v=boM_ZC9VZ54 Advanced outline demo]. Рассмотрим их подробнее ниже:<br />
<br />
<gallery widths="490px" heights="300px" perrow="2"><br />
File:Variable-width-without-blinepoints.png | Не нужно вставлять вершину для контроля толщины<br />
File:Lots-of-blinepoints-width-just-two width-controls.png | Толщина контролируется двумя конторольными точками, тогда как Кривая состоит из множества вершин<br />
File:Different-types of tips.png | Разные типы кончиков кривой<br />
File: Segments of outlines.png | Контур может быть разделён на сегменты<br />
File:Different cusps types.png | Три типа оформления углов кривой<br />
File:Smoothness control.png | Контроль плавности перехода от линейного(0.0) до плавного(1.0)<br />
</gallery><br />
<br />
==Параметры Улучшенной кривой==<br />
<br />
{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-<br />
||[[Image:Type_real_icon.png|16px]] [[Z Depth Parameter|Глубина на оси Z]]<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] [[Amount Parameter|Величина]]<br />
||1.000000<br />
||real<br />
<br />
|-<br />
||[[Image:type_integer_icon.png|16px]] [[Blend Method|Режим смешивания]]<br />
||Composite<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_color_icon.png|16px]] [[Colors Dialog|Цвет]]<br />
||<br />
{| style="width:95%; height:16px; background:black; color:black" border="1"<br />
|- <br />
|}<br />
||color<br />
<br />
|-style="background:#"<br />
||[[Image:Type_vector_icon.png|16px]] Исходная точка<br />
||0.000000u,0.000000u<br />
||vector<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_bool_icon.png|16px]] Инвертировать<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||[[Image:Type_bool_icon.png|16px]] Сглаживание<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Растушёвка<br />
||0.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Тип Растушёвки<br />
||Fast Gaussian Blur<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Обработка взаимопересечений<br />
||Non Zero<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_list_icon.png|16px]] Вершины<br />
||List<br />
||list (Spline)<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Толщина контура<br />
||2.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Расширение<br />
||0.000000pt<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Тип закругления в начале<br />
||Rounded Stop<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Тип закругления в конце<br />
||Rounded Stop<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Тип пиков<br />
||Sharp<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Плавность<br />
||0.500000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_list_icon.png|16px]] Список точек толщины<br />
||List<br />
||list(WPList)<br />
<br />
|-<br />
||[[Image:Type_bool_icon.png|16px]] Быстрая отрисовка<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_bool_icon.png|16px]] Пунктирная линия<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||[[Image:Type_list_icon.png|16px]] Список элементов пунктира<br />
||List<br />
||list(WPList)<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Dash Items Offset<br />
||0.000000u<br />
||real<br />
<br />
|}<br />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />
==Специфические параметры Улучшенной кривой==<br />
<br />
Это раздел описывает только параметры относящиеся к Улучшенной кривой, для того чтобы узнать больше об остальных параметрах обратитесь к странице [[Outline Layer|"контуры"]].<br />
<br />
* Tip Type at start<br />
* Tip Type at end<br />
* Cusps type<br />
* Smoothness<br />
* Width Point List<br />
<br />
=== Tip type at start / end ===<br />
<br />
As with width points, the end and start of the unlooped Advanced Outlines has a type of tip defined. The user can choose between the same types of tips as for a width point. When the first/last width point has its before/after interpolation type set to Interpolate the start/end of the outline is rendered using the Tip type at start/end parameter.<br />
<br />
Those parameters don't have any effect if the Spline is looped or the first/last width point has its before/after interpolation type set to anything but Interpolate. In that case, the segment between the start/end width point and the start/end of the Spline is not rendered.<br />
<br />
The types of tips are the same as the width point tip types except that it doesn't offer the Interpolate type because it would not make sense:<br />
* Rounded<br />
* Squared<br />
* Peak<br />
* Flat<br />
<br />
=== Cusps type ===<br />
<br />
There are three types of cusps in the Advanced Outline:<br />
<br />
* Sharp<br />
* Rounded<br />
* Bevel<br />
<br />
The type of cusp is controlled for the entire layer so currently it is not possible to control the type of corner individually. Maybe in future versions it will be possible.<br />
<br />
=== Smoothness ===<br />
<br />
The Smoothness controls how the width is calculated between widthpoints. The width at a position p is a function of the surrounding width points. When smoothness is zero interpolation is lineal, when smoothness is 1.0 interpolation is given by a 5th degree smooth Spline.<br />
<br />
=== Width Point List ===<br />
Each Advanced Outline has a list of parameters that represent the information for each width item. They are called Width Points and consist of four sub-parameters:<br />
<br />
* '''Position''' (Real number): represents the position of the width point along the Spline. Although it is allowed to be any real number, its meaning is only from 0.0 to 1.0. 0.0 corresponds to the start of the Spline (first Spline point on the Spline list) and 1.0 to the last Spline point. For looped Splines 0.0 and 1.0 are equal. The position is represented by the light purple Handle that always lies on the Spline.<br />
* '''Width''' (Real number): It is the width multiplicator of the global Width parameter of the Advanced Outline Layer on the position given by the Position parameter. The final width is calculated multiplying the global Advanced Outline's Width (W) by the Width of the widthpoint (w) and adding the Expand parameter (E). Calculated width = W*w+E<br />
* '''Tip Side Before/After''': Those two sub-parameters controls how the width is interpolated before and after the current widthpoint. The sub-parameter can have four values: <br />
** '''Interpolate''': Between the previous/following width point, the width is calculated by interpolation based on smoothness value.<br />
** '''Rounded''': There is a rounded tip that points to the width point before or after. If the previous/following width point is 'Interpolate' on its posterior/previous side it considers that the width of the widthpoint in question is zero just before/after it. If the previous/posterior width point is other than 'Interpolate' then the segment between those two width points is empty. See examples to understand it fully.<br />
** '''Squared''': Same as Rounded but using square tip.<br />
** '''Peak''': Same as Rounded but using peak tip.<br />
** '''Flat''': Same as Rounded but using flat tip.<br />
<br />
The Width Point list has one internal non-animatable parameter called ''loop''. You can reach it by right clicking the Width Point List parameter. If the Width Point list is unlooped, then any width point that has a Position outside the range of [0,1] is clamped to (brought within) that range. For example: a Position = 1.35 is clamped to 1.0 then the Width Point List is unlooped. Otherwise, if the Width Point List is looped and a width point has a Position of 1.3, its modulus based on the range [0,1] is used, so it is turned to a position of 0.3.<br />
<br />
== Working with the Avdanced Outline ==<br />
<br />
=== Creation of the Advanced Outline ===<br />
<br />
You can create Advanced Outlines in three ways:<br />
* With the {{l|Draw Tool}} (check ''Create Advanced Outline'' in the tool options).<br />
* With the {{l|Spline Tool}} (check ''Create Advanced Outline'' in the tool options).<br />
* With the menu Insert-> Layer->Geometry->Advanced Outline.<br />
<br />
=== Change the width of the Width Points ===<br />
<br />
Initially the width Handles are hidden. You can make them visible by pressing ({{Shortcut|alt|5}}) or clicking on the width toggle button. It is possible to change the width using the {{l|Width Tool}} using the same procedure as for regular outlines. If you want more control over the width you can modify the width Handles with the {{l|Transform Tool}} ({{Shortcut|alt|A}}). More fine tunning is possible by expanding the width point sub-parameter and entering a specific value for the Width sub-parameter. In that case negative values are allowed to produce nice effects.<br />
<br />
=== Change the position of the Width Points ===<br />
<br />
When you make the width Handles of the width points visible/invisible, the position Handles also become visible/invisible. This way, the user has a single way to hide/show the position and width Handles.<br />
<br />
{{Note|Change the position of the Width Points|This may change in the future}}<br />
<br />
The position Handles of the width points can be modified using the {{l|Transform Tool}} ({{Shortcut|alt|A}}) and clicking and dragging the position Handle. You will notice that Handles are tied to the Spline so once clicked and dragged they can be placed at any way on the Spline. Notice that if you have a width point position Handle at position 0.2 and you click and drag at position 0.9 it may happen that you obtain a value of -0.1 because you dragged it in one step and the Width Point List may be looped. If you want to avoid those problems do the movement in small steps to indicate the correct path to follow when calculating the new position.<br />
<br />
=== Adding or removing width points ===<br />
To add a new width point you have to right click on the width point position Handle (purple Handle) to get the context menu. Then select "Add Item (smart)" here to create more width points entries. The width points are created this way:<br />
<br />
In the general case, the new widthpoint is created between the width point you click on and the "previous" width point. Depending on the loop status of the Spline, the "previous" width point can be the start of the Spline (unlooped) or the last widthpoint (looped). The worst case is when there is only one width point on the Width Point List. If you add one new item it will lie over the existing one.<br />
<br />
The newly added width point will have the interpolated width at the position where it is created. <br />
<br />
<br />
=== Specific actions for Width Points ===<br />
<br />
Some needed actions have been added to width points as well as functionality for existing actions for items of the List type parameters. You can reach the list of available actions by right clicking on the width point position or directly on the width point item of the Width Point List. Here are some descriptions of the available actions:<br />
<br />
* Convert: Width Points are composite Value Nodes so its natural format is Composite (you can access its components). But you can convert it to other formats. See Convert for details.<br />
* Disconnect: This will disconnect the width point item from the Composite type Value Node. That means that there won't be any Handle to show and that any of its values can be modified. Maybe it is useful for some types of workflows. To restore its Composite status, choose Convert->Composite.<br />
* Insert/ Remove Item Smart: This will add or remove a width point. If Remove is used in animation mode, it will also set the current width point as OFF instead of effectively removing it from the Width Point List. Opposite for the Insert Item Smart.<br />
* Mark Active Point as ON/OFF: You can set width points off to make it not count for width control while the width point is off. When the width point is half on to off or viceversa, the used width point should be the interpolation between the on and off status. But it doesn't work properly at the moment. On / Off values are not interpolated but fully on or fully off. This has to be corrected.<br />
* Export: See {{l|Export}}.<br />
* Loop: When set as looped, as mentioned before, it allows the width point positions loop around the range [0,1].<br />
* Rotate Order: Doesn't do anything.<br />
* Set Side Before/After to: Interpolate, Rounded, Squared, Peak, Flat. Those are shortcuts to do the same as going directly to the sub-parameter and choosing the appropriate Tip Type. Maybe it should be renamed to "Set Tip Before/After".<br />
* Set Width to default/zero: those actions have been added for two reasons. It is very common to want to set the width of a width point to zero. Despite the possibility of use the User Preference of Restrict Radius to First Quadrant, this way it is acceded quickly from the same usual menu. Also when a width point position Handle and a width point width Handle are on top of each other (width = 0) it is hard to modify the width or the position without trouble. To solve this the position Handle has preference over the width Handle in case of coincidence. So access the width Handle it is needed to have a quick action to set it to its default value (1.0).</div>Zurba11https://wiki.synfig.org/index.php?title=User_talk:Alufers&diff=18814User talk:Alufers2013-11-05T12:06:54Z<p>Zurba11: Created page with "So hi there Alufers, we all knows were is Poland ;) With best regards --Zurba11 (talk) 12:04, 5 November 2013 (UTC)"</p>
<hr />
<div>So hi there Alufers, we all knows were is Poland ;) With best regards --[[User:Zurba11|Zurba11]] ([[User talk:Zurba11|talk]]) 12:04, 5 November 2013 (UTC)</div>Zurba11https://wiki.synfig.org/index.php?title=User:Alufers&diff=18813User:Alufers2013-11-05T12:06:16Z<p>Zurba11: Undo revision 18812 by Zurba11 (talk)</p>
<hr />
<div>I'am a student. I come from Poland (this is a country in Europe). I want to improve the polosh translation becouse there are many errors in it. Sorry for my english.</div>Zurba11https://wiki.synfig.org/index.php?title=User:Alufers&diff=18812User:Alufers2013-11-05T12:04:16Z<p>Zurba11: </p>
<hr />
<div>I'am a student. I come from Poland (this is a country in Europe). I want to improve the polosh translation becouse there are many errors in it. Sorry for my english.<br />
<br />
So hi there Alufers, we all knows were is Poland ;) With best regards --[[User:Zurba11|Zurba11]] ([[User talk:Zurba11|talk]]) 12:04, 5 November 2013 (UTC)</div>Zurba11https://wiki.synfig.org/index.php?title=Advanced_Outline_Layer/ru&diff=18807Advanced Outline Layer/ru2013-11-04T18:16:45Z<p>Zurba11: /* Параметры Улучшенной кривой */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Улучшенная кривая}}<br />
{{Category|Layers}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Under construction! See {{l|Talk:Advanced_Outline_Layer|Advanced Outline Layer Talk}} page<br />
[[Image:Layer_geometry_advanced_outline_icon.png|64px]]<br />
<br />
== Что такое улучшенные кривые ==<br />
<br />
=== Отличия от контуров: Толщина кривой ===<br />
<br />
Контрольные точки ''Толщины'' определяют ширину обычной кривой в определённых местах.<br />
<br />
Обычная [[Outline Layer|кривая]] имеет ''Контрольные точки толщины'' которые связаны с вершинами кривой и определяют её форму в этих местах. Это значит что пользователь вынужден добавлять новую вершину каждый раз когда понадобится изменить толщину кривой в каком то конкретном месте. Это решение может оказаться проблематичным когда форма кривой достаточно проста, а вот её толщина меняется в широких пределах.<br />
<br />
Практика показывает что чаще всего возникает необходимость изменять толщину кривой независимо от расположения вершин на ней, именно эта функция и возложена на Улучшенную кривую ''Контрольные точки толщины'' которой устроены по другому принципу, они свободно перемещаются вдоль кривой и определяют её форму в любом произвольном месте.<br />
<br />
== Новые возможности ==<br />
<br />
Улучшенные кривые представляют новые возможности работы с кривыми которые показаны в этом видео [http://www.youtube.com/watch?v=boM_ZC9VZ54 Advanced outline demo]. Рассмотрим их подробнее ниже:<br />
<br />
<gallery widths="490px" heights="300px" perrow="2"><br />
File:Variable-width-without-blinepoints.png | Не нужно вставлять вершину для контроля толщины<br />
File:Lots-of-blinepoints-width-just-two width-controls.png | Толщина контролируется двумя конторольными точками, тогда как Кривая состоит из множества вершин<br />
File:Different-types of tips.png | Разные типы кончиков кривой<br />
File: Segments of outlines.png | Контур может быть разделён на сегменты<br />
File:Different cusps types.png | Три типа оформления углов кривой<br />
File:Smoothness control.png | Контроль плавности перехода от линейного(0.0) до плавного(1.0)<br />
</gallery><br />
<br />
==Параметры Улучшенной кривой==<br />
<br />
{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-<br />
||[[Image:Type_real_icon.png|16px]] [[Z Depth Parameter|Глубина на оси Z]]<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] [[Amount Parameter|Величина]]<br />
||1.000000<br />
||real<br />
<br />
|-<br />
||[[Image:type_integer_icon.png|16px]] [[Blend Method|Режим смешивания]]<br />
||Composite<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_color_icon.png|16px]] [[Colors Dialog|Цвет]]<br />
||<br />
{| style="width:95%; height:16px; background:black; color:black" border="1"<br />
|- <br />
|}<br />
||color<br />
<br />
|-style="background:#"<br />
||[[Image:Type_vector_icon.png|16px]] Исходная точка<br />
||0.000000u,0.000000u<br />
||vector<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_bool_icon.png|16px]] Инвертировать<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||[[Image:Type_bool_icon.png|16px]] Сглаживание<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Растушёвка<br />
||0.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Тип Растушёвки<br />
||Fast Gaussian Blur<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Обработка взаимопересечений<br />
||Non Zero<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_list_icon.png|16px]] Вершины<br />
||List<br />
||list (Spline)<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Толщина контура<br />
||2.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Расширение<br />
||0.000000pt<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Тип закругления в начале<br />
||Rounded Stop<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Тип закругления в конце<br />
||Rounded Stop<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Тип пиков<br />
||Sharp<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Плавность<br />
||0.500000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_list_icon.png|16px]] Список точек толщины<br />
||List<br />
||list(WPList)<br />
<br />
|-<br />
||[[Image:Type_bool_icon.png|16px]] Быстрая отрисовка<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_bool_icon.png|16px]] Пунктирная линия<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||[[Image:Type_list_icon.png|16px]] Список элементов пунктира<br />
||List<br />
||list(WPList)<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Dash Items Offset<br />
||0.000000u<br />
||real<br />
<br />
|}<br />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />
==Specific parameters for Advanced Outline Layer==<br />
<br />
This section lists only the parameters specific to the Advanced Outline Layer. For documentation about the other parameters, refer to [[Outline Layer]].<br />
<br />
* Tip Type at start<br />
* Tip Type at end<br />
* Cusps type<br />
* Smoothness<br />
* Width Point List<br />
<br />
=== Tip type at start / end ===<br />
<br />
As with width points, the end and start of the unlooped Advanced Outlines has a type of tip defined. The user can choose between the same types of tips as for a width point. When the first/last width point has its before/after interpolation type set to Interpolate the start/end of the outline is rendered using the Tip type at start/end parameter.<br />
<br />
Those parameters don't have any effect if the Spline is looped or the first/last width point has its before/after interpolation type set to anything but Interpolate. In that case, the segment between the start/end width point and the start/end of the Spline is not rendered.<br />
<br />
The types of tips are the same as the width point tip types except that it doesn't offer the Interpolate type because it would not make sense:<br />
* Rounded<br />
* Squared<br />
* Peak<br />
* Flat<br />
<br />
=== Cusps type ===<br />
<br />
There are three types of cusps in the Advanced Outline:<br />
<br />
* Sharp<br />
* Rounded<br />
* Bevel<br />
<br />
The type of cusp is controlled for the entire layer so currently it is not possible to control the type of corner individually. Maybe in future versions it will be possible.<br />
<br />
=== Smoothness ===<br />
<br />
The Smoothness controls how the width is calculated between widthpoints. The width at a position p is a function of the surrounding width points. When smoothness is zero interpolation is lineal, when smoothness is 1.0 interpolation is given by a 5th degree smooth Spline.<br />
<br />
=== Width Point List ===<br />
Each Advanced Outline has a list of parameters that represent the information for each width item. They are called Width Points and consist of four sub-parameters:<br />
<br />
* '''Position''' (Real number): represents the position of the width point along the Spline. Although it is allowed to be any real number, its meaning is only from 0.0 to 1.0. 0.0 corresponds to the start of the Spline (first Spline point on the Spline list) and 1.0 to the last Spline point. For looped Splines 0.0 and 1.0 are equal. The position is represented by the light purple Handle that always lies on the Spline.<br />
* '''Width''' (Real number): It is the width multiplicator of the global Width parameter of the Advanced Outline Layer on the position given by the Position parameter. The final width is calculated multiplying the global Advanced Outline's Width (W) by the Width of the widthpoint (w) and adding the Expand parameter (E). Calculated width = W*w+E<br />
* '''Tip Side Before/After''': Those two sub-parameters controls how the width is interpolated before and after the current widthpoint. The sub-parameter can have four values: <br />
** '''Interpolate''': Between the previous/following width point, the width is calculated by interpolation based on smoothness value.<br />
** '''Rounded''': There is a rounded tip that points to the width point before or after. If the previous/following width point is 'Interpolate' on its posterior/previous side it considers that the width of the widthpoint in question is zero just before/after it. If the previous/posterior width point is other than 'Interpolate' then the segment between those two width points is empty. See examples to understand it fully.<br />
** '''Squared''': Same as Rounded but using square tip.<br />
** '''Peak''': Same as Rounded but using peak tip.<br />
** '''Flat''': Same as Rounded but using flat tip.<br />
<br />
The Width Point list has one internal non-animatable parameter called ''loop''. You can reach it by right clicking the Width Point List parameter. If the Width Point list is unlooped, then any width point that has a Position outside the range of [0,1] is clamped to (brought within) that range. For example: a Position = 1.35 is clamped to 1.0 then the Width Point List is unlooped. Otherwise, if the Width Point List is looped and a width point has a Position of 1.3, its modulus based on the range [0,1] is used, so it is turned to a position of 0.3.<br />
<br />
== Working with the Avdanced Outline ==<br />
<br />
=== Creation of the Advanced Outline ===<br />
<br />
You can create Advanced Outlines in three ways:<br />
* With the {{l|Draw Tool}} (check ''Create Advanced Outline'' in the tool options).<br />
* With the {{l|Spline Tool}} (check ''Create Advanced Outline'' in the tool options).<br />
* With the menu Insert-> Layer->Geometry->Advanced Outline.<br />
<br />
=== Change the width of the Width Points ===<br />
<br />
Initially the width Handles are hidden. You can make them visible by pressing ({{Shortcut|alt|5}}) or clicking on the width toggle button. It is possible to change the width using the {{l|Width Tool}} using the same procedure as for regular outlines. If you want more control over the width you can modify the width Handles with the {{l|Transform Tool}} ({{Shortcut|alt|A}}). More fine tunning is possible by expanding the width point sub-parameter and entering a specific value for the Width sub-parameter. In that case negative values are allowed to produce nice effects.<br />
<br />
=== Change the position of the Width Points ===<br />
<br />
When you make the width Handles of the width points visible/invisible, the position Handles also become visible/invisible. This way, the user has a single way to hide/show the position and width Handles.<br />
<br />
{{Note|Change the position of the Width Points|This may change in the future}}<br />
<br />
The position Handles of the width points can be modified using the {{l|Transform Tool}} ({{Shortcut|alt|A}}) and clicking and dragging the position Handle. You will notice that Handles are tied to the Spline so once clicked and dragged they can be placed at any way on the Spline. Notice that if you have a width point position Handle at position 0.2 and you click and drag at position 0.9 it may happen that you obtain a value of -0.1 because you dragged it in one step and the Width Point List may be looped. If you want to avoid those problems do the movement in small steps to indicate the correct path to follow when calculating the new position.<br />
<br />
=== Adding or removing width points ===<br />
To add a new width point you have to right click on the width point position Handle (purple Handle) to get the context menu. Then select "Add Item (smart)" here to create more width points entries. The width points are created this way:<br />
<br />
In the general case, the new widthpoint is created between the width point you click on and the "previous" width point. Depending on the loop status of the Spline, the "previous" width point can be the start of the Spline (unlooped) or the last widthpoint (looped). The worst case is when there is only one width point on the Width Point List. If you add one new item it will lie over the existing one.<br />
<br />
The newly added width point will have the interpolated width at the position where it is created. <br />
<br />
<br />
=== Specific actions for Width Points ===<br />
<br />
Some needed actions have been added to width points as well as functionality for existing actions for items of the List type parameters. You can reach the list of available actions by right clicking on the width point position or directly on the width point item of the Width Point List. Here are some descriptions of the available actions:<br />
<br />
* Convert: Width Points are composite Value Nodes so its natural format is Composite (you can access its components). But you can convert it to other formats. See Convert for details.<br />
* Disconnect: This will disconnect the width point item from the Composite type Value Node. That means that there won't be any Handle to show and that any of its values can be modified. Maybe it is useful for some types of workflows. To restore its Composite status, choose Convert->Composite.<br />
* Insert/ Remove Item Smart: This will add or remove a width point. If Remove is used in animation mode, it will also set the current width point as OFF instead of effectively removing it from the Width Point List. Opposite for the Insert Item Smart.<br />
* Mark Active Point as ON/OFF: You can set width points off to make it not count for width control while the width point is off. When the width point is half on to off or viceversa, the used width point should be the interpolation between the on and off status. But it doesn't work properly at the moment. On / Off values are not interpolated but fully on or fully off. This has to be corrected.<br />
* Export: See {{l|Export}}.<br />
* Loop: When set as looped, as mentioned before, it allows the width point positions loop around the range [0,1].<br />
* Rotate Order: Doesn't do anything.<br />
* Set Side Before/After to: Interpolate, Rounded, Squared, Peak, Flat. Those are shortcuts to do the same as going directly to the sub-parameter and choosing the appropriate Tip Type. Maybe it should be renamed to "Set Tip Before/After".<br />
* Set Width to default/zero: those actions have been added for two reasons. It is very common to want to set the width of a width point to zero. Despite the possibility of use the User Preference of Restrict Radius to First Quadrant, this way it is acceded quickly from the same usual menu. Also when a width point position Handle and a width point width Handle are on top of each other (width = 0) it is hard to modify the width or the position without trouble. To solve this the position Handle has preference over the width Handle in case of coincidence. So access the width Handle it is needed to have a quick action to set it to its default value (1.0).</div>Zurba11https://wiki.synfig.org/index.php?title=Advanced_Outline_Layer/ru&diff=18806Advanced Outline Layer/ru2013-11-04T17:25:39Z<p>Zurba11: /* Parameters of Advanced Outline Layers */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Улучшенная кривая}}<br />
{{Category|Layers}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Under construction! See {{l|Talk:Advanced_Outline_Layer|Advanced Outline Layer Talk}} page<br />
[[Image:Layer_geometry_advanced_outline_icon.png|64px]]<br />
<br />
== Что такое улучшенные кривые ==<br />
<br />
=== Отличия от контуров: Толщина кривой ===<br />
<br />
Контрольные точки ''Толщины'' определяют ширину обычной кривой в определённых местах.<br />
<br />
Обычная [[Outline Layer|кривая]] имеет ''Контрольные точки толщины'' которые связаны с вершинами кривой и определяют её форму в этих местах. Это значит что пользователь вынужден добавлять новую вершину каждый раз когда понадобится изменить толщину кривой в каком то конкретном месте. Это решение может оказаться проблематичным когда форма кривой достаточно проста, а вот её толщина меняется в широких пределах.<br />
<br />
Практика показывает что чаще всего возникает необходимость изменять толщину кривой независимо от расположения вершин на ней, именно эта функция и возложена на Улучшенную кривую ''Контрольные точки толщины'' которой устроены по другому принципу, они свободно перемещаются вдоль кривой и определяют её форму в любом произвольном месте.<br />
<br />
== Новые возможности ==<br />
<br />
Улучшенные кривые представляют новые возможности работы с кривыми которые показаны в этом видео [http://www.youtube.com/watch?v=boM_ZC9VZ54 Advanced outline demo]. Рассмотрим их подробнее ниже:<br />
<br />
<gallery widths="490px" heights="300px" perrow="2"><br />
File:Variable-width-without-blinepoints.png | Не нужно вставлять вершину для контроля толщины<br />
File:Lots-of-blinepoints-width-just-two width-controls.png | Толщина контролируется двумя конторольными точками, тогда как Кривая состоит из множества вершин<br />
File:Different-types of tips.png | Разные типы кончиков кривой<br />
File: Segments of outlines.png | Контур может быть разделён на сегменты<br />
File:Different cusps types.png | Три типа оформления углов кривой<br />
File:Smoothness control.png | Контроль плавности перехода от линейного(0.0) до плавного(1.0)<br />
</gallery><br />
<br />
==Параметры Улучшенной кривой==<br />
<br />
{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-<br />
||[[Image:Type_real_icon.png|16px]] [[Z Depth Parameter|Глубина на оси Z]]<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] [[Amount Parameter|Величина]]<br />
||1.000000<br />
||real<br />
<br />
|-<br />
||[[Image:type_integer_icon.png|16px]] [[Blend Method|Режим смешивания]]<br />
||Composite<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_color_icon.png|16px]] [[Colors Dialog|Цвет]]<br />
||<br />
{| style="width:95%; height:16px; background:black; color:black" border="1"<br />
|- <br />
|}<br />
||color<br />
<br />
|-style="background:#"<br />
||[[Image:Type_vector_icon.png|16px]] Исходная точка<br />
||0.000000u,0.000000u<br />
||vector<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_bool_icon.png|16px]] Инвертировать<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||[[Image:Type_bool_icon.png|16px]] Сглаживание<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Растушёвка<br />
||0.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Тип Растушёвки<br />
||Fast Gaussian Blur<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Обработка взаимопересечений<br />
||Non Zero<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_list_icon.png|16px]] Вершины<br />
||List<br />
||list (Spline)<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Толщина контура<br />
||2.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Расширение<br />
||0.000000pt<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at Start<br />
||Rounded Stop<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at End<br />
||Rounded Stop<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Cusps Type<br />
||Sharp<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Smoothness<br />
||0.500000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_list_icon.png|16px]] Width Point List<br />
||List<br />
||list(WPList)<br />
<br />
|-<br />
||[[Image:Type_bool_icon.png|16px]] Fast<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_bool_icon.png|16px]] Dashed Outline<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||[[Image:Type_list_icon.png|16px]] Dash Item List<br />
||List<br />
||list(WPList)<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Dash Items Offset<br />
||0.000000u<br />
||real<br />
<br />
|}<br />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />
==Specific parameters for Advanced Outline Layer==<br />
<br />
This section lists only the parameters specific to the Advanced Outline Layer. For documentation about the other parameters, refer to [[Outline Layer]].<br />
<br />
* Tip Type at start<br />
* Tip Type at end<br />
* Cusps type<br />
* Smoothness<br />
* Width Point List<br />
<br />
=== Tip type at start / end ===<br />
<br />
As with width points, the end and start of the unlooped Advanced Outlines has a type of tip defined. The user can choose between the same types of tips as for a width point. When the first/last width point has its before/after interpolation type set to Interpolate the start/end of the outline is rendered using the Tip type at start/end parameter.<br />
<br />
Those parameters don't have any effect if the Spline is looped or the first/last width point has its before/after interpolation type set to anything but Interpolate. In that case, the segment between the start/end width point and the start/end of the Spline is not rendered.<br />
<br />
The types of tips are the same as the width point tip types except that it doesn't offer the Interpolate type because it would not make sense:<br />
* Rounded<br />
* Squared<br />
* Peak<br />
* Flat<br />
<br />
=== Cusps type ===<br />
<br />
There are three types of cusps in the Advanced Outline:<br />
<br />
* Sharp<br />
* Rounded<br />
* Bevel<br />
<br />
The type of cusp is controlled for the entire layer so currently it is not possible to control the type of corner individually. Maybe in future versions it will be possible.<br />
<br />
=== Smoothness ===<br />
<br />
The Smoothness controls how the width is calculated between widthpoints. The width at a position p is a function of the surrounding width points. When smoothness is zero interpolation is lineal, when smoothness is 1.0 interpolation is given by a 5th degree smooth Spline.<br />
<br />
=== Width Point List ===<br />
Each Advanced Outline has a list of parameters that represent the information for each width item. They are called Width Points and consist of four sub-parameters:<br />
<br />
* '''Position''' (Real number): represents the position of the width point along the Spline. Although it is allowed to be any real number, its meaning is only from 0.0 to 1.0. 0.0 corresponds to the start of the Spline (first Spline point on the Spline list) and 1.0 to the last Spline point. For looped Splines 0.0 and 1.0 are equal. The position is represented by the light purple Handle that always lies on the Spline.<br />
* '''Width''' (Real number): It is the width multiplicator of the global Width parameter of the Advanced Outline Layer on the position given by the Position parameter. The final width is calculated multiplying the global Advanced Outline's Width (W) by the Width of the widthpoint (w) and adding the Expand parameter (E). Calculated width = W*w+E<br />
* '''Tip Side Before/After''': Those two sub-parameters controls how the width is interpolated before and after the current widthpoint. The sub-parameter can have four values: <br />
** '''Interpolate''': Between the previous/following width point, the width is calculated by interpolation based on smoothness value.<br />
** '''Rounded''': There is a rounded tip that points to the width point before or after. If the previous/following width point is 'Interpolate' on its posterior/previous side it considers that the width of the widthpoint in question is zero just before/after it. If the previous/posterior width point is other than 'Interpolate' then the segment between those two width points is empty. See examples to understand it fully.<br />
** '''Squared''': Same as Rounded but using square tip.<br />
** '''Peak''': Same as Rounded but using peak tip.<br />
** '''Flat''': Same as Rounded but using flat tip.<br />
<br />
The Width Point list has one internal non-animatable parameter called ''loop''. You can reach it by right clicking the Width Point List parameter. If the Width Point list is unlooped, then any width point that has a Position outside the range of [0,1] is clamped to (brought within) that range. For example: a Position = 1.35 is clamped to 1.0 then the Width Point List is unlooped. Otherwise, if the Width Point List is looped and a width point has a Position of 1.3, its modulus based on the range [0,1] is used, so it is turned to a position of 0.3.<br />
<br />
== Working with the Avdanced Outline ==<br />
<br />
=== Creation of the Advanced Outline ===<br />
<br />
You can create Advanced Outlines in three ways:<br />
* With the {{l|Draw Tool}} (check ''Create Advanced Outline'' in the tool options).<br />
* With the {{l|Spline Tool}} (check ''Create Advanced Outline'' in the tool options).<br />
* With the menu Insert-> Layer->Geometry->Advanced Outline.<br />
<br />
=== Change the width of the Width Points ===<br />
<br />
Initially the width Handles are hidden. You can make them visible by pressing ({{Shortcut|alt|5}}) or clicking on the width toggle button. It is possible to change the width using the {{l|Width Tool}} using the same procedure as for regular outlines. If you want more control over the width you can modify the width Handles with the {{l|Transform Tool}} ({{Shortcut|alt|A}}). More fine tunning is possible by expanding the width point sub-parameter and entering a specific value for the Width sub-parameter. In that case negative values are allowed to produce nice effects.<br />
<br />
=== Change the position of the Width Points ===<br />
<br />
When you make the width Handles of the width points visible/invisible, the position Handles also become visible/invisible. This way, the user has a single way to hide/show the position and width Handles.<br />
<br />
{{Note|Change the position of the Width Points|This may change in the future}}<br />
<br />
The position Handles of the width points can be modified using the {{l|Transform Tool}} ({{Shortcut|alt|A}}) and clicking and dragging the position Handle. You will notice that Handles are tied to the Spline so once clicked and dragged they can be placed at any way on the Spline. Notice that if you have a width point position Handle at position 0.2 and you click and drag at position 0.9 it may happen that you obtain a value of -0.1 because you dragged it in one step and the Width Point List may be looped. If you want to avoid those problems do the movement in small steps to indicate the correct path to follow when calculating the new position.<br />
<br />
=== Adding or removing width points ===<br />
To add a new width point you have to right click on the width point position Handle (purple Handle) to get the context menu. Then select "Add Item (smart)" here to create more width points entries. The width points are created this way:<br />
<br />
In the general case, the new widthpoint is created between the width point you click on and the "previous" width point. Depending on the loop status of the Spline, the "previous" width point can be the start of the Spline (unlooped) or the last widthpoint (looped). The worst case is when there is only one width point on the Width Point List. If you add one new item it will lie over the existing one.<br />
<br />
The newly added width point will have the interpolated width at the position where it is created. <br />
<br />
<br />
=== Specific actions for Width Points ===<br />
<br />
Some needed actions have been added to width points as well as functionality for existing actions for items of the List type parameters. You can reach the list of available actions by right clicking on the width point position or directly on the width point item of the Width Point List. Here are some descriptions of the available actions:<br />
<br />
* Convert: Width Points are composite Value Nodes so its natural format is Composite (you can access its components). But you can convert it to other formats. See Convert for details.<br />
* Disconnect: This will disconnect the width point item from the Composite type Value Node. That means that there won't be any Handle to show and that any of its values can be modified. Maybe it is useful for some types of workflows. To restore its Composite status, choose Convert->Composite.<br />
* Insert/ Remove Item Smart: This will add or remove a width point. If Remove is used in animation mode, it will also set the current width point as OFF instead of effectively removing it from the Width Point List. Opposite for the Insert Item Smart.<br />
* Mark Active Point as ON/OFF: You can set width points off to make it not count for width control while the width point is off. When the width point is half on to off or viceversa, the used width point should be the interpolation between the on and off status. But it doesn't work properly at the moment. On / Off values are not interpolated but fully on or fully off. This has to be corrected.<br />
* Export: See {{l|Export}}.<br />
* Loop: When set as looped, as mentioned before, it allows the width point positions loop around the range [0,1].<br />
* Rotate Order: Doesn't do anything.<br />
* Set Side Before/After to: Interpolate, Rounded, Squared, Peak, Flat. Those are shortcuts to do the same as going directly to the sub-parameter and choosing the appropriate Tip Type. Maybe it should be renamed to "Set Tip Before/After".<br />
* Set Width to default/zero: those actions have been added for two reasons. It is very common to want to set the width of a width point to zero. Despite the possibility of use the User Preference of Restrict Radius to First Quadrant, this way it is acceded quickly from the same usual menu. Also when a width point position Handle and a width point width Handle are on top of each other (width = 0) it is hard to modify the width or the position without trouble. To solve this the position Handle has preference over the width Handle in case of coincidence. So access the width Handle it is needed to have a quick action to set it to its default value (1.0).</div>Zurba11https://wiki.synfig.org/index.php?title=Advanced_Outline_Layer/ru&diff=18805Advanced Outline Layer/ru2013-11-04T17:15:48Z<p>Zurba11: /* New features */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Улучшенная кривая}}<br />
{{Category|Layers}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Under construction! See {{l|Talk:Advanced_Outline_Layer|Advanced Outline Layer Talk}} page<br />
[[Image:Layer_geometry_advanced_outline_icon.png|64px]]<br />
<br />
== Что такое улучшенные кривые ==<br />
<br />
=== Отличия от контуров: Толщина кривой ===<br />
<br />
Контрольные точки ''Толщины'' определяют ширину обычной кривой в определённых местах.<br />
<br />
Обычная [[Outline Layer|кривая]] имеет ''Контрольные точки толщины'' которые связаны с вершинами кривой и определяют её форму в этих местах. Это значит что пользователь вынужден добавлять новую вершину каждый раз когда понадобится изменить толщину кривой в каком то конкретном месте. Это решение может оказаться проблематичным когда форма кривой достаточно проста, а вот её толщина меняется в широких пределах.<br />
<br />
Практика показывает что чаще всего возникает необходимость изменять толщину кривой независимо от расположения вершин на ней, именно эта функция и возложена на Улучшенную кривую ''Контрольные точки толщины'' которой устроены по другому принципу, они свободно перемещаются вдоль кривой и определяют её форму в любом произвольном месте.<br />
<br />
== Новые возможности ==<br />
<br />
Улучшенные кривые представляют новые возможности работы с кривыми которые показаны в этом видео [http://www.youtube.com/watch?v=boM_ZC9VZ54 Advanced outline demo]. Рассмотрим их подробнее ниже:<br />
<br />
<gallery widths="490px" heights="300px" perrow="2"><br />
File:Variable-width-without-blinepoints.png | Не нужно вставлять вершину для контроля толщины<br />
File:Lots-of-blinepoints-width-just-two width-controls.png | Толщина контролируется двумя конторольными точками, тогда как Кривая состоит из множества вершин<br />
File:Different-types of tips.png | Разные типы кончиков кривой<br />
File: Segments of outlines.png | Контур может быть разделён на сегменты<br />
File:Different cusps types.png | Три типа оформления углов кривой<br />
File:Smoothness control.png | Контроль плавности перехода от линейного(0.0) до плавного(1.0)<br />
</gallery><br />
<br />
==Parameters of Advanced Outline Layers==<br />
<br />
The parameters of the Advanced Outline Layers are:<br />
<br />
{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-<br />
||[[Image:Type_real_icon.png|16px]] [[Z Depth Parameter|Z Depth]]<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] [[Amount Parameter|Amount]]<br />
||1.000000<br />
||real<br />
<br />
|-<br />
||[[Image:type_integer_icon.png|16px]] [[Blend Method|Blend Method]]<br />
||Composite<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_color_icon.png|16px]] [[Colors Dialog|Color]]<br />
||<br />
{| style="width:95%; height:16px; background:black; color:black" border="1"<br />
|- <br />
|}<br />
||color<br />
<br />
|-style="background:#"<br />
||[[Image:Type_vector_icon.png|16px]] Origin<br />
||0.000000u,0.000000u<br />
||vector<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_bool_icon.png|16px]] Invert<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||[[Image:Type_bool_icon.png|16px]] Antialiasing<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Feather<br />
||0.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Type of Feather<br />
||Fast Gaussian Blur<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Winding Sytle<br />
||Non Zero<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_list_icon.png|16px]] Vertices<br />
||List<br />
||list (Spline)<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Outline Width<br />
||2.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Expand<br />
||0.000000pt<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at Start<br />
||Rounded Stop<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at End<br />
||Rounded Stop<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Cusps Type<br />
||Sharp<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Smoothness<br />
||0.500000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_list_icon.png|16px]] Width Point List<br />
||List<br />
||list(WPList)<br />
<br />
|-<br />
||[[Image:Type_bool_icon.png|16px]] Fast<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_bool_icon.png|16px]] Dashed Outline<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||[[Image:Type_list_icon.png|16px]] Dash Item List<br />
||List<br />
||list(WPList)<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Dash Items Offset<br />
||0.000000u<br />
||real<br />
<br />
|}<br />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />
==Specific parameters for Advanced Outline Layer==<br />
<br />
This section lists only the parameters specific to the Advanced Outline Layer. For documentation about the other parameters, refer to [[Outline Layer]].<br />
<br />
* Tip Type at start<br />
* Tip Type at end<br />
* Cusps type<br />
* Smoothness<br />
* Width Point List<br />
<br />
=== Tip type at start / end ===<br />
<br />
As with width points, the end and start of the unlooped Advanced Outlines has a type of tip defined. The user can choose between the same types of tips as for a width point. When the first/last width point has its before/after interpolation type set to Interpolate the start/end of the outline is rendered using the Tip type at start/end parameter.<br />
<br />
Those parameters don't have any effect if the Spline is looped or the first/last width point has its before/after interpolation type set to anything but Interpolate. In that case, the segment between the start/end width point and the start/end of the Spline is not rendered.<br />
<br />
The types of tips are the same as the width point tip types except that it doesn't offer the Interpolate type because it would not make sense:<br />
* Rounded<br />
* Squared<br />
* Peak<br />
* Flat<br />
<br />
=== Cusps type ===<br />
<br />
There are three types of cusps in the Advanced Outline:<br />
<br />
* Sharp<br />
* Rounded<br />
* Bevel<br />
<br />
The type of cusp is controlled for the entire layer so currently it is not possible to control the type of corner individually. Maybe in future versions it will be possible.<br />
<br />
=== Smoothness ===<br />
<br />
The Smoothness controls how the width is calculated between widthpoints. The width at a position p is a function of the surrounding width points. When smoothness is zero interpolation is lineal, when smoothness is 1.0 interpolation is given by a 5th degree smooth Spline.<br />
<br />
=== Width Point List ===<br />
Each Advanced Outline has a list of parameters that represent the information for each width item. They are called Width Points and consist of four sub-parameters:<br />
<br />
* '''Position''' (Real number): represents the position of the width point along the Spline. Although it is allowed to be any real number, its meaning is only from 0.0 to 1.0. 0.0 corresponds to the start of the Spline (first Spline point on the Spline list) and 1.0 to the last Spline point. For looped Splines 0.0 and 1.0 are equal. The position is represented by the light purple Handle that always lies on the Spline.<br />
* '''Width''' (Real number): It is the width multiplicator of the global Width parameter of the Advanced Outline Layer on the position given by the Position parameter. The final width is calculated multiplying the global Advanced Outline's Width (W) by the Width of the widthpoint (w) and adding the Expand parameter (E). Calculated width = W*w+E<br />
* '''Tip Side Before/After''': Those two sub-parameters controls how the width is interpolated before and after the current widthpoint. The sub-parameter can have four values: <br />
** '''Interpolate''': Between the previous/following width point, the width is calculated by interpolation based on smoothness value.<br />
** '''Rounded''': There is a rounded tip that points to the width point before or after. If the previous/following width point is 'Interpolate' on its posterior/previous side it considers that the width of the widthpoint in question is zero just before/after it. If the previous/posterior width point is other than 'Interpolate' then the segment between those two width points is empty. See examples to understand it fully.<br />
** '''Squared''': Same as Rounded but using square tip.<br />
** '''Peak''': Same as Rounded but using peak tip.<br />
** '''Flat''': Same as Rounded but using flat tip.<br />
<br />
The Width Point list has one internal non-animatable parameter called ''loop''. You can reach it by right clicking the Width Point List parameter. If the Width Point list is unlooped, then any width point that has a Position outside the range of [0,1] is clamped to (brought within) that range. For example: a Position = 1.35 is clamped to 1.0 then the Width Point List is unlooped. Otherwise, if the Width Point List is looped and a width point has a Position of 1.3, its modulus based on the range [0,1] is used, so it is turned to a position of 0.3.<br />
<br />
== Working with the Avdanced Outline ==<br />
<br />
=== Creation of the Advanced Outline ===<br />
<br />
You can create Advanced Outlines in three ways:<br />
* With the {{l|Draw Tool}} (check ''Create Advanced Outline'' in the tool options).<br />
* With the {{l|Spline Tool}} (check ''Create Advanced Outline'' in the tool options).<br />
* With the menu Insert-> Layer->Geometry->Advanced Outline.<br />
<br />
=== Change the width of the Width Points ===<br />
<br />
Initially the width Handles are hidden. You can make them visible by pressing ({{Shortcut|alt|5}}) or clicking on the width toggle button. It is possible to change the width using the {{l|Width Tool}} using the same procedure as for regular outlines. If you want more control over the width you can modify the width Handles with the {{l|Transform Tool}} ({{Shortcut|alt|A}}). More fine tunning is possible by expanding the width point sub-parameter and entering a specific value for the Width sub-parameter. In that case negative values are allowed to produce nice effects.<br />
<br />
=== Change the position of the Width Points ===<br />
<br />
When you make the width Handles of the width points visible/invisible, the position Handles also become visible/invisible. This way, the user has a single way to hide/show the position and width Handles.<br />
<br />
{{Note|Change the position of the Width Points|This may change in the future}}<br />
<br />
The position Handles of the width points can be modified using the {{l|Transform Tool}} ({{Shortcut|alt|A}}) and clicking and dragging the position Handle. You will notice that Handles are tied to the Spline so once clicked and dragged they can be placed at any way on the Spline. Notice that if you have a width point position Handle at position 0.2 and you click and drag at position 0.9 it may happen that you obtain a value of -0.1 because you dragged it in one step and the Width Point List may be looped. If you want to avoid those problems do the movement in small steps to indicate the correct path to follow when calculating the new position.<br />
<br />
=== Adding or removing width points ===<br />
To add a new width point you have to right click on the width point position Handle (purple Handle) to get the context menu. Then select "Add Item (smart)" here to create more width points entries. The width points are created this way:<br />
<br />
In the general case, the new widthpoint is created between the width point you click on and the "previous" width point. Depending on the loop status of the Spline, the "previous" width point can be the start of the Spline (unlooped) or the last widthpoint (looped). The worst case is when there is only one width point on the Width Point List. If you add one new item it will lie over the existing one.<br />
<br />
The newly added width point will have the interpolated width at the position where it is created. <br />
<br />
<br />
=== Specific actions for Width Points ===<br />
<br />
Some needed actions have been added to width points as well as functionality for existing actions for items of the List type parameters. You can reach the list of available actions by right clicking on the width point position or directly on the width point item of the Width Point List. Here are some descriptions of the available actions:<br />
<br />
* Convert: Width Points are composite Value Nodes so its natural format is Composite (you can access its components). But you can convert it to other formats. See Convert for details.<br />
* Disconnect: This will disconnect the width point item from the Composite type Value Node. That means that there won't be any Handle to show and that any of its values can be modified. Maybe it is useful for some types of workflows. To restore its Composite status, choose Convert->Composite.<br />
* Insert/ Remove Item Smart: This will add or remove a width point. If Remove is used in animation mode, it will also set the current width point as OFF instead of effectively removing it from the Width Point List. Opposite for the Insert Item Smart.<br />
* Mark Active Point as ON/OFF: You can set width points off to make it not count for width control while the width point is off. When the width point is half on to off or viceversa, the used width point should be the interpolation between the on and off status. But it doesn't work properly at the moment. On / Off values are not interpolated but fully on or fully off. This has to be corrected.<br />
* Export: See {{l|Export}}.<br />
* Loop: When set as looped, as mentioned before, it allows the width point positions loop around the range [0,1].<br />
* Rotate Order: Doesn't do anything.<br />
* Set Side Before/After to: Interpolate, Rounded, Squared, Peak, Flat. Those are shortcuts to do the same as going directly to the sub-parameter and choosing the appropriate Tip Type. Maybe it should be renamed to "Set Tip Before/After".<br />
* Set Width to default/zero: those actions have been added for two reasons. It is very common to want to set the width of a width point to zero. Despite the possibility of use the User Preference of Restrict Radius to First Quadrant, this way it is acceded quickly from the same usual menu. Also when a width point position Handle and a width point width Handle are on top of each other (width = 0) it is hard to modify the width or the position without trouble. To solve this the position Handle has preference over the width Handle in case of coincidence. So access the width Handle it is needed to have a quick action to set it to its default value (1.0).</div>Zurba11https://wiki.synfig.org/index.php?title=Advanced_Outline_Layer/ru&diff=18804Advanced Outline Layer/ru2013-11-04T17:03:28Z<p>Zurba11: /* Отличия от контуров: Ширина кривой */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Улучшенная кривая}}<br />
{{Category|Layers}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Under construction! See {{l|Talk:Advanced_Outline_Layer|Advanced Outline Layer Talk}} page<br />
[[Image:Layer_geometry_advanced_outline_icon.png|64px]]<br />
<br />
== Что такое улучшенные кривые ==<br />
<br />
=== Отличия от контуров: Толщина кривой ===<br />
<br />
Контрольные точки ''Толщины'' определяют ширину обычной кривой в определённых местах.<br />
<br />
Обычная [[Outline Layer|кривая]] имеет ''Контрольные точки толщины'' которые связаны с вершинами кривой и определяют её форму в этих местах. Это значит что пользователь вынужден добавлять новую вершину каждый раз когда понадобится изменить толщину кривой в каком то конкретном месте. Это решение может оказаться проблематичным когда форма кривой достаточно проста, а вот её толщина меняется в широких пределах.<br />
<br />
Практика показывает что чаще всего возникает необходимость изменять толщину кривой независимо от расположения вершин на ней, именно эта функция и возложена на Улучшенную кривую ''Контрольные точки толщины'' которой устроены по другому принципу, они свободно перемещаются вдоль кривой и определяют её форму в любом произвольном месте.<br />
<br />
== New features ==<br />
<br />
Advanced Outline introduces some new features to the regular outline, as shown in this [http://www.youtube.com/watch?v=boM_ZC9VZ54 Advanced outline demo] video. They are listed with examples below:<br />
<br />
<gallery widths="490px" heights="300px" perrow="2"><br />
File:Variable-width-without-blinepoints.png | No need to place vertex to change the width<br />
File:Lots-of-blinepoints-width-just-two width-controls.png | Width controlled just by two points, while the Spline constructed of many vertices<br />
File:Different-types of tips.png | Different types of tips<br />
File: Segments of outlines.png | Segmented outline<br />
File:Different cusps types.png | Three global cusps types<br />
File:Smoothness control.png | Control of smoothness from linear (0.0) to smooth (1.0)<br />
</gallery><br />
<br />
==Parameters of Advanced Outline Layers==<br />
<br />
The parameters of the Advanced Outline Layers are:<br />
<br />
{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-<br />
||[[Image:Type_real_icon.png|16px]] [[Z Depth Parameter|Z Depth]]<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] [[Amount Parameter|Amount]]<br />
||1.000000<br />
||real<br />
<br />
|-<br />
||[[Image:type_integer_icon.png|16px]] [[Blend Method|Blend Method]]<br />
||Composite<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_color_icon.png|16px]] [[Colors Dialog|Color]]<br />
||<br />
{| style="width:95%; height:16px; background:black; color:black" border="1"<br />
|- <br />
|}<br />
||color<br />
<br />
|-style="background:#"<br />
||[[Image:Type_vector_icon.png|16px]] Origin<br />
||0.000000u,0.000000u<br />
||vector<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_bool_icon.png|16px]] Invert<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||[[Image:Type_bool_icon.png|16px]] Antialiasing<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Feather<br />
||0.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Type of Feather<br />
||Fast Gaussian Blur<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Winding Sytle<br />
||Non Zero<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_list_icon.png|16px]] Vertices<br />
||List<br />
||list (Spline)<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Outline Width<br />
||2.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Expand<br />
||0.000000pt<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at Start<br />
||Rounded Stop<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at End<br />
||Rounded Stop<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Cusps Type<br />
||Sharp<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Smoothness<br />
||0.500000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_list_icon.png|16px]] Width Point List<br />
||List<br />
||list(WPList)<br />
<br />
|-<br />
||[[Image:Type_bool_icon.png|16px]] Fast<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_bool_icon.png|16px]] Dashed Outline<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||[[Image:Type_list_icon.png|16px]] Dash Item List<br />
||List<br />
||list(WPList)<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Dash Items Offset<br />
||0.000000u<br />
||real<br />
<br />
|}<br />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />
==Specific parameters for Advanced Outline Layer==<br />
<br />
This section lists only the parameters specific to the Advanced Outline Layer. For documentation about the other parameters, refer to [[Outline Layer]].<br />
<br />
* Tip Type at start<br />
* Tip Type at end<br />
* Cusps type<br />
* Smoothness<br />
* Width Point List<br />
<br />
=== Tip type at start / end ===<br />
<br />
As with width points, the end and start of the unlooped Advanced Outlines has a type of tip defined. The user can choose between the same types of tips as for a width point. When the first/last width point has its before/after interpolation type set to Interpolate the start/end of the outline is rendered using the Tip type at start/end parameter.<br />
<br />
Those parameters don't have any effect if the Spline is looped or the first/last width point has its before/after interpolation type set to anything but Interpolate. In that case, the segment between the start/end width point and the start/end of the Spline is not rendered.<br />
<br />
The types of tips are the same as the width point tip types except that it doesn't offer the Interpolate type because it would not make sense:<br />
* Rounded<br />
* Squared<br />
* Peak<br />
* Flat<br />
<br />
=== Cusps type ===<br />
<br />
There are three types of cusps in the Advanced Outline:<br />
<br />
* Sharp<br />
* Rounded<br />
* Bevel<br />
<br />
The type of cusp is controlled for the entire layer so currently it is not possible to control the type of corner individually. Maybe in future versions it will be possible.<br />
<br />
=== Smoothness ===<br />
<br />
The Smoothness controls how the width is calculated between widthpoints. The width at a position p is a function of the surrounding width points. When smoothness is zero interpolation is lineal, when smoothness is 1.0 interpolation is given by a 5th degree smooth Spline.<br />
<br />
=== Width Point List ===<br />
Each Advanced Outline has a list of parameters that represent the information for each width item. They are called Width Points and consist of four sub-parameters:<br />
<br />
* '''Position''' (Real number): represents the position of the width point along the Spline. Although it is allowed to be any real number, its meaning is only from 0.0 to 1.0. 0.0 corresponds to the start of the Spline (first Spline point on the Spline list) and 1.0 to the last Spline point. For looped Splines 0.0 and 1.0 are equal. The position is represented by the light purple Handle that always lies on the Spline.<br />
* '''Width''' (Real number): It is the width multiplicator of the global Width parameter of the Advanced Outline Layer on the position given by the Position parameter. The final width is calculated multiplying the global Advanced Outline's Width (W) by the Width of the widthpoint (w) and adding the Expand parameter (E). Calculated width = W*w+E<br />
* '''Tip Side Before/After''': Those two sub-parameters controls how the width is interpolated before and after the current widthpoint. The sub-parameter can have four values: <br />
** '''Interpolate''': Between the previous/following width point, the width is calculated by interpolation based on smoothness value.<br />
** '''Rounded''': There is a rounded tip that points to the width point before or after. If the previous/following width point is 'Interpolate' on its posterior/previous side it considers that the width of the widthpoint in question is zero just before/after it. If the previous/posterior width point is other than 'Interpolate' then the segment between those two width points is empty. See examples to understand it fully.<br />
** '''Squared''': Same as Rounded but using square tip.<br />
** '''Peak''': Same as Rounded but using peak tip.<br />
** '''Flat''': Same as Rounded but using flat tip.<br />
<br />
The Width Point list has one internal non-animatable parameter called ''loop''. You can reach it by right clicking the Width Point List parameter. If the Width Point list is unlooped, then any width point that has a Position outside the range of [0,1] is clamped to (brought within) that range. For example: a Position = 1.35 is clamped to 1.0 then the Width Point List is unlooped. Otherwise, if the Width Point List is looped and a width point has a Position of 1.3, its modulus based on the range [0,1] is used, so it is turned to a position of 0.3.<br />
<br />
== Working with the Avdanced Outline ==<br />
<br />
=== Creation of the Advanced Outline ===<br />
<br />
You can create Advanced Outlines in three ways:<br />
* With the {{l|Draw Tool}} (check ''Create Advanced Outline'' in the tool options).<br />
* With the {{l|Spline Tool}} (check ''Create Advanced Outline'' in the tool options).<br />
* With the menu Insert-> Layer->Geometry->Advanced Outline.<br />
<br />
=== Change the width of the Width Points ===<br />
<br />
Initially the width Handles are hidden. You can make them visible by pressing ({{Shortcut|alt|5}}) or clicking on the width toggle button. It is possible to change the width using the {{l|Width Tool}} using the same procedure as for regular outlines. If you want more control over the width you can modify the width Handles with the {{l|Transform Tool}} ({{Shortcut|alt|A}}). More fine tunning is possible by expanding the width point sub-parameter and entering a specific value for the Width sub-parameter. In that case negative values are allowed to produce nice effects.<br />
<br />
=== Change the position of the Width Points ===<br />
<br />
When you make the width Handles of the width points visible/invisible, the position Handles also become visible/invisible. This way, the user has a single way to hide/show the position and width Handles.<br />
<br />
{{Note|Change the position of the Width Points|This may change in the future}}<br />
<br />
The position Handles of the width points can be modified using the {{l|Transform Tool}} ({{Shortcut|alt|A}}) and clicking and dragging the position Handle. You will notice that Handles are tied to the Spline so once clicked and dragged they can be placed at any way on the Spline. Notice that if you have a width point position Handle at position 0.2 and you click and drag at position 0.9 it may happen that you obtain a value of -0.1 because you dragged it in one step and the Width Point List may be looped. If you want to avoid those problems do the movement in small steps to indicate the correct path to follow when calculating the new position.<br />
<br />
=== Adding or removing width points ===<br />
To add a new width point you have to right click on the width point position Handle (purple Handle) to get the context menu. Then select "Add Item (smart)" here to create more width points entries. The width points are created this way:<br />
<br />
In the general case, the new widthpoint is created between the width point you click on and the "previous" width point. Depending on the loop status of the Spline, the "previous" width point can be the start of the Spline (unlooped) or the last widthpoint (looped). The worst case is when there is only one width point on the Width Point List. If you add one new item it will lie over the existing one.<br />
<br />
The newly added width point will have the interpolated width at the position where it is created. <br />
<br />
<br />
=== Specific actions for Width Points ===<br />
<br />
Some needed actions have been added to width points as well as functionality for existing actions for items of the List type parameters. You can reach the list of available actions by right clicking on the width point position or directly on the width point item of the Width Point List. Here are some descriptions of the available actions:<br />
<br />
* Convert: Width Points are composite Value Nodes so its natural format is Composite (you can access its components). But you can convert it to other formats. See Convert for details.<br />
* Disconnect: This will disconnect the width point item from the Composite type Value Node. That means that there won't be any Handle to show and that any of its values can be modified. Maybe it is useful for some types of workflows. To restore its Composite status, choose Convert->Composite.<br />
* Insert/ Remove Item Smart: This will add or remove a width point. If Remove is used in animation mode, it will also set the current width point as OFF instead of effectively removing it from the Width Point List. Opposite for the Insert Item Smart.<br />
* Mark Active Point as ON/OFF: You can set width points off to make it not count for width control while the width point is off. When the width point is half on to off or viceversa, the used width point should be the interpolation between the on and off status. But it doesn't work properly at the moment. On / Off values are not interpolated but fully on or fully off. This has to be corrected.<br />
* Export: See {{l|Export}}.<br />
* Loop: When set as looped, as mentioned before, it allows the width point positions loop around the range [0,1].<br />
* Rotate Order: Doesn't do anything.<br />
* Set Side Before/After to: Interpolate, Rounded, Squared, Peak, Flat. Those are shortcuts to do the same as going directly to the sub-parameter and choosing the appropriate Tip Type. Maybe it should be renamed to "Set Tip Before/After".<br />
* Set Width to default/zero: those actions have been added for two reasons. It is very common to want to set the width of a width point to zero. Despite the possibility of use the User Preference of Restrict Radius to First Quadrant, this way it is acceded quickly from the same usual menu. Also when a width point position Handle and a width point width Handle are on top of each other (width = 0) it is hard to modify the width or the position without trouble. To solve this the position Handle has preference over the width Handle in case of coincidence. So access the width Handle it is needed to have a quick action to set it to its default value (1.0).</div>Zurba11https://wiki.synfig.org/index.php?title=Outline_Layer/ru&diff=18803Outline Layer/ru2013-11-04T16:49:25Z<p>Zurba11: /* Расширение */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Контуры (Outline Layer)}}<br />
{{Category|Layers}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
<br />
{{l|Image:Layer_geometry_outline_icon.png|64px}}<br />
<br />
== О кривых контура ==<br />
<br />
Кривые контура используются для создания штрихов или окантовки залитых цветом областей, они придают "комиксный" вид анимации если обрисовать ими залитые цветом области. Также отдельные кривые контура (штрихи) используются для создания реалистичных объёмных рисунков и вместе с тенями (созданными градиентом или размыванием) являются основами создания художественной работы.<br />
<br />
Чтобы создать кривую контура используйте инструмент {{l|Spline Tool|"Кривые"}} и выставьте флажок "Создать кривую" (Create Outline) на Панели "Параметры инструмента" {{l|Tool Options Panel}}. Когда вы закончили создавать форму кривой контура и нажали кнопку "Создать" (или выбрали другой инструмент) можно считать что кривая создана, её цвет будет соответствовать выбранному для контура.<br />
<br />
== Параметры кривой контура ==<br />
<br />
Ниже представлены параметры кривой контура:<br />
<br />
{|border="0" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:#silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Z Depth Parameter|Глубина на оси Z}}<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Amount Parameter|Величина}}<br />
||1.000000<br />
||real<br />
<br />
|-<br />
||{{l|Image:type_integer_icon.png|16px}} {{l|Blend Method|Режим смешивания}}<br />
||Composite<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_color_icon.png|16px}} {{l|Colors Dialog|Цвет}}<br />
||<br />
{| style="width:95%; height:16px; background:black; color:black" border="1"<br />
|- <br />
|}<br />
||color<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_vector_icon.png|16px}} Исходная точка<br />
||0.000000u,0.000000u<br />
||vector<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Инвертировать<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||{{l|Image:Type_bool_icon.png|16px}} Сглаживание<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} Растушёвка<br />
||0.000000pt<br />
||real<br />
<br />
|-<br />
||{{l|Image:Type_integer_icon.png|16px}} Тип растушёвки<br />
||Fast Gaussian Blur<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_integer_icon.png|16px}} Обработка взаимопересечений<br />
||Non Zero<br />
||integer<br />
<br />
|-<br />
||{{l|Image:Type_list_icon.png|16px}} Вершины<br />
||List<br />
||list (Кривые)<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} Толщина контура<br />
||2.000000pt<br />
||real<br />
<br />
|-<br />
||{{l|Image:Type_real_icon.png|16px}} Расширение<br />
||0.000000pt<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Sharp Cusps<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||{{l|Image:Type_bool_icon.png|16px}} Rounded Begin<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Rounded End<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||{{l|Image:Type_real_icon.png|16px}} Loopyness<br />
||1.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Однородность<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|}<br />
<br />
<br />
== Специфические параметры кривой контура ==<br />
<br />
Первые 11 параметров кривой контура стандартные и их можно наблюдать для разных типов слоёв, кликните на ссылку чтобы прочитать их описания. Здесь описаны только параметры относящиеся именно к кривой контура.<br />
<br />
Ниже представлен скриншот с кривой контура в процессе создания:<br />
<br />
[[File:Outline Sample 0.63.06.png|frame|none]]<br />
<br />
=== Толщина контура ===<br />
<br />
Параметр толщина контура это величина представляющая собой рациональное число в пикселях и определяющее основное значение толщины для всех точек кривой одновременно. Он производит эффект в сочетании с параметром толщины дочерних вершин кривой, таким образом установив значение Толщины Контура в 1.0px конечный результат для каждой вершины будет получен исходя из формулы: Т = ОТК * ТВ + 2Р.<br />
<br />
Где:<br />
* Т - фактическая толщина для данной вершины<br />
* ОТК - общий параметр толщины всех вершин (то есть Толщина Контура)<br />
* ТВ - значение толщины конкретной вершины<br />
* Р - значение параметра Расширение <br />
<br />
<br />
Контрольная точка толщины будет показывать радиус для каждой вершины.(Ш/2)<br />
<br />
В конечном счёте толщина для каждой вершины будет ровна: ((Толщина Вершины * Толщина Контура) + Расширение*2):<br />
<br />
{| <br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer width 0.63.06.png|450px]] <br />
|-<br />
| изначальное изображение<br />
| после удвоения значения "Толщина Контура"<br />
|}<br />
<br />
Есть возможность установить отрицательное значение для толщины, которое вывернет вершину на изнанку. Вот пример на котором левая вершина имеет отрицательное значение толщины, а правая имеет положительное значение. Обратите внимание как края кривой пересекаются между вершинами по середине: <br />
<br />
{|<br />
| {{l|Image:Outline-negative-width.png}}<br />
| {{l|Image:Outline-negative-width-selected.png}}<br />
|}<br />
<br />
=== Расширение ===<br />
<br />
Параметр Расширение схож с Толщиной контура, но вместо того чтобы умножать значение ширины каждой вершины оно прибавляется к радиусу этой вершины. Другими словами (2*Расширение) добавляется к диаметру каждой вершины.<br />
<br />
В конечном счёте ширина каждой конкретной вершины будет ровна: ((Толщина Вершины * Толщина Контура) + Расширение*2):<br />
<br />
{| <br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer expand 0.63.06.png|450px]]<br />
|-<br />
| нулевое расширение<br />
| не нулевое расширение<br />
|}<br />
<br />
=== Острые пики ===<br />
<br />
Активирует 'острые пики' делает углы заострёнными если касательные разделены:<br />
{| <br />
| | [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer sharp 0.63.06.png|450px]]<br />
|-<br />
| не заострённые пики<br />
| заострённые пики<br />
|}<br />
<br />
=== Закруглённое начало ===<br />
<br />
Активирует 'закруглённое начало' делает начало кривой закруглённым:<br />
{| <br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer rounded begin 0.63.06.png|450px]]<br />
|-<br />
| не закруглённое начало<br />
| закруглённое начало<br />
|}<br />
<br />
=== Закруглённый конец ===<br />
<br />
Активирует 'закруглённый конец' делает конец кривой закруглённым:<br />
<br />
{| <br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer rounded end 0.63.06.png|450px]]<br />
|-<br />
| не закруглённый конец<br />
| закруглённый конец<br />
|}<br />
<br />
Nota : With cairo render activated, if quality superior to '''6''', enabling {{Literal|Rounded End}} enable also {{Literal|Rounded Begin}}.<br />
<br />
=== Loopyness ===<br />
<br />
Этот параметр на данный момент абсолютно ничего не делает!<br />
<br />
=== Однородность ===<br />
<br />
Включенная "Однородность" меняет метод изменения ширины контура от одной точки кривой до другой. Каждая точка на кривой имеет свою собственную толщину и сама кривая имеет свои параметры "Толщина контура" и "Расширение" которые используются для окончательного формирования толщины для каждой точки. Параметр "Однородность" контролирует то как изменяется толщина от одной точки к другой:<br />
*Когда "Однородность" не отмечена, ширина изменяется линейно (используется параметр сплайна "t")<br />
*Когда "Однородность" отмечена, ширина изменяется линейно (используется длинна сплайна).<br />
<br />
Отключение "Однородности" часто делает более широкий конец кривой "комковатым". Возможно это баг:<br />
<br />
{| <br />
| {{l|Image:Outline-not-homogeneous.png}}<br />
| {{l|Image:Outline-homogeneous.png}}<br />
|-<br />
| нет однородности<br />
| есть однородность<br />
|}<br />
<br />
=== Разное ===<br />
<br />
Параметр "Сглаживание" не относится на прямую к контурам, но он может оказаться полезным так как делает края более гладкими. <br />
<br />
{| <br />
| [[File:Outline-Layer no antialias 0.63.06.png|450px]]<br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
|-<br />
| нет сглаживания<br />
| есть сглаживание<br />
|}</div>Zurba11https://wiki.synfig.org/index.php?title=Outline_Layer/ru&diff=18802Outline Layer/ru2013-11-04T16:44:37Z<p>Zurba11: Изменил "Ширину контура" на "Толщину контура"</p>
<hr />
<div><!-- Page info --><br />
{{Title|Контуры (Outline Layer)}}<br />
{{Category|Layers}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
<br />
{{l|Image:Layer_geometry_outline_icon.png|64px}}<br />
<br />
== О кривых контура ==<br />
<br />
Кривые контура используются для создания штрихов или окантовки залитых цветом областей, они придают "комиксный" вид анимации если обрисовать ими залитые цветом области. Также отдельные кривые контура (штрихи) используются для создания реалистичных объёмных рисунков и вместе с тенями (созданными градиентом или размыванием) являются основами создания художественной работы.<br />
<br />
Чтобы создать кривую контура используйте инструмент {{l|Spline Tool|"Кривые"}} и выставьте флажок "Создать кривую" (Create Outline) на Панели "Параметры инструмента" {{l|Tool Options Panel}}. Когда вы закончили создавать форму кривой контура и нажали кнопку "Создать" (или выбрали другой инструмент) можно считать что кривая создана, её цвет будет соответствовать выбранному для контура.<br />
<br />
== Параметры кривой контура ==<br />
<br />
Ниже представлены параметры кривой контура:<br />
<br />
{|border="0" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:#silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Z Depth Parameter|Глубина на оси Z}}<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Amount Parameter|Величина}}<br />
||1.000000<br />
||real<br />
<br />
|-<br />
||{{l|Image:type_integer_icon.png|16px}} {{l|Blend Method|Режим смешивания}}<br />
||Composite<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_color_icon.png|16px}} {{l|Colors Dialog|Цвет}}<br />
||<br />
{| style="width:95%; height:16px; background:black; color:black" border="1"<br />
|- <br />
|}<br />
||color<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_vector_icon.png|16px}} Исходная точка<br />
||0.000000u,0.000000u<br />
||vector<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Инвертировать<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||{{l|Image:Type_bool_icon.png|16px}} Сглаживание<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} Растушёвка<br />
||0.000000pt<br />
||real<br />
<br />
|-<br />
||{{l|Image:Type_integer_icon.png|16px}} Тип растушёвки<br />
||Fast Gaussian Blur<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_integer_icon.png|16px}} Обработка взаимопересечений<br />
||Non Zero<br />
||integer<br />
<br />
|-<br />
||{{l|Image:Type_list_icon.png|16px}} Вершины<br />
||List<br />
||list (Кривые)<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} Толщина контура<br />
||2.000000pt<br />
||real<br />
<br />
|-<br />
||{{l|Image:Type_real_icon.png|16px}} Расширение<br />
||0.000000pt<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Sharp Cusps<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||{{l|Image:Type_bool_icon.png|16px}} Rounded Begin<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Rounded End<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||{{l|Image:Type_real_icon.png|16px}} Loopyness<br />
||1.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Однородность<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|}<br />
<br />
<br />
== Специфические параметры кривой контура ==<br />
<br />
Первые 11 параметров кривой контура стандартные и их можно наблюдать для разных типов слоёв, кликните на ссылку чтобы прочитать их описания. Здесь описаны только параметры относящиеся именно к кривой контура.<br />
<br />
Ниже представлен скриншот с кривой контура в процессе создания:<br />
<br />
[[File:Outline Sample 0.63.06.png|frame|none]]<br />
<br />
=== Толщина контура ===<br />
<br />
Параметр толщина контура это величина представляющая собой рациональное число в пикселях и определяющее основное значение толщины для всех точек кривой одновременно. Он производит эффект в сочетании с параметром толщины дочерних вершин кривой, таким образом установив значение Толщины Контура в 1.0px конечный результат для каждой вершины будет получен исходя из формулы: Т = ОТК * ТВ + 2Р.<br />
<br />
Где:<br />
* Т - фактическая толщина для данной вершины<br />
* ОТК - общий параметр толщины всех вершин (то есть Толщина Контура)<br />
* ТВ - значение толщины конкретной вершины<br />
* Р - значение параметра Расширение <br />
<br />
<br />
Контрольная точка толщины будет показывать радиус для каждой вершины.(Ш/2)<br />
<br />
В конечном счёте толщина для каждой вершины будет ровна: ((Толщина Вершины * Толщина Контура) + Расширение*2):<br />
<br />
{| <br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer width 0.63.06.png|450px]] <br />
|-<br />
| изначальное изображение<br />
| после удвоения значения "Толщина Контура"<br />
|}<br />
<br />
Есть возможность установить отрицательное значение для толщины, которое вывернет вершину на изнанку. Вот пример на котором левая вершина имеет отрицательное значение толщины, а правая имеет положительное значение. Обратите внимание как края кривой пересекаются между вершинами по середине: <br />
<br />
{|<br />
| {{l|Image:Outline-negative-width.png}}<br />
| {{l|Image:Outline-negative-width-selected.png}}<br />
|}<br />
<br />
=== Расширение ===<br />
<br />
Параметр Расширение схож с Шириной контура, но вместо того чтобы умножать значение ширины каждой вершины оно прибавляется к радиусу этой вершины. Другими словами (2*Расширение) добавляется к диаметру каждой вершины.<br />
<br />
В конечном счёте ширина каждой конкретной вершины будет ровна: ((Ширина Вершины * Ширина Контура) + Расширение*2):<br />
<br />
{| <br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer expand 0.63.06.png|450px]]<br />
|-<br />
| нулевое расширение<br />
| не нулевое расширение<br />
|}<br />
<br />
=== Острые пики ===<br />
<br />
Активирует 'острые пики' делает углы заострёнными если касательные разделены:<br />
{| <br />
| | [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer sharp 0.63.06.png|450px]]<br />
|-<br />
| не заострённые пики<br />
| заострённые пики<br />
|}<br />
<br />
=== Закруглённое начало ===<br />
<br />
Активирует 'закруглённое начало' делает начало кривой закруглённым:<br />
{| <br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer rounded begin 0.63.06.png|450px]]<br />
|-<br />
| не закруглённое начало<br />
| закруглённое начало<br />
|}<br />
<br />
=== Закруглённый конец ===<br />
<br />
Активирует 'закруглённый конец' делает конец кривой закруглённым:<br />
<br />
{| <br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer rounded end 0.63.06.png|450px]]<br />
|-<br />
| не закруглённый конец<br />
| закруглённый конец<br />
|}<br />
<br />
Nota : With cairo render activated, if quality superior to '''6''', enabling {{Literal|Rounded End}} enable also {{Literal|Rounded Begin}}.<br />
<br />
=== Loopyness ===<br />
<br />
Этот параметр на данный момент абсолютно ничего не делает!<br />
<br />
=== Однородность ===<br />
<br />
Включенная "Однородность" меняет метод изменения ширины контура от одной точки кривой до другой. Каждая точка на кривой имеет свою собственную толщину и сама кривая имеет свои параметры "Толщина контура" и "Расширение" которые используются для окончательного формирования толщины для каждой точки. Параметр "Однородность" контролирует то как изменяется толщина от одной точки к другой:<br />
*Когда "Однородность" не отмечена, ширина изменяется линейно (используется параметр сплайна "t")<br />
*Когда "Однородность" отмечена, ширина изменяется линейно (используется длинна сплайна).<br />
<br />
Отключение "Однородности" часто делает более широкий конец кривой "комковатым". Возможно это баг:<br />
<br />
{| <br />
| {{l|Image:Outline-not-homogeneous.png}}<br />
| {{l|Image:Outline-homogeneous.png}}<br />
|-<br />
| нет однородности<br />
| есть однородность<br />
|}<br />
<br />
=== Разное ===<br />
<br />
Параметр "Сглаживание" не относится на прямую к контурам, но он может оказаться полезным так как делает края более гладкими. <br />
<br />
{| <br />
| [[File:Outline-Layer no antialias 0.63.06.png|450px]]<br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
|-<br />
| нет сглаживания<br />
| есть сглаживание<br />
|}</div>Zurba11https://wiki.synfig.org/index.php?title=Advanced_Outline_Layer/ru&diff=18797Advanced Outline Layer/ru2013-11-03T17:03:07Z<p>Zurba11: Created page with "<!-- Page info --> {{Title|Улучшенная кривая}} {{Category|Layers}} {{NewTerminology}} <!-- Page info end --> Under construction! See {{l|Talk:Advanced_Outline..."</p>
<hr />
<div><!-- Page info --><br />
{{Title|Улучшенная кривая}}<br />
{{Category|Layers}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
Under construction! See {{l|Talk:Advanced_Outline_Layer|Advanced Outline Layer Talk}} page<br />
[[Image:Layer_geometry_advanced_outline_icon.png|64px]]<br />
<br />
== Что такое улучшенные кривые ==<br />
<br />
=== Отличия от контуров: Ширина кривой ===<br />
<br />
Контрольные точки ''Ширины'' определяют ширину обычной кривой в определённых местах.<br />
<br />
Обычная [[Outline Layer|кривая]] имеет Контрольные точки ширины которые связаны с вершинами кривой и определяют её форму в этих местах. Это значит что пользователь вынужден добавлять новую вершину каждый раз когда понадобится изменить ширину кривой в каком то конкретном месте. Это решение может оказаться проблематичным когда форма кривой достаточно проста, а вот её ширина меняется в широких пределах.<br />
<br />
Практика показывает что чаще всего возникает необходимость изменять толщину кривой независимо от расположения вершин на ней, именно эта функция и возложена на Улучшенную кривую "Контрольные точки толщины" которой устроены по другому принципу, они свободно перемещаются вдоль кривой и определяют её форму в любом произвольном месте.<br />
<br />
== New features ==<br />
<br />
Advanced Outline introduces some new features to the regular outline, as shown in this [http://www.youtube.com/watch?v=boM_ZC9VZ54 Advanced outline demo] video. They are listed with examples below:<br />
<br />
<gallery widths="490px" heights="300px" perrow="2"><br />
File:Variable-width-without-blinepoints.png | No need to place vertex to change the width<br />
File:Lots-of-blinepoints-width-just-two width-controls.png | Width controlled just by two points, while the Spline constructed of many vertices<br />
File:Different-types of tips.png | Different types of tips<br />
File: Segments of outlines.png | Segmented outline<br />
File:Different cusps types.png | Three global cusps types<br />
File:Smoothness control.png | Control of smoothness from linear (0.0) to smooth (1.0)<br />
</gallery><br />
<br />
==Parameters of Advanced Outline Layers==<br />
<br />
The parameters of the Advanced Outline Layers are:<br />
<br />
{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-<br />
||[[Image:Type_real_icon.png|16px]] [[Z Depth Parameter|Z Depth]]<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] [[Amount Parameter|Amount]]<br />
||1.000000<br />
||real<br />
<br />
|-<br />
||[[Image:type_integer_icon.png|16px]] [[Blend Method|Blend Method]]<br />
||Composite<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_color_icon.png|16px]] [[Colors Dialog|Color]]<br />
||<br />
{| style="width:95%; height:16px; background:black; color:black" border="1"<br />
|- <br />
|}<br />
||color<br />
<br />
|-style="background:#"<br />
||[[Image:Type_vector_icon.png|16px]] Origin<br />
||0.000000u,0.000000u<br />
||vector<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_bool_icon.png|16px]] Invert<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||[[Image:Type_bool_icon.png|16px]] Antialiasing<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Feather<br />
||0.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Type of Feather<br />
||Fast Gaussian Blur<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Winding Sytle<br />
||Non Zero<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_list_icon.png|16px]] Vertices<br />
||List<br />
||list (Spline)<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Outline Width<br />
||2.000000pt<br />
||real<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Expand<br />
||0.000000pt<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at Start<br />
||Rounded Stop<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_integer_icon.png|16px]] Tip Type at End<br />
||Rounded Stop<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_integer_icon.png|16px]] Cusps Type<br />
||Sharp<br />
||integer<br />
<br />
|-<br />
||[[Image:Type_real_icon.png|16px]] Smoothness<br />
||0.500000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_list_icon.png|16px]] Width Point List<br />
||List<br />
||list(WPList)<br />
<br />
|-<br />
||[[Image:Type_bool_icon.png|16px]] Fast<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_bool_icon.png|16px]] Dashed Outline<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||[[Image:Type_list_icon.png|16px]] Dash Item List<br />
||List<br />
||list(WPList)<br />
<br />
|-style="background:#eeeeee"<br />
||[[Image:Type_real_icon.png|16px]] Dash Items Offset<br />
||0.000000u<br />
||real<br />
<br />
|}<br />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />
==Specific parameters for Advanced Outline Layer==<br />
<br />
This section lists only the parameters specific to the Advanced Outline Layer. For documentation about the other parameters, refer to [[Outline Layer]].<br />
<br />
* Tip Type at start<br />
* Tip Type at end<br />
* Cusps type<br />
* Smoothness<br />
* Width Point List<br />
<br />
=== Tip type at start / end ===<br />
<br />
As with width points, the end and start of the unlooped Advanced Outlines has a type of tip defined. The user can choose between the same types of tips as for a width point. When the first/last width point has its before/after interpolation type set to Interpolate the start/end of the outline is rendered using the Tip type at start/end parameter.<br />
<br />
Those parameters don't have any effect if the Spline is looped or the first/last width point has its before/after interpolation type set to anything but Interpolate. In that case, the segment between the start/end width point and the start/end of the Spline is not rendered.<br />
<br />
The types of tips are the same as the width point tip types except that it doesn't offer the Interpolate type because it would not make sense:<br />
* Rounded<br />
* Squared<br />
* Peak<br />
* Flat<br />
<br />
=== Cusps type ===<br />
<br />
There are three types of cusps in the Advanced Outline:<br />
<br />
* Sharp<br />
* Rounded<br />
* Bevel<br />
<br />
The type of cusp is controlled for the entire layer so currently it is not possible to control the type of corner individually. Maybe in future versions it will be possible.<br />
<br />
=== Smoothness ===<br />
<br />
The Smoothness controls how the width is calculated between widthpoints. The width at a position p is a function of the surrounding width points. When smoothness is zero interpolation is lineal, when smoothness is 1.0 interpolation is given by a 5th degree smooth Spline.<br />
<br />
=== Width Point List ===<br />
Each Advanced Outline has a list of parameters that represent the information for each width item. They are called Width Points and consist of four sub-parameters:<br />
<br />
* '''Position''' (Real number): represents the position of the width point along the Spline. Although it is allowed to be any real number, its meaning is only from 0.0 to 1.0. 0.0 corresponds to the start of the Spline (first Spline point on the Spline list) and 1.0 to the last Spline point. For looped Splines 0.0 and 1.0 are equal. The position is represented by the light purple Handle that always lies on the Spline.<br />
* '''Width''' (Real number): It is the width multiplicator of the global Width parameter of the Advanced Outline Layer on the position given by the Position parameter. The final width is calculated multiplying the global Advanced Outline's Width (W) by the Width of the widthpoint (w) and adding the Expand parameter (E). Calculated width = W*w+E<br />
* '''Tip Side Before/After''': Those two sub-parameters controls how the width is interpolated before and after the current widthpoint. The sub-parameter can have four values: <br />
** '''Interpolate''': Between the previous/following width point, the width is calculated by interpolation based on smoothness value.<br />
** '''Rounded''': There is a rounded tip that points to the width point before or after. If the previous/following width point is 'Interpolate' on its posterior/previous side it considers that the width of the widthpoint in question is zero just before/after it. If the previous/posterior width point is other than 'Interpolate' then the segment between those two width points is empty. See examples to understand it fully.<br />
** '''Squared''': Same as Rounded but using square tip.<br />
** '''Peak''': Same as Rounded but using peak tip.<br />
** '''Flat''': Same as Rounded but using flat tip.<br />
<br />
The Width Point list has one internal non-animatable parameter called ''loop''. You can reach it by right clicking the Width Point List parameter. If the Width Point list is unlooped, then any width point that has a Position outside the range of [0,1] is clamped to (brought within) that range. For example: a Position = 1.35 is clamped to 1.0 then the Width Point List is unlooped. Otherwise, if the Width Point List is looped and a width point has a Position of 1.3, its modulus based on the range [0,1] is used, so it is turned to a position of 0.3.<br />
<br />
== Working with the Avdanced Outline ==<br />
<br />
=== Creation of the Advanced Outline ===<br />
<br />
You can create Advanced Outlines in three ways:<br />
* With the {{l|Draw Tool}} (check ''Create Advanced Outline'' in the tool options).<br />
* With the {{l|Spline Tool}} (check ''Create Advanced Outline'' in the tool options).<br />
* With the menu Insert-> Layer->Geometry->Advanced Outline.<br />
<br />
=== Change the width of the Width Points ===<br />
<br />
Initially the width Handles are hidden. You can make them visible by pressing ({{Shortcut|alt|5}}) or clicking on the width toggle button. It is possible to change the width using the {{l|Width Tool}} using the same procedure as for regular outlines. If you want more control over the width you can modify the width Handles with the {{l|Transform Tool}} ({{Shortcut|alt|A}}). More fine tunning is possible by expanding the width point sub-parameter and entering a specific value for the Width sub-parameter. In that case negative values are allowed to produce nice effects.<br />
<br />
=== Change the position of the Width Points ===<br />
<br />
When you make the width Handles of the width points visible/invisible, the position Handles also become visible/invisible. This way, the user has a single way to hide/show the position and width Handles.<br />
<br />
{{Note|Change the position of the Width Points|This may change in the future}}<br />
<br />
The position Handles of the width points can be modified using the {{l|Transform Tool}} ({{Shortcut|alt|A}}) and clicking and dragging the position Handle. You will notice that Handles are tied to the Spline so once clicked and dragged they can be placed at any way on the Spline. Notice that if you have a width point position Handle at position 0.2 and you click and drag at position 0.9 it may happen that you obtain a value of -0.1 because you dragged it in one step and the Width Point List may be looped. If you want to avoid those problems do the movement in small steps to indicate the correct path to follow when calculating the new position.<br />
<br />
=== Adding or removing width points ===<br />
To add a new width point you have to right click on the width point position Handle (purple Handle) to get the context menu. Then select "Add Item (smart)" here to create more width points entries. The width points are created this way:<br />
<br />
In the general case, the new widthpoint is created between the width point you click on and the "previous" width point. Depending on the loop status of the Spline, the "previous" width point can be the start of the Spline (unlooped) or the last widthpoint (looped). The worst case is when there is only one width point on the Width Point List. If you add one new item it will lie over the existing one.<br />
<br />
The newly added width point will have the interpolated width at the position where it is created. <br />
<br />
<br />
=== Specific actions for Width Points ===<br />
<br />
Some needed actions have been added to width points as well as functionality for existing actions for items of the List type parameters. You can reach the list of available actions by right clicking on the width point position or directly on the width point item of the Width Point List. Here are some descriptions of the available actions:<br />
<br />
* Convert: Width Points are composite Value Nodes so its natural format is Composite (you can access its components). But you can convert it to other formats. See Convert for details.<br />
* Disconnect: This will disconnect the width point item from the Composite type Value Node. That means that there won't be any Handle to show and that any of its values can be modified. Maybe it is useful for some types of workflows. To restore its Composite status, choose Convert->Composite.<br />
* Insert/ Remove Item Smart: This will add or remove a width point. If Remove is used in animation mode, it will also set the current width point as OFF instead of effectively removing it from the Width Point List. Opposite for the Insert Item Smart.<br />
* Mark Active Point as ON/OFF: You can set width points off to make it not count for width control while the width point is off. When the width point is half on to off or viceversa, the used width point should be the interpolation between the on and off status. But it doesn't work properly at the moment. On / Off values are not interpolated but fully on or fully off. This has to be corrected.<br />
* Export: See {{l|Export}}.<br />
* Loop: When set as looped, as mentioned before, it allows the width point positions loop around the range [0,1].<br />
* Rotate Order: Doesn't do anything.<br />
* Set Side Before/After to: Interpolate, Rounded, Squared, Peak, Flat. Those are shortcuts to do the same as going directly to the sub-parameter and choosing the appropriate Tip Type. Maybe it should be renamed to "Set Tip Before/After".<br />
* Set Width to default/zero: those actions have been added for two reasons. It is very common to want to set the width of a width point to zero. Despite the possibility of use the User Preference of Restrict Radius to First Quadrant, this way it is acceded quickly from the same usual menu. Also when a width point position Handle and a width point width Handle are on top of each other (width = 0) it is hard to modify the width or the position without trouble. To solve this the position Handle has preference over the width Handle in case of coincidence. So access the width Handle it is needed to have a quick action to set it to its default value (1.0).</div>Zurba11https://wiki.synfig.org/index.php?title=Outline_Layer/ru&diff=18796Outline Layer/ru2013-11-01T18:41:54Z<p>Zurba11: NewTerminology</p>
<hr />
<div><!-- Page info --><br />
{{Title|Контуры (Outline Layer)}}<br />
{{Category|Layers}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
<br />
{{l|Image:Layer_geometry_outline_icon.png|64px}}<br />
<br />
== О кривых контура ==<br />
<br />
Кривые контура используются для создания штрихов или окантовки залитых цветом областей, они придают "комиксный" вид анимации если обрисовать ими залитые цветом области. Также отдельные кривые контура (штрихи) используются для создания реалистичных объёмных рисунков и вместе с тенями (созданными градиентом или размыванием) являются основами создания художественной работы.<br />
<br />
Чтобы создать кривую контура используйте инструмент {{l|Spline Tool|"Кривые"}} и выставьте флажок "Создать кривую" (Create Outline) на Панели "Параметры инструмента" {{l|Tool Options Panel}}. Когда вы закончили создавать форму кривой контура и нажали кнопку "Создать" (или выбрали другой инструмент) можно считать что кривая создана, её цвет будет соответствовать выбранному для контура.<br />
<br />
== Параметры кривой контура ==<br />
<br />
Ниже представлены параметры кривой контура:<br />
<br />
{|border="0" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:#silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Z Depth Parameter|Глубина на оси Z}}<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Amount Parameter|Величина}}<br />
||1.000000<br />
||real<br />
<br />
|-<br />
||{{l|Image:type_integer_icon.png|16px}} {{l|Blend Method|Режим смешивания}}<br />
||Composite<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_color_icon.png|16px}} {{l|Colors Dialog|Цвет}}<br />
||<br />
{| style="width:95%; height:16px; background:black; color:black" border="1"<br />
|- <br />
|}<br />
||color<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_vector_icon.png|16px}} Исходная точка<br />
||0.000000u,0.000000u<br />
||vector<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Инвертировать<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||{{l|Image:Type_bool_icon.png|16px}} Сглаживание<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} Растушёвка<br />
||0.000000pt<br />
||real<br />
<br />
|-<br />
||{{l|Image:Type_integer_icon.png|16px}} Тип растушёвки<br />
||Fast Gaussian Blur<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_integer_icon.png|16px}} Обработка взаимопересечений<br />
||Non Zero<br />
||integer<br />
<br />
|-<br />
||{{l|Image:Type_list_icon.png|16px}} Вершины<br />
||List<br />
||list (Кривые)<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} Толщина контура<br />
||2.000000pt<br />
||real<br />
<br />
|-<br />
||{{l|Image:Type_real_icon.png|16px}} Расширение<br />
||0.000000pt<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Sharp Cusps<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||{{l|Image:Type_bool_icon.png|16px}} Rounded Begin<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Rounded End<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||{{l|Image:Type_real_icon.png|16px}} Loopyness<br />
||1.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Однородность<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|}<br />
<br />
<br />
== Специфические параметры кривой контура ==<br />
<br />
Первые 11 параметров кривой контура стандартные и их можно наблюдать для разных типов слоёв, кликните на ссылку чтобы прочитать их описания. Здесь описаны только параметры относящиеся именно к кривой контура.<br />
<br />
Ниже представлен скриншот с кривой контура в процессе создания:<br />
<br />
[[File:Outline Sample 0.63.06.png|frame|none]]<br />
<br />
=== Ширина контура ===<br />
<br />
Параметр ширина контура это величина представляющая собой рациональное число в пикселях и определяющее основное значение ширины для всех точек кривой одновременно. Он производит эффект в сочетании с параметром ширины дочерних вершин кривой, таким образом установив значение Ширины Контура в 1.0px конечный результат для каждой вершины будет получен исходя из формулы: Ш = ОШК * ШВ + 2Р.<br />
<br />
Где:<br />
* Ш - фактическая ширина для данной вершины<br />
* ОШК - общий параметр ширины всех вершин (то есть Ширина Контура)<br />
* ШВ - значение ширины конкретной вершины<br />
* Р - значение параметра Расширение <br />
<br />
<br />
Контрольная точка толщины будет показывать радиус для каждой вершины.(Ш/2)<br />
<br />
В конечном счёте ширина для каждой вершины будет ровна: ((Ширина Вершины * Ширину Контура) + Расширение*2):<br />
<br />
{| <br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer width 0.63.06.png|450px]] <br />
|-<br />
| изначальное изображение<br />
| после удвоения значения "Ширина Контура"<br />
|}<br />
<br />
Есть возможность установить отрицательное значение для ширины, которое вывернет вершину на изнанку. Вот пример на котором левая вершина имеет отрицательное значение ширины, а правая имеет положительное значение. Обратите внимание как края кривой пересекаются между вершинами по середине: <br />
<br />
{|<br />
| {{l|Image:Outline-negative-width.png}}<br />
| {{l|Image:Outline-negative-width-selected.png}}<br />
|}<br />
<br />
=== Расширение ===<br />
<br />
Параметр Расширение схож с Шириной контура, но вместо того чтобы умножать значение ширины каждой вершины оно прибавляется к радиусу этой вершины. Другими словами (2*Расширение) добавляется к диаметру каждой вершины.<br />
<br />
В конечном счёте ширина каждой конкретной вершины будет ровна: ((Ширина Вершины * Ширина Контура) + Расширение*2):<br />
<br />
{| <br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer expand 0.63.06.png|450px]]<br />
|-<br />
| нулевое расширение<br />
| не нулевое расширение<br />
|}<br />
<br />
=== Острые пики ===<br />
<br />
Активирует 'острые пики' делает углы заострёнными если касательные разделены:<br />
{| <br />
| | [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer sharp 0.63.06.png|450px]]<br />
|-<br />
| не заострённые пики<br />
| заострённые пики<br />
|}<br />
<br />
=== Закруглённое начало ===<br />
<br />
Активирует 'закруглённое начало' делает начало кривой закруглённым:<br />
{| <br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer rounded begin 0.63.06.png|450px]]<br />
|-<br />
| не закруглённое начало<br />
| закруглённое начало<br />
|}<br />
<br />
=== Закруглённый конец ===<br />
<br />
Активирует 'закруглённый конец' делает конец кривой закруглённым:<br />
<br />
{| <br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer rounded end 0.63.06.png|450px]]<br />
|-<br />
| не закруглённый конец<br />
| закруглённый конец<br />
|}<br />
<br />
Nota : With cairo render activated, if quality superior to '''6''', enabling {{Literal|Rounded End}} enable also {{Literal|Rounded Begin}}.<br />
<br />
=== Loopyness ===<br />
<br />
Этот параметр на данный момент абсолютно ничего не делает!<br />
<br />
=== Однородность ===<br />
<br />
Включенная "Однородность" меняет метод изменения ширины контура от одной точки кривой до другой. Каждая точка на кривой имеет свою собственную толщину и сама кривая имеет свои параметры "Толщина контура" и "Расширение" которые используются для окончательного формирования толщины для каждой точки. Параметр "Однородность" контролирует то как изменяется толщина от одной точки к другой:<br />
*Когда "Однородность" не отмечена, ширина изменяется линейно (используется параметр сплайна "t")<br />
*Когда "Однородность" отмечена, ширина изменяется линейно (используется длинна сплайна).<br />
<br />
Отключение "Однородности" часто делает более широкий конец кривой "комковатым". Возможно это баг:<br />
<br />
{| <br />
| {{l|Image:Outline-not-homogeneous.png}}<br />
| {{l|Image:Outline-homogeneous.png}}<br />
|-<br />
| нет однородности<br />
| есть однородность<br />
|}<br />
<br />
=== Разное ===<br />
<br />
Параметр "Сглаживание" не относится на прямую к контурам, но он может оказаться полезным так как делает края более гладкими. <br />
<br />
{| <br />
| [[File:Outline-Layer no antialias 0.63.06.png|450px]]<br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
|-<br />
| нет сглаживания<br />
| есть сглаживание<br />
|}</div>Zurba11https://wiki.synfig.org/index.php?title=Outline_Layer/ru&diff=18795Outline Layer/ru2013-11-01T18:31:47Z<p>Zurba11: /* Параметры кривой контура */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Контуры (Outline Layer)}}<br />
{{Category|Layers}}<br />
<!-- Page info end --><br />
<br />
{{l|Image:Layer_geometry_outline_icon.png|64px}}<br />
<br />
== О кривых контура ==<br />
<br />
Кривые контура используются для создания штрихов или окантовки залитых цветом областей, они придают "комиксный" вид анимации если обрисовать ими залитые цветом области. Также отдельные кривые контура (штрихи) используются для создания реалистичных объёмных рисунков и вместе с тенями (созданными градиентом или размыванием) являются основами создания художественной работы.<br />
<br />
Чтобы создать кривую контура используйте инструмент {{l|Spline Tool|"Кривые"}} и выставьте флажок "Создать кривую" (Create Outline) на Панели "Параметры инструмента" {{l|Tool Options Panel}}. Когда вы закончили создавать форму кривой контура и нажали кнопку "Создать" (или выбрали другой инструмент) можно считать что кривая создана, её цвет будет соответствовать выбранному для контура.<br />
<br />
== Параметры кривой контура ==<br />
<br />
Ниже представлены параметры кривой контура:<br />
<br />
{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:#silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Z Depth Parameter|Глубина на оси Z}}<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Amount Parameter|Величина}}<br />
||1.000000<br />
||real<br />
<br />
|-<br />
||{{l|Image:type_integer_icon.png|16px}} {{l|Blend Method|Режим смешивания}}<br />
||Composite<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_color_icon.png|16px}} {{l|Colors Dialog|Цвет}}<br />
||<br />
{| style="width:95%; height:16px; background:black; color:black" border="1"<br />
|- <br />
|}<br />
||color<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_vector_icon.png|16px}} Исходная точка<br />
||0.000000u,0.000000u<br />
||vector<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Инвертировать<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||{{l|Image:Type_bool_icon.png|16px}} Сглаживание<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} Растушёвка<br />
||0.000000pt<br />
||real<br />
<br />
|-<br />
||{{l|Image:Type_integer_icon.png|16px}} Тип растушёвки<br />
||Fast Gaussian Blur<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_integer_icon.png|16px}} Обработка взаимопересечений<br />
||Non Zero<br />
||integer<br />
<br />
|-<br />
||{{l|Image:Type_list_icon.png|16px}} Вершины<br />
||List<br />
||list (Кривые)<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} Толщина контура<br />
||2.000000pt<br />
||real<br />
<br />
|-<br />
||{{l|Image:Type_real_icon.png|16px}} Расширение<br />
||0.000000pt<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Sharp Cusps<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||{{l|Image:Type_bool_icon.png|16px}} Rounded Begin<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Rounded End<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||{{l|Image:Type_real_icon.png|16px}} Loopyness<br />
||1.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Однородность<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|}<br />
<br />
== Специфические параметры кривой контура ==<br />
<br />
Первые 11 параметров кривой контура стандартные и их можно наблюдать для разных типов слоёв, кликните на ссылку чтобы прочитать их описания. Здесь описаны только параметры относящиеся именно к кривой контура.<br />
<br />
Ниже представлен скриншот с кривой контура в процессе создания:<br />
<br />
{{l|Image:Outline Sample 0.63.06.png}}<br />
<br />
=== Ширина контура ===<br />
<br />
Параметр ширина контура это величина представляющая собой рациональное число в пикселях и определяющее основное значение ширины для всех точек кривой одновременно. Он производит эффект в сочетании с параметром ширины дочерних вершин кривой, таким образом установив значение Ширины Контура в 1.0px конечный результат для каждой вершины будет получен исходя из формулы: Ш = ОШК * ШВ + 2Р.<br />
<br />
Где:<br />
* Ш - фактическая ширина для данной вершины<br />
* ОШК - общий параметр ширины всех вершин (то есть Ширина Контура)<br />
* ШВ - значение ширины конкретной вершины<br />
* Р - значение параметра Расширение <br />
<br />
<br />
Контрольная точка толщины будет показывать радиус для каждой вершины.(Ш/2)<br />
<br />
В конечном счёте ширина для каждой вершины будет ровна: ((Ширина Вершины * Ширину Контура) + Расширение*2):<br />
<br />
{| <br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer width 0.63.06.png|450px]] <br />
|-<br />
| изначальное изображение<br />
| после удвоения значения "Ширина Контура"<br />
|}<br />
<br />
Есть возможность установить отрицательное значение для ширины, которое вывернет вершину на изнанку. Вот пример на котором левая вершина имеет отрицательное значение ширины, а правая имеет положительное значение. Обратите внимание как края кривой пересекаются между вершинами по середине: <br />
<br />
{|<br />
| {{l|Image:Outline-negative-width.png}}<br />
| {{l|Image:Outline-negative-width-selected.png}}<br />
|}<br />
<br />
=== Расширение ===<br />
<br />
Параметр Расширение схож с Шириной контура, но вместо того чтобы умножать значение ширины каждой вершины оно прибавляется к радиусу этой вершины. Другими словами (2*Расширение) добавляется к диаметру каждой вершины.<br />
<br />
В конечном счёте ширина каждой конкретной вершины будет ровна: ((Ширина Вершины * Ширина Контура) + Расширение*2):<br />
<br />
{| <br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer expand 0.63.06.png|450px]]<br />
|-<br />
| нулевое расширение<br />
| не нулевое расширение<br />
|}<br />
<br />
=== Острые пики ===<br />
<br />
Активирует 'острые пики' делает углы заострёнными если касательные разделены:<br />
{| <br />
| | [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer sharp 0.63.06.png|450px]]<br />
|-<br />
| не заострённые пики<br />
| заострённые пики<br />
|}<br />
<br />
=== Закруглённое начало ===<br />
<br />
Активирует 'закруглённое начало' делает начало кривой закруглённым:<br />
{| <br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer rounded begin 0.63.06.png|450px]]<br />
|-<br />
| не закруглённое начало<br />
| закруглённое начало<br />
|}<br />
<br />
=== Закруглённый конец ===<br />
<br />
Активирует 'закруглённый конец' делает конец кривой закруглённым:<br />
<br />
{| <br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer rounded end 0.63.06.png|450px]]<br />
|-<br />
| не закруглённый конец<br />
| закруглённый конец<br />
|}<br />
<br />
Nota : With cairo render activated, if quality superior to '''6''', enabling {{Literal|Rounded End}} enable also {{Literal|Rounded Begin}}.<br />
<br />
=== Loopyness ===<br />
<br />
Этот параметр на данный момент абсолютно ничего не делает!<br />
<br />
=== Однородность ===<br />
<br />
Включенная "Однородность" меняет метод изменения ширины контура от одной точки кривой до другой. Каждая точка на кривой имеет свою собственную толщину и сама кривая имеет свои параметры "Толщина контура" и "Расширение" которые используются для окончательного формирования толщины для каждой точки. Параметр "Однородность" контролирует то как изменяется толщина от одной точки к другой:<br />
*Когда "Однородность" не отмечена, ширина изменяется линейно (используется параметр сплайна "t")<br />
*Когда "Однородность" отмечена, ширина изменяется линейно (используется длинна сплайна).<br />
<br />
Отключение "Однородности" часто делает более широкий конец кривой "комковатым". Возможно это баг:<br />
<br />
{| <br />
| {{l|Image:Outline-not-homogeneous.png}}<br />
| {{l|Image:Outline-homogeneous.png}}<br />
|-<br />
| нет однородности<br />
| есть однородность<br />
|}<br />
<br />
=== Разное ===<br />
<br />
Параметр "Сглаживание" не относится на прямую к контурам, но он может оказаться полезным так как делает края более гладкими. <br />
<br />
{| <br />
| [[File:Outline-Layer no antialias 0.63.06.png|450px]]<br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
|-<br />
| нет сглаживания<br />
| есть сглаживание<br />
|}</div>Zurba11https://wiki.synfig.org/index.php?title=Outline_Layer/ru&diff=18794Outline Layer/ru2013-11-01T18:24:55Z<p>Zurba11: /* Специфические параметры кривой контура */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Контуры (Outline Layer)}}<br />
{{Category|Layers}}<br />
<!-- Page info end --><br />
<br />
{{l|Image:Layer_geometry_outline_icon.png|64px}}<br />
<br />
== О кривых контура ==<br />
<br />
Кривые контура используются для создания штрихов или окантовки залитых цветом областей, они придают "комиксный" вид анимации если обрисовать ими залитые цветом области. Также отдельные кривые контура (штрихи) используются для создания реалистичных объёмных рисунков и вместе с тенями (созданными градиентом или размыванием) являются основами создания художественной работы.<br />
<br />
Чтобы создать кривую контура используйте инструмент {{l|Spline Tool|"Кривые"}} и выставьте флажок "Создать кривую" (Create Outline) на Панели "Параметры инструмента" {{l|Tool Options Panel}}. Когда вы закончили создавать форму кривой контура и нажали кнопку "Создать" (или выбрали другой инструмент) можно считать что кривая создана, её цвет будет соответствовать выбранному для контура.<br />
<br />
== Параметры кривой контура ==<br />
<br />
Ниже представлены параметры кривой контура:<br />
<br />
{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:#silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Z Depth Parameter|Z Depth}}<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Amount Parameter|Amount}}<br />
||1.000000<br />
||real<br />
<br />
|-<br />
||{{l|Image:type_integer_icon.png|16px}} {{l|Blend Method|Blend Method}}<br />
||Composite<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_color_icon.png|16px}} {{l|Colors Dialog|Color}}<br />
||<br />
{| style="width:95%; height:16px; background:black; color:black" border="1"<br />
|- <br />
|}<br />
||color<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_vector_icon.png|16px}} Origin<br />
||0.000000u,0.000000u<br />
||vector<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Invert<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||{{l|Image:Type_bool_icon.png|16px}} Antialiasing<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} Feather<br />
||0.000000pt<br />
||real<br />
<br />
|-<br />
||{{l|Image:Type_integer_icon.png|16px}} Type of Feather<br />
||Fast Gaussian Blur<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_integer_icon.png|16px}} Winding Style<br />
||Non Zero<br />
||integer<br />
<br />
|-<br />
||{{l|Image:Type_list_icon.png|16px}} Vertices<br />
||List<br />
||list (BLine)<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} Outline Width<br />
||2.000000pt<br />
||real<br />
<br />
|-<br />
||{{l|Image:Type_real_icon.png|16px}} Expand<br />
||0.000000pt<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Sharp Cusps<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||{{l|Image:Type_bool_icon.png|16px}} Rounded Begin<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Rounded End<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||{{l|Image:Type_real_icon.png|16px}} Loopyness<br />
||1.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Homogeneous<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|}<br />
<br />
== Специфические параметры кривой контура ==<br />
<br />
Первые 11 параметров кривой контура стандартные и их можно наблюдать для разных типов слоёв, кликните на ссылку чтобы прочитать их описания. Здесь описаны только параметры относящиеся именно к кривой контура.<br />
<br />
Ниже представлен скриншот с кривой контура в процессе создания:<br />
<br />
{{l|Image:Outline Sample 0.63.06.png}}<br />
<br />
=== Ширина контура ===<br />
<br />
Параметр ширина контура это величина представляющая собой рациональное число в пикселях и определяющее основное значение ширины для всех точек кривой одновременно. Он производит эффект в сочетании с параметром ширины дочерних вершин кривой, таким образом установив значение Ширины Контура в 1.0px конечный результат для каждой вершины будет получен исходя из формулы: Ш = ОШК * ШВ + 2Р.<br />
<br />
Где:<br />
* Ш - фактическая ширина для данной вершины<br />
* ОШК - общий параметр ширины всех вершин (то есть Ширина Контура)<br />
* ШВ - значение ширины конкретной вершины<br />
* Р - значение параметра Расширение <br />
<br />
<br />
Контрольная точка толщины будет показывать радиус для каждой вершины.(Ш/2)<br />
<br />
В конечном счёте ширина для каждой вершины будет ровна: ((Ширина Вершины * Ширину Контура) + Расширение*2):<br />
<br />
{| <br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer width 0.63.06.png|450px]] <br />
|-<br />
| изначальное изображение<br />
| после удвоения значения "Ширина Контура"<br />
|}<br />
<br />
Есть возможность установить отрицательное значение для ширины, которое вывернет вершину на изнанку. Вот пример на котором левая вершина имеет отрицательное значение ширины, а правая имеет положительное значение. Обратите внимание как края кривой пересекаются между вершинами по середине: <br />
<br />
{|<br />
| {{l|Image:Outline-negative-width.png}}<br />
| {{l|Image:Outline-negative-width-selected.png}}<br />
|}<br />
<br />
=== Расширение ===<br />
<br />
Параметр Расширение схож с Шириной контура, но вместо того чтобы умножать значение ширины каждой вершины оно прибавляется к радиусу этой вершины. Другими словами (2*Расширение) добавляется к диаметру каждой вершины.<br />
<br />
В конечном счёте ширина каждой конкретной вершины будет ровна: ((Ширина Вершины * Ширина Контура) + Расширение*2):<br />
<br />
{| <br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer expand 0.63.06.png|450px]]<br />
|-<br />
| нулевое расширение<br />
| не нулевое расширение<br />
|}<br />
<br />
=== Острые пики ===<br />
<br />
Активирует 'острые пики' делает углы заострёнными если касательные разделены:<br />
{| <br />
| | [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer sharp 0.63.06.png|450px]]<br />
|-<br />
| не заострённые пики<br />
| заострённые пики<br />
|}<br />
<br />
=== Закруглённое начало ===<br />
<br />
Активирует 'закруглённое начало' делает начало кривой закруглённым:<br />
{| <br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer rounded begin 0.63.06.png|450px]]<br />
|-<br />
| не закруглённое начало<br />
| закруглённое начало<br />
|}<br />
<br />
=== Закруглённый конец ===<br />
<br />
Активирует 'закруглённый конец' делает конец кривой закруглённым:<br />
<br />
{| <br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
| [[File:Outline-Layer rounded end 0.63.06.png|450px]]<br />
|-<br />
| не закруглённый конец<br />
| закруглённый конец<br />
|}<br />
<br />
Nota : With cairo render activated, if quality superior to '''6''', enabling {{Literal|Rounded End}} enable also {{Literal|Rounded Begin}}.<br />
<br />
=== Loopyness ===<br />
<br />
Этот параметр на данный момент абсолютно ничего не делает!<br />
<br />
=== Однородность ===<br />
<br />
Включенная "Однородность" меняет метод изменения ширины контура от одной точки кривой до другой. Каждая точка на кривой имеет свою собственную толщину и сама кривая имеет свои параметры "Толщина контура" и "Расширение" которые используются для окончательного формирования толщины для каждой точки. Параметр "Однородность" контролирует то как изменяется толщина от одной точки к другой:<br />
*Когда "Однородность" не отмечена, ширина изменяется линейно (используется параметр сплайна "t")<br />
*Когда "Однородность" отмечена, ширина изменяется линейно (используется длинна сплайна).<br />
<br />
Отключение "Однородности" часто делает более широкий конец кривой "комковатым". Возможно это баг:<br />
<br />
{| <br />
| {{l|Image:Outline-not-homogeneous.png}}<br />
| {{l|Image:Outline-homogeneous.png}}<br />
|-<br />
| нет однородности<br />
| есть однородность<br />
|}<br />
<br />
=== Разное ===<br />
<br />
Параметр "Сглаживание" не относится на прямую к контурам, но он может оказаться полезным так как делает края более гладкими. <br />
<br />
{| <br />
| [[File:Outline-Layer no antialias 0.63.06.png|450px]]<br />
| [[File:Outline-Layer default 0.63.06.png|450px]]<br />
|-<br />
| нет сглаживания<br />
| есть сглаживание<br />
|}</div>Zurba11https://wiki.synfig.org/index.php?title=Outline_Layer/ru&diff=18793Outline Layer/ru2013-11-01T18:12:42Z<p>Zurba11: /* О кривых контура */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Контуры (Outline Layer)}}<br />
{{Category|Layers}}<br />
<!-- Page info end --><br />
<br />
{{l|Image:Layer_geometry_outline_icon.png|64px}}<br />
<br />
== О кривых контура ==<br />
<br />
Кривые контура используются для создания штрихов или окантовки залитых цветом областей, они придают "комиксный" вид анимации если обрисовать ими залитые цветом области. Также отдельные кривые контура (штрихи) используются для создания реалистичных объёмных рисунков и вместе с тенями (созданными градиентом или размыванием) являются основами создания художественной работы.<br />
<br />
Чтобы создать кривую контура используйте инструмент {{l|Spline Tool|"Кривые"}} и выставьте флажок "Создать кривую" (Create Outline) на Панели "Параметры инструмента" {{l|Tool Options Panel}}. Когда вы закончили создавать форму кривой контура и нажали кнопку "Создать" (или выбрали другой инструмент) можно считать что кривая создана, её цвет будет соответствовать выбранному для контура.<br />
<br />
== Параметры кривой контура ==<br />
<br />
Ниже представлены параметры кривой контура:<br />
<br />
{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0" <br />
|-style="background:#silver"<br />
|'''Name'''||'''Value'''||'''Type''' <br />
|-<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Z Depth Parameter|Z Depth}}<br />
||0.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} {{l|Amount Parameter|Amount}}<br />
||1.000000<br />
||real<br />
<br />
|-<br />
||{{l|Image:type_integer_icon.png|16px}} {{l|Blend Method|Blend Method}}<br />
||Composite<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_color_icon.png|16px}} {{l|Colors Dialog|Color}}<br />
||<br />
{| style="width:95%; height:16px; background:black; color:black" border="1"<br />
|- <br />
|}<br />
||color<br />
<br />
|-style="background:#"<br />
||{{l|Image:Type_vector_icon.png|16px}} Origin<br />
||0.000000u,0.000000u<br />
||vector<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Invert<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||{{l|Image:Type_bool_icon.png|16px}} Antialiasing<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} Feather<br />
||0.000000pt<br />
||real<br />
<br />
|-<br />
||{{l|Image:Type_integer_icon.png|16px}} Type of Feather<br />
||Fast Gaussian Blur<br />
||integer<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_integer_icon.png|16px}} Winding Style<br />
||Non Zero<br />
||integer<br />
<br />
|-<br />
||{{l|Image:Type_list_icon.png|16px}} Vertices<br />
||List<br />
||list (BLine)<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_real_icon.png|16px}} Outline Width<br />
||2.000000pt<br />
||real<br />
<br />
|-<br />
||{{l|Image:Type_real_icon.png|16px}} Expand<br />
||0.000000pt<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Sharp Cusps<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||{{l|Image:Type_bool_icon.png|16px}} Rounded Begin<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Rounded End<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|-<br />
||{{l|Image:Type_real_icon.png|16px}} Loopyness<br />
||1.000000<br />
||real<br />
<br />
|-style="background:#eeeeee"<br />
||{{l|Image:Type_bool_icon.png|16px}} Homogeneous<br />
||<br />
{| style="width:16px; height:16px" border="1"<br />
|- <br />
|}<br />
||bool<br />
<br />
|}<br />
<br />
== Специфические параметры кривой контура ==<br />
<br />
Первые 11 параметров кривой контура стандартные и их можно наблюдать для разных типов слоёв, кликните на ссылку чтобы прочитать их описания. Здесь описаны только параметры относящиеся именно к кривой контура.<br />
<br />
Ниже представлен скриншот с кривой контура в процессе создания:<br />
<br />
{{l|Image:Outline_Sample.png}}<br />
<br />
=== Ширина контура ===<br />
<br />
Параметр ширина контура это величина представляющая собой рациональное число в пикселях и определяющее основное значение ширины для всех точек кривой одновременно. Он производит эффект в сочетании с параметром ширины дочерних вершин кривой, таким образом установив значение Ширины Контура в 1.0px конечный результат для каждой вершины будет получен исходя из формулы: Ш = ОШК * ШВ + 2Р.<br />
<br />
Где:<br />
* Ш - фактическая ширина для данной вершины<br />
* ОШК - общий параметр ширины всех вершин (то есть Ширина Контура)<br />
* ШВ - значение ширины конкретной вершины<br />
* Р - значение параметра Расширение <br />
<br />
<br />
Контрольная точка толщины будет показывать радиус для каждой вершины.(Ш/2)<br />
<br />
В конечном счёте ширина для каждой вершины будет ровна: ((Ширина Вершины * Ширину Контура) + Расширение*2):<br />
<br />
{| <br />
| {{l|Image:Outline-default.png}}<br />
| {{l|Image:Outline-outline-width.png}} <br />
|-<br />
| изначальное изображение<br />
| после удвоения значения "Ширина Контура"<br />
|}<br />
<br />
Есть возможность установить отрицательное значение для ширины, которое вывернет вершину на изнанку. Вот пример на котором левая вершина имеет отрицательное значение ширины, а правая имеет положительное значение. Обратите внимание как края кривой пересекаются между вершинами по середине: <br />
<br />
{|<br />
| {{l|Image:Outline-negative-width.png}}<br />
| {{l|Image:Outline-negative-width-selected.png}}<br />
|}<br />
<br />
=== Расширение ===<br />
<br />
Параметр Расширение схож с Шириной контура, но вместо того чтобы умножать значение ширины каждой вершины оно прибавляется к радиусу этой вершины. Другими словами (2*Расширение) добавляется к диаметру каждой вершины.<br />
<br />
В конечном счёте ширина каждой конкретной вершины будет ровна: ((Ширина Вершины * Ширина Контура) + Расширение*2):<br />
<br />
{| <br />
| {{l|Image:Outline-default.png}}<br />
| {{l|Image:Outline-expand.png}} <br />
|-<br />
| нулевое расширение<br />
| не нулевое расширение<br />
|}<br />
<br />
=== Острые пики ===<br />
<br />
Активирует 'острые пики' делает углы заострёнными если касательные разделены:<br />
{| <br />
| {{l|Image:Outline-default.png}}<br />
| {{l|Image:Outline-sharp-cusps.png}}<br />
|-<br />
| не заострённые пики<br />
| заострённые пики<br />
|}<br />
<br />
=== Закруглённое начало ===<br />
<br />
Активирует 'закруглённое начало' делает начало кривой закруглённым:<br />
{| <br />
| {{l|Image:Outline-default.png}}<br />
| {{l|Image:Outline-rounded-begin.png}}<br />
|-<br />
| не закруглённое начало<br />
| закруглённое начало<br />
|}<br />
<br />
=== Закруглённый конец ===<br />
<br />
Активирует 'закруглённый конец' делает конец кривой закруглённым:<br />
<br />
{| <br />
| {{l|Image:Outline-default.png}}<br />
| {{l|Image:Outline-rounded-end.png}}<br />
|-<br />
| не закруглённый конец<br />
| закруглённый конец<br />
|}<br />
<br />
=== Loopyness ===<br />
<br />
Этот параметр на данный момент абсолютно ничего не делает!<br />
<br />
=== Однородность ===<br />
<br />
Включенная "Однородность" меняет метод изменения ширины контура от одной точки кривой до другой. Каждая точка на кривой имеет свою собственную толщину и сама кривая имеет свои параметры "Толщина контура" и "Расширение" которые используются для окончательного формирования толщины для каждой точки. Параметр "Однородность" контролирует то как изменяется толщина от одной точки к другой:<br />
*Когда "Однородность" не отмечена, ширина изменяется линейно (используется параметр сплайна "t")<br />
*Когда "Однородность" отмечена, ширина изменяется линейно (используется длинна сплайна).<br />
<br />
Отключение "Однородности" часто делает более широкий конец кривой "комковатым". Возможно это баг:<br />
<br />
{| <br />
| {{l|Image:Outline-not-homogeneous.png}}<br />
| {{l|Image:Outline-homogeneous.png}}<br />
|-<br />
| нет однородности<br />
| есть однородность<br />
|}<br />
<br />
=== Разное ===<br />
<br />
Параметр "Сглаживание" не относится на прямую к контурам, но он может оказаться полезным так как делает края более гладкими. <br />
<br />
{| <br />
| {{l|Image:Outline-no-antialias.png}}<br />
| {{l|Image:Outline-default.png}}<br />
|-<br />
| нет сглаживания<br />
| есть сглаживание<br />
|}</div>Zurba11https://wiki.synfig.org/index.php?title=Spline_Tool/ru&diff=18792Spline Tool/ru2013-11-01T17:56:59Z<p>Zurba11: NewTerminology</p>
<hr />
<div><!-- Page info --><br />
{{Title|Кривые}}<br />
{{Category|Tools (Инструменты)}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
<br />
{{l|Image:Bline_icon.png|64px}} <span style="font-size:150%">'''ALT-B'''</span><br />
<br />
<br />
==Введение==<br />
<br />
{{l|Spline|Кривые}} самый используемый объект в обычной анимации сделанной в Synfig.<br />
<br />
==Использование==<br />
<br />
Нажав на кнопку {{Literal|Кривые}} вы попадаете в режим создания кривой, чтобы выйти из этого режима просто кликните на любой другой кнопке на панели инструментов.<br />
<br />
Пользоваться этим инструментом очень просто:<br />
<br />
*Простой клик на холсте создаёт новую вершину. Величина {{Literal|касательной}} при этом равна (0,0) и вершина создаёт острый угол.<br />
<br />
*Если после клика потянуть курсор в сторону то это позволит менять размер касательной вновь созданной вершины, чем длиннее касательная тем более гладким получится угол.<br />
<br />
*Каждая новая вершина соединяется с предыдущей {{Literal|Кривой Безье (Bézier spline)}} форма которой зависит от положения вершин и их касательных.<br />
<br />
*Кривая создаётся последовательно, вершины следуют одна за другой.<br />
<br />
*Последняя вершина кривой соединится со следующей создавая форму, пока вы не закончите её. Созданная затем кривая будет уже независимой от предыдущей.<br />
<br />
*Вы можете подправить созданные вершины выделив контрольную точку управляющую формой кривых и потянув её.<br />
<br />
*Вы также можете кликнуть правой кнопкой на контрольную точку вершины или её касательной чтобы попасть в контекстное меню: <br />
**Для точек касательных: "Разделить касательные" даёт возможность менять форму кривой с помощью двух разделённых касательных не зависимо друг от друга. "Связать касательные" соединяет разделённые касательные давая возможность менять форму с помощью зависящих друг от друга вершин касательной.<br />
**Для точек вершины:"Замкнуть контур" или "Разомкнуть контур" (в зависимости от того был контур уже замкнут или нет) позволяют закрыть контур или открыть его превратив в кривую. "Удалить вершину" позволяет, что очевидно, удалить вершину.<br />
<br />
*Контекстное меню также появится если кликнуть правой кнопкой на саму кривую между вершинами. "Вставить узел(Умно)" вставляет вершину (и "Умно" настраивает её касательные чтобы вписать её между другими вершинами) там где вы кликнули на кривой.<br />
<br />
<br />
<br />
Чтобы закончить создание кривой:<br />
# Выберите другой {{l|Category:Tools|инструмент}}.<br />
# Или нажмите на иконку "шестерёнки" на {{l|Tool Options Panel|панели параметров инструмента}}.<br />
<br />
Чтобы удалить ещё не законченную кривую, нажмите {{Shortcut|Esc}}.<br />
<br />
==Параметры==<br />
<br />
У этого инструмента есть следующие параметры:<br />
<br />
{{l|Image:Tool Options 0.65.0-ru.png}}<br />
<br />
* Имя слоя кривой. Имя кривой которую вы создадите задаётся в текстовом поле. В данном примере это "NewSpline". Строка проверяется на наличие целого числа в конце и если оно найдено то будет увеличено на 1 во время создания следующей кривой. Если число не найдено то к имени следующей кривой будет добавлено трёхзначное число.<br />
<br />
*Флажок {{l|Outline Layer|Создать кривую}}.<br />
*Флажок {{l|Advanced Outline Layer|Создать улучшенную кривую}}.<br />
*Флажок {{l|Region Layer|Создать область}}.<br />
*Флажок {{l|Plant Layer|Создать растение}}.<br />
*Флажок {{l|Curve Gradient Layer|Создать градиент по кривой}}. <br />
* Флажок "Связать начала координат". Если отмечено то связываются начала координат(зелёные контрольные точки) для кривой контура, кривой области или кривой с растениями если две из них (или все) отмечены. <br />
* Флажок "Автоэкспорт". Если отмечено то автоматически экспортируется {{l|Vertices Parameter|Vertices parameter}}, это параметр {{l|Spline|Кривой}}<br />
*Растушёвка. Здесь можно выставить величину {{l|Feather Parameter|растушёвки}} для кривой контура или кривой области перед их созданием.<br />
<br />
==Дополнительный материал==<br />
<br />
{{l|Video Tutorials|Видео урок}} по теме.<br />
<br />
Прочитайте документ {{l|Doc:Creating Shapes/ru}} в котором также рассматриваются кривые.<br />
<br />
Read {{l|Spline Speed}} which explains about variations in the Amount parameter of Splines.</div>Zurba11https://wiki.synfig.org/index.php?title=Spline_Tool/ru&diff=18791Spline Tool/ru2013-11-01T17:55:27Z<p>Zurba11: /* Дополнительный материал */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Кривые}}<br />
{{Category|Tools (Инструменты)}}<br />
<!-- Page info end --><br />
<br />
{{l|Image:Bline_icon.png|64px}} <span style="font-size:150%">'''ALT-B'''</span><br />
<br />
<br />
==Введение==<br />
<br />
{{l|Spline|Кривые}} самый используемый объект в обычной анимации сделанной в Synfig.<br />
<br />
==Использование==<br />
<br />
Нажав на кнопку {{Literal|Кривые}} вы попадаете в режим создания кривой, чтобы выйти из этого режима просто кликните на любой другой кнопке на панели инструментов.<br />
<br />
Пользоваться этим инструментом очень просто:<br />
<br />
*Простой клик на холсте создаёт новую вершину. Величина {{Literal|касательной}} при этом равна (0,0) и вершина создаёт острый угол.<br />
<br />
*Если после клика потянуть курсор в сторону то это позволит менять размер касательной вновь созданной вершины, чем длиннее касательная тем более гладким получится угол.<br />
<br />
*Каждая новая вершина соединяется с предыдущей {{Literal|Кривой Безье (Bézier spline)}} форма которой зависит от положения вершин и их касательных.<br />
<br />
*Кривая создаётся последовательно, вершины следуют одна за другой.<br />
<br />
*Последняя вершина кривой соединится со следующей создавая форму, пока вы не закончите её. Созданная затем кривая будет уже независимой от предыдущей.<br />
<br />
*Вы можете подправить созданные вершины выделив контрольную точку управляющую формой кривых и потянув её.<br />
<br />
*Вы также можете кликнуть правой кнопкой на контрольную точку вершины или её касательной чтобы попасть в контекстное меню: <br />
**Для точек касательных: "Разделить касательные" даёт возможность менять форму кривой с помощью двух разделённых касательных не зависимо друг от друга. "Связать касательные" соединяет разделённые касательные давая возможность менять форму с помощью зависящих друг от друга вершин касательной.<br />
**Для точек вершины:"Замкнуть контур" или "Разомкнуть контур" (в зависимости от того был контур уже замкнут или нет) позволяют закрыть контур или открыть его превратив в кривую. "Удалить вершину" позволяет, что очевидно, удалить вершину.<br />
<br />
*Контекстное меню также появится если кликнуть правой кнопкой на саму кривую между вершинами. "Вставить узел(Умно)" вставляет вершину (и "Умно" настраивает её касательные чтобы вписать её между другими вершинами) там где вы кликнули на кривой.<br />
<br />
<br />
<br />
Чтобы закончить создание кривой:<br />
# Выберите другой {{l|Category:Tools|инструмент}}.<br />
# Или нажмите на иконку "шестерёнки" на {{l|Tool Options Panel|панели параметров инструмента}}.<br />
<br />
Чтобы удалить ещё не законченную кривую, нажмите {{Shortcut|Esc}}.<br />
<br />
==Параметры==<br />
<br />
У этого инструмента есть следующие параметры:<br />
<br />
{{l|Image:Tool Options 0.65.0-ru.png}}<br />
<br />
* Имя слоя кривой. Имя кривой которую вы создадите задаётся в текстовом поле. В данном примере это "NewSpline". Строка проверяется на наличие целого числа в конце и если оно найдено то будет увеличено на 1 во время создания следующей кривой. Если число не найдено то к имени следующей кривой будет добавлено трёхзначное число.<br />
<br />
*Флажок {{l|Outline Layer|Создать кривую}}.<br />
*Флажок {{l|Advanced Outline Layer|Создать улучшенную кривую}}.<br />
*Флажок {{l|Region Layer|Создать область}}.<br />
*Флажок {{l|Plant Layer|Создать растение}}.<br />
*Флажок {{l|Curve Gradient Layer|Создать градиент по кривой}}. <br />
* Флажок "Связать начала координат". Если отмечено то связываются начала координат(зелёные контрольные точки) для кривой контура, кривой области или кривой с растениями если две из них (или все) отмечены. <br />
* Флажок "Автоэкспорт". Если отмечено то автоматически экспортируется {{l|Vertices Parameter|Vertices parameter}}, это параметр {{l|Spline|Кривой}}<br />
*Растушёвка. Здесь можно выставить величину {{l|Feather Parameter|растушёвки}} для кривой контура или кривой области перед их созданием.<br />
<br />
==Дополнительный материал==<br />
<br />
{{l|Video Tutorials|Видео урок}} по теме.<br />
<br />
Прочитайте документ {{l|Doc:Creating Shapes/ru}} в котором также рассматриваются кривые.<br />
<br />
Read {{l|Spline Speed}} which explains about variations in the Amount parameter of Splines.</div>Zurba11https://wiki.synfig.org/index.php?title=Spline_Tool/ru&diff=18790Spline Tool/ru2013-11-01T17:53:24Z<p>Zurba11: /* Параметры */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Кривые}}<br />
{{Category|Tools (Инструменты)}}<br />
<!-- Page info end --><br />
<br />
{{l|Image:Bline_icon.png|64px}} <span style="font-size:150%">'''ALT-B'''</span><br />
<br />
<br />
==Введение==<br />
<br />
{{l|Spline|Кривые}} самый используемый объект в обычной анимации сделанной в Synfig.<br />
<br />
==Использование==<br />
<br />
Нажав на кнопку {{Literal|Кривые}} вы попадаете в режим создания кривой, чтобы выйти из этого режима просто кликните на любой другой кнопке на панели инструментов.<br />
<br />
Пользоваться этим инструментом очень просто:<br />
<br />
*Простой клик на холсте создаёт новую вершину. Величина {{Literal|касательной}} при этом равна (0,0) и вершина создаёт острый угол.<br />
<br />
*Если после клика потянуть курсор в сторону то это позволит менять размер касательной вновь созданной вершины, чем длиннее касательная тем более гладким получится угол.<br />
<br />
*Каждая новая вершина соединяется с предыдущей {{Literal|Кривой Безье (Bézier spline)}} форма которой зависит от положения вершин и их касательных.<br />
<br />
*Кривая создаётся последовательно, вершины следуют одна за другой.<br />
<br />
*Последняя вершина кривой соединится со следующей создавая форму, пока вы не закончите её. Созданная затем кривая будет уже независимой от предыдущей.<br />
<br />
*Вы можете подправить созданные вершины выделив контрольную точку управляющую формой кривых и потянув её.<br />
<br />
*Вы также можете кликнуть правой кнопкой на контрольную точку вершины или её касательной чтобы попасть в контекстное меню: <br />
**Для точек касательных: "Разделить касательные" даёт возможность менять форму кривой с помощью двух разделённых касательных не зависимо друг от друга. "Связать касательные" соединяет разделённые касательные давая возможность менять форму с помощью зависящих друг от друга вершин касательной.<br />
**Для точек вершины:"Замкнуть контур" или "Разомкнуть контур" (в зависимости от того был контур уже замкнут или нет) позволяют закрыть контур или открыть его превратив в кривую. "Удалить вершину" позволяет, что очевидно, удалить вершину.<br />
<br />
*Контекстное меню также появится если кликнуть правой кнопкой на саму кривую между вершинами. "Вставить узел(Умно)" вставляет вершину (и "Умно" настраивает её касательные чтобы вписать её между другими вершинами) там где вы кликнули на кривой.<br />
<br />
<br />
<br />
Чтобы закончить создание кривой:<br />
# Выберите другой {{l|Category:Tools|инструмент}}.<br />
# Или нажмите на иконку "шестерёнки" на {{l|Tool Options Panel|панели параметров инструмента}}.<br />
<br />
Чтобы удалить ещё не законченную кривую, нажмите {{Shortcut|Esc}}.<br />
<br />
==Параметры==<br />
<br />
У этого инструмента есть следующие параметры:<br />
<br />
{{l|Image:Tool Options 0.65.0-ru.png}}<br />
<br />
* Имя слоя кривой. Имя кривой которую вы создадите задаётся в текстовом поле. В данном примере это "NewSpline". Строка проверяется на наличие целого числа в конце и если оно найдено то будет увеличено на 1 во время создания следующей кривой. Если число не найдено то к имени следующей кривой будет добавлено трёхзначное число.<br />
<br />
*Флажок {{l|Outline Layer|Создать кривую}}.<br />
*Флажок {{l|Advanced Outline Layer|Создать улучшенную кривую}}.<br />
*Флажок {{l|Region Layer|Создать область}}.<br />
*Флажок {{l|Plant Layer|Создать растение}}.<br />
*Флажок {{l|Curve Gradient Layer|Создать градиент по кривой}}. <br />
* Флажок "Связать начала координат". Если отмечено то связываются начала координат(зелёные контрольные точки) для кривой контура, кривой области или кривой с растениями если две из них (или все) отмечены. <br />
* Флажок "Автоэкспорт". Если отмечено то автоматически экспортируется {{l|Vertices Parameter|Vertices parameter}}, это параметр {{l|Spline|Кривой}}<br />
*Растушёвка. Здесь можно выставить величину {{l|Feather Parameter|растушёвки}} для кривой контура или кривой области перед их созданием.<br />
<br />
==Дополнительный материал==<br />
<br />
Видео урок по теме {{l|Video Tutorials|video tutorial}}.<br />
<br />
Прочитайте {{l|Doc:Creating Shapes/ru}} в котором также упоминаются BLine кривые.<br />
<br />
Read {{l|Bline Speed}} which explains about variations in the Amount parameter of BLines.</div>Zurba11https://wiki.synfig.org/index.php?title=File:Tool_Options_0.65.0-ru.png&diff=18789File:Tool Options 0.65.0-ru.png2013-11-01T17:37:51Z<p>Zurba11: </p>
<hr />
<div></div>Zurba11https://wiki.synfig.org/index.php?title=Spline_Tool/ru&diff=18784Spline Tool/ru2013-10-29T17:46:48Z<p>Zurba11: </p>
<hr />
<div><!-- Page info --><br />
{{Title|Кривые}}<br />
{{Category|Tools (Инструменты)}}<br />
<!-- Page info end --><br />
<br />
{{l|Image:Bline_icon.png|64px}} <span style="font-size:150%">'''ALT-B'''</span><br />
<br />
<br />
==Введение==<br />
<br />
{{l|Spline|Кривые}} самый используемый объект в обычной анимации сделанной в Synfig.<br />
<br />
==Использование==<br />
<br />
Нажав на кнопку {{Literal|Кривые}} вы попадаете в режим создания кривой, чтобы выйти из этого режима просто кликните на любой другой кнопке на панели инструментов.<br />
<br />
Пользоваться этим инструментом очень просто:<br />
<br />
*Простой клик на холсте создаёт новую вершину. Величина {{Literal|касательной}} при этом равна (0,0) и вершина создаёт острый угол.<br />
<br />
*Если после клика потянуть курсор в сторону то это позволит менять размер касательной вновь созданной вершины, чем длиннее касательная тем более гладким получится угол.<br />
<br />
*Каждая новая вершина соединяется с предыдущей {{Literal|Кривой Безье (Bézier spline)}} форма которой зависит от положения вершин и их касательных.<br />
<br />
*Кривая создаётся последовательно, вершины следуют одна за другой.<br />
<br />
*Последняя вершина кривой соединится со следующей создавая форму, пока вы не закончите её. Созданная затем кривая будет уже независимой от предыдущей.<br />
<br />
*Вы можете подправить созданные вершины выделив контрольную точку управляющую формой кривых и потянув её.<br />
<br />
*Вы также можете кликнуть правой кнопкой на контрольную точку вершины или её касательной чтобы попасть в контекстное меню: <br />
**Для точек касательных: "Разделить касательные" даёт возможность менять форму кривой с помощью двух разделённых касательных не зависимо друг от друга. "Связать касательные" соединяет разделённые касательные давая возможность менять форму с помощью зависящих друг от друга вершин касательной.<br />
**Для точек вершины:"Замкнуть контур" или "Разомкнуть контур" (в зависимости от того был контур уже замкнут или нет) позволяют закрыть контур или открыть его превратив в кривую. "Удалить вершину" позволяет, что очевидно, удалить вершину.<br />
<br />
*Контекстное меню также появится если кликнуть правой кнопкой на саму кривую между вершинами. "Вставить узел(Умно)" вставляет вершину (и "Умно" настраивает её касательные чтобы вписать её между другими вершинами) там где вы кликнули на кривой.<br />
<br />
<br />
<br />
Чтобы закончить создание кривой:<br />
# Выберите другой {{l|Category:Tools|инструмент}}.<br />
# Или нажмите на иконку "шестерёнки" на {{l|Tool Options Panel|панели параметров инструмента}}.<br />
<br />
Чтобы удалить ещё не законченную кривую, нажмите {{Shortcut|Esc}}.<br />
<br />
==Параметры==<br />
<br />
У этого инструмента есть следующие параметры:<br />
<br />
{{l|Image:Tool_Options.png}}<br />
<br />
* Имя слоя Bline. Имя кривой Bline которую вы создадите задаётся в текстовом поле. В данном примере это "Bline141". Строка проверяется на наличие целого числа в конце и если оно найдено то будет увеличено на 1 во время создания следующей кривой Bline. Если число не найдено то к имени следующей кривой Bline будет добавлено трёхзначное число.<br />
<br />
*Флажок "Создать кривую контура". Если отмечено то создаётся Слой контура {{l|Outline Layer}}.<br />
*Флажок "Создать кривую области". Если отмечено то создаётся Слой области {{l|Region Layer}}.<br />
*Флажок "Создать кривую с растениями". Если отмечено то создаётся Слой с растениями {{l|Plant Layer}}.<br />
*Флажок "Создать градиент по кривой". Если отмечено то создаётся Градиент по кривой {{l|Curve Gradient Layer|Curved Gradient}}.<br />
* Флажок "Связать начала координат". Если отмечено то связываются начала координат(зелёные контрольные точки) для кривой контура, кривой области или кривой с растениями если две из них (или все) отмечены. <br />
* Флажок "Автоэкспорт". Если отмечено то автоматически экспортируется {{l|Vertices Parameter| Vertices parameter}} (это параметр {{l|BLine|BLine}})<br />
*Растушёвка. Здесь можно выставить значение растушёвки {{l|Feather Parameter|feather paramter}} для кривой контура или кривой области перед их созданием.<br />
<br />
==Дополнительный материал==<br />
<br />
Видео урок по теме {{l|Video Tutorials|video tutorial}}.<br />
<br />
Прочитайте {{l|Doc:Creating Shapes/ru}} в котором также упоминаются BLine кривые.<br />
<br />
Read {{l|Bline Speed}} which explains about variations in the Amount parameter of BLines.</div>Zurba11https://wiki.synfig.org/index.php?title=Spline_Tool/ru&diff=18780Spline Tool/ru2013-10-23T18:48:11Z<p>Zurba11: /* Использование */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Кривые (BLine Tool)}}<br />
{{Category|Tools (Инструменты)}}<br />
<!-- Page info end --><br />
<br />
{{l|Image:Bline_icon.png|64px}} <span style="font-size:150%">'''ALT-B'''</span><br />
<br />
<br />
==Введение==<br />
<br />
{{l|BLine|Кривые}} самый используемый объект в обычной анимации сделанной в Synfig.<br />
<br />
==Использование==<br />
<br />
Нажав на кнопку {{Literal|Сплайн}} вы попадаете в режим создания кривой, чтобы выйти из этого режима просто кликните на любой другой кнопке на панели инструментов.<br />
<br />
Пользоваться этим инструментом очень просто:<br />
<br />
*Простой клик на холсте создаёт новую вершину. Величина {{Literal|касательной}} при этом равна (0,0) и вершина создаёт острый угол.<br />
<br />
*Если после клика потянуть курсор в сторону то это позволит менять размер касательной вновь созданной вершины, чем длиннее касательная тем более гладким получится угол.<br />
<br />
*Каждая новая вершина соединяется с предыдущей {{Literal|Кривой Безье (Bézier spline)}} форма которой зависит от положения вершин и их касательных.<br />
<br />
*Кривая создаётся последовательно, вершины следуют одна за другой.<br />
<br />
*Последняя вершина кривой соединится со следующей создавая форму, пока вы не закончите её. Созданная затем кривая будет уже независимой от предыдущей.<br />
<br />
*Вы можете подправить созданные вершины выделив контрольную точку управляющую формой кривых и потянув её.<br />
<br />
*Вы также можете кликнуть правой кнопкой на контрольную точку вершины или её касательной чтобы попасть в контекстное меню: <br />
**Для точек касательных: "Разделить касательные" даёт возможность менять форму кривой с помощью двух разделённых касательных не зависимо друг от друга. "Связать касательные" соединяет разделённые касательные давая возможность менять форму с помощью зависящих друг от друга вершин касательной.<br />
**Для точек вершины:"Замкнуть контур" или "Разомкнуть контур" (в зависимости от того был контур уже замкнут или нет) позволяют закрыть контур или открыть его превратив в кривую. "Удалить вершину" позволяет, что очевидно, удалить вершину.<br />
<br />
*Контекстное меню также появится если кликнуть правой кнопкой на саму кривую между вершинами. "Вставить узел(Умно)" вставляет вершину (и "Умно" настраивает её касательные чтобы вписать её между другими вершинами) там где вы кликнули на кривой.<br />
<br />
<br />
<br />
Чтобы закончить создание кривой:<br />
# Выберите другой {{l|Category:Tools|инструмент}}.<br />
# Или нажмите на иконку "шестерёнки" на {{l|Tool Options Panel|панели параметров инструмента}}.<br />
<br />
Чтобы удалить ещё не законченную кривую, нажмите {{Shortcut|Esc}}.<br />
<br />
==Параметры==<br />
<br />
У этого инструмента есть следующие параметры:<br />
<br />
{{l|Image:Tool_Options.png}}<br />
<br />
* Имя слоя Bline. Имя кривой Bline которую вы создадите задаётся в текстовом поле. В данном примере это "Bline141". Строка проверяется на наличие целого числа в конце и если оно найдено то будет увеличено на 1 во время создания следующей кривой Bline. Если число не найдено то к имени следующей кривой Bline будет добавлено трёхзначное число.<br />
<br />
*Флажок "Создать кривую контура". Если отмечено то создаётся Слой контура {{l|Outline Layer}}.<br />
*Флажок "Создать кривую области". Если отмечено то создаётся Слой области {{l|Region Layer}}.<br />
*Флажок "Создать кривую с растениями". Если отмечено то создаётся Слой с растениями {{l|Plant Layer}}.<br />
*Флажок "Создать градиент по кривой". Если отмечено то создаётся Градиент по кривой {{l|Curve Gradient Layer|Curved Gradient}}.<br />
* Флажок "Связать начала координат". Если отмечено то связываются начала координат(зелёные контрольные точки) для кривой контура, кривой области или кривой с растениями если две из них (или все) отмечены. <br />
* Флажок "Автоэкспорт". Если отмечено то автоматически экспортируется {{l|Vertices Parameter| Vertices parameter}} (это параметр {{l|BLine|BLine}})<br />
*Растушёвка. Здесь можно выставить значение растушёвки {{l|Feather Parameter|feather paramter}} для кривой контура или кривой области перед их созданием.<br />
<br />
==Дополнительный материал==<br />
<br />
Видео урок по теме {{l|Video Tutorials|video tutorial}}.<br />
<br />
Прочитайте {{l|Doc:Creating Shapes/ru}} в котором также упоминаются BLine кривые.<br />
<br />
Read {{l|Bline Speed}} which explains about variations in the Amount parameter of BLines.</div>Zurba11https://wiki.synfig.org/index.php?title=Spline_Tool/ru&diff=18779Spline Tool/ru2013-10-23T18:34:19Z<p>Zurba11: /* Введение */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Кривые (BLine Tool)}}<br />
{{Category|Tools (Инструменты)}}<br />
<!-- Page info end --><br />
<br />
{{l|Image:Bline_icon.png|64px}} <span style="font-size:150%">'''ALT-B'''</span><br />
<br />
<br />
==Введение==<br />
<br />
{{l|BLine|Кривые}} самый используемый объект в обычной анимации сделанной в Synfig.<br />
<br />
==Использование==<br />
<br />
Нажав на кнопку Bline tool вы попадаете в режим создания BLine, чтобы выйти из этого режима просто кликните на любой другой кнопке на панели инструментов.<br />
Пользоваться этим инструментом очень просто:<br />
<br />
*Простой клик на холсте создаёт новую вершину. Величина касательной при этом равна (0,0) и вершина создаёт острый угол.<br />
<br />
*Если после клика потянуть курсор в сторону то это позволит менять размер касательной вновь созданной вершины, чем длиннее касательная тем более гладким получится угол.<br />
<br />
*Каждая новая вершина соединяется с предыдущей "Кривой Безье" форма которой зависит от положения вершин и их касательных.<br />
<br />
*Кривая создаётся последовательно, вершины следуют одна за другой.<br />
<br />
*Последняя вершина кривой соединится со следующей создавая форму, пока вы не закончите её. Созданная затем кривая будет уже независимой от предыдущей.<br />
<br />
*Вы можете подправить созданные вершины выделив контрольную точку управляющую формой кривых и потянув её.<br />
<br />
*Вы также можете кликнуть правой кнопкой на контрольную точку вершины или её касательной чтобы попасть в контекстное меню: <br />
**Для точек касательных: "Разделить касательные" даёт возможность менять форму кривой с помощью двух разделённых касательных не зависимо друг от друга. "Связать касательные" соединяет разделённые касательные давая возможность менять форму с помощью зависящих друг от друга вершин касательной.<br />
**Для точек вершины:"Замкнуть контур" или "Разомкнуть контур" (в зависимости от того был контур уже замкнут или нет) позволяют закрыть контур или открыть его превратив в кривую. "Удалить вершину" позволяет, что очевидно, удалить вершину.<br />
<br />
*Контекстное меню также появится если кликнуть правой кнопкой на саму кривую между вершинами. "Вставить узел(Умно)" вставляет вершину (и "Умно" настраивает её касательные чтобы вписать её между другими вершинами) там где вы кликнули на кривой.<br />
<br />
<br />
<br />
Чтобы закончить кривую Bline:<br />
# Выберите другой инструмент.<br />
# Или нажмите на иконку "шестерёнки" на панели параметров инструмента.<br />
<br />
Чтобы удалить ещё не законченную кривую Bline, нажмите "Esc". <br />
<br />
==Параметры==<br />
<br />
У этого инструмента есть следующие параметры:<br />
<br />
{{l|Image:Tool_Options.png}}<br />
<br />
* Имя слоя Bline. Имя кривой Bline которую вы создадите задаётся в текстовом поле. В данном примере это "Bline141". Строка проверяется на наличие целого числа в конце и если оно найдено то будет увеличено на 1 во время создания следующей кривой Bline. Если число не найдено то к имени следующей кривой Bline будет добавлено трёхзначное число.<br />
<br />
*Флажок "Создать кривую контура". Если отмечено то создаётся Слой контура {{l|Outline Layer}}.<br />
*Флажок "Создать кривую области". Если отмечено то создаётся Слой области {{l|Region Layer}}.<br />
*Флажок "Создать кривую с растениями". Если отмечено то создаётся Слой с растениями {{l|Plant Layer}}.<br />
*Флажок "Создать градиент по кривой". Если отмечено то создаётся Градиент по кривой {{l|Curve Gradient Layer|Curved Gradient}}.<br />
* Флажок "Связать начала координат". Если отмечено то связываются начала координат(зелёные контрольные точки) для кривой контура, кривой области или кривой с растениями если две из них (или все) отмечены. <br />
* Флажок "Автоэкспорт". Если отмечено то автоматически экспортируется {{l|Vertices Parameter| Vertices parameter}} (это параметр {{l|BLine|BLine}})<br />
*Растушёвка. Здесь можно выставить значение растушёвки {{l|Feather Parameter|feather paramter}} для кривой контура или кривой области перед их созданием.<br />
<br />
==Дополнительный материал==<br />
<br />
Видео урок по теме {{l|Video Tutorials|video tutorial}}.<br />
<br />
Прочитайте {{l|Doc:Creating Shapes/ru}} в котором также упоминаются BLine кривые.<br />
<br />
Read {{l|Bline Speed}} which explains about variations in the Amount parameter of BLines.</div>Zurba11https://wiki.synfig.org/index.php?title=Doc:Following_a_Spline/ru&diff=18778Doc:Following a Spline/ru2013-10-20T20:16:44Z<p>Zurba11: </p>
<hr />
<div><!-- Page info --><br />
{{Title|Движение вдоль кривой}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
<br />
== Введение ==<br />
<br />
Если вы используете версию Synfig 0.61.08 или ниже, то читайте {{l|Following a BLine (the old way)|старую редакцию}} статьи, а эта статья актуальна для версии 0.61.09 и старше.<br />
<br />
Итак статья о том как создать объект следующий вдоль произвольной кривой и поворачивающий при этом в сторону направления кривой.<br />
<br />
== Содержание ==<br />
Нам предстоит:<br />
<br />
* {{l|Doc:Following a BLine#Create the Layers|Нарисовать кривую и "стрелку"}}<br />
* {{l|Doc:Following a BLine#Make the Arrow Move and Rotate|Связать стрелку и её "вращение"}} с кривой чтобы она следовала по ней<br />
<br />
=== Создаём новый файл ===<br />
<br />
Файл > Создать<br />
<br />
=== Создаём слои ===<br />
<br />
Выберите инструмент {{l|Spline Tool|"Кривые"}}.<br />
<br />
[[File:Spline-tool-0.63.06.png|frame|none]]<br />
<br />
Поставьте флажок только напротив параметра "Создать кривую контура",<br />
нарисуйте кривую вдоль которой будет двигаться наша стрелка и<br />
нажмите кнопку {{Literal|Создать кривую}} в нижней части {{l|Tool_Options_Panel|Панели Параметров Инструмента}}.<br />
<br />
Теперь, не переключаясь с инструмента "Кривые" выберите флажки {{Literal|Создать кривую контура}} и {{Literal|Создать кривую области}} на Панели Параметров Инструмента,<br />
<br />
нарисуйте стрелку или что то подобное, указывающую на право. [[File:Spline-Tool-Options_0.63.06.png|frame|center]]<br />
<br />
Переключитесь на {{l|Transform Tool|инструмент трансформации}}.<br />
<br />
Кликните на контур "стрелки" и нажмите {{Shortcut|ctrl}}+{{Shortcut|a}} чтобы выделить все {{l|Handle|контрольные точки}} контура, зелёная точка "позиции" при этом останется не выделенной, перетащите выделенные контрольные точки так чтобы зелёная точка "позиции" оказалась в центре "стрелки", после чего добавьте {{l|Rotate Layer|"Слой вращения"}} над слоями контура и заливки "стрелки" и {{l|Group|сгруппируйте}} эти три слоя в одну группу.<br />
<br />
Теперь у нас есть два основных слоя, один слой с кривой контура и второй групповой со "стрелкой" и слоем вращения.<br />
<br />
=== Заставляем стрелку двигаться и вращаться ===<br />
Выделите слой группу кликнув на него в {{l|Layers Panel|панели слоёв.}}<br />
<br />
Выделите его зелёную точку "позиции" кликнув по ней в окне холста,<br />
также выделите слой Вращения удерживая {{Shortcut|ctrl}} и кликнув по нему на панели слоёв,<br />
в добавок ко всему этому выделите синюю точку "контроля вращения" удерживая {{Shortcut|ctrl}} кликнув по ней в окне холста.<br />
<br />
<br />
Ну вот, у нас должно быть выделено два слоя и по одной контрольной точке из каждого слоя,<br />
теперь добавьте к этим выделенным слоям ещё и слой с кривой (он должен быть последним на панели слоёв) кликнув на него удерживая {{Shortcut|ctrl}}.<br />
<br />
Кликаем правой кнопкой на пунктирной линии которая показывает форму кривой, не на какую нибудь точку на кривой, а именно на линию между точками.<br />
<br />
В контекстном меню которое появится выберите {{Literal|Привязать к кривой}}. <br />
<br />
[[Image:Spline-Link-to-0.63.06.png|frame|none]]<br />
<br />
Сгруппированный слой со "стрелкой" должен переместиться так что его зелёная точка "позиции" окажется на кривой и она должна повернутся указывая в сторону направления кривой в этой точке. <br />
<br />
Выделите только сгруппированный слой и потаскайте зелёную точку "позиции" туда-сюда. Вы увидите что зелёная контрольная точка "стрелки" теперь двигается только вдоль кривой, перемещение также вызывает вращение "стрелки" как и ожидалось.<br />
<br />
Теперь мы можем анимировать стрелку, включите {{l|Animate_Editing_Mode|Режим редактирования анимации}} нажав на иконку в нижнем правом углу окна холста.<br />
<br />
* На нулевом кадре '''0f''', поместите зелёную контрольную точку группового слоя "стрелки" на одном конце кривой.<br />
* На пятой секунде '''5s''', перетащите эту точку в другой конец.<br />
<br />
Посмотрите что получилось нажав {{c|<Меню холста>|<Файл>|Предпросмотр|}}.<br />
<br />
== Результат ==<br />
<br />
Вот анимация которая получилась в результате: {{l|Media:Arrow-follows-bline.sifz|Arrow-follows-bline.sifz}}<br />
<br />
== Контроль ускорения ==<br />
Если вы выделите слой группы и посмотрите на Панель параметров то заметите что параметр Исходной точки {{L|convert|конвертирован}} в тип {{Literal|Spline Vertex}}. Это происходит автоматически когда вы используете "привязывание к кривой". Вы можете также отключить дополнительный параметр "однородность" после чего скорость стрелки перестанет быть постоянной и начнёт зависить от количества сегментов на кривой, проходя между каждым сегментом за одно и тоже время она будет "пролетать" на длинных прямых участках кривой на большой скорости и "еле ползти" на изломанных участках содержащих большее количество вершин, так как теперь проходит от вершины к вершине за один и тот же промежуток времени. <br />
<br />
Видео по теме контроля ускорения [http://www.youtube.com/watch?v=3PGXroxBcuo здесь].</div>Zurba11https://wiki.synfig.org/index.php?title=Doc:Following_a_Spline/ru&diff=18777Doc:Following a Spline/ru2013-10-20T20:12:56Z<p>Zurba11: </p>
<hr />
<div><!-- Page info --><br />
{{Title|Движение вдоль кривой}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
<br />
== Введение ==<br />
<br />
Если вы используете версию Synfig 0.61.08 или ниже, то читайте {{l|Following a BLine (the old way)|старую редакцию}} статьи, а эта статья актуальна для версии 0.61.09 и старше.<br />
<br />
Итак статья о том как создать объект следующий вдоль произвольной кривой и поворачивающий при этом в сторону направления кривой.<br />
<br />
== Содержание ==<br />
Нам предстоит:<br />
<br />
* {{l|Doc:Following a BLine#Create the Layers|Нарисовать кривую и "стрелку"}}<br />
* {{l|Doc:Following a BLine#Make the Arrow Move and Rotate|Связать стрелку и её "вращение"}} с кривой чтобы она следовала по ней<br />
<br />
=== Создаём новый файл ===<br />
<br />
Файл > Создать<br />
<br />
=== Создаём слои ===<br />
<br />
Выберите инструмент {{l|Spline Tool|"Кривые"}}.<br />
<br />
[[File:Spline-tool-0.63.06.png|frame|none]]<br />
<br />
Поставьте флажок только напротив параметра "Создать кривую контура",<br />
нарисуйте кривую вдоль которой будет двигаться наша стрелка и<br />
нажмите кнопку {{Literal|Создать кривую}} в нижней части {{l|Tool_Options_Panel|Панели Параметров Инструмента}}.<br />
<br />
Теперь, не переключаясь с инструмента "Кривые" выберите флажки {{Literal|Создать кривую контура}} и {{Literal|Создать кривую области}} на Панели Параметров Инструмента,<br />
<br />
нарисуйте стрелку или что то подобное, указывающую на право. [[File:Spline-Tool-Options_0.63.06.png|frame|center]]<br />
<br />
Переключитесь на {{l|Transform Tool|инструмент трансформации}}.<br />
<br />
Кликните на контур "стрелки" и нажмите {{Shortcut|ctrl}}+{{Shortcut|a}} чтобы выделить все {{l|Handle|контрольные точки}} контура, зелёная точка "позиции" при этом останется не выделенной, перетащите выделенные контрольные точки так чтобы зелёная точка "позиции" оказалась в центре "стрелки", после чего добавьте {{l|Rotate Layer|"Слой вращения"}} над слоями контура и заливки "стрелки" и {{l|Group|сгруппируйте}} эти три слоя в одну группу<br />
<br />
Теперь у нас есть два основных слоя, один слой с кривой контура и второй групповой со "стрелкой" и слоем вращения.<br />
<br />
=== Заставляем стрелку двигаться и вращаться ===<br />
Выделите слой группу кликнув на него в {{l|Layers Panel|панели слоёв.}}<br />
<br />
Выделите его зелёную точку "позиции" кликнув по ней в окне холста,<br />
также выделите слой Вращения удерживая {{Shortcut|ctrl}} и кликнув по нему на панели слоёв,<br />
в добавок ко всему этому выделите синюю точку "контроля вращения" удерживая {{Shortcut|ctrl}} кликнув по ней в окне холста.<br />
<br />
<br />
Ну вот, у нас должно быть выделено два слоя и по одной контрольной точке из каждого слоя,<br />
теперь добавьте к этим выделенным слоям ещё и слой с кривой (он должен быть последним на панели слоёв) кликнув на него удерживая {{Shortcut|ctrl}}.<br />
<br />
Кликаем правой кнопкой на пунктирной линии которая показывает форму кривой, не на какую нибудь точку на кривой, а именно на линию между точками.<br />
<br />
В контекстном меню которое появится выберите {{Literal|Привязать к кривой}}. <br />
<br />
[[Image:Spline-Link-to-0.63.06.png|frame|none]]<br />
<br />
Сгруппированный слой со "стрелкой" должен переместиться так что его зелёная точка "позиции" окажется на кривой и она должна повернутся указывая в сторону направления кривой в этой точке. <br />
<br />
Выделите только сгруппированный слой и потаскайте зелёную точку "позиции" туда-сюда. Вы увидите что зелёная контрольная точка "стрелки" теперь двигается только вдоль кривой, перемещение также вызывает вращение "стрелки" как и ожидалось.<br />
<br />
Теперь мы можем анимировать стрелку, включите {{l|Animate_Editing_Mode|Режим редактирования анимации}} нажав на иконку в нижнем правом углу окна холста.<br />
<br />
* На нулевом кадре '''0f''', поместите зелёную контрольную точку изолированного слоя "стрелки" на одном конце кривой.<br />
* На пятой секунде '''5s''', перетащите эту точку в другой конец.<br />
<br />
Посмотрите что получилось нажав {{c|<Меню холста>|<Файл>|Предпросмотр|}}.<br />
<br />
== Результат ==<br />
<br />
Вот анимация которая получилась в результате: {{l|Media:Arrow-follows-bline.sifz|Arrow-follows-bline.sifz}}<br />
<br />
== Контроль ускорения ==<br />
Если вы выделите слой группы и посмотрите на Панель параметров то заметите что параметр Исходной точки {{L|convert|конвертирован}} в тип {{Literal|Spline Vertex}}. Это происходит автоматически когда вы используете "привязывание к кривой". Вы можете также отключит дополнительный параметр "однородность" после чего скорость стрелки перестанет быть постоянной и начнёт зависить от количества сегментов на кривой, проходя между каждым сегментом за одно и тоже время она будет "пролетать" на длинных прямых участках кривой на большой скорости и "еле ползти" на изломанных участках содержащих большее количество вершин, так как теперь проходит от вершины к вершине за один и тот же промежуток времени. <br />
<br />
Видео по теме контроля ускорения [http://www.youtube.com/watch?v=3PGXroxBcuo здесь].</div>Zurba11https://wiki.synfig.org/index.php?title=Doc:Following_a_Spline/ru&diff=18776Doc:Following a Spline/ru2013-10-20T20:09:45Z<p>Zurba11: </p>
<hr />
<div><!-- Page info --><br />
{{Title|Движение вдоль кривой}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
{{NewTerminology}}<br />
<!-- Page info end --><br />
<br />
== Введение ==<br />
<br />
Если вы используете версию Synfig 0.61.08 или ниже, то читайте {{l|Following a BLine (the old way)|старую редакцию}} статьи, а эта статья актуальна для версии 0.61.09 и старше.<br />
<br />
Итак статья о том как создать объект следующий вдоль произвольной кривой и поворачивающий при этом в сторону направления кривой.<br />
<br />
== Содержание ==<br />
Нам предстоит:<br />
<br />
* {{l|Doc:Following a BLine#Create the Layers|Нарисовать кривую и "стрелку"}}<br />
* {{l|Doc:Following a BLine#Make the Arrow Move and Rotate|Связать стрелку и её "вращение"}} с кривой чтобы она следовала по ней<br />
<br />
=== Создаём новый файл ===<br />
<br />
Файл > Создать<br />
<br />
=== Создаём слои ===<br />
<br />
Выберите инструмент {{l|Spline Tool|"Кривые"}}.<br />
<br />
[[File:Spline-tool-0.63.06.png|frame|none]]<br />
<br />
Поставьте флажок только напротив параметра "Создать кривую контура",<br />
нарисуйте кривую вдоль которой будет двигаться наша стрелка и<br />
нажмите кнопку {{Literal|Создать кривую}} в нижней части {{l|Tool_Options_Panel|Панели Параметров Инструмента}}.<br />
<br />
Теперь, не переключаясь с инструмента "Кривые" выберите флажки {{Literal|Создать кривую контура}} и {{Literal|Создать кривую области}} на Панели Параметров Инструмента,<br />
<br />
нарисуйте стрелку или что то подобное, указывающую на право. [[File:Spline-Tool-Options_0.63.06.png|frame|center]]<br />
<br />
Переключитесь на {{l|Transform Tool|инструмент трансформации}}.<br />
<br />
Кликните на контур "стрелки" и нажмите {{Shortcut|ctrl}}+{{Shortcut|a}} чтобы выделить все {{l|Handle|контрольные точки}} контура, зелёная точка "позиции" при этом останется не выделенной, перетащите выделенные контрольные точки так чтобы зелёная точка "позиции" оказалась в центре "стрелки", после чего добавьте {{l|Rotate Layer|"Слой вращения"}} над слоями контура и заливки "стрелки" и {{l|Group|сгруппируйте}} эти три слоя в один объединяющий слой.<br />
<br />
Теперь у нас есть два основных слоя, один слой с кривой контура и второй групповой со "стрелкой" и слоем вращения.<br />
<br />
=== Заставляем стрелку двигаться и вращаться ===<br />
Выделите объединяющий слой кликнув на него в {{l|Layers Panel|панели слоёв.}}<br />
<br />
Выделите его зелёную точку "позиции" кликнув по ней в окне холста,<br />
также выделите слой Вращения удерживая {{Shortcut|ctrl}} и кликнув по нему на панели слоёв,<br />
в добавок ко всему этому выделите синюю точку "контроля вращения" удерживая {{Shortcut|ctrl}} кликнув по ней в окне холста.<br />
<br />
<br />
Ну вот, у нас должно быть выделено два слоя и по одной контрольной точке из каждого слоя,<br />
теперь добавьте к этим выделенным слоям ещё и слой с кривой (он должен быть последним на панели слоёв) кликнув на него удерживая {{Shortcut|ctrl}}.<br />
<br />
Кликаем правой кнопкой на пунктирной линии которая показывает форму кривой, не на какую нибудь точку на кривой, а именно на линию между точками.<br />
<br />
В контекстном меню которое появится выберите {{Literal|Привязать к кривой}}. <br />
<br />
[[Image:Spline-Link-to-0.63.06.png|frame|none]]<br />
<br />
Сгруппированный слой со "стрелкой" должен переместиться так что его зелёная точка "позиции" окажется на кривой и она должна повернутся указывая в сторону направления кривой в этой точке. <br />
<br />
Выделите только сгруппированный слой и потаскайте зелёную точку "позиции" туда-сюда. Вы увидите что зелёная контрольная точка "стрелки" теперь двигается только вдоль кривой, перемещение также вызывает вращение "стрелки" как и ожидалось.<br />
<br />
Теперь мы можем анимировать стрелку, включите {{l|Animate_Editing_Mode|Режим редактирования анимации}} нажав на иконку в нижнем правом углу окна холста.<br />
<br />
* На нулевом кадре '''0f''', поместите зелёную контрольную точку изолированного слоя "стрелки" на одном конце кривой.<br />
* На пятой секунде '''5s''', перетащите эту точку в другой конец.<br />
<br />
Посмотрите что получилось нажав {{c|<Меню холста>|<Файл>|Предпросмотр|}}.<br />
<br />
== Результат ==<br />
<br />
Вот анимация которая получилась в результате: {{l|Media:Arrow-follows-bline.sifz|Arrow-follows-bline.sifz}}<br />
<br />
== Контроль ускорения ==<br />
Если вы выделите слой группы и посмотрите на Панель параметров то заметите что параметр Исходной точки {{L|convert|конвертирован}} в тип {{Literal|Spline Vertex}}. Это происходит автоматически когда вы используете "привязывание к кривой". Вы можете также отключит дополнительный параметр "однородность" после чего скорость стрелки перестанет быть постоянной и начнёт зависить от количества сегментов на кривой, проходя между каждым сегментом за одно и тоже время она будет "пролетать" на длинных прямых участках кривой на большой скорости и "еле ползти" на изломанных участках содержащих большее количество вершин, так как теперь проходит от вершины к вершине за один и тот же промежуток времени. <br />
<br />
Видео по теме контроля ускорения [http://www.youtube.com/watch?v=3PGXroxBcuo здесь].</div>Zurba11https://wiki.synfig.org/index.php?title=Doc:Following_a_Spline/ru&diff=18775Doc:Following a Spline/ru2013-10-20T19:00:08Z<p>Zurba11: /* Заставляем стрелку двигаться и вращаться */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Движение вдоль кривой}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
<!-- Page info end --><br />
<br />
== Введение ==<br />
<br />
Если вы используете версию Synfig 0.61.08 или ниже, то читайте {{l|Following a BLine (the old way)|старую редакцию}} статьи, а эта статья актуальна для версии 0.61.09 и старше.<br />
<br />
Итак статья о том как создать объект следующий вдоль произвольной кривой и поворачивающий при этом в сторону направления кривой.<br />
<br />
== Содержание ==<br />
Нам предстоит:<br />
<br />
* {{l|Doc:Following a BLine#Create the Layers|Нарисовать кривую и "стрелку"}}<br />
* {{l|Doc:Following a BLine#Make the Arrow Move and Rotate|Связать стрелку и её "вращение"}} с кривой чтобы она следовала по ней<br />
<br />
=== Создаём новый файл ===<br />
<br />
Файл > Создать<br />
<br />
=== Создаём слои ===<br />
<br />
Выберите инструмент {{l|Spline Tool|"Кривые"}}.<br />
<br />
[[File:Spline-tool-0.63.06.png|frame|none]]<br />
<br />
Поставьте флажок только напротив параметра "Создать кривую контура",<br />
нарисуйте кривую вдоль которой будет двигаться наша стрелка и<br />
нажмите кнопку {{Literal|Создать кривую}} в нижней части {{l|Tool_Options_Panel|Панели Параметров Инструмента}}.<br />
<br />
Теперь, не переключаясь с инструмента "Кривые" выберите флажки {{Literal|Создать кривую контура}} и {{Literal|Создать кривую области}} на Панели Параметров Инструмента,<br />
<br />
нарисуйте стрелку или что то подобное, указывающую на право. [[File:Spline-Tool-Options_0.63.06.png|frame|center]]<br />
<br />
Переключитесь на {{l|Transform Tool|инструмент трансформации}}.<br />
<br />
Кликните на контур "стрелки" и нажмите {{Shortcut|ctrl}}+{{Shortcut|a}} чтобы выделить все {{l|Handle|контрольные точки}} контура, зелёная точка "позиции" при этом останется не выделенной, перетащите выделенные контрольные точки так чтобы зелёная точка "позиции" оказалась в центре "стрелки", после чего добавьте {{l|Rotate Layer|"Слой вращения"}} над слоями контура и заливки "стрелки" и {{l|Group|сгруппируйте}} эти три слоя в один объединяющий слой.<br />
<br />
Теперь у нас есть два основных слоя, один слой с кривой контура и второй групповой со "стрелкой" и слоем вращения.<br />
<br />
=== Заставляем стрелку двигаться и вращаться ===<br />
Выделите объединяющий слой кликнув на него в {{l|Layers Panel|панели слоёв.}}<br />
<br />
Выделите его зелёную точку "позиции" кликнув по ней в окне холста,<br />
также выделите слой Вращения удерживая {{Shortcut|ctrl}} и кликнув по нему на панели слоёв,<br />
в добавок ко всему этому выделите синюю точку "контроля вращения" удерживая {{Shortcut|ctrl}} кликнув по ней в окне холста.<br />
<br />
<br />
Ну вот, у нас должно быть выделено два слоя и по одной контрольной точке из каждого слоя,<br />
теперь добавьте к этим выделенным слоям ещё и слой с кривой (он должен быть последним на панели слоёв) кликнув на него удерживая {{Shortcut|ctrl}}.<br />
<br />
Кликаем правой кнопкой на пунктирной линии которая показывает форму кривой, не на какую нибудь точку на кривой, а именно на линию между точками.<br />
<br />
В контекстном меню которое появится выберите {{Literal|Привязать к кривой}}. <br />
<br />
[[Image:Spline-Link-to-0.63.06.png|frame|none]]<br />
<br />
Сгруппированный слой со "стрелкой" должен переместиться так что его зелёная точка "позиции" окажется на кривой и она должна повернутся указывая в сторону направления кривой в этой точке. <br />
<br />
Выделите только сгруппированный слой и потаскайте зелёную точку "позиции" туда-сюда. Вы увидите что зелёная контрольная точка "стрелки" теперь двигается только вдоль кривой, перемещение также вызывает вращение "стрелки" как и ожидалось.<br />
<br />
Теперь мы можем анимировать стрелку, включите {{l|Animate_Editing_Mode|Режим редактирования анимации}} нажав на иконку в нижнем правом углу окна холста.<br />
<br />
* На нулевом кадре '''0f''', поместите зелёную контрольную точку изолированного слоя "стрелки" на одном конце кривой.<br />
* На пятой секунде '''5s''', перетащите эту точку в другой конец.<br />
<br />
Посмотрите что получилось нажав {{c|<Меню холста>|<Файл>|Предпросмотр|}}.<br />
<br />
== Results ==<br />
<br />
This is the animation I ended up with: {{l|Media:Arrow-follows-bline.sifz|Arrow-follows-bline.sifz}}<br />
<br />
== Controlling the linear velocity ==<br />
<br />
By default, the arrow travels the whole spline with a constant velocity, independently of the spline structure.<br />
<br />
If you select the group layer and look at the Parameters Panel, then you'll see that its Origin parameter is {{L|convert|converted}} to {{Literal|Spline Vertex}} type. This is done automatically when you do "Link to Spline" action. You can disable the "Homogenous" subparameter and then the speed of the arrow will depend on the spline structure - it will take the same time to move along each segment of the spline. So if there's a long straight part then a bendy complex part, the arrow will move much faster along the straight parts (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the spline) is not constant.<br />
<br />
For illustration of the "Homogenous" effect see [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].<br />
<br />
=== Создаём слои ===<br />
<br />
Выберите инструмент "Кривые"<br />
[[File:Bline_tool.png]]<br />
<br />
поставьте флажок только напротив параметра "Создать кривую контура",<br />
нарисуйте кривую вдоль которой будет двигаться наша стрелка и<br />
нажмите кнопку "Создать кривую" в нижней части Панели Параметров Инструмента.<br />
<br />
Теперь, не переключаясь с инструмента "Кривые" выберите флажки "Создать кривую контура" и "Создать кривую области" на Панели Параметров Инструмента,<br />
<br />
[[File:Tool_Options.png]]<br />
<br />
нарисуйте стрелку или что то подобное, указывающую на право<br />
переключитесь на инструмент трансформации.<br />
<br />
Кликните на контур "стрелки" и нажмите control-a чтобы выделить все контрольные точки контура, зелёная точка "позиции" при этом останется не выделенной, перетащите выделенные контрольные точки так чтобы зелёная точка "позиции" оказалась в центре "стрелки", после чего добавьте "Слой вращения" над слоями контура и заливки "стрелки" и изолируйте эти три слоя в один объединяющий слой.<br />
<br />
Теперь у нас есть два основных слоя, один слой с кривой контура и второй изолирующий со "стрелкой" и слоем вращения.<br />
<br />
=== Заставляем стрелку двигаться и вращаться ===<br />
<br />
Выделите объединяющий слой кликнув на него в панели слоёв.<br />
<br />
Выделите его зелёную точку "позиции" кликнув по ней в окне холста,<br />
также выделите слой Вращения удерживая Control и кликнув по нему на панели слоёв,<br />
в добавок ко всему этому выделите синюю точку "контроля вращения" удерживая Control кликнув по ней в окне холста.<br />
<br />
Ну вот теперь у нас должно быть выделено два слоя и по одной контрольной точке из каждого слоя,<br />
теперь добавьте к этим выделенным слоям ещё и слой с кривой Bline (он должен быть последним на панели слоёв) кликнув на него удерживая Control.<br />
<br />
Кликаем правой кнопкой на пунктирной линии которая показывает форму кривой Bline, не на какую нибудь точку на кривой, а именно на линию между точками.<br />
<br />
В контекстном меню которое появится выберите "Привязать к кривой". <br />
<br />
[[File:Link_to_Bline.png]]<br />
<br />
Изолированная "стрелка" должна переместиться так что её зелёная точка "позиции" окажется на кривой Bline и она должна повернутся указывая в сторону направления кривой в этой точке. <br />
<br />
Выделите только изолированный слой и потаскайте зелёную точку "позиции" туда-сюда. Вы увидите что зелёная контрольная точка "стрелки" теперь двигается только вдоль прямой, перемещение также вызывает вращение "стрелки" как и ожидалось.<br />
<br />
Теперь мы можем анимировать стрелку, включите "Режим редактирования анимации" нажав на иконку в нижнем правом углу окна холста.<br />
<br />
На нулевом кадре поместите зелёную контрольную точку изолированного слоя "стрелки" на одном конце кривой Bline, а на пятой секунде перетащите эту точку в другой конец.<br />
<br />
Посмотрите что получилось нажав Файл > Предпросмотр.<br />
<br />
== Результат ==<br />
<br />
Вот анимация которая получилась в результате: {{l|Media:Arrow-follows-bline.sifz|Arrow-follows-bline.sifz}}<br />
<br />
== Контроль ускорения ==<br />
<br />
По умолчанию стрелка проходит вдоль каждого сегмента кривой за одно и тоже время, поэтому если кривая имеет длинную прямую часть, а затем изгибается, то стрелка пройдёт по длинной части гораздо быстрее чем по изогнутой. Происходит это потому что на длинной части меньше вершин, а значит и сегментов. <br />
<br />
Включив параметр ''homogenous'' (однородность) вы сделаете скорость движения постоянной по всей длине кривой, что и требуется достичь в большинстве случаев.<br />
<br />
Видео по теме контроля ускорения [http://www.youtube.com/watch?v=3PGXroxBcuo здесь].<br />
<br />
(Ниже следует Английский вариант этого абзаца для тех кто ничего не понял из русского =) пр. переводчика)<br />
<br />
By default, the arrow takes the same time to move along each segment of the bline. So if there's a long straight part then a bendy complex part, the arrow will move much faster along the straight parts (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the bline) is not constant.<br />
<br />
By enabling the ''homogenous'' parameter of Link to BLine, the velocity becomes constant, as one almost always wants. See [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].</div>Zurba11https://wiki.synfig.org/index.php?title=Doc:Following_a_Spline/ru&diff=18774Doc:Following a Spline/ru2013-10-20T18:59:43Z<p>Zurba11: /* Заставляем стрелку двигаться и вращаться */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Движение вдоль кривой}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
<!-- Page info end --><br />
<br />
== Введение ==<br />
<br />
Если вы используете версию Synfig 0.61.08 или ниже, то читайте {{l|Following a BLine (the old way)|старую редакцию}} статьи, а эта статья актуальна для версии 0.61.09 и старше.<br />
<br />
Итак статья о том как создать объект следующий вдоль произвольной кривой и поворачивающий при этом в сторону направления кривой.<br />
<br />
== Содержание ==<br />
Нам предстоит:<br />
<br />
* {{l|Doc:Following a BLine#Create the Layers|Нарисовать кривую и "стрелку"}}<br />
* {{l|Doc:Following a BLine#Make the Arrow Move and Rotate|Связать стрелку и её "вращение"}} с кривой чтобы она следовала по ней<br />
<br />
=== Создаём новый файл ===<br />
<br />
Файл > Создать<br />
<br />
=== Создаём слои ===<br />
<br />
Выберите инструмент {{l|Spline Tool|"Кривые"}}.<br />
<br />
[[File:Spline-tool-0.63.06.png|frame|none]]<br />
<br />
Поставьте флажок только напротив параметра "Создать кривую контура",<br />
нарисуйте кривую вдоль которой будет двигаться наша стрелка и<br />
нажмите кнопку {{Literal|Создать кривую}} в нижней части {{l|Tool_Options_Panel|Панели Параметров Инструмента}}.<br />
<br />
Теперь, не переключаясь с инструмента "Кривые" выберите флажки {{Literal|Создать кривую контура}} и {{Literal|Создать кривую области}} на Панели Параметров Инструмента,<br />
<br />
нарисуйте стрелку или что то подобное, указывающую на право. [[File:Spline-Tool-Options_0.63.06.png|frame|center]]<br />
<br />
Переключитесь на {{l|Transform Tool|инструмент трансформации}}.<br />
<br />
Кликните на контур "стрелки" и нажмите {{Shortcut|ctrl}}+{{Shortcut|a}} чтобы выделить все {{l|Handle|контрольные точки}} контура, зелёная точка "позиции" при этом останется не выделенной, перетащите выделенные контрольные точки так чтобы зелёная точка "позиции" оказалась в центре "стрелки", после чего добавьте {{l|Rotate Layer|"Слой вращения"}} над слоями контура и заливки "стрелки" и {{l|Group|сгруппируйте}} эти три слоя в один объединяющий слой.<br />
<br />
Теперь у нас есть два основных слоя, один слой с кривой контура и второй групповой со "стрелкой" и слоем вращения.<br />
<br />
=== Заставляем стрелку двигаться и вращаться ===<br />
Выделите объединяющий слой кликнув на него в {{l|Layers Panel|панели слоёв.}}<br />
<br />
Выделите его зелёную точку "позиции" кликнув по ней в окне холста,<br />
также выделите слой Вращения удерживая {{Shortcut|ctrl}} и кликнув по нему на панели слоёв,<br />
в добавок ко всему этому выделите синюю точку "контроля вращения" удерживая {{Shortcut|ctrl}} кликнув по ней в окне холста.<br />
<br />
<br />
Ну вот, у нас должно быть выделено два слоя и по одной контрольной точке из каждого слоя,<br />
теперь добавьте к этим выделенным слоям ещё и слой с кривой (он должен быть последним на панели слоёв) кликнув на него удерживая {{Shortcut|ctrl}}.<br />
<br />
Кликаем правой кнопкой на пунктирной линии которая показывает форму кривой, не на какую нибудь точку на кривой, а именно на линию между точками.<br />
<br />
В контекстном меню которое появится выберите {{Literal|Привязать к кривой}}. <br />
<br />
[[Image:Spline-Link-to-0.63.06.png|frame|none]]<br />
<br />
Сгруппированный слой со "стрелкой" должен переместиться так что его зелёная точка "позиции" окажется на кривой и она должна повернутся указывая в сторону направления кривой в этой точке. <br />
<br />
Выделите только сгруппированный слой и потаскайте зелёную точку "позиции" туда-сюда. Вы увидите что зелёная контрольная точка "стрелки" теперь двигается только вдоль кривой, перемещение также вызывает вращение "стрелки" как и ожидалось.<br />
<br />
Теперь мы можем анимировать стрелку, включите {{l|Animate_Editing_Mode|Режим редактирования анимации}} нажав на иконку в нижнем правом углу окна холста.<br />
<br />
* На нулевом кадре '''0f''', поместите зелёную контрольную точку изолированного слоя "стрелки" на одном конце кривой.<br />
* На пятой секунде '''5s''', перетащите эту точку в другой конец.<br />
<br />
Посмотрите что получилось нажав{{c|<Меню холста>|<Файл>|Предпросмотр|}}.<br />
<br />
== Results ==<br />
<br />
This is the animation I ended up with: {{l|Media:Arrow-follows-bline.sifz|Arrow-follows-bline.sifz}}<br />
<br />
== Controlling the linear velocity ==<br />
<br />
By default, the arrow travels the whole spline with a constant velocity, independently of the spline structure.<br />
<br />
If you select the group layer and look at the Parameters Panel, then you'll see that its Origin parameter is {{L|convert|converted}} to {{Literal|Spline Vertex}} type. This is done automatically when you do "Link to Spline" action. You can disable the "Homogenous" subparameter and then the speed of the arrow will depend on the spline structure - it will take the same time to move along each segment of the spline. So if there's a long straight part then a bendy complex part, the arrow will move much faster along the straight parts (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the spline) is not constant.<br />
<br />
For illustration of the "Homogenous" effect see [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].<br />
<br />
=== Создаём слои ===<br />
<br />
Выберите инструмент "Кривые"<br />
[[File:Bline_tool.png]]<br />
<br />
поставьте флажок только напротив параметра "Создать кривую контура",<br />
нарисуйте кривую вдоль которой будет двигаться наша стрелка и<br />
нажмите кнопку "Создать кривую" в нижней части Панели Параметров Инструмента.<br />
<br />
Теперь, не переключаясь с инструмента "Кривые" выберите флажки "Создать кривую контура" и "Создать кривую области" на Панели Параметров Инструмента,<br />
<br />
[[File:Tool_Options.png]]<br />
<br />
нарисуйте стрелку или что то подобное, указывающую на право<br />
переключитесь на инструмент трансформации.<br />
<br />
Кликните на контур "стрелки" и нажмите control-a чтобы выделить все контрольные точки контура, зелёная точка "позиции" при этом останется не выделенной, перетащите выделенные контрольные точки так чтобы зелёная точка "позиции" оказалась в центре "стрелки", после чего добавьте "Слой вращения" над слоями контура и заливки "стрелки" и изолируйте эти три слоя в один объединяющий слой.<br />
<br />
Теперь у нас есть два основных слоя, один слой с кривой контура и второй изолирующий со "стрелкой" и слоем вращения.<br />
<br />
=== Заставляем стрелку двигаться и вращаться ===<br />
<br />
Выделите объединяющий слой кликнув на него в панели слоёв.<br />
<br />
Выделите его зелёную точку "позиции" кликнув по ней в окне холста,<br />
также выделите слой Вращения удерживая Control и кликнув по нему на панели слоёв,<br />
в добавок ко всему этому выделите синюю точку "контроля вращения" удерживая Control кликнув по ней в окне холста.<br />
<br />
Ну вот теперь у нас должно быть выделено два слоя и по одной контрольной точке из каждого слоя,<br />
теперь добавьте к этим выделенным слоям ещё и слой с кривой Bline (он должен быть последним на панели слоёв) кликнув на него удерживая Control.<br />
<br />
Кликаем правой кнопкой на пунктирной линии которая показывает форму кривой Bline, не на какую нибудь точку на кривой, а именно на линию между точками.<br />
<br />
В контекстном меню которое появится выберите "Привязать к кривой". <br />
<br />
[[File:Link_to_Bline.png]]<br />
<br />
Изолированная "стрелка" должна переместиться так что её зелёная точка "позиции" окажется на кривой Bline и она должна повернутся указывая в сторону направления кривой в этой точке. <br />
<br />
Выделите только изолированный слой и потаскайте зелёную точку "позиции" туда-сюда. Вы увидите что зелёная контрольная точка "стрелки" теперь двигается только вдоль прямой, перемещение также вызывает вращение "стрелки" как и ожидалось.<br />
<br />
Теперь мы можем анимировать стрелку, включите "Режим редактирования анимации" нажав на иконку в нижнем правом углу окна холста.<br />
<br />
На нулевом кадре поместите зелёную контрольную точку изолированного слоя "стрелки" на одном конце кривой Bline, а на пятой секунде перетащите эту точку в другой конец.<br />
<br />
Посмотрите что получилось нажав Файл > Предпросмотр.<br />
<br />
== Результат ==<br />
<br />
Вот анимация которая получилась в результате: {{l|Media:Arrow-follows-bline.sifz|Arrow-follows-bline.sifz}}<br />
<br />
== Контроль ускорения ==<br />
<br />
По умолчанию стрелка проходит вдоль каждого сегмента кривой за одно и тоже время, поэтому если кривая имеет длинную прямую часть, а затем изгибается, то стрелка пройдёт по длинной части гораздо быстрее чем по изогнутой. Происходит это потому что на длинной части меньше вершин, а значит и сегментов. <br />
<br />
Включив параметр ''homogenous'' (однородность) вы сделаете скорость движения постоянной по всей длине кривой, что и требуется достичь в большинстве случаев.<br />
<br />
Видео по теме контроля ускорения [http://www.youtube.com/watch?v=3PGXroxBcuo здесь].<br />
<br />
(Ниже следует Английский вариант этого абзаца для тех кто ничего не понял из русского =) пр. переводчика)<br />
<br />
By default, the arrow takes the same time to move along each segment of the bline. So if there's a long straight part then a bendy complex part, the arrow will move much faster along the straight parts (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the bline) is not constant.<br />
<br />
By enabling the ''homogenous'' parameter of Link to BLine, the velocity becomes constant, as one almost always wants. See [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].</div>Zurba11https://wiki.synfig.org/index.php?title=Doc:Following_a_Spline/ru&diff=18773Doc:Following a Spline/ru2013-10-20T18:33:32Z<p>Zurba11: /* Заставляем стрелку двигаться и вращаться */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Движение вдоль кривой}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
<!-- Page info end --><br />
<br />
== Введение ==<br />
<br />
Если вы используете версию Synfig 0.61.08 или ниже, то читайте {{l|Following a BLine (the old way)|старую редакцию}} статьи, а эта статья актуальна для версии 0.61.09 и старше.<br />
<br />
Итак статья о том как создать объект следующий вдоль произвольной кривой и поворачивающий при этом в сторону направления кривой.<br />
<br />
== Содержание ==<br />
Нам предстоит:<br />
<br />
* {{l|Doc:Following a BLine#Create the Layers|Нарисовать кривую и "стрелку"}}<br />
* {{l|Doc:Following a BLine#Make the Arrow Move and Rotate|Связать стрелку и её "вращение"}} с кривой чтобы она следовала по ней<br />
<br />
=== Создаём новый файл ===<br />
<br />
Файл > Создать<br />
<br />
=== Создаём слои ===<br />
<br />
Выберите инструмент {{l|Spline Tool|"Кривые"}}.<br />
<br />
[[File:Spline-tool-0.63.06.png|frame|none]]<br />
<br />
Поставьте флажок только напротив параметра "Создать кривую контура",<br />
нарисуйте кривую вдоль которой будет двигаться наша стрелка и<br />
нажмите кнопку {{Literal|Создать кривую}} в нижней части {{l|Tool_Options_Panel|Панели Параметров Инструмента}}.<br />
<br />
Теперь, не переключаясь с инструмента "Кривые" выберите флажки {{Literal|Создать кривую контура}} и {{Literal|Создать кривую области}} на Панели Параметров Инструмента,<br />
<br />
нарисуйте стрелку или что то подобное, указывающую на право. [[File:Spline-Tool-Options_0.63.06.png|frame|center]]<br />
<br />
Переключитесь на {{l|Transform Tool|инструмент трансформации}}.<br />
<br />
Кликните на контур "стрелки" и нажмите {{Shortcut|ctrl}}+{{Shortcut|a}} чтобы выделить все {{l|Handle|контрольные точки}} контура, зелёная точка "позиции" при этом останется не выделенной, перетащите выделенные контрольные точки так чтобы зелёная точка "позиции" оказалась в центре "стрелки", после чего добавьте {{l|Rotate Layer|"Слой вращения"}} над слоями контура и заливки "стрелки" и {{l|Group|сгруппируйте}} эти три слоя в один объединяющий слой.<br />
<br />
Теперь у нас есть два основных слоя, один слой с кривой контура и второй групповой со "стрелкой" и слоем вращения.<br />
<br />
=== Заставляем стрелку двигаться и вращаться ===<br />
Выделите объединяющий слой кликнув на него в {{l|Layers Panel|панели слоёв.}}<br />
<br />
Выделите его зелёную точку "позиции" кликнув по ней в окне холста,<br />
также выделите слой Вращения удерживая {{Shortcut|ctrl}} и кликнув по нему на панели слоёв,<br />
в добавок ко всему этому выделите синюю точку "контроля вращения" удерживая {{Shortcut|ctrl}} кликнув по ней в окне холста.<br />
<br />
<br />
Ну вот, у нас должно быть выделено два слоя и по одной контрольной точке из каждого слоя,<br />
теперь добавьте к этим выделенным слоям ещё и слой с кривой (он должен быть последним на панели слоёв) кликнув на него удерживая {{Shortcut|ctrl}}.<br />
<br />
Кликаем правой кнопкой на пунктирной линии которая показывает форму кривой, не на какую нибудь точку на кривой, а именно на линию между точками.<br />
<br />
В контекстном меню которое появится выберите {{Literal|Привязать к кривой}}. <br />
<br />
[[Image:Spline-Link-to-0.63.06.png|frame|none]]<br />
<br />
Сгруппированный слой со "стрелкой" должен переместиться так что его зелёная точка "позиции" окажется на кривой и она должна повернутся указывая в сторону направления кривой в этой точке. <br />
<br />
Выделите только сгруппированный слой и потаскайте зелёную точку "позиции" туда-сюда. Вы увидите что зелёная контрольная точка "стрелки" теперь двигается только вдоль кривой, перемещение также вызывает вращение "стрелки" как и ожидалось.<br />
<br />
Теперь мы можем анимировать стрелку, включите {{l|Animate_Editing_Mode|Режим редактирования анимации}} нажав на иконку в нижнем правом углу окна холста.<br />
<br />
* На нулевом кадре '''0f''', поместите зелёную контрольную точку изолированного слоя "стрелки" на одном конце кривой.<br />
* На пятой секунде '''5s''', перетащите эту точку в другой конец.<br />
<br />
Посмотрите что получилось нажав Файл{{c|<Меню холста>|<Файл>|Предпросмотр|}}.<br />
<br />
== Results ==<br />
<br />
This is the animation I ended up with: {{l|Media:Arrow-follows-bline.sifz|Arrow-follows-bline.sifz}}<br />
<br />
== Controlling the linear velocity ==<br />
<br />
By default, the arrow travels the whole spline with a constant velocity, independently of the spline structure.<br />
<br />
If you select the group layer and look at the Parameters Panel, then you'll see that its Origin parameter is {{L|convert|converted}} to {{Literal|Spline Vertex}} type. This is done automatically when you do "Link to Spline" action. You can disable the "Homogenous" subparameter and then the speed of the arrow will depend on the spline structure - it will take the same time to move along each segment of the spline. So if there's a long straight part then a bendy complex part, the arrow will move much faster along the straight parts (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the spline) is not constant.<br />
<br />
For illustration of the "Homogenous" effect see [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].<br />
<br />
=== Создаём слои ===<br />
<br />
Выберите инструмент "Кривые"<br />
[[File:Bline_tool.png]]<br />
<br />
поставьте флажок только напротив параметра "Создать кривую контура",<br />
нарисуйте кривую вдоль которой будет двигаться наша стрелка и<br />
нажмите кнопку "Создать кривую" в нижней части Панели Параметров Инструмента.<br />
<br />
Теперь, не переключаясь с инструмента "Кривые" выберите флажки "Создать кривую контура" и "Создать кривую области" на Панели Параметров Инструмента,<br />
<br />
[[File:Tool_Options.png]]<br />
<br />
нарисуйте стрелку или что то подобное, указывающую на право<br />
переключитесь на инструмент трансформации.<br />
<br />
Кликните на контур "стрелки" и нажмите control-a чтобы выделить все контрольные точки контура, зелёная точка "позиции" при этом останется не выделенной, перетащите выделенные контрольные точки так чтобы зелёная точка "позиции" оказалась в центре "стрелки", после чего добавьте "Слой вращения" над слоями контура и заливки "стрелки" и изолируйте эти три слоя в один объединяющий слой.<br />
<br />
Теперь у нас есть два основных слоя, один слой с кривой контура и второй изолирующий со "стрелкой" и слоем вращения.<br />
<br />
=== Заставляем стрелку двигаться и вращаться ===<br />
<br />
Выделите объединяющий слой кликнув на него в панели слоёв.<br />
<br />
Выделите его зелёную точку "позиции" кликнув по ней в окне холста,<br />
также выделите слой Вращения удерживая Control и кликнув по нему на панели слоёв,<br />
в добавок ко всему этому выделите синюю точку "контроля вращения" удерживая Control кликнув по ней в окне холста.<br />
<br />
Ну вот теперь у нас должно быть выделено два слоя и по одной контрольной точке из каждого слоя,<br />
теперь добавьте к этим выделенным слоям ещё и слой с кривой Bline (он должен быть последним на панели слоёв) кликнув на него удерживая Control.<br />
<br />
Кликаем правой кнопкой на пунктирной линии которая показывает форму кривой Bline, не на какую нибудь точку на кривой, а именно на линию между точками.<br />
<br />
В контекстном меню которое появится выберите "Привязать к кривой". <br />
<br />
[[File:Link_to_Bline.png]]<br />
<br />
Изолированная "стрелка" должна переместиться так что её зелёная точка "позиции" окажется на кривой Bline и она должна повернутся указывая в сторону направления кривой в этой точке. <br />
<br />
Выделите только изолированный слой и потаскайте зелёную точку "позиции" туда-сюда. Вы увидите что зелёная контрольная точка "стрелки" теперь двигается только вдоль прямой, перемещение также вызывает вращение "стрелки" как и ожидалось.<br />
<br />
Теперь мы можем анимировать стрелку, включите "Режим редактирования анимации" нажав на иконку в нижнем правом углу окна холста.<br />
<br />
На нулевом кадре поместите зелёную контрольную точку изолированного слоя "стрелки" на одном конце кривой Bline, а на пятой секунде перетащите эту точку в другой конец.<br />
<br />
Посмотрите что получилось нажав Файл > Предпросмотр.<br />
<br />
== Результат ==<br />
<br />
Вот анимация которая получилась в результате: {{l|Media:Arrow-follows-bline.sifz|Arrow-follows-bline.sifz}}<br />
<br />
== Контроль ускорения ==<br />
<br />
По умолчанию стрелка проходит вдоль каждого сегмента кривой за одно и тоже время, поэтому если кривая имеет длинную прямую часть, а затем изгибается, то стрелка пройдёт по длинной части гораздо быстрее чем по изогнутой. Происходит это потому что на длинной части меньше вершин, а значит и сегментов. <br />
<br />
Включив параметр ''homogenous'' (однородность) вы сделаете скорость движения постоянной по всей длине кривой, что и требуется достичь в большинстве случаев.<br />
<br />
Видео по теме контроля ускорения [http://www.youtube.com/watch?v=3PGXroxBcuo здесь].<br />
<br />
(Ниже следует Английский вариант этого абзаца для тех кто ничего не понял из русского =) пр. переводчика)<br />
<br />
By default, the arrow takes the same time to move along each segment of the bline. So if there's a long straight part then a bendy complex part, the arrow will move much faster along the straight parts (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the bline) is not constant.<br />
<br />
By enabling the ''homogenous'' parameter of Link to BLine, the velocity becomes constant, as one almost always wants. See [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].</div>Zurba11https://wiki.synfig.org/index.php?title=Doc:Following_a_Spline/ru&diff=18772Doc:Following a Spline/ru2013-10-20T18:31:20Z<p>Zurba11: /* Создаём слои */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Движение вдоль кривой}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
<!-- Page info end --><br />
<br />
== Введение ==<br />
<br />
Если вы используете версию Synfig 0.61.08 или ниже, то читайте {{l|Following a BLine (the old way)|старую редакцию}} статьи, а эта статья актуальна для версии 0.61.09 и старше.<br />
<br />
Итак статья о том как создать объект следующий вдоль произвольной кривой и поворачивающий при этом в сторону направления кривой.<br />
<br />
== Содержание ==<br />
Нам предстоит:<br />
<br />
* {{l|Doc:Following a BLine#Create the Layers|Нарисовать кривую и "стрелку"}}<br />
* {{l|Doc:Following a BLine#Make the Arrow Move and Rotate|Связать стрелку и её "вращение"}} с кривой чтобы она следовала по ней<br />
<br />
=== Создаём новый файл ===<br />
<br />
Файл > Создать<br />
<br />
=== Создаём слои ===<br />
<br />
Выберите инструмент {{l|Spline Tool|"Кривые"}}.<br />
<br />
[[File:Spline-tool-0.63.06.png|frame|none]]<br />
<br />
Поставьте флажок только напротив параметра "Создать кривую контура",<br />
нарисуйте кривую вдоль которой будет двигаться наша стрелка и<br />
нажмите кнопку {{Literal|Создать кривую}} в нижней части {{l|Tool_Options_Panel|Панели Параметров Инструмента}}.<br />
<br />
Теперь, не переключаясь с инструмента "Кривые" выберите флажки {{Literal|Создать кривую контура}} и {{Literal|Создать кривую области}} на Панели Параметров Инструмента,<br />
<br />
нарисуйте стрелку или что то подобное, указывающую на право. [[File:Spline-Tool-Options_0.63.06.png|frame|center]]<br />
<br />
Переключитесь на {{l|Transform Tool|инструмент трансформации}}.<br />
<br />
Кликните на контур "стрелки" и нажмите {{Shortcut|ctrl}}+{{Shortcut|a}} чтобы выделить все {{l|Handle|контрольные точки}} контура, зелёная точка "позиции" при этом останется не выделенной, перетащите выделенные контрольные точки так чтобы зелёная точка "позиции" оказалась в центре "стрелки", после чего добавьте {{l|Rotate Layer|"Слой вращения"}} над слоями контура и заливки "стрелки" и {{l|Group|сгруппируйте}} эти три слоя в один объединяющий слой.<br />
<br />
Теперь у нас есть два основных слоя, один слой с кривой контура и второй групповой со "стрелкой" и слоем вращения.<br />
<br />
=== Заставляем стрелку двигаться и вращаться ===<br />
Выделите объединяющий слой кликнув на него в {{l|Layers Panel|панели слоёв.}}<br />
<br />
Выделите его зелёную точку "позиции" кликнув по ней в окне холста,<br />
также выделите слой Вращения удерживая {{Shortcut|ctrl}} и кликнув по нему на панели слоёв,<br />
в добавок ко всему этому выделите синюю точку "контроля вращения" удерживая {{Shortcut|ctrl}} кликнув по ней в окне холста.<br />
<br />
<br />
Ну вот, у нас должно быть выделено два слоя и по одной контрольной точке из каждого слоя,<br />
теперь добавьте к этим выделенным слоям ещё и слой с кривой (он должен быть последним на панели слоёв) кликнув на него удерживая {{Shortcut|ctrl}}.<br />
<br />
Кликаем правой кнопкой на пунктирной линии которая показывает форму кривой, не на какую нибудь точку на кривой, а именно на линию между точками.<br />
<br />
В контекстном меню которое появится выберите {{Literal|Привязать к кривой}}. <br />
<br />
[[Image:Spline-Link-to-0.63.06.png|frame|none]]<br />
<br />
Сгруппированный слой со "стрелкой" должен переместиться так что его зелёная точка "позиции" окажется на кривой и она должна повернутся указывая в сторону направления кривой в этой точке. <br />
<br />
Выделите только сгруппированный слой и потаскайте зелёную точку "позиции" туда-сюда. Вы увидите что зелёная контрольная точка "стрелки" теперь двигается только вдоль кривой, перемещение также вызывает вращение "стрелки" как и ожидалось.<br />
<br />
Теперь мы можем анимировать стрелку, включите {{l|Animate_Editing_Mode|Режим редактирования анимации}} нажав на иконку в нижнем правом углу окна холста.<br />
<br />
* На нулевом кадре '''0f''', поместите зелёную контрольную точку изолированного слоя "стрелки" на одном конце кривой.<br />
* На пятой секунде '''5s''', перетащите эту точку в другой конец.<br />
<br />
Посмотрите что получилось нажав Файл{{c|<Caret Menu>|<File>|Предпросмотр|}}.<br />
<br />
== Results ==<br />
<br />
This is the animation I ended up with: {{l|Media:Arrow-follows-bline.sifz|Arrow-follows-bline.sifz}}<br />
<br />
== Controlling the linear velocity ==<br />
<br />
By default, the arrow travels the whole spline with a constant velocity, independently of the spline structure.<br />
<br />
If you select the group layer and look at the Parameters Panel, then you'll see that its Origin parameter is {{L|convert|converted}} to {{Literal|Spline Vertex}} type. This is done automatically when you do "Link to Spline" action. You can disable the "Homogenous" subparameter and then the speed of the arrow will depend on the spline structure - it will take the same time to move along each segment of the spline. So if there's a long straight part then a bendy complex part, the arrow will move much faster along the straight parts (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the spline) is not constant.<br />
<br />
For illustration of the "Homogenous" effect see [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].<br />
<br />
=== Создаём слои ===<br />
<br />
Выберите инструмент "Кривые"<br />
[[File:Bline_tool.png]]<br />
<br />
поставьте флажок только напротив параметра "Создать кривую контура",<br />
нарисуйте кривую вдоль которой будет двигаться наша стрелка и<br />
нажмите кнопку "Создать кривую" в нижней части Панели Параметров Инструмента.<br />
<br />
Теперь, не переключаясь с инструмента "Кривые" выберите флажки "Создать кривую контура" и "Создать кривую области" на Панели Параметров Инструмента,<br />
<br />
[[File:Tool_Options.png]]<br />
<br />
нарисуйте стрелку или что то подобное, указывающую на право<br />
переключитесь на инструмент трансформации.<br />
<br />
Кликните на контур "стрелки" и нажмите control-a чтобы выделить все контрольные точки контура, зелёная точка "позиции" при этом останется не выделенной, перетащите выделенные контрольные точки так чтобы зелёная точка "позиции" оказалась в центре "стрелки", после чего добавьте "Слой вращения" над слоями контура и заливки "стрелки" и изолируйте эти три слоя в один объединяющий слой.<br />
<br />
Теперь у нас есть два основных слоя, один слой с кривой контура и второй изолирующий со "стрелкой" и слоем вращения.<br />
<br />
=== Заставляем стрелку двигаться и вращаться ===<br />
<br />
Выделите объединяющий слой кликнув на него в панели слоёв.<br />
<br />
Выделите его зелёную точку "позиции" кликнув по ней в окне холста,<br />
также выделите слой Вращения удерживая Control и кликнув по нему на панели слоёв,<br />
в добавок ко всему этому выделите синюю точку "контроля вращения" удерживая Control кликнув по ней в окне холста.<br />
<br />
Ну вот теперь у нас должно быть выделено два слоя и по одной контрольной точке из каждого слоя,<br />
теперь добавьте к этим выделенным слоям ещё и слой с кривой Bline (он должен быть последним на панели слоёв) кликнув на него удерживая Control.<br />
<br />
Кликаем правой кнопкой на пунктирной линии которая показывает форму кривой Bline, не на какую нибудь точку на кривой, а именно на линию между точками.<br />
<br />
В контекстном меню которое появится выберите "Привязать к кривой". <br />
<br />
[[File:Link_to_Bline.png]]<br />
<br />
Изолированная "стрелка" должна переместиться так что её зелёная точка "позиции" окажется на кривой Bline и она должна повернутся указывая в сторону направления кривой в этой точке. <br />
<br />
Выделите только изолированный слой и потаскайте зелёную точку "позиции" туда-сюда. Вы увидите что зелёная контрольная точка "стрелки" теперь двигается только вдоль прямой, перемещение также вызывает вращение "стрелки" как и ожидалось.<br />
<br />
Теперь мы можем анимировать стрелку, включите "Режим редактирования анимации" нажав на иконку в нижнем правом углу окна холста.<br />
<br />
На нулевом кадре поместите зелёную контрольную точку изолированного слоя "стрелки" на одном конце кривой Bline, а на пятой секунде перетащите эту точку в другой конец.<br />
<br />
Посмотрите что получилось нажав Файл > Предпросмотр.<br />
<br />
== Результат ==<br />
<br />
Вот анимация которая получилась в результате: {{l|Media:Arrow-follows-bline.sifz|Arrow-follows-bline.sifz}}<br />
<br />
== Контроль ускорения ==<br />
<br />
По умолчанию стрелка проходит вдоль каждого сегмента кривой за одно и тоже время, поэтому если кривая имеет длинную прямую часть, а затем изгибается, то стрелка пройдёт по длинной части гораздо быстрее чем по изогнутой. Происходит это потому что на длинной части меньше вершин, а значит и сегментов. <br />
<br />
Включив параметр ''homogenous'' (однородность) вы сделаете скорость движения постоянной по всей длине кривой, что и требуется достичь в большинстве случаев.<br />
<br />
Видео по теме контроля ускорения [http://www.youtube.com/watch?v=3PGXroxBcuo здесь].<br />
<br />
(Ниже следует Английский вариант этого абзаца для тех кто ничего не понял из русского =) пр. переводчика)<br />
<br />
By default, the arrow takes the same time to move along each segment of the bline. So if there's a long straight part then a bendy complex part, the arrow will move much faster along the straight parts (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the bline) is not constant.<br />
<br />
By enabling the ''homogenous'' parameter of Link to BLine, the velocity becomes constant, as one almost always wants. See [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].</div>Zurba11https://wiki.synfig.org/index.php?title=Doc:Following_a_Spline/ru&diff=18771Doc:Following a Spline/ru2013-10-20T18:26:46Z<p>Zurba11: /* Make the Arrow Move and Rotate */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Движение вдоль кривой}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
<!-- Page info end --><br />
<br />
== Введение ==<br />
<br />
Если вы используете версию Synfig 0.61.08 или ниже, то читайте {{l|Following a BLine (the old way)|старую редакцию}} статьи, а эта статья актуальна для версии 0.61.09 и старше.<br />
<br />
Итак статья о том как создать объект следующий вдоль произвольной кривой и поворачивающий при этом в сторону направления кривой.<br />
<br />
== Содержание ==<br />
Нам предстоит:<br />
<br />
* {{l|Doc:Following a BLine#Create the Layers|Нарисовать кривую и "стрелку"}}<br />
* {{l|Doc:Following a BLine#Make the Arrow Move and Rotate|Связать стрелку и её "вращение"}} с кривой чтобы она следовала по ней<br />
<br />
=== Создаём новый файл ===<br />
<br />
Файл > Создать<br />
<br />
=== Создаём слои ===<br />
<br />
Выберите инструмент {{l|Spline Tool|"Кривые"}}.<br />
<br />
[[File:Spline-tool-0.63.06.png|frame|none]]<br />
<br />
Поставьте флажок только напротив параметра "Создать кривую контура",<br />
нарисуйте кривую вдоль которой будет двигаться наша стрелка и<br />
нажмите кнопку {{Literal|Создать кривую}} в нижней части {{l|Tool_Options_Panel|Панели Параметров Инструмента}}.<br />
<br />
Теперь, не переключаясь с инструмента "Кривые" выберите флажки {{Literal|Создать кривую контура}} и {{Literal|Создать кривую области}} на Панели Параметров Инструмента,<br />
<br />
нарисуйте стрелку или что то подобное, указывающую на право. [[File:Spline-Tool-Options_0.63.06.png|frame|center]]<br />
<br />
Переключитесь на {{l|Transform Tool|инструмент трансформации}}.<br />
<br />
Кликните на контур "стрелки" и нажмите control-a чтобы выделить все {{l|Handle|контрольные точки}} контура, зелёная точка "позиции" при этом останется не выделенной, перетащите выделенные контрольные точки так чтобы зелёная точка "позиции" оказалась в центре "стрелки", после чего добавьте {{l|Rotate Layer|"Слой вращения"}} над слоями контура и заливки "стрелки" и {{l|Group|сгруппируйте}} эти три слоя в один объединяющий слой.<br />
<br />
Теперь у нас есть два основных слоя, один слой с кривой контура и второй групповой со "стрелкой" и слоем вращения.<br />
<br />
=== Заставляем стрелку двигаться и вращаться ===<br />
Выделите объединяющий слой кликнув на него в {{l|Layers Panel|панели слоёв.}}<br />
<br />
Выделите его зелёную точку "позиции" кликнув по ней в окне холста,<br />
также выделите слой Вращения удерживая {{Shortcut|ctrl}} и кликнув по нему на панели слоёв,<br />
в добавок ко всему этому выделите синюю точку "контроля вращения" удерживая {{Shortcut|ctrl}} кликнув по ней в окне холста.<br />
<br />
<br />
Ну вот, у нас должно быть выделено два слоя и по одной контрольной точке из каждого слоя,<br />
теперь добавьте к этим выделенным слоям ещё и слой с кривой (он должен быть последним на панели слоёв) кликнув на него удерживая {{Shortcut|ctrl}}.<br />
<br />
Кликаем правой кнопкой на пунктирной линии которая показывает форму кривой, не на какую нибудь точку на кривой, а именно на линию между точками.<br />
<br />
В контекстном меню которое появится выберите {{Literal|Привязать к кривой}}. <br />
<br />
[[Image:Spline-Link-to-0.63.06.png|frame|none]]<br />
<br />
Сгруппированный слой со "стрелкой" должен переместиться так что его зелёная точка "позиции" окажется на кривой и она должна повернутся указывая в сторону направления кривой в этой точке. <br />
<br />
Выделите только сгруппированный слой и потаскайте зелёную точку "позиции" туда-сюда. Вы увидите что зелёная контрольная точка "стрелки" теперь двигается только вдоль кривой, перемещение также вызывает вращение "стрелки" как и ожидалось.<br />
<br />
Теперь мы можем анимировать стрелку, включите {{l|Animate_Editing_Mode|Режим редактирования анимации}} нажав на иконку в нижнем правом углу окна холста.<br />
<br />
* На нулевом кадре '''0f''', поместите зелёную контрольную точку изолированного слоя "стрелки" на одном конце кривой.<br />
* На пятой секунде '''5s''', перетащите эту точку в другой конец.<br />
<br />
Посмотрите что получилось нажав Файл{{c|<Caret Menu>|<File>|Предпросмотр|}}.<br />
<br />
== Results ==<br />
<br />
This is the animation I ended up with: {{l|Media:Arrow-follows-bline.sifz|Arrow-follows-bline.sifz}}<br />
<br />
== Controlling the linear velocity ==<br />
<br />
By default, the arrow travels the whole spline with a constant velocity, independently of the spline structure.<br />
<br />
If you select the group layer and look at the Parameters Panel, then you'll see that its Origin parameter is {{L|convert|converted}} to {{Literal|Spline Vertex}} type. This is done automatically when you do "Link to Spline" action. You can disable the "Homogenous" subparameter and then the speed of the arrow will depend on the spline structure - it will take the same time to move along each segment of the spline. So if there's a long straight part then a bendy complex part, the arrow will move much faster along the straight parts (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the spline) is not constant.<br />
<br />
For illustration of the "Homogenous" effect see [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].<br />
<br />
=== Создаём слои ===<br />
<br />
Выберите инструмент "Кривые"<br />
[[File:Bline_tool.png]]<br />
<br />
поставьте флажок только напротив параметра "Создать кривую контура",<br />
нарисуйте кривую вдоль которой будет двигаться наша стрелка и<br />
нажмите кнопку "Создать кривую" в нижней части Панели Параметров Инструмента.<br />
<br />
Теперь, не переключаясь с инструмента "Кривые" выберите флажки "Создать кривую контура" и "Создать кривую области" на Панели Параметров Инструмента,<br />
<br />
[[File:Tool_Options.png]]<br />
<br />
нарисуйте стрелку или что то подобное, указывающую на право<br />
переключитесь на инструмент трансформации.<br />
<br />
Кликните на контур "стрелки" и нажмите control-a чтобы выделить все контрольные точки контура, зелёная точка "позиции" при этом останется не выделенной, перетащите выделенные контрольные точки так чтобы зелёная точка "позиции" оказалась в центре "стрелки", после чего добавьте "Слой вращения" над слоями контура и заливки "стрелки" и изолируйте эти три слоя в один объединяющий слой.<br />
<br />
Теперь у нас есть два основных слоя, один слой с кривой контура и второй изолирующий со "стрелкой" и слоем вращения.<br />
<br />
=== Заставляем стрелку двигаться и вращаться ===<br />
<br />
Выделите объединяющий слой кликнув на него в панели слоёв.<br />
<br />
Выделите его зелёную точку "позиции" кликнув по ней в окне холста,<br />
также выделите слой Вращения удерживая Control и кликнув по нему на панели слоёв,<br />
в добавок ко всему этому выделите синюю точку "контроля вращения" удерживая Control кликнув по ней в окне холста.<br />
<br />
Ну вот теперь у нас должно быть выделено два слоя и по одной контрольной точке из каждого слоя,<br />
теперь добавьте к этим выделенным слоям ещё и слой с кривой Bline (он должен быть последним на панели слоёв) кликнув на него удерживая Control.<br />
<br />
Кликаем правой кнопкой на пунктирной линии которая показывает форму кривой Bline, не на какую нибудь точку на кривой, а именно на линию между точками.<br />
<br />
В контекстном меню которое появится выберите "Привязать к кривой". <br />
<br />
[[File:Link_to_Bline.png]]<br />
<br />
Изолированная "стрелка" должна переместиться так что её зелёная точка "позиции" окажется на кривой Bline и она должна повернутся указывая в сторону направления кривой в этой точке. <br />
<br />
Выделите только изолированный слой и потаскайте зелёную точку "позиции" туда-сюда. Вы увидите что зелёная контрольная точка "стрелки" теперь двигается только вдоль прямой, перемещение также вызывает вращение "стрелки" как и ожидалось.<br />
<br />
Теперь мы можем анимировать стрелку, включите "Режим редактирования анимации" нажав на иконку в нижнем правом углу окна холста.<br />
<br />
На нулевом кадре поместите зелёную контрольную точку изолированного слоя "стрелки" на одном конце кривой Bline, а на пятой секунде перетащите эту точку в другой конец.<br />
<br />
Посмотрите что получилось нажав Файл > Предпросмотр.<br />
<br />
== Результат ==<br />
<br />
Вот анимация которая получилась в результате: {{l|Media:Arrow-follows-bline.sifz|Arrow-follows-bline.sifz}}<br />
<br />
== Контроль ускорения ==<br />
<br />
По умолчанию стрелка проходит вдоль каждого сегмента кривой за одно и тоже время, поэтому если кривая имеет длинную прямую часть, а затем изгибается, то стрелка пройдёт по длинной части гораздо быстрее чем по изогнутой. Происходит это потому что на длинной части меньше вершин, а значит и сегментов. <br />
<br />
Включив параметр ''homogenous'' (однородность) вы сделаете скорость движения постоянной по всей длине кривой, что и требуется достичь в большинстве случаев.<br />
<br />
Видео по теме контроля ускорения [http://www.youtube.com/watch?v=3PGXroxBcuo здесь].<br />
<br />
(Ниже следует Английский вариант этого абзаца для тех кто ничего не понял из русского =) пр. переводчика)<br />
<br />
By default, the arrow takes the same time to move along each segment of the bline. So if there's a long straight part then a bendy complex part, the arrow will move much faster along the straight parts (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the bline) is not constant.<br />
<br />
By enabling the ''homogenous'' parameter of Link to BLine, the velocity becomes constant, as one almost always wants. See [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].</div>Zurba11https://wiki.synfig.org/index.php?title=Doc:Following_a_Spline/ru&diff=18770Doc:Following a Spline/ru2013-10-20T16:51:25Z<p>Zurba11: /* Создаём новый файл */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Движение вдоль кривой}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
<!-- Page info end --><br />
<br />
== Введение ==<br />
<br />
Если вы используете версию Synfig 0.61.08 или ниже, то читайте {{l|Following a BLine (the old way)|старую редакцию}} статьи, а эта статья актуальна для версии 0.61.09 и старше.<br />
<br />
Итак статья о том как создать объект следующий вдоль произвольной кривой и поворачивающий при этом в сторону направления кривой.<br />
<br />
== Содержание ==<br />
Нам предстоит:<br />
<br />
* {{l|Doc:Following a BLine#Create the Layers|Нарисовать кривую и "стрелку"}}<br />
* {{l|Doc:Following a BLine#Make the Arrow Move and Rotate|Связать стрелку и её "вращение"}} с кривой чтобы она следовала по ней<br />
<br />
=== Создаём новый файл ===<br />
<br />
Файл > Создать<br />
<br />
=== Создаём слои ===<br />
<br />
Выберите инструмент {{l|Spline Tool|"Кривые"}}.<br />
<br />
[[File:Spline-tool-0.63.06.png|frame|none]]<br />
<br />
Поставьте флажок только напротив параметра "Создать кривую контура",<br />
нарисуйте кривую вдоль которой будет двигаться наша стрелка и<br />
нажмите кнопку {{Literal|Создать кривую}} в нижней части {{l|Tool_Options_Panel|Панели Параметров Инструмента}}.<br />
<br />
Теперь, не переключаясь с инструмента "Кривые" выберите флажки {{Literal|Создать кривую контура}} и {{Literal|Создать кривую области}} на Панели Параметров Инструмента,<br />
<br />
нарисуйте стрелку или что то подобное, указывающую на право. [[File:Spline-Tool-Options_0.63.06.png|frame|center]]<br />
<br />
Переключитесь на {{l|Transform Tool|инструмент трансформации}}.<br />
<br />
Кликните на контур "стрелки" и нажмите control-a чтобы выделить все {{l|Handle|контрольные точки}} контура, зелёная точка "позиции" при этом останется не выделенной, перетащите выделенные контрольные точки так чтобы зелёная точка "позиции" оказалась в центре "стрелки", после чего добавьте {{l|Rotate Layer|"Слой вращения"}} над слоями контура и заливки "стрелки" и {{l|Group|сгруппируйте}} эти три слоя в один объединяющий слой.<br />
<br />
Теперь у нас есть два основных слоя, один слой с кривой контура и второй групповой со "стрелкой" и слоем вращения.<br />
<br />
=== Make the Arrow Move and Rotate ===<br />
<br />
Select the group layer by clicking it in the {{l|Layers Panel}}<br />
<br />
select its green position handle by clicking on it in the canvas window<br />
<br />
additionally select the Rotate layer by holding Control and clicking it in the Layers panel<br />
<br />
additionally select the blue "rotation amount" handle by holding {{Shortcut|ctrl}} and clicking on it in the canvas window<br />
<br />
so now we should have 2 layers selected, and one handle from each of those 2 layers selected<br />
<br />
now additionally select the curved spline layer (it should be the last layer in the Layer panel's list) by holding {{Shortcut|ctrl}} and clicking on it<br />
<br />
right-click on the dotted line that indicates the position of the curved spline - not on any handle, but on the dotted line between handle<br />
<br />
from the context menu that pops up, select {{Literal|Link to Spline}}<br />
[[Image:Spline-Link-to-0.63.06.png|frame|none]]<br />
<br />
The arrow group should move so that its green position handle is on the spline, and it should rotate so that the arrow points along the spline at that point<br />
<br />
Select just the group layer, and drag its green handle around. you'll see that the handle is constrained now to line on the spline, and that dragging it also affects the rotation of the arrow as expected<br />
<br />
We can now animate the arrow. turn on {{l|Animate_Editing_Mode}} by clicking the icon in the bottom right of the canvas window.<br />
<br />
* at time '''0f''', drag the group layer's green position handle to one end of the spline<br />
* at time '''5s''', drag the same position handle to the other end of the spline<br />
<br />
Try {{c|<Caret Menu>|<File>|Preview|}} to watch the animation.<br />
<br />
== Results ==<br />
<br />
This is the animation I ended up with: {{l|Media:Arrow-follows-bline.sifz|Arrow-follows-bline.sifz}}<br />
<br />
== Controlling the linear velocity ==<br />
<br />
By default, the arrow travels the whole spline with a constant velocity, independently of the spline structure.<br />
<br />
If you select the group layer and look at the Parameters Panel, then you'll see that its Origin parameter is {{L|convert|converted}} to {{Literal|Spline Vertex}} type. This is done automatically when you do "Link to Spline" action. You can disable the "Homogenous" subparameter and then the speed of the arrow will depend on the spline structure - it will take the same time to move along each segment of the spline. So if there's a long straight part then a bendy complex part, the arrow will move much faster along the straight parts (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the spline) is not constant.<br />
<br />
For illustration of the "Homogenous" effect see [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].<br />
<br />
=== Создаём слои ===<br />
<br />
Выберите инструмент "Кривые"<br />
[[File:Bline_tool.png]]<br />
<br />
поставьте флажок только напротив параметра "Создать кривую контура",<br />
нарисуйте кривую вдоль которой будет двигаться наша стрелка и<br />
нажмите кнопку "Создать кривую" в нижней части Панели Параметров Инструмента.<br />
<br />
Теперь, не переключаясь с инструмента "Кривые" выберите флажки "Создать кривую контура" и "Создать кривую области" на Панели Параметров Инструмента,<br />
<br />
[[File:Tool_Options.png]]<br />
<br />
нарисуйте стрелку или что то подобное, указывающую на право<br />
переключитесь на инструмент трансформации.<br />
<br />
Кликните на контур "стрелки" и нажмите control-a чтобы выделить все контрольные точки контура, зелёная точка "позиции" при этом останется не выделенной, перетащите выделенные контрольные точки так чтобы зелёная точка "позиции" оказалась в центре "стрелки", после чего добавьте "Слой вращения" над слоями контура и заливки "стрелки" и изолируйте эти три слоя в один объединяющий слой.<br />
<br />
Теперь у нас есть два основных слоя, один слой с кривой контура и второй изолирующий со "стрелкой" и слоем вращения.<br />
<br />
=== Заставляем стрелку двигаться и вращаться ===<br />
<br />
Выделите объединяющий слой кликнув на него в панели слоёв.<br />
<br />
Выделите его зелёную точку "позиции" кликнув по ней в окне холста,<br />
также выделите слой Вращения удерживая Control и кликнув по нему на панели слоёв,<br />
в добавок ко всему этому выделите синюю точку "контроля вращения" удерживая Control кликнув по ней в окне холста.<br />
<br />
Ну вот теперь у нас должно быть выделено два слоя и по одной контрольной точке из каждого слоя,<br />
теперь добавьте к этим выделенным слоям ещё и слой с кривой Bline (он должен быть последним на панели слоёв) кликнув на него удерживая Control.<br />
<br />
Кликаем правой кнопкой на пунктирной линии которая показывает форму кривой Bline, не на какую нибудь точку на кривой, а именно на линию между точками.<br />
<br />
В контекстном меню которое появится выберите "Привязать к кривой". <br />
<br />
[[File:Link_to_Bline.png]]<br />
<br />
Изолированная "стрелка" должна переместиться так что её зелёная точка "позиции" окажется на кривой Bline и она должна повернутся указывая в сторону направления кривой в этой точке. <br />
<br />
Выделите только изолированный слой и потаскайте зелёную точку "позиции" туда-сюда. Вы увидите что зелёная контрольная точка "стрелки" теперь двигается только вдоль прямой, перемещение также вызывает вращение "стрелки" как и ожидалось.<br />
<br />
Теперь мы можем анимировать стрелку, включите "Режим редактирования анимации" нажав на иконку в нижнем правом углу окна холста.<br />
<br />
На нулевом кадре поместите зелёную контрольную точку изолированного слоя "стрелки" на одном конце кривой Bline, а на пятой секунде перетащите эту точку в другой конец.<br />
<br />
Посмотрите что получилось нажав Файл > Предпросмотр.<br />
<br />
== Результат ==<br />
<br />
Вот анимация которая получилась в результате: {{l|Media:Arrow-follows-bline.sifz|Arrow-follows-bline.sifz}}<br />
<br />
== Контроль ускорения ==<br />
<br />
По умолчанию стрелка проходит вдоль каждого сегмента кривой за одно и тоже время, поэтому если кривая имеет длинную прямую часть, а затем изгибается, то стрелка пройдёт по длинной части гораздо быстрее чем по изогнутой. Происходит это потому что на длинной части меньше вершин, а значит и сегментов. <br />
<br />
Включив параметр ''homogenous'' (однородность) вы сделаете скорость движения постоянной по всей длине кривой, что и требуется достичь в большинстве случаев.<br />
<br />
Видео по теме контроля ускорения [http://www.youtube.com/watch?v=3PGXroxBcuo здесь].<br />
<br />
(Ниже следует Английский вариант этого абзаца для тех кто ничего не понял из русского =) пр. переводчика)<br />
<br />
By default, the arrow takes the same time to move along each segment of the bline. So if there's a long straight part then a bendy complex part, the arrow will move much faster along the straight parts (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the bline) is not constant.<br />
<br />
By enabling the ''homogenous'' parameter of Link to BLine, the velocity becomes constant, as one almost always wants. See [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].</div>Zurba11https://wiki.synfig.org/index.php?title=Doc:Following_a_Spline/ru&diff=18769Doc:Following a Spline/ru2013-10-20T16:50:40Z<p>Zurba11: /* Create the Layers */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Движение вдоль кривой}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
<!-- Page info end --><br />
<br />
== Введение ==<br />
<br />
Если вы используете версию Synfig 0.61.08 или ниже, то читайте {{l|Following a BLine (the old way)|старую редакцию}} статьи, а эта статья актуальна для версии 0.61.09 и старше.<br />
<br />
Итак статья о том как создать объект следующий вдоль произвольной кривой и поворачивающий при этом в сторону направления кривой.<br />
<br />
== Содержание ==<br />
Нам предстоит:<br />
<br />
* {{l|Doc:Following a BLine#Create the Layers|Нарисовать кривую и "стрелку"}}<br />
* {{l|Doc:Following a BLine#Make the Arrow Move and Rotate|Связать стрелку и её "вращение"}} с кривой чтобы она следовала по ней<br />
<br />
=== Создаём новый файл ===<br />
<br />
File > New<br />
<br />
=== Создаём слои ===<br />
<br />
Выберите инструмент {{l|Spline Tool|"Кривые"}}.<br />
<br />
[[File:Spline-tool-0.63.06.png|frame|none]]<br />
<br />
Поставьте флажок только напротив параметра "Создать кривую контура",<br />
нарисуйте кривую вдоль которой будет двигаться наша стрелка и<br />
нажмите кнопку {{Literal|Создать кривую}} в нижней части {{l|Tool_Options_Panel|Панели Параметров Инструмента}}.<br />
<br />
Теперь, не переключаясь с инструмента "Кривые" выберите флажки {{Literal|Создать кривую контура}} и {{Literal|Создать кривую области}} на Панели Параметров Инструмента,<br />
<br />
нарисуйте стрелку или что то подобное, указывающую на право. [[File:Spline-Tool-Options_0.63.06.png|frame|center]]<br />
<br />
Переключитесь на {{l|Transform Tool|инструмент трансформации}}.<br />
<br />
Кликните на контур "стрелки" и нажмите control-a чтобы выделить все {{l|Handle|контрольные точки}} контура, зелёная точка "позиции" при этом останется не выделенной, перетащите выделенные контрольные точки так чтобы зелёная точка "позиции" оказалась в центре "стрелки", после чего добавьте {{l|Rotate Layer|"Слой вращения"}} над слоями контура и заливки "стрелки" и {{l|Group|сгруппируйте}} эти три слоя в один объединяющий слой.<br />
<br />
Теперь у нас есть два основных слоя, один слой с кривой контура и второй групповой со "стрелкой" и слоем вращения.<br />
<br />
=== Make the Arrow Move and Rotate ===<br />
<br />
Select the group layer by clicking it in the {{l|Layers Panel}}<br />
<br />
select its green position handle by clicking on it in the canvas window<br />
<br />
additionally select the Rotate layer by holding Control and clicking it in the Layers panel<br />
<br />
additionally select the blue "rotation amount" handle by holding {{Shortcut|ctrl}} and clicking on it in the canvas window<br />
<br />
so now we should have 2 layers selected, and one handle from each of those 2 layers selected<br />
<br />
now additionally select the curved spline layer (it should be the last layer in the Layer panel's list) by holding {{Shortcut|ctrl}} and clicking on it<br />
<br />
right-click on the dotted line that indicates the position of the curved spline - not on any handle, but on the dotted line between handle<br />
<br />
from the context menu that pops up, select {{Literal|Link to Spline}}<br />
[[Image:Spline-Link-to-0.63.06.png|frame|none]]<br />
<br />
The arrow group should move so that its green position handle is on the spline, and it should rotate so that the arrow points along the spline at that point<br />
<br />
Select just the group layer, and drag its green handle around. you'll see that the handle is constrained now to line on the spline, and that dragging it also affects the rotation of the arrow as expected<br />
<br />
We can now animate the arrow. turn on {{l|Animate_Editing_Mode}} by clicking the icon in the bottom right of the canvas window.<br />
<br />
* at time '''0f''', drag the group layer's green position handle to one end of the spline<br />
* at time '''5s''', drag the same position handle to the other end of the spline<br />
<br />
Try {{c|<Caret Menu>|<File>|Preview|}} to watch the animation.<br />
<br />
== Results ==<br />
<br />
This is the animation I ended up with: {{l|Media:Arrow-follows-bline.sifz|Arrow-follows-bline.sifz}}<br />
<br />
== Controlling the linear velocity ==<br />
<br />
By default, the arrow travels the whole spline with a constant velocity, independently of the spline structure.<br />
<br />
If you select the group layer and look at the Parameters Panel, then you'll see that its Origin parameter is {{L|convert|converted}} to {{Literal|Spline Vertex}} type. This is done automatically when you do "Link to Spline" action. You can disable the "Homogenous" subparameter and then the speed of the arrow will depend on the spline structure - it will take the same time to move along each segment of the spline. So if there's a long straight part then a bendy complex part, the arrow will move much faster along the straight parts (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the spline) is not constant.<br />
<br />
For illustration of the "Homogenous" effect see [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].<br />
<br />
=== Создаём слои ===<br />
<br />
Выберите инструмент "Кривые"<br />
[[File:Bline_tool.png]]<br />
<br />
поставьте флажок только напротив параметра "Создать кривую контура",<br />
нарисуйте кривую вдоль которой будет двигаться наша стрелка и<br />
нажмите кнопку "Создать кривую" в нижней части Панели Параметров Инструмента.<br />
<br />
Теперь, не переключаясь с инструмента "Кривые" выберите флажки "Создать кривую контура" и "Создать кривую области" на Панели Параметров Инструмента,<br />
<br />
[[File:Tool_Options.png]]<br />
<br />
нарисуйте стрелку или что то подобное, указывающую на право<br />
переключитесь на инструмент трансформации.<br />
<br />
Кликните на контур "стрелки" и нажмите control-a чтобы выделить все контрольные точки контура, зелёная точка "позиции" при этом останется не выделенной, перетащите выделенные контрольные точки так чтобы зелёная точка "позиции" оказалась в центре "стрелки", после чего добавьте "Слой вращения" над слоями контура и заливки "стрелки" и изолируйте эти три слоя в один объединяющий слой.<br />
<br />
Теперь у нас есть два основных слоя, один слой с кривой контура и второй изолирующий со "стрелкой" и слоем вращения.<br />
<br />
=== Заставляем стрелку двигаться и вращаться ===<br />
<br />
Выделите объединяющий слой кликнув на него в панели слоёв.<br />
<br />
Выделите его зелёную точку "позиции" кликнув по ней в окне холста,<br />
также выделите слой Вращения удерживая Control и кликнув по нему на панели слоёв,<br />
в добавок ко всему этому выделите синюю точку "контроля вращения" удерживая Control кликнув по ней в окне холста.<br />
<br />
Ну вот теперь у нас должно быть выделено два слоя и по одной контрольной точке из каждого слоя,<br />
теперь добавьте к этим выделенным слоям ещё и слой с кривой Bline (он должен быть последним на панели слоёв) кликнув на него удерживая Control.<br />
<br />
Кликаем правой кнопкой на пунктирной линии которая показывает форму кривой Bline, не на какую нибудь точку на кривой, а именно на линию между точками.<br />
<br />
В контекстном меню которое появится выберите "Привязать к кривой". <br />
<br />
[[File:Link_to_Bline.png]]<br />
<br />
Изолированная "стрелка" должна переместиться так что её зелёная точка "позиции" окажется на кривой Bline и она должна повернутся указывая в сторону направления кривой в этой точке. <br />
<br />
Выделите только изолированный слой и потаскайте зелёную точку "позиции" туда-сюда. Вы увидите что зелёная контрольная точка "стрелки" теперь двигается только вдоль прямой, перемещение также вызывает вращение "стрелки" как и ожидалось.<br />
<br />
Теперь мы можем анимировать стрелку, включите "Режим редактирования анимации" нажав на иконку в нижнем правом углу окна холста.<br />
<br />
На нулевом кадре поместите зелёную контрольную точку изолированного слоя "стрелки" на одном конце кривой Bline, а на пятой секунде перетащите эту точку в другой конец.<br />
<br />
Посмотрите что получилось нажав Файл > Предпросмотр.<br />
<br />
== Результат ==<br />
<br />
Вот анимация которая получилась в результате: {{l|Media:Arrow-follows-bline.sifz|Arrow-follows-bline.sifz}}<br />
<br />
== Контроль ускорения ==<br />
<br />
По умолчанию стрелка проходит вдоль каждого сегмента кривой за одно и тоже время, поэтому если кривая имеет длинную прямую часть, а затем изгибается, то стрелка пройдёт по длинной части гораздо быстрее чем по изогнутой. Происходит это потому что на длинной части меньше вершин, а значит и сегментов. <br />
<br />
Включив параметр ''homogenous'' (однородность) вы сделаете скорость движения постоянной по всей длине кривой, что и требуется достичь в большинстве случаев.<br />
<br />
Видео по теме контроля ускорения [http://www.youtube.com/watch?v=3PGXroxBcuo здесь].<br />
<br />
(Ниже следует Английский вариант этого абзаца для тех кто ничего не понял из русского =) пр. переводчика)<br />
<br />
By default, the arrow takes the same time to move along each segment of the bline. So if there's a long straight part then a bendy complex part, the arrow will move much faster along the straight parts (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the bline) is not constant.<br />
<br />
By enabling the ''homogenous'' parameter of Link to BLine, the velocity becomes constant, as one almost always wants. See [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].</div>Zurba11https://wiki.synfig.org/index.php?title=Group/ru&diff=18768Group/ru2013-10-20T16:48:58Z<p>Zurba11: </p>
<hr />
<div>{{Category|Glossary}}<br />
{{Title|Группа}}<br />
{{NewTerminology}}<br />
<br />
[[File:Layer other group icon.png|64px]]<br />
<br />
;;'''Где находится:'''<br />
: {{c|Панель слоёв>|<Контекстное меню>|Группировать}}<br />
: {{c|<Меню холста>|<Слои>|Группа}}<br />
; '''Функция:'''<br />
: Группировка всех выделенных слоев в новый, {{l|Group Layer|Слой Группу}}.<br />
; Назначение:<br />
: Слои объединённые в группу влияют лишь на слои входящие в эту группу, на внешние слои же влияет лишь сам слой группы в целом, в зависимости от значения его {{l|Blend Method|Метода Смешивания}}.</div>Zurba11https://wiki.synfig.org/index.php?title=Group/ru&diff=18767Group/ru2013-10-20T16:47:02Z<p>Zurba11: </p>
<hr />
<div>{{Category|Glossary}}<br />
{{Title|Группа}}<br />
{{NewTerminology}}<br />
<br />
[[File:Layer other group icon.png|64px]]<br />
<br />
;;'''Где находится:'''<br />
: {{c|<Layers Panel|Панель слоёв>|<Контекстное меню>|Группировать}}<br />
: {{c|<Меню холста>|<Слои>|Группа}}<br />
; '''Функция:'''<br />
: Группировка всех выделенных слоев в новый, {{l|Group Layer|Слой Группу}}.<br />
; Назначение:<br />
: Слои объединённые в группу влияют лишь на слои входящие в эту группу, на внешние слои же влияет лишь сам слой группы в целом, в зависимости от значения его {{l|Blend Method|Метода Смешивания}}.<br />
<br />
Effect layers within this layer are applied only to other layers inside it. Then, the resulting pixel data is composited with the remaining layers according to the <br />
{{l|Group Layer|Group}} layer's</div>Zurba11https://wiki.synfig.org/index.php?title=Doc:Following_a_Spline/ru&diff=18766Doc:Following a Spline/ru2013-10-20T16:09:29Z<p>Zurba11: </p>
<hr />
<div><!-- Page info --><br />
{{Title|Движение вдоль кривой}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
<!-- Page info end --><br />
<br />
== Введение ==<br />
<br />
Если вы используете версию Synfig 0.61.08 или ниже, то читайте {{l|Following a BLine (the old way)|старую редакцию}} статьи, а эта статья актуальна для версии 0.61.09 и старше.<br />
<br />
Итак статья о том как создать объект следующий вдоль произвольной кривой и поворачивающий при этом в сторону направления кривой.<br />
<br />
== Содержание ==<br />
Нам предстоит:<br />
<br />
* {{l|Doc:Following a BLine#Create the Layers|Нарисовать кривую и "стрелку"}}<br />
* {{l|Doc:Following a BLine#Make the Arrow Move and Rotate|Связать стрелку и её "вращение"}} с кривой чтобы она следовала по ней<br />
<br />
=== Создаём новый файл ===<br />
<br />
File > New<br />
<br />
=== Create the Layers ===<br />
<br />
Выберите инструмент {{l|Spline Tool|"Кривые"}}<br />
[[File:Spline-tool-0.63.06.png|frame|none]]<br />
<br />
enable just the Outline checkbox<br />
<br />
draw a spline that you want the arrow to move along<br />
<br />
click the {{Literal|Make Spline}} icon in the bottom left of the {{l|Tool_Options_Panel}} to create the spline.<br />
<br />
still in the Spline Tool, enable {{Literal|Create Outline}} and {{Literal|Create Region}} checkboxes in tool options<br />
[[File:Spline-Tool-Options_0.63.06.png|frame|center]]<br />
<br />
draw an arrow or whatever, pointing to the right.<br />
<br />
Switch to the {{l|Transform Tool}}<br />
<br />
select the outline, hit control-a to select all its {{l|Handle|handles}} except the green position handle<br />
<br />
drag the handle so that the arrow is centred around the green position handle<br />
<br />
Add a {{l|Rotate Layer}} above the outline and region<br />
<br />
{{l|Group}} the rotate, outline, and region layers<br />
<br />
so now you've got 2 top-level layers: a curved path, and a group containing an arrow and a rotate layer<br />
<br />
=== Make the Arrow Move and Rotate ===<br />
<br />
Select the group layer by clicking it in the {{l|Layers Panel}}<br />
<br />
select its green position handle by clicking on it in the canvas window<br />
<br />
additionally select the Rotate layer by holding Control and clicking it in the Layers panel<br />
<br />
additionally select the blue "rotation amount" handle by holding {{Shortcut|ctrl}} and clicking on it in the canvas window<br />
<br />
so now we should have 2 layers selected, and one handle from each of those 2 layers selected<br />
<br />
now additionally select the curved spline layer (it should be the last layer in the Layer panel's list) by holding {{Shortcut|ctrl}} and clicking on it<br />
<br />
right-click on the dotted line that indicates the position of the curved spline - not on any handle, but on the dotted line between handle<br />
<br />
from the context menu that pops up, select {{Literal|Link to Spline}}<br />
[[Image:Spline-Link-to-0.63.06.png|frame|none]]<br />
<br />
The arrow group should move so that its green position handle is on the spline, and it should rotate so that the arrow points along the spline at that point<br />
<br />
Select just the group layer, and drag its green handle around. you'll see that the handle is constrained now to line on the spline, and that dragging it also affects the rotation of the arrow as expected<br />
<br />
We can now animate the arrow. turn on {{l|Animate_Editing_Mode}} by clicking the icon in the bottom right of the canvas window.<br />
<br />
* at time '''0f''', drag the group layer's green position handle to one end of the spline<br />
* at time '''5s''', drag the same position handle to the other end of the spline<br />
<br />
Try {{c|<Caret Menu>|<File>|Preview|}} to watch the animation.<br />
<br />
== Results ==<br />
<br />
This is the animation I ended up with: {{l|Media:Arrow-follows-bline.sifz|Arrow-follows-bline.sifz}}<br />
<br />
== Controlling the linear velocity ==<br />
<br />
By default, the arrow travels the whole spline with a constant velocity, independently of the spline structure.<br />
<br />
If you select the group layer and look at the Parameters Panel, then you'll see that its Origin parameter is {{L|convert|converted}} to {{Literal|Spline Vertex}} type. This is done automatically when you do "Link to Spline" action. You can disable the "Homogenous" subparameter and then the speed of the arrow will depend on the spline structure - it will take the same time to move along each segment of the spline. So if there's a long straight part then a bendy complex part, the arrow will move much faster along the straight parts (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the spline) is not constant.<br />
<br />
For illustration of the "Homogenous" effect see [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].<br />
<br />
=== Создаём слои ===<br />
<br />
Выберите инструмент "Кривые"<br />
[[File:Bline_tool.png]]<br />
<br />
поставьте флажок только напротив параметра "Создать кривую контура",<br />
нарисуйте кривую вдоль которой будет двигаться наша стрелка и<br />
нажмите кнопку "Создать кривую" в нижней части Панели Параметров Инструмента.<br />
<br />
Теперь, не переключаясь с инструмента "Кривые" выберите флажки "Создать кривую контура" и "Создать кривую области" на Панели Параметров Инструмента,<br />
<br />
[[File:Tool_Options.png]]<br />
<br />
нарисуйте стрелку или что то подобное, указывающую на право<br />
переключитесь на инструмент трансформации.<br />
<br />
Кликните на контур "стрелки" и нажмите control-a чтобы выделить все контрольные точки контура, зелёная точка "позиции" при этом останется не выделенной, перетащите выделенные контрольные точки так чтобы зелёная точка "позиции" оказалась в центре "стрелки", после чего добавьте "Слой вращения" над слоями контура и заливки "стрелки" и изолируйте эти три слоя в один объединяющий слой.<br />
<br />
Теперь у нас есть два основных слоя, один слой с кривой контура и второй изолирующий со "стрелкой" и слоем вращения.<br />
<br />
=== Заставляем стрелку двигаться и вращаться ===<br />
<br />
Выделите объединяющий слой кликнув на него в панели слоёв.<br />
<br />
Выделите его зелёную точку "позиции" кликнув по ней в окне холста,<br />
также выделите слой Вращения удерживая Control и кликнув по нему на панели слоёв,<br />
в добавок ко всему этому выделите синюю точку "контроля вращения" удерживая Control кликнув по ней в окне холста.<br />
<br />
Ну вот теперь у нас должно быть выделено два слоя и по одной контрольной точке из каждого слоя,<br />
теперь добавьте к этим выделенным слоям ещё и слой с кривой Bline (он должен быть последним на панели слоёв) кликнув на него удерживая Control.<br />
<br />
Кликаем правой кнопкой на пунктирной линии которая показывает форму кривой Bline, не на какую нибудь точку на кривой, а именно на линию между точками.<br />
<br />
В контекстном меню которое появится выберите "Привязать к кривой". <br />
<br />
[[File:Link_to_Bline.png]]<br />
<br />
Изолированная "стрелка" должна переместиться так что её зелёная точка "позиции" окажется на кривой Bline и она должна повернутся указывая в сторону направления кривой в этой точке. <br />
<br />
Выделите только изолированный слой и потаскайте зелёную точку "позиции" туда-сюда. Вы увидите что зелёная контрольная точка "стрелки" теперь двигается только вдоль прямой, перемещение также вызывает вращение "стрелки" как и ожидалось.<br />
<br />
Теперь мы можем анимировать стрелку, включите "Режим редактирования анимации" нажав на иконку в нижнем правом углу окна холста.<br />
<br />
На нулевом кадре поместите зелёную контрольную точку изолированного слоя "стрелки" на одном конце кривой Bline, а на пятой секунде перетащите эту точку в другой конец.<br />
<br />
Посмотрите что получилось нажав Файл > Предпросмотр.<br />
<br />
== Результат ==<br />
<br />
Вот анимация которая получилась в результате: {{l|Media:Arrow-follows-bline.sifz|Arrow-follows-bline.sifz}}<br />
<br />
== Контроль ускорения ==<br />
<br />
По умолчанию стрелка проходит вдоль каждого сегмента кривой за одно и тоже время, поэтому если кривая имеет длинную прямую часть, а затем изгибается, то стрелка пройдёт по длинной части гораздо быстрее чем по изогнутой. Происходит это потому что на длинной части меньше вершин, а значит и сегментов. <br />
<br />
Включив параметр ''homogenous'' (однородность) вы сделаете скорость движения постоянной по всей длине кривой, что и требуется достичь в большинстве случаев.<br />
<br />
Видео по теме контроля ускорения [http://www.youtube.com/watch?v=3PGXroxBcuo здесь].<br />
<br />
(Ниже следует Английский вариант этого абзаца для тех кто ничего не понял из русского =) пр. переводчика)<br />
<br />
By default, the arrow takes the same time to move along each segment of the bline. So if there's a long straight part then a bendy complex part, the arrow will move much faster along the straight parts (since there will be less vertices in that part). In physics terms, the linear velocity (that is, the speed over the bline) is not constant.<br />
<br />
By enabling the ''homogenous'' parameter of Link to BLine, the velocity becomes constant, as one almost always wants. See [http://www.youtube.com/watch?v=3PGXroxBcuo this demo].</div>Zurba11https://wiki.synfig.org/index.php?title=Doc:Getting_Started/ru&diff=18371Doc:Getting Started/ru2013-06-04T18:23:04Z<p>Zurba11: </p>
<hr />
<div><!-- Page info --><br />
{{Title|Первое знакомство}}<br />
{{Navigation|Category:Manual|Doc:Animation_Basics}}<br />
{{Category|Manual}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Basic}}<br />
<!--{{NewTerminology}}--><br />
<!-- Page info end --><br />
<br />
== Пользовательский интерфейс ==<br />
<br />
На скриншоте ниже вы можете видеть расположение окон Synfig Studio:<br />
<br />
[[File:Interface 0.63.06.png|600px|thumb|center|border|Default interface layout of Synfig Studio]]<br />
<br />
<br />
Главными компонентами интерфейса Synfig Studio являются:<br />
<br />
* {{l|Toolbox|Панель инструментов}} &mdash; -это главное окно Synfig Studio, оно содержит системное меню и кнопки, инструменты и прочие элементы необходимые для создания и редактирования вашей работы. Закрытие этой панели влечёт за собой закрытие всей программы в целом.<br />
* {{l|Canvas|Холст}} &mdash; -отображает ваш рисунок и анимацию. <br />
* {{l|Category:Panels|Панели}} &mdash; -содержат инструменты и информацию о некоторых элементах вашего проекта, некоторые панели позволяют вам изменять эти элементы.<br />
<br />
<br />
{{Note|Note|Synfig Studio can be reset to its default window arrangement (as shown in the screenshot). In the {{Literal|File}} menu from the Toolbox select {{c|Panels|Reset Windows to Original Layout}}.}}<br />
<br />
The center window is the {{L|Category:Canvas_Window|Canvas Window}}. A new Canvas Window appears each time Synfig Studio starts. The window represents the {{l|Root Canvas}}, not that it means much to you at the moment, but that's OK &mdash; we're just trying to show you around. In the upper left corner of the Canvas Window, you'll see a button with a {{l|Canvas Menu Caret|caret}}. If you click on this caret button, the {{l|Canvas Menu Caret|canvas window menu}} will pop up. If you right-click in the canvas area and there is no {{l|layer}} under the mouse position, this menu will also appear. So now you know where the most important canvas menu is. Good.<br />
<br />
The other two windows (one on the bottom, and one to the right) are customizable {{l|dock dialogs|dock dialogs}}. Each dock dialog contains a set of {{L|panel|panels}}, arranged horizontally or vertically. Some panels share the same space inside the dock dialog and you can switch between them by clicking on their {{l|panel tab|tabs}}. You can rearrange the contents of dock dialogs as you wish by dragging the panel tab to where you want it. You can even create a new dock dialog by dragging a tab out of its dock dialog.<br />
<br />
If you accidentally close a {{l|panel|panel}} (by dragging it out of the dock dialog, and closing the new dock dialog that gets created), no worries. Simply go to the {{l|Toolbox}}, select {{c|File|Panels}} in menu right there and then click on the name of the panel you need.<br />
<br />
The most important panels are:<br />
<br />
* {{l|Layers Panel}} &mdash; shows you the hierarchy of the layer of your working canvas. It also allows you to manipulate these layers.<br />
* {{l|Parameters Panel}} &mdash; shows you the parameters of the layer currently selected. When multiple layers are selected, only the parameters that the selected layers have in common are displayed.<br />
* {{l|Tool Options Panel}} &mdash; shows you any options specific to the currently selected tool.<br />
* {{l|Navigator|Navigator}} &mdash; shows a thumbnail image of what the currently selected canvas looks like. You can also zoom in and move the focus around with this panel.<br />
* {{l|History Panel}} &mdash; shows you the history stack for the current composition. You can also edit the actions in history.<br />
<br />
There are also many other {{l|panel|panels}} in Synfig Studio. If you have no idea what a panel does, simply hold your mouse over its icon and a tooltip will pop up describing its function.<br />
<br />
== Under the hood ==<br />
<br />
== Введение ==<br />
<br />
Synfig, как и большинство других программ, размещает всё содержимое вашего рисунка на {{l|Layer|слоях}}. Тем не менее, эти слои отличаются от тех, с которыми, возможно, некоторые привыкли иметь дело в других программах. Основных отличий два:<br />
<br />
{| border="0" cellspacing="0" align="center" width="100%"<br />
|<br />
# Слой как правило представляет из себя один единственный объект — область, контур, импортированное изображение в формате JPEG и т.п. Не стоит этого пугаться, просто думайте о слоях в Synfig не как о слоях в привычном смысле слова, а как о списке объектов. Это обеспечивает большие возможности и контроль над рисунком. Несколько сотен слоёв в одном фрагменте анимации — обычное дело. Средства программы позволяют организовать их в виде иерархической структуры, чтобы у нас у всех крыша не поехала от попыток разобраться в этой куче. <br />
# Слой может не только отображать своё содержимое поверх низлежащих слоёв, но также искажать и/или модифицировать их тем или иным образом. В этом плане слои в Synfig играют ту же роль, какую играют фильтры в программах Adobe Photoshop и GIMP (http://www.gimp.org/). Например, у нас есть в распоряжении {{l|Blur Layer|слой размывания}} (Blur), {{l|Radial Blur Layer|слой радиального размывания}} (Radial Blur), {{l|Spherize Layer|слой сферического искажения}} (Spherize), {{l|Color Correction Layer|слой цветокоррекции}} (Color Correction), {{l|Bevel Layer|слой фаски}} (Bevel), и пр.<br />
<br />
Каждый слой имеет набор параметров, определяющих его поведение. Когда вы щёлкаете по слою (в окне с рисунком или на {{l|Layers Panel|панели слоёв}} (Layers), эти параметры отображаются на {{l|Parameters Panel|панели свойств}} (Parameters Panel).<br />
<br />
|| || <br />
http://i170.photobucket.com/albums/u243/zenoscope/layer.png <br />
|}<br />
<br />
В Synfig Studio есть функция автовосстановления. Когда программа «вылетает», то, даже если текущий файл не был сохранён, вы потеряете не более пяти минут работы. При следующем запуске программа автоматически предложит восстановить несохранённый ранее файл. К сожалению, история действий при этом не восстанавливается.<br />
<br />
Одна вещь, которая может броситься вам в глаза — это ЧРЕЗВЫЧАЙНАЯ медлительность программы. Программа настолько тормозная, что работа с ней на компьютерах 3-4 летней давности практически невозможна. Основная причина в том, что все цветовые операции выполняются с плавающей точкой — Synfig Studio изначально разрабатывалась с учётом возможной реализации поддержки High Dynamic Range Imaging.<br />
<br />
Тем не менее, такая ситуация с быстродействием не будет длиться вечно. <br />
darco предлагает несколько определённо эффективных изменений и оптимизаций кода, которые должны существенно улучшить производительность. Причём результатом обещает быть увеличение быстродействия не на 200%, а на 2000%. Эти оптимизации также должны открыть дорогу к использованию аппаратного ускорения современных графических процессоров, что обеспечит дальнейший прирост производительности.<br />
<br />
== Интерфейс ==<br />
<br />
{| border="0" cellspacing="5" align="center" width="100%"<br />
| |<br />
|{{l|Image:Toolbox.jpg}}<br />
|| ||<br />
<br />
При запуске Synfig Studio отображает экран загрузки и затем появляются три окна. Окно в левом верхнем углу представляет из себя {{l|Toolbox|панель инструментов}} (Toolbox). С помощью неё вы можете открывать файлы, выбирать инструменты, менять цвета и т.п. Однако при запуске большинство кнопок неактивно, так как нет открытого файла.<br />
<br />
Остальные два окна (одно снизу и одно справа) содержат различные {{l|Category:Panels|панели}} и являются настраиваемыми. Вы можете перетаскивать панели с одного места на другое за их {{l|Dock Tab|заголовки}}. Вы даже можете создавать новые окна, просто перетащив {{l|Dock Tab|заголовок панели}} за пределы окна, внутри которого он был.<br />
<br />
Не беспокойтесь, если вы случайно закрыли {{l|Category:Panels|панель}} (перетащив её за пределы окна и закрыв вновь созданное в результате окно). Просто выберите "File->Dialogs" из меню панели инструментов и в открывшемся меню щёлкните на имя той панели, которую вы хотите вновь отобразить.<br />
<br />
{{l|Category:Panels|Панелей}} довольно много. Если вы не знаете для чего служит та или иная панель, просто наведите курсор мыши на {{l|Dock Tab|её заголовок}} и подождите немного, пока не выскочит всплывающая подсказка с именем панели.<br />
|}<br />
<br />
Вот наиболее важные панели:<br />
<br />
* {{l|Layers Panel|Панель слоёв}} (Layers) — Отображает иерархию слоёв для текущего изображения. Также позволяет манипулировать слоями.<br />
* {{l|Params Panel|Панель свойств}} (Params) — Отображает свойства выделенного слоя (или, если выделено несколько слоёв, те свойства, которые имеет и тот и другой слой).<br />
* {{l|Tool Options Panel|Панель свойств инструмента}} (Tool Options) — Позволяет изменять параметры текущего инструмента.<br />
* {{l|Navigator Panel|Панель навигации}} (Navigator) — Отображает уменьшенную копию рисунка, позволяет изменять масштаб и область отображения.<br />
* {{l|History Panel|Панель истории действий}} (History) — Показывает редактируемый список предыдущих действий.<br />
<br />
Если вы щёлкните кнопку {{l|Image:New File Button.jpg}} на панели инструментов или выберите из меню «File -> Создать...» ("File -> New"), будет создан новый файл и появится {{l|File Properties Dialog|диалог свойств}} (Properties).<br />
<br />
По щелчку кнопки ОК окно свойств будет закрыто и появится {{l|Canvas Window|рабочее окно}}. Это окно отображает собой {{l|Root Canvas|корневой холст}}, наверное это вам сейчас ни о чём не говорит, но не обращайте внимания — я просто пытаюсь бегло ввести вас в курс дела.<br />
<br />
В верхнем левом углу окна с изображением находится кнопочка с треугольничком — {{l|Canvas Menu Caret|кнопка вызова меню}}. Если щёлкнуть на неё, появится {{l|Canvas Menu|Меню изображения}}. (Вы также можете вызвать это меню, щёлкнув правой кнопкой в любом пустом месте окна, там где нет {{l|Layer|слоёв}}.) Итак, теперь вы знаете где находится меню в окне изображения. Отлично. Остальные элементы этого окна в общем-то должны говорить сами за себя.<br />
<br />
== Первые шаги ==<br />
<br />
Давайте теперь сделаем что-нибудь, с чем мы будем играться. Файл создан, окно свойств больше не маячит на экране, так что идём к панели инструментов и выбираем {{l|Circle Tool|инструмент окружность}} (Circle).<br />
<br />
Заметьте, что как только вы выберете этот инструмент, {{l|Params Panel|панель свойств инструмента}} (Params) изменится. Но мы разберёмся с ней позже.<br />
<br />
: '''Замечание''': Те, кто работает с с Synfig Studio на ноутбуке могут столкнуться с проблемой, что при рисовании кругов либо не происходит ничего, либо ни с того ни с сего создаются ужасно большие круги. Это проблема взаимодействия Synfig и тачпада (touchpad). Чтобы исправить это, выберите из меню "File->Input Devices". В появившемся диалоге установите 'Disabled' ('Выключен') для устройства touchpad. После этого и внешняя мышь, и тачпад будут работать нормально.<br />
<br />
Используя инструмент круг вы можете создавать круги в {{l|Canvas Window|рабочем окне}}. Думаю, с этим проблем не возникнет — просто щёлкните мышью и, не отпуская левую кнопку, ведите мышь, пока не получится круг нужного вам радиуса. Давайте, сделайте парочку (или больше) кругов. Если вы случайно просто щёлкнули и сразу отпустили кнопку мыши (не перетаскивая), получится круг с нулевым радиусом, то есть невидимый. Без паники, идём на панель параметров, на ней мы сможем изменить свойства текущего объекта. А так как мы эту нашу окружность только что создали, то она и является текущим объектом. Найдите параметр 'Radius' ('Радиус') и придайте ему какое-нибудь значение, не равное нулю, например 10. Мы поиграемся с этим параметром позже с помощью «уТочек».<br />
<br />
Теперь опять идём на панель инструментов и выбираем {{l|Normal Tool|инструмент преобразования}} (чёрная стрелка в синем кружке). Затем щёлкните на одном из кругов. Вокруг выделенного круга тут же появится {{l|Bounding Box|рамка}} (от которой пока никакого проку нет), зелёная точка в центре и синяя с краю. Эти точки называются ''управляющими точками'', или просто ''{{l|Duck|уТочками}}''. Если вы хотите изменить круг, просто перетащите уТочку куда-нибудь. Легко.<br />
<br />
Итак, щёлкая на слое (или объекте, что одно и то же), вы его выделяете. Если хотите выделить одновременно более одного слоя, щёлкайте, удерживая нажатой клавишу Ctrl — это работает и в {{l|Canvas Window|рабочем окне}} и на {{l|Layers Panel|панели слоёв}}. Попробуйте!<br />
<br />
Вы также можете выделять одновременно несколько уТочек, причём несколькими способами. Например, щёлкая на них, удерживая нажатой клавишу Ctrl, но это часто получается долго и скучно. Можно быстрее — щёлкните левой кнопкой и, не отпуская её, перемещайте мышь. На экране появится рамка выделения. Все уТочки, которые попадут в неё, будут выделены, когда вы отпустите кнопку мыши.<br />
<br />
Давайте, выберите два круга и выделите все их уТочки. Если выделено несколько уТочек, перемещение одной из них перемещает все остальные. Вот что можно делать {{l|Normal Tool|инструментом перемещения}} (Normal Tool).<br />
<br />
Инструменты {{l|Rotate Tool|вращения}} (Rotate Tool) и {{l|Scale Tool|масштаба}} (Scale Tool) ведут себя так же, как и {{l|Normal Tool|инструмент преобразования}}, за исключением случаев, когда у вас выделено больше одной уТочки. Проще попробовать самим, чем читать про это. Выделите несколько кругов и попробуйте их вращать или масштабировать с помощью соответствующих инструментов.<br />
<br />
Заметьте, что, в отличие от инструмента преобразования, остальные инструменты управления уТочками имеют параметры. Если какой-то инструмент делает не то, что вы хотите, загляните на {{l|Tool Options Panel|панель свойств инструмента}} (Tool Options).<br />
<br />
== Связывание ==<br />
<br />
Теперь попробуем функцию {{l|Linking|связывания}}. Предположим, мы хотим, чтобы наши окружности имели одинаковый размер. Выберите обе окружности и затем выделите их уТочки радиуса (те которые синенькие). Затем щёлкните правой кнопкой на любом из них и из появившегося меню выберите "Link" («Связать»). Бум! Теперь оба параметра зависят друг от друга. Проверьте сами - как только вы измените радиус одной окружности, радиус другой станет таким-же. Жесть, да?<br />
<br />
Связывание является фундаментальной концепцией Synfig. Вы можете создавать связи не только между уТочками, но и между параметрами. Просто выделите одновременно несколько слоёв, щёлкните правой кнопкой на том параметре (на панели свойств), по которому хотите связать и выберите "Link" («Связать»).<br />
<br />
<small>Отступление: Таким макаром {{l|Outline Layer|контуры}} присоединяются к {{l|Region Layer|областям}}&mdash;но я опять забегаю вперёд. На текущий момент, потенциал связывания в ядре Synfig гораздо выше тех возможностей, которые предоставляет Synfig Studio. В будуйщем эта ситуация должна измениться. Едем дальше...</small><br />
<br />
Предположим, вы хотите изменить цвет одной из окружностей. Взгляните на низ панели инструментов — там есть ячейки основного цвета и цвета фона, регулятор толщины контура, и прочая лабуда типа метода смешивания по умолчанию и градиента. Щелчок на ячейке с цветом позволяет (кто бы мог подумать!) изменить его.<br />
<br />
Но иногда хочется просто выбрать цвет из набора. Здесь на помощь приходит панель палитры (Palette Editor). Она ещё не на 100% функциональна (например, ещё не реализовано сохранение набора цветов), но это лучше чем ничего. <br />
Щелчок на нужном цвете немедленно изменит основной цвет.<br />
<br />
Это всё, конечно здорово, но мы до сих пор не изменили цвет нашей окружности. Есть два способа сделать это. Первый - выделить слой с окружностью и на панели свойств (Params) дважды щёлкнуть в ячейке цвета напротив свойства "Color" («Цвет»). Появится диалог, позволяющий изменить его. Но предположим, что у вас уже выбран нужный цвет в качестве основного. Тогда просто щёлкните на {{l|Fill Tool|инструменте заливки}} (Fill) на панели инструментов и затем щёлкните на окружности. Бум. Окружность перекрасилась. Это работает не только на окружностях и мы доберёмся до этого через минуту.<br />
<br />
Поиграйтесь с кружками немножко. Попробуйте поменять различные параметры и посмотрите что получится. Например, попробуйте поменять параметр Feather.<br />
<br />
== Копаем глубже ==<br />
<br />
Разумеется, мы сейчас рассмотрели основные возможности Synfig Studio, но совершенно не затронули анимацию. Её мы рассмотрим в {{l|Animation Basics|следующем уроке}}.</div>Zurba11https://wiki.synfig.org/index.php?title=Multiplane_Camera/ru&diff=16586Multiplane Camera/ru2013-01-01T20:26:39Z<p>Zurba11: /* Соединяем всё вместе. */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Многоплановая камера}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
<!-- Page info end --><br />
<br />
<br />
== Введение ==<br />
<br />
Термин Многоплановая камера произошёл от названия настоящих камер которые использовали для съёмки анимации с применением стеклянных столов расположенных на разном расстоянии от объектива. Когда камера или слои двигались то в результате получался ролик с эффектом глубины (псевдо3D).<br />
<br />
Техника которую мы будем применять сейчас использует параметр слоя "Глубина на оси Z" для того чтобы располагать слои в пространстве.<br />
<br />
<br />
The technique I'm demonstrating here uses layer Z Depth-values to position the layers in space. Higher values goes into space, lower out.<br />
For the plates 0 puts them really close to the camera while 1 will put them away from the camera. Furthest limit is around 1.7 where the layers are too far away to move at all.<br />
The camera starts at 0 and goes into the scene, closer to the plates at positive values and away from the scene at negative values. 1 gets really close while -3 is far away from the plates.<br />
<br />
'''Synfig файл основных настроек и файл с пример готовой анимации:'''<br />
<br />
{{l|Media:Multiplane_basic-setup.sifz|Multiplane_basic-setup.sifz}}<br />
<br />
{{l|Media:Multiplane_landscape_example_2.sifz|Multiplane_landscape_example_2.sifz}}<br />
<br />
<br />
[[File:Multiplane_01_gif-anim.gif]]<br />
<br />
''Все кружочки на самом деле одинакового размера и находятся в центре холста не двигаясь вообще. Движение и перспектива созданы путем перемещения главного слоя (Main) или слоя "Камера".<br />
<br />
<br />
== Основные настройки ==<br />
<br />
[[File:Multiplane_basic_setup.png]]<br />
<br />
*Сначала создайте окружность. Изолируйте её и назовите объединяющий слой с ней "CONTENT". Вы будете помещать всё содержимое "стеклянного стола" в этот слой, сейчас у нас здесь находится только окружность.<br />
*Изолируйте слой "CONTENT" в ещё один объединяющий слой и назовите этот слой "PLANE_01", это будет первый стеклянный стол, позже мы продублируем и изменим этот слой чтобы у нас было больше "столов".<br />
*Изолируйте "стол" и назовите новый слой "MAIN". Этот слой будет симулировать камеру.<br />
*Теперь в слой "стол" добавьте три новых слоя - размывание, перемещение и масштабирование (scale).<br />
<br />
== Соединяем всё вместе. ==<br />
<br />
*В первую очередь экспортируйте параметр "Глубина на оси Z" холста MAIN, назовите значение MAIN_Z.<br />
*Также экспортируйте исходную точку холста MAIN как MAIN_origin<br />
*Далее нам понадобится инвертировать значение MAIN_Z чтобы использовать его в расчётах.<br />
**Для этого создайте временный слой, к примеру окружность.<br />
***Конвертируйте значение параметра с real на scale<br />
***Соедините MAIN_Z с параметром "Связь" и установите параметр scalar равным -1.<br />
**Выделите параметр и экспортируйте его как MAIN_Z_INVERTED, после чего удалите временный слой с окружностью.<br />
*Нам также понадобится величина Z слоя PLANE_01, так что экспортируйте его как PLANE_01_Z.<br />
<br />
Теперь нам нужно чтобы "столы" масштабировались пропорционально их удалённости от камеры. Мы будем использовать параметр "Глубина на оси Z" чтобы определять положение "стола" в пространстве.<br />
<br />
'''Слой масштабирования (Scale)'''<br />
Выберите слой масштабирования (Scale) <br />
<br />
[[File:Multiplane_zoom-setup.png]]<br />
<br />
*Конвертируйте параметр "Величина" в тип "Сумма".<br />
*Соедините параметр LHS с PLANE01_Z.<br />
*Соедините параметр RHS c MAIN_Z_INVERTED.<br />
*Установите значение параметра "scalar" равным -1.<br />
<br />
Теперь "Стол" будет масштабироваться пропорционально удалению от камеры которое рассчитывается из суммы значений параметра "Глубина на оси Z" слоя "Стола" и слоя "Камеры". Мы обратили значение с помощью параметра "Scalar" так что теперь масштабирование происходит в правильном направлении.<br />
<br />
<br />
'''Слой перемещения'''<br />
<br />
Мы используем отдельный Слой перемещения вместо того чтобы перемещать холст "Стола" с помощью его исходной точки, таким образом мы можем перемещать слой "Стола" независимо от движения слоя "Камера".<br />
<br />
[[File:Multiplane_translate-setup.png]]<br />
<br />
*Конвертируйте тип параметра "Исходная точка" в Scale.<br />
**Соедините параметр "Связь" с MAIN_origin. На этом будет основано движение "Столов".<br />
**Конвертируйте параметр Scalar в тип "Диапазон" и установите значение "Мин" равным -1 чтобы избежать движение слоя в не правильном направлении когда он выходит из сцены. Установите значение "Макс" равным 999999, так как нам не нужно ограничивать диапазон сверху.<br />
***Конвертируйте параметр "Связь" в тип "Вычитание" и установите параметр "Scalar" в этом новом вычислении равным -1.<br />
<br />
*Convert Origin to Scale.<br />
**Connect Link to MAIN_origin. This is what we'll base the movement of the planes on.<br />
**Convert Scalar to range and set min to -1 to to avoid the layer to start moving the wrong direction when tracking out from the scene. Set max to 999999 since we really don't need an upper limit.<br />
***Convert Link to Subtract and set Scalar in this new calculation to -1.<br />
****In Link connect LHS to plane1_Z and convert RHS to reciprocal.<br />
*****Next convert link to Range and set Min to 0 and Max to 999999 to avoid some strange movement when layers move too far off the canvas.<br />
*****Convert the Link to Add and connect LHS to plane1_Z and RHS to MAIN_Z_inverted.<br />
<br />
This whole calculation moves the layer more when it's closer to us and less when it's further away, thus creating illusion of depth.<br />
<br />
<br />
'''BLUR'''<br />
<br />
*Add a blur layer and convert it's blend method to straight. (Due to a bug, convert blend method to scale and set link subparameter to 1)<br />
*Create a temporary blur layer for exporting values.<br />
**Export size as initial-blur and set value to 1.00x1.00<br />
**Export different real-values as falloff, near-focus and far-focus<br />
**Convert a real value to subtract and set LHS to plane1_Z and RHS to main_Z. Export this as PL1_CAM-distance. This calculation and export needs to be done separately for every new layer that is added.<br />
*Delete the temporary blur layer.<br />
<br />
[[File:Multiplane_blur-setup1.png]]<br />
<br />
*Convert Size to scale.<br />
**Connect link to ''initial-blur''.<br />
**Convert ''scalar'' to ''switch''.<br />
***Convert ''switch'' to ''compare''<br />
****Connect ''LHS'' to ''PL1_cam-distance'' and ''RHS'' to ''near-focus'', tick "greater than".<br />
<br />
***Convert Link off to scale, <br />
****Set scalar to 100<br />
****Convert link to scale<br />
*****Connect link to falloff<br />
*****Convert scalar to subtract<br />
******LHS=near-focus, RHS=PL1_cam-distance<br />
<br />
[[File:Multiplane_blur-setup2.png]]<br />
<br />
***Convert Link_on to switch,<br />
****Convert switch to compare<br />
*****Connect LHS to PL1_cam-distance and RHS to far-focus, tick "less than"<br />
****Set Link on to 0.0<br />
****Convert Link off to scalar, <br />
*****Set scalar to 100<br />
*****Convert link to scale<br />
******Connect link to falloff<br />
******Convert scalar to subtract<br />
*******LHS=PL1_cam-distance, RHS=far-focus<br />
<br />
[[File:Multiplane_blur-setup3.png]]<br />
<br />
== Adding more planes ==<br />
<br />
*Duplicate PLANE_01 and rename it to PLANE_02.<br />
*Select the layer Z Depth and disconnect it. Then export it as PLANE_02_Z.<br />
*Open up the Zoom layer amount and connect LHS to PLANE_02_Z.<br />
*Open Translate layer calculation and connect the two occurrences of LHS to PLANE_02_Z<br />
*Create a temporary layer and convert real value to subtract.<br />
**Connect LHS to PLANE_02_Z and RHS to MAIN_Z. Export this as PL2_cam-distance. Delete temporary layer.<br />
*Open Blur layer and change the 4 PL1_cam-distance references to PL2_cam-distance.<br />
<br />
Duplicate the plane as many times as you'd like and go through these steps again.<br />
<br />
<br />
<br />
== Usage: ==<br />
<br />
• '''MAIN'''<br />
*Move to simulate camera movement.<br />
*Use Z-depth to track in/out with camera.<br />
• '''PLANES'''<br />
<br />
are moved, scaled and blurred in relation to the camera (MAIN layer) to simulate 3D plane space.<br />
<br />
• '''Translate layer''' - This is used to move the layers in relation to the camera layer. Once setup you should not manually change anything here.<br />
<br />
• '''Zoom layer''' - This is used to scale the layers to simulate distance from the camera. Should not be altered after setup.<br />
<br />
• '''Blur layer''' - This layer blurs the layers in relation to their distance from the camera. It simulates depth of field from different types of lenses.<br />
<br />
Here you can alter a few values:<br />
<br />
• '''Near-focus''' and '''Far-focus'''. Objects within this range from the camera (MAIN_Z - plane_Z) is in focus.<br />
• '''falloff''' - This value sets how fast objects gets blurry when outside the focus range. With a higher value the objects quickly gets blurry when leaving the range and with a lower objects needs to be far away from the range before getting blurry.<br />
<br />
[[File:Multiplane_landscape_example2.gif]]</div>Zurba11https://wiki.synfig.org/index.php?title=Multiplane_Camera/ru&diff=16571Multiplane Camera/ru2013-01-01T14:47:59Z<p>Zurba11: Created page with "<!-- Page info --> {{Title|Многоплановая камера}} {{Category|Tutorials}} {{Category|Tutorials Advanced}} <!-- Page info end --> == Введение == Т..."</p>
<hr />
<div><!-- Page info --><br />
{{Title|Многоплановая камера}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Advanced}}<br />
<!-- Page info end --><br />
<br />
<br />
== Введение ==<br />
<br />
Термин Многоплановая камера произошёл от названия настоящих камер которые использовали для съёмки анимации с применением стеклянных столов расположенных на разном расстоянии от объектива. Когда камера или слои двигались то в результате получался ролик с эффектом глубины (псевдо3D).<br />
<br />
Техника которую мы будем применять сейчас использует параметр слоя "Глубина на оси Z" для того чтобы располагать слои в пространстве.<br />
<br />
<br />
The technique I'm demonstrating here uses layer Z Depth-values to position the layers in space. Higher values goes into space, lower out.<br />
For the plates 0 puts them really close to the camera while 1 will put them away from the camera. Furthest limit is around 1.7 where the layers are too far away to move at all.<br />
The camera starts at 0 and goes into the scene, closer to the plates at positive values and away from the scene at negative values. 1 gets really close while -3 is far away from the plates.<br />
<br />
'''Synfig файл основных настроек и файл с пример готовой анимации:'''<br />
<br />
{{l|Media:Multiplane_basic-setup.sifz|Multiplane_basic-setup.sifz}}<br />
<br />
{{l|Media:Multiplane_landscape_example_2.sifz|Multiplane_landscape_example_2.sifz}}<br />
<br />
<br />
[[File:Multiplane_01_gif-anim.gif]]<br />
<br />
''Все кружочки на самом деле одинакового размера и находятся в центре холста не двигаясь вообще. Движение и перспектива созданы путем перемещения главного слоя (Main) или слоя "Камера".<br />
<br />
<br />
== Основные настройки ==<br />
<br />
[[File:Multiplane_basic_setup.png]]<br />
<br />
*Сначала создайте окружность. Изолируйте её и назовите объединяющий слой с ней "CONTENT". Вы будете помещать всё содержимое "стеклянного стола" в этот слой, сейчас у нас здесь находится только окружность.<br />
*Изолируйте слой "CONTENT" в ещё один объединяющий слой и назовите этот слой "PLANE_01", это будет первый стеклянный стол, позже мы продублируем и изменим этот слой чтобы у нас было больше "столов".<br />
*Изолируйте "стол" и назовите новый слой "MAIN". Этот слой будет симулировать камеру.<br />
*Теперь в слой "стол" добавьте три новых слоя - размывание, перемещение и масштабирование (scale).<br />
<br />
== Соединяем всё вместе. ==<br />
<br />
*First export the Z-value from MAIN. Name it MAIN_Z.<br />
*Also export the origin from MAIN as MAIN_origin.<br />
*Next we'll need an inverted version of this value to use in our calculations.<br />
**For that create a temporary layer, say a circle.<br />
***Choose a real value and convert it to a scale value.<br />
***Connect the MAIN_Z-value to Link and set scalar to -1.<br />
**Select the value and export as MAIN_Z_INVERTED. Delete the temporary circle layer.<br />
*We'll also want the PLANE_01 Z-value so export that as PLANE_01_Z<br />
<br />
Now we'll want the planes to scale based on it's distance from the camera. We'll use Z-depth to decide where the layer is in space.<br />
<br />
<br />
'''ZOOM-LAYER'''<br />
Select the zoom layer of the plane.<br />
<br />
[[File:Multiplane_zoom-setup.png]]<br />
<br />
*Convert Amount to Add<br />
*Connect LHS to PLANE01_Z<br />
*Connect RHS to MAIN_Z_INVERTED<br />
*Set scalar to -1.<br />
<br />
Now the plane will zoom based on it's distance from the camera which is decided by the sum of plane and camera Z-values. We reverse the number by scalar so it scales in the right direction.<br />
<br />
<br />
'''TRANSLATE-LAYER'''<br />
<br />
We use a separate Translate layer rather than the PLANE origin so that we can still move the plane undependable from the camera move.<br />
<br />
[[File:Multiplane_translate-setup.png]]<br />
<br />
*Convert Origin to Scale.<br />
**Connect Link to MAIN_origin. This is what we'll base the movement of the planes on.<br />
**Convert Scalar to range and set min to -1 to to avoid the layer to start moving the wrong direction when tracking out from the scene. Set max to 999999 since we really don't need an upper limit.<br />
***Convert Link to Subtract and set Scalar in this new calculation to -1.<br />
****In Link connect LHS to plane1_Z and convert RHS to reciprocal.<br />
*****Next convert link to Range and set Min to 0 and Max to 999999 to avoid some strange movement when layers move too far off the canvas.<br />
*****Convert the Link to Add and connect LHS to plane1_Z and RHS to MAIN_Z_inverted.<br />
<br />
This whole calculation moves the layer more when it's closer to us and less when it's further away, thus creating illusion of depth.<br />
<br />
<br />
'''BLUR'''<br />
<br />
*Add a blur layer and convert it's blend method to straight. (Due to a bug, convert blend method to scale and set link subparameter to 1)<br />
*Create a temporary blur layer for exporting values.<br />
**Export size as initial-blur and set value to 1.00x1.00<br />
**Export different real-values as falloff, near-focus and far-focus<br />
**Convert a real value to subtract and set LHS to plane1_Z and RHS to main_Z. Export this as PL1_CAM-distance. This calculation and export needs to be done separately for every new layer that is added.<br />
*Delete the temporary blur layer.<br />
<br />
[[File:Multiplane_blur-setup1.png]]<br />
<br />
*Convert Size to scale.<br />
**Connect link to ''initial-blur''.<br />
**Convert ''scalar'' to ''switch''.<br />
***Convert ''switch'' to ''compare''<br />
****Connect ''LHS'' to ''PL1_cam-distance'' and ''RHS'' to ''near-focus'', tick "greater than".<br />
<br />
***Convert Link off to scale, <br />
****Set scalar to 100<br />
****Convert link to scale<br />
*****Connect link to falloff<br />
*****Convert scalar to subtract<br />
******LHS=near-focus, RHS=PL1_cam-distance<br />
<br />
[[File:Multiplane_blur-setup2.png]]<br />
<br />
***Convert Link_on to switch,<br />
****Convert switch to compare<br />
*****Connect LHS to PL1_cam-distance and RHS to far-focus, tick "less than"<br />
****Set Link on to 0.0<br />
****Convert Link off to scalar, <br />
*****Set scalar to 100<br />
*****Convert link to scale<br />
******Connect link to falloff<br />
******Convert scalar to subtract<br />
*******LHS=PL1_cam-distance, RHS=far-focus<br />
<br />
[[File:Multiplane_blur-setup3.png]]<br />
<br />
<br />
== Adding more planes ==<br />
<br />
*Duplicate PLANE_01 and rename it to PLANE_02.<br />
*Select the layer Z Depth and disconnect it. Then export it as PLANE_02_Z.<br />
*Open up the Zoom layer amount and connect LHS to PLANE_02_Z.<br />
*Open Translate layer calculation and connect the two occurrences of LHS to PLANE_02_Z<br />
*Create a temporary layer and convert real value to subtract.<br />
**Connect LHS to PLANE_02_Z and RHS to MAIN_Z. Export this as PL2_cam-distance. Delete temporary layer.<br />
*Open Blur layer and change the 4 PL1_cam-distance references to PL2_cam-distance.<br />
<br />
Duplicate the plane as many times as you'd like and go through these steps again.<br />
<br />
<br />
<br />
== Usage: ==<br />
<br />
• '''MAIN'''<br />
*Move to simulate camera movement.<br />
*Use Z-depth to track in/out with camera.<br />
• '''PLANES'''<br />
<br />
are moved, scaled and blurred in relation to the camera (MAIN layer) to simulate 3D plane space.<br />
<br />
• '''Translate layer''' - This is used to move the layers in relation to the camera layer. Once setup you should not manually change anything here.<br />
<br />
• '''Zoom layer''' - This is used to scale the layers to simulate distance from the camera. Should not be altered after setup.<br />
<br />
• '''Blur layer''' - This layer blurs the layers in relation to their distance from the camera. It simulates depth of field from different types of lenses.<br />
<br />
Here you can alter a few values:<br />
<br />
• '''Near-focus''' and '''Far-focus'''. Objects within this range from the camera (MAIN_Z - plane_Z) is in focus.<br />
• '''falloff''' - This value sets how fast objects gets blurry when outside the focus range. With a higher value the objects quickly gets blurry when leaving the range and with a lower objects needs to be far away from the range before getting blurry.<br />
<br />
[[File:Multiplane_landscape_example2.gif]]</div>Zurba11https://wiki.synfig.org/index.php?title=Doc:Basic_Masking/ru&diff=16534Doc:Basic Masking/ru2012-12-18T16:24:39Z<p>Zurba11: </p>
<hr />
<div><!-- Page info --><br />
{{Title|Маскинг (Basic masking)}}<br />
{{Category|Manual}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Basic}}<br />
<!-- Page info end --><br />
<br />
'''В этой статье описывается как использовать "Маскинг"(Masking) в Synfig.'''<br />
<br />
==Что такое Маскинг ==<br />
<br />
Иногда нужно чтобы персонаж находился позади каких то объектов, например здания на заднем плане. Если все объекты созданы в Synfig вы конечно можете просто разместить вашего персонажа позади объекта на панели слоёв, но если вашим фоном является изображение то для этого вам понадобится Маскинг<br />
<br />
В этой статье мы расскажем о двух основных способах маскинга; упрятывание и выявление.<br />
<br />
== Упрятывание ==<br />
<br />
При использовании этого метода всё что находиться под Маскирующим объектом будет спрятано от глаз. <br />
<br />
<br/><br />
{{l|Image:Masking_tut_img_01.png}}<br/><br />
<br />
• Создайте Маскирующий объект и разместите его над теми элементами которые надо замаскировать, он должен быть в одном с маскируемыми объектами изолирующем слое или над ним, теперь изолируйте Маскирующий объект вместе с ними в один изолирующий слой (masking_group).<br />
<br />
<br/><br />
{{l|Image:Masking_tut_img_02.png}}<br/><br />
<br />
• Установите Режим смешивания(на панели параметров) Маскирующего объекта на "Alpha Over".<br/><br />
• Теперь всё что расположено под маскирующим объектом будет скрыто от глаз.<br />
<br />
<br/><br />
{{l|Image:Hiding_mask.png}}<br/><br />
<br />
== Выявление ==<br />
Этот эффект можно достичь двумя разными способами используя разные режимы смешивания. <br />
<br />
== Способ номер 1. ==<br />
• Создайте Маскирующий объект и разместите его под элементами часть которых надо скрыть.<br />
<br />
<br/><br />
{{l|Image:Masking_tut_img_04.png}}<br/><br />
<br />
• Установите Режим смешивания для элементов которые надо скрыть (для Робота в нашем примере) на "Straight Onto". Вы можете использовать этот метод только для одного слоя за раз, поэтому если у вас есть несколько разных объектов их следует сначала изолировать в один общий слой.<br/><br />
• Теперь всё что находится над Маскирующим объектом будет видно, а всё что находится за его пределами будет спрятано.<br />
<br />
<br/><br />
{{l|Image:Revealing_mask_1.png}}<br/><br />
<br />
== Способ номер 2. ==<br />
Это способ больше похож на упрятывание и более универсальный чем описанный выше так как вам не придётся изолировать всё что должно быть замаскированно в один слой. Этот способ маскирует всё под собой не зависимо от количества слоёв.<br />
<br />
<br/><br />
{{l|Image:Masking_tut_img_07.png}}<br/><br />
<br />
• Создайте Маскирующий объект и разместите его над элементами часть которых надо скрыть.<br/><br />
• Выберите "инвертировать"(на панели параметров) для Маскирующего объекта.<br/><br />
• Установите режим смешивания для Маскирующего объекта на "Alpha Over". Всё под Маскирующим объектом будет видно, а остальное скрыто.<br/><br />
• Вы можете изолировать Маскирующий объект и маскируемые элементы. Всё что не будет находится в этом слое не будет и маскироваться, поэтому мы не изолируем фоновое изображение в нашем примере.<br/><br />
{{l|Image:Revealing_mask_2.png}}<br/><br />
<br />
Скачать [[Media:Synfig_masking_tutorial_files.zip|Файлы урока]].</div>Zurba11https://wiki.synfig.org/index.php?title=Doc:Ball_Bounce/ru&diff=16533Doc:Ball Bounce/ru2012-12-18T09:07:25Z<p>Zurba11: @_@</p>
<hr />
<div><!-- Page info --><br />
{{Title|Прыгающий мяч}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
<!-- Page info end --><br />
<br />
В этой статье рассказывается о том как создать анимацию с прыгающим мячом. Мячи в мультиках обычно имеют достаточно причудливую форму когда двигаются и особенно когда ударяются об землю, но заниматься созданием таких деформаций мы будем в следующий раз, а сейчас рассмотрим способы создания самого движения мяча в пространстве.<br />
<br />
==Несколько разных способов достичь результата==<br />
<br />
Есть четыре способа создать прыгающий мяч используя Synfig:<br />
<br />
# Сделать прыгающий мяч вручную, это потребует создания нескольких фиксаторов которые надо расположить так чтобы положение мяча совпадало с параболической траекторией его движения (во времени и пространстве).<br />
# Используя параметр интерполяции фиксаторов, когда они установлены в режим TCB interpolation. Это значительно уменьшает количество необходимых фиксаторов и делает тайминг движения мяча на много проще.<br />
# Используя привязывание к кривой, если вы нарисуете путь по которому должен двигаться мяч используя кривую BLine, то достаточно просто сделать так чтобы мяч следовал вдоль кривой и даже изменял свою скорость во время движения. <br />
# Создать математическое уравнение описывающие движение мяча, это достаточно сложный способ но именно он должен оказаться самым точным из всех.<br />
<br />
== Создаём прыгающий мяч вручную ==<br />
<br />
Принцип создания прыгающего мяча вручную заключается в том чтобы нарисовать желаемую кривую траектории на бумаге, а за тем прочертить от горизонтальной оси линии пересекающие кривую траектории с одинаковыми промежутками между собой. Примерно как на этом рисунке:<br />
<br />
{{l|Image:bounce.jpg|256px}}<br />
<br />
Вы можете заметить что одинаковые промежутки на горизонтальной оси дают на вертикальной оси не одинаковые промежутки, это нормально так как проистекает из природы кривой.<br />
<br />
Определив точки пересечения с кривой в двух измерениях мы можем перенести их в Synfig напрямую, используя для этого сетку. Нарисовав их мы исправляем значения координат так чтобы они были полностью симметричны, что наглядно показано в этой таблице: <br />
<br />
{| <br />
| '''Время''' || '''Позиция X''' || '''Позиция Y''' || '''Комментарий'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Высшая точка<br />
|- <br />
| 4f || -165.0 || 92.0 ||<br />
|- <br />
| 8f || -155.0 || 81.118 ||<br />
|- <br />
| 12f || -145.0 || 63.678 ||<br />
|- <br />
| 16f || -135.0 || 29.479 ||<br />
|- <br />
| 20f || -125.0 || -15.522 || Низшая точка<br />
|- <br />
| 24f || -115.0 || 29.479 ||<br />
|- <br />
| 28f || -105.0 || 63.782 ||<br />
|- <br />
| ... || ... ||<br />
|}<br />
<br />
Вы можете видеть что позиция Х возрастает с шагом в 10.0, а позиция Y воспроизводит параболическую траекторию кривой.<br />
<br />
Чтобы получить большее количество прыжков просто скопируйте фиксаторы (поместите курсор на шкале времени в нужном месте, затем наведите мышь на фиксатор, нажмите правую кнопку мыши и выберите "продублировать") создав симметричное движение. Вам также придётся отредактировать значения Х вручную чтобы они возрастали на 10.0 на каждом новом фиксаторе.<br />
<br />
Ниже вы можете видеть график созданного вручную движения мяча.<br />
<br />
{{l|Image:manual-graph.png|800px}}<br />
<br />
Нижние точки графика не острые, чтобы исправить это нужно поместить большее количество фиксаторов в районе нижней точки (20f). Попробуйте сделать это сами с помощью приложенного файла с исходниками.<br />
<br />
Ниже вы видите готовую анимацию и файл.<br />
<br />
{{l|Image:manual.gif}}<br />
<br />
File: {{l|Media:manual.sifz}}<br />
<br />
==Создаём прыгающий мяч с помощью интерполяции фиксаторов==<br />
<br />
В режиме интерполяции TCB мы можем изменять такие параметры фиксаторов как Натяжение, Непрерывность, Отклонение и Временное Натяжение, поэтому есть возможность легко изменять характер интерполяции в месте нахождения фиксатора делая его плавным или резким.<br />
<br />
Сейчас мы возьмём те же значения для верхней и нижней точек что и в предыдущей таблице, но будем использовать только по одному фиксатору для каждой крайней точки, а оставшуюся часть кривой создадим с помощью TCB параметров.<br />
<br />
Таблица фиксаторов будет выглядеть так:<br />
<br />
{| <br />
| '''Время''' || '''Позиция X''' || '''Позиция Y''' || '''Комментарий'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Высшая точка<br />
|- <br />
| 20f || -125.0 || -15.522 || Низшая точка<br />
|-<br />
| 40f || -75.0 || 92.0 || Высшая точка<br />
|- <br />
| 60f || -25.0 || -15.522 || Низшая точка<br />
|- <br />
| ... || ... <br />
|}<br />
<br />
Как видите количество точек значительно уменьшилось.<br />
<br />
Если просто использовать обычную TCB интерполяцию это не даст желаемый результат, посмотрите на график:<br />
<br />
{{l|Image:waypoint-curves1.png|800px}}<br />
<br />
Но если изменить параметры TCB то мы получим то что хотели:<br />
<br />
{{l|Image:waypoint-graph2.png|800px}}<br />
<br />
<br />
Параметры TCB должны быть такими:<br />
<br />
{| <br />
| '''Время''' || '''Позиция X''' || '''Позиция Y''' || '''Комментарий'''||'''Натяжение'''|| '''Непрерывность'''|| '''Отклонение'''|| '''Временное Натяжение'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Высшая точка|| 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 20f || -125.0 || -15.522 || Низшая точка || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 40f || -75.0 || 92.0 || Высшая точка || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 60f || -25.0 || -15.522 || Низшая точка || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 80f || 25.0 || 92.0 || Высшая точка || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| ... || ... ||... || ... || ... || ... || ... || ...<br />
|}<br />
<br />
<br />
Вот анимация которую мы получили:<br />
<br />
{{l|Image:waypoint-2.gif}}<br />
<br />
И файл с исходниками file: {{l|Media:waypoint-2.sifz}}<br />
<br />
Обратите внимание что кривая на 0 и 80 кадрах имеет не правильную форму, это произошло из за того что параметры TCB должны принадлежать к фиксатору находящемуся между двух других чтобы произвести эффект. Если фиксатор является крайним (находится в начале или конце анимации) то параметр не может изменять кривую. Чтобы решить эту проблему вам стоит разделить координаты X и Y Исходной Точки (Origin) изменив метод интерполяции для Y на линейный, а X оставить без изменений. Правильной ход анимации прыжка в примере по этой причине заключён между вертикальными чёрными линиями.<br />
<br />
Заметьте также что вы можете сделать верхнюю точку более плоской увеличив параметр Временное Натяжение (хорошим значением будет 0.5). Это будет деформировать X так что вам нужно разделить координаты чтобы всё прошло гладко.<br />
<br />
А это сравнение двух методов создания прыжка одновременно.<br />
<br />
{{l|Image:waypoint-compare.gif}}<br />
<br />
Используя этот метод вы можете легко изменять значение верхней точки Y, а интерполяция позаботится об остальном. При ручной интерполяции вам пришлось бы каждый раз пересчитывать все x/y координаты чтобы сделать высоту прыжка меньше.<br />
<br />
== Прыгающий мяч по кривой Bline ==<br />
<br />
Перед тем как прочитать эту часть вам не помешает ознакомится со статьёй {{l|Doc:Following_a_BLine}}.<br />
<br />
Использования кривой для создания прыжка имеет следующие преимущества:<br />
<br />
* Вы можете сразу увидеть траекторию прыжка.<br />
* Вы можете вращать мяч во время движения (это позволяет сделать прыжки объектов не круглой формы).<br />
* Вы можете создать прыжки от вертикальной, горизонтальной и вообще какой угодно поверхности, только нарисуйте кривую.<br />
<br />
Первое что нужно сделать это нарисовать кривую вдоль которой будет двигаться мяч. Я рисовал кривую опираясь на анимацию созданного в ручную прыжка.<br />
<br />
{{l|Image:bline-path.png}}<br />
<br />
<small> (Вы возможно заметили что не хватает некоторых касательных на кривой, не видно их по тому что я "связал" параллельные касательные острых краёв. Так гораздо проще настроить форму кривой потому что меняя положение только двух касательных вы двигаете все связанные касательные одновременно).</small><br />
<br />
Теперь когда кривая нарисована нужно создать круг или мяч который будет прыгать и указать координаты исходной точки (origin) равными 0,0. Лучше всего изолировать мяч в объединяющий слой и использовать исходную точку объединяющего слоя для создания анимации. Когда создадите объединяющий слой надо выделить кривую которые вы нарисовали и объединяющий слой с мячём после чего выделить контрольную точку положения (зелёную) объединяющего слоя, потом кликнуть правой кнопкой на кривой (в месте где нет контрольных точек) и выбрать пункт "Привязать к кривой".<br />
<br />
Теперь можно двигать мяч и он будет всегда оставаться на кривой.<br />
<br />
Раскройте параметры исходной точки вложенного слоя с мячом (нажав на треугольник напротив пункта "исходная точка") и найдите пункт "Величина", этот параметр как раз то что нам нужно для того чтобы анимировать движение вдоль кривой.<br />
<br />
В нашем примере кривая Bline имеет 6 вершин и 5 секций кривой. Если вы в точности следуете примеру попробуйте установить величину на значения 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 и вы увидите что мяч двигается к каждой из вершин. Теперь создайте несколько фиксаторов:<br />
<br />
{| <br />
| '''Время''' || '''Величина''' || '''Комментарий'''<br />
|- <br />
| 0f || 0.0 || Высшая точка<br />
|- <br />
| 20f || 0.2 || Низшая точка<br />
|-<br />
| 40f || 0.4 || Высшая точка<br />
|- <br />
| 60f || 0.6 || Низшая точка<br />
|- <br />
| 80f || 0.8 || Высшая точка<br />
|- <br />
| 100f || 1.0 || Низшая точка<br />
|}<br />
<br />
Они соответствуют фиксаторам из предыдущего метода который мы разбирали, но посмотрите каков результат на этот раз: <br />
<br />
{{l|Image:bline-track.png|800px}}<br />
<br />
График движения по X выглядит ужасно, это уже не прямая линия,а значит скорость движения по горизонтальной плоскости не является постоянной. Чтобы исправить это нужно добавить больше фиксаторов в середине.<br />
<br />
Чтобы сделать это я использовал анимацию из второго метода и постарался совместить положения мяча на всём протяжении кривой. Вот таблица которая мне понадобилась.<br />
<br />
<br />
{| <br />
| '''Время''' || '''Величина''' || '''Коммнетарий'''<br />
|- <br />
| 0f || 0.0 || Высшая точка<br />
|- <br />
| 20f || 0.2 || Низшая точка<br />
|- <br />
| 24f || 0.2626 || <br />
|- <br />
| 28f || 0.3085 || <br />
|- <br />
| 32f || 0.3463 || <br />
|- <br />
| 36f || 0.3741 || <br />
|-<br />
| 40f || 0.4 || Высшая точка<br />
|- <br />
| 44f || 0.4245 || <br />
|- <br />
| 48f || 0.4554 || <br />
|- <br />
| 52f || 0.4926 || <br />
|- <br />
| 56f || 0.5280 || <br />
|- <br />
| 60f || 0.6 || Низшая точка<br />
|- <br />
| 64f || 0.6629 || <br />
|- <br />
| 68f || 0.7075 || <br />
|- <br />
| 72f || 0.7445 || <br />
|- <br />
| 76f || 0.7783 || <br />
|- <br />
| 80f || 0.8 || Высшая точка<br />
|- <br />
| 84f || 0.8253 || <br />
|- <br />
| 88f || 0.8539 || <br />
|- <br />
| 92f || 0.8928 || <br />
|- <br />
| 96f || 0.9375 || <br />
|- <br />
| 100f || 1.0 || Низшая точка<br />
|}<br />
<br />
Снова взглянув на график мы увидим что движение по X теперь равномерное и изображено ''прямой'' линией.<br />
<br />
{{l|Image:bline-track2.png|800px}}<br />
<br />
Вот конечная анимация и файл . <br />
<br />
{{l|Image:bline.gif}}<br />
<br />
Файл: {{l|Media:bline.sifz}}<br />
<br />
Предполагалось что маленький жёлтый мяч должен двигаться синхронно с красным на всём протяжении анимации, но как видите он движется быстрее или медленнее временами. Это произошло из за того что я был вынужден использовать фиксаторы не в одинаковых положениях времени или добавлять их в большем количестве.<br />
<br />
== Mathematical emulation ==<br />
<br />
Anyone want to try? :)</div>Zurba11https://wiki.synfig.org/index.php?title=Doc:Ball_Bounce/ru&diff=16526Doc:Ball Bounce/ru2012-12-09T18:46:10Z<p>Zurba11: /* Ball Bounce following a path */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Прыгающий мяч}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
<!-- Page info end --><br />
<br />
В этой статье рассказывается о том как создать анимацию с прыгающим мячом. Мячи в мультиках обычно имеют достаточно причудливую форму когда двигаются и особенно когда ударяются об землю, но заниматься созданием таких деформаций мы будем в следующий раз, а сейчас рассмотрим способы создания самого движения мяча в пространстве.<br />
<br />
==Несколько разных способов достичь результата==<br />
<br />
Есть четыре способа создать прыгающий мяч используя Synfig:<br />
<br />
# Сделать прыгающий мяч вручную, это потребует создания нескольких фиксаторов которые надо расположить так чтобы положение мяча совпадало с параболической траекторией его движения (во времени и пространстве).<br />
# Используя параметр интерполяции фиксаторов, когда они установлены в режим TCB interpolation. Это значительно уменьшает количество необходимых фиксаторов и делает тайминг движения мяча на много проще.<br />
# Используя привязывание к кривой, если вы нарисуете путь по которому должен двигаться мяч используя кривую BLine, то достаточно просто сделать так чтобы мяч следовал вдоль кривой и даже изменял свою скорость во время движения. <br />
# Создать математическое уравнение описывающие движение мяча, это достаточно сложный способ но именно он должен оказаться самым точным из всех.<br />
<br />
== Создаём прыгающий мяч вручную ==<br />
<br />
Принцип создания прыгающего мяча вручную заключается в том чтобы нарисовать желаемую кривую траектории на бумаге, а за тем прочертить от горизонтальной оси линии пересекающие кривую траектории с одинаковыми промежутками между собой. Примерно как на этом рисунке:<br />
<br />
{{l|Image:bounce.jpg|256px}}<br />
<br />
Вы можете заметить что одинаковые промежутки на горизонтальной оси дают на вертикальной оси не одинаковые промежутки, это нормально так как проистекает из природы кривой.<br />
<br />
Определив точки пересечения с кривой в двух измерениях мы можем перенести их в Synfig напрямую, используя для этого сетку. Нарисовав их мы исправляем значения координат так чтобы они были полностью симметричны, что наглядно показано в этой таблице: <br />
<br />
{| <br />
| '''Время''' || '''Позиция X''' || '''Позиция Y''' || '''Комментарий'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Высшая точка<br />
|- <br />
| 4f || -165.0 || 92.0 ||<br />
|- <br />
| 8f || -155.0 || 81.118 ||<br />
|- <br />
| 12f || -145.0 || 63.678 ||<br />
|- <br />
| 16f || -135.0 || 29.479 ||<br />
|- <br />
| 20f || -125.0 || -15.522 || Низшая точка<br />
|- <br />
| 24f || -115.0 || 29.479 ||<br />
|- <br />
| 28f || -105.0 || 63.782 ||<br />
|- <br />
| ... || ... ||<br />
|}<br />
<br />
Вы можете видеть что позиция Х возрастает с шагом в 10.0, а позиция Y воспроизводит параболическую траекторию кривой.<br />
<br />
Чтобы получить большее количество прыжков просто скопируйте фиксаторы (поместите курсор на шкале времени в нужном месте, затем наведите мышь на фиксатор, нажмите правую кнопку мыши и выберите "продублировать") создав симметричное движение. Вам также придётся отредактировать значения Х вручную чтобы они возрастали на 10.0 на каждом новом фиксаторе.<br />
<br />
Ниже вы можете видеть график созданного вручную движения мяча.<br />
<br />
{{l|Image:manual-graph.png|800px}}<br />
<br />
Нижние точки графика не острые, чтобы исправить это нужно поместить большее количество фиксаторов в районе нижней точки (20f). Попробуйте сделать это сами с помощью приложенного файла с исходниками.<br />
<br />
Ниже вы видите готовую анимацию и файл.<br />
<br />
{{l|Image:manual.gif}}<br />
<br />
File: {{l|Media:manual.sifz}}<br />
<br />
==Создаём прыгающий мяч с помощью интерполяции фиксаторов==<br />
<br />
В режиме интерполяции TCB мы можем изменять такие параметры фиксаторов как Натяжение, Непрерывность, Отклонение и Временное Натяжение, поэтому есть возможность легко изменять характер интерполяции в месте нахождения фиксатора делая его плавным или резким.<br />
<br />
Сейчас мы возьмём те же значения для верхней и нижней точек что и в предыдущей таблице, но будем использовать только по одному фиксатору для каждой крайней точки, а оставшуюся часть кривой создадим с помощью TCB параметров.<br />
<br />
Таблица фиксаторов будет выглядеть так:<br />
<br />
{| <br />
| '''Время''' || '''Позиция X''' || '''Позиция Y''' || '''Комментарий'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Высшая точка<br />
|- <br />
| 20f || -125.0 || -15.522 || Низшая точка<br />
|-<br />
| 40f || -75.0 || 92.0 || Высшая точка<br />
|- <br />
| 60f || -25.0 || -15.522 || Низшая точка<br />
|- <br />
| ... || ... <br />
|}<br />
<br />
Как видите количество точек значительно уменьшилось.<br />
<br />
Если просто использовать обычную TCB интерполяцию это не даст желаемый результат, посмотрите на график:<br />
<br />
{{l|Image:waypoint-curves1.png|800px}}<br />
<br />
Но если изменить параметры TCB то мы получим то что хотели:<br />
<br />
{{l|Image:waypoint-graph2.png|800px}}<br />
<br />
<br />
Параметры TCB должны быть такими:<br />
<br />
{| <br />
| '''Время''' || '''Позиция X''' || '''Позиция Y''' || '''Комментарий'''||'''Натяжение'''|| '''Непрерывность'''|| '''Отклонение'''|| '''Временное Натяжение'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Высшая точка|| 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 20f || -125.0 || -15.522 || Низшая точка || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 40f || -75.0 || 92.0 || Высшая точка || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 60f || -25.0 || -15.522 || Низшая точка || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 80f || 25.0 || 92.0 || Высшая точка || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| ... || ... ||... || ... || ... || ... || ... || ...<br />
|}<br />
<br />
<br />
Вот анимация которую мы получили:<br />
<br />
{{l|Image:waypoint-2.gif}}<br />
<br />
И файл с исходниками file: {{l|Media:waypoint-2.sifz}}<br />
<br />
Обратите внимание что кривая на 0 и 80 кадрах имеет не правильную форму, это произошло из за того что параметры TCB должны принадлежать к фиксатору находящемуся между двух других чтобы произвести эффект. Если фиксатор является крайним (находится в начале или конце анимации) то параметр не может изменять кривую. Чтобы решить эту проблему вам стоит разделить координаты X и Y Исходной Точки (Origin) изменив метод интерполяции для Y на линейный, а X оставить без изменений. Правильной ход анимации прыжка в примере по этой причине заключён между вертикальными чёрными линиями.<br />
<br />
Заметьте также что вы можете сделать верхнюю точку более плоской увеличив параметр Временное Натяжение (хорошим значением будет 0.5). Это будет деформировать X так что вам нужно разделить координаты чтобы всё прошло гладко.<br />
<br />
А это сравнение двух методов создания прыжка одновременно.<br />
<br />
{{l|Image:waypoint-compare.gif}}<br />
<br />
Используя этот метод вы можете легко изменять значение верхней точки Y, а интерполяция позаботится об остальном. При ручной интерполяции вам пришлось бы каждый раз пересчитывать все x/y координаты чтобы сделать высоту прыжка меньше.<br />
<br />
== Прыгающий мяч по кривой Bline ==<br />
<br />
Перед тем как прочитать эту часть вам не помешает ознакомится со статьёй {{l|Doc:Following_a_BLine}}.<br />
<br />
Использования кривой для создания прыжка имеет следующие преимущества:<br />
<br />
* Вы можете сразу увидеть траекторию прыжка.<br />
* Вы можете вращать мяч во время движения (это позволяет сделать прыжки объектов не круглой формы).<br />
* Вы можете создать прыжки от вертикальной, горизонтальной и вообще какой угодно поверхности, только нарисуйте кривую.<br />
<br />
Первое что нужно сделать это нарисовать кривую вдоль которой будет двигаться мяч. Я рисовал кривую опираясь на анимацию созданного в ручную прыжка.<br />
<br />
{{l|Image:bline-path.png}}<br />
<br />
<small> (Вы возможно заметили что не хватает некоторых касательных на кривой, не видно их по тому что я "связал" параллельные касательные острых краёв. Так гораздо проще настроить форму кривой потому что меняя положение только двух касательных вы двигаете все связанные касательные одновременно).</small><br />
<br />
Теперь когда кривая нарисована нужно создать круг или мяч который будет прыгать и указать координаты исходной точки (origin) равными 0,0. Лучше всего изолировать мяч в объединяющий слой и использовать исходную точку объединяющего слоя для создания анимации. Когда создадите объединяющий слой надо выделить кривую которые вы нарисовали и объединяющий слой с мячём после чего выделить контрольную точку положения (зелёную) объединяющего слоя, потом кликнуть правой кнопкой на кривой (в месте где нет контрольных точек) и выбрать пункт "Привязать к кривой".<br />
<br />
Теперь можно двигать мяч и он будет всегда оставаться на кривой.<br />
<br />
Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the one you need to animate to move the ball over the Bline. <br />
<br />
Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
This coincides with the main waypoints of the last method we have seen. But look what's the result:<br />
<br />
{{l|Image:bline-track.png|800px}}<br />
<br />
Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle. <br />
<br />
To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.<br />
<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|- <br />
| 24f || 0.2626 || <br />
|- <br />
| 28f || 0.3085 || <br />
|- <br />
| 32f || 0.3463 || <br />
|- <br />
| 36f || 0.3741 || <br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 44f || 0.4245 || <br />
|- <br />
| 48f || 0.4554 || <br />
|- <br />
| 52f || 0.4926 || <br />
|- <br />
| 56f || 0.5280 || <br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 64f || 0.6629 || <br />
|- <br />
| 68f || 0.7075 || <br />
|- <br />
| 72f || 0.7445 || <br />
|- <br />
| 76f || 0.7783 || <br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 84f || 0.8253 || <br />
|- <br />
| 88f || 0.8539 || <br />
|- <br />
| 92f || 0.8928 || <br />
|- <br />
| 96f || 0.9375 || <br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
Now look to the graphs again and notice that the X travel is now a ''straight'' line.<br />
<br />
{{l|Image:bline-track2.png|800px}}<br />
<br />
This is the resulting animation and the sifz file. <br />
<br />
{{l|Image:bline.gif}}<br />
<br />
The sample file: {{l|Media:bline.sifz}}<br />
<br />
It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.<br />
<br />
== Mathematical emulation ==<br />
<br />
Anyone want to try? :)<br />
<br />
==Conclusions==</div>Zurba11https://wiki.synfig.org/index.php?title=Doc:Ball_Bounce/ru&diff=16501Doc:Ball Bounce/ru2012-12-02T20:01:10Z<p>Zurba11: /* Создаём прыгающий мяч с помощью интерполяции фиксаторов */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Прыгающий мяч}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
<!-- Page info end --><br />
<br />
В этой статье рассказывается о том как создать анимацию с прыгающим мячом. Мячи в мультиках обычно имеют достаточно причудливую форму когда двигаются и особенно когда ударяются об землю, но заниматься созданием таких деформаций мы будем в следующий раз, а сейчас рассмотрим способы создания самого движения мяча в пространстве.<br />
<br />
==Несколько разных способов достичь результата==<br />
<br />
Есть четыре способа создать прыгающий мяч используя Synfig:<br />
<br />
# Сделать прыгающий мяч вручную, это потребует создания нескольких фиксаторов которые надо расположить так чтобы положение мяча совпадало с параболической траекторией его движения (во времени и пространстве).<br />
# Используя параметр интерполяции фиксаторов, когда они установлены в режим TCB interpolation. Это значительно уменьшает количество необходимых фиксаторов и делает тайминг движения мяча на много проще.<br />
# Используя привязывание к кривой, если вы нарисуете путь по которому должен двигаться мяч используя кривую BLine, то достаточно просто сделать так чтобы мяч следовал вдоль кривой и даже изменял свою скорость во время движения. <br />
# Создать математическое уравнение описывающие движение мяча, это достаточно сложный способ но именно он должен оказаться самым точным из всех.<br />
<br />
== Создаём прыгающий мяч вручную ==<br />
<br />
Принцип создания прыгающего мяча вручную заключается в том чтобы нарисовать желаемую кривую траектории на бумаге, а за тем прочертить от горизонтальной оси линии пересекающие кривую траектории с одинаковыми промежутками между собой. Примерно как на этом рисунке:<br />
<br />
{{l|Image:bounce.jpg|256px}}<br />
<br />
Вы можете заметить что одинаковые промежутки на горизонтальной оси дают на вертикальной оси не одинаковые промежутки, это нормально так как проистекает из природы кривой.<br />
<br />
Определив точки пересечения с кривой в двух измерениях мы можем перенести их в Synfig напрямую, используя для этого сетку. Нарисовав их мы исправляем значения координат так чтобы они были полностью симметричны, что наглядно показано в этой таблице: <br />
<br />
{| <br />
| '''Время''' || '''Позиция X''' || '''Позиция Y''' || '''Комментарий'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Высшая точка<br />
|- <br />
| 4f || -165.0 || 92.0 ||<br />
|- <br />
| 8f || -155.0 || 81.118 ||<br />
|- <br />
| 12f || -145.0 || 63.678 ||<br />
|- <br />
| 16f || -135.0 || 29.479 ||<br />
|- <br />
| 20f || -125.0 || -15.522 || Низшая точка<br />
|- <br />
| 24f || -115.0 || 29.479 ||<br />
|- <br />
| 28f || -105.0 || 63.782 ||<br />
|- <br />
| ... || ... ||<br />
|}<br />
<br />
Вы можете видеть что позиция Х возрастает с шагом в 10.0, а позиция Y воспроизводит параболическую траекторию кривой.<br />
<br />
Чтобы получить большее количество прыжков просто скопируйте фиксаторы (поместите курсор на шкале времени в нужном месте, затем наведите мышь на фиксатор, нажмите правую кнопку мыши и выберите "продублировать") создав симметричное движение. Вам также придётся отредактировать значения Х вручную чтобы они возрастали на 10.0 на каждом новом фиксаторе.<br />
<br />
Ниже вы можете видеть график созданного вручную движения мяча.<br />
<br />
{{l|Image:manual-graph.png|800px}}<br />
<br />
Нижние точки графика не острые, чтобы исправить это нужно поместить большее количество фиксаторов в районе нижней точки (20f). Попробуйте сделать это сами с помощью приложенного файла с исходниками.<br />
<br />
Ниже вы видите готовую анимацию и файл.<br />
<br />
{{l|Image:manual.gif}}<br />
<br />
File: {{l|Media:manual.sifz}}<br />
<br />
==Создаём прыгающий мяч с помощью интерполяции фиксаторов==<br />
<br />
В режиме интерполяции TCB мы можем изменять такие параметры фиксаторов как Натяжение, Непрерывность, Отклонение и Временное Натяжение, поэтому есть возможность легко изменять характер интерполяции в месте нахождения фиксатора делая его плавным или резким.<br />
<br />
Сейчас мы возьмём те же значения для верхней и нижней точек что и в предыдущей таблице, но будем использовать только по одному фиксатору для каждой крайней точки, а оставшуюся часть кривой создадим с помощью TCB параметров.<br />
<br />
Таблица фиксаторов будет выглядеть так:<br />
<br />
{| <br />
| '''Время''' || '''Позиция X''' || '''Позиция Y''' || '''Комментарий'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Высшая точка<br />
|- <br />
| 20f || -125.0 || -15.522 || Низшая точка<br />
|-<br />
| 40f || -75.0 || 92.0 || Высшая точка<br />
|- <br />
| 60f || -25.0 || -15.522 || Низшая точка<br />
|- <br />
| ... || ... <br />
|}<br />
<br />
Как видите количество точек значительно уменьшилось.<br />
<br />
Если просто использовать обычную TCB интерполяцию это не даст желаемый результат, посмотрите на график:<br />
<br />
{{l|Image:waypoint-curves1.png|800px}}<br />
<br />
Но если изменить параметры TCB то мы получим то что хотели:<br />
<br />
{{l|Image:waypoint-graph2.png|800px}}<br />
<br />
<br />
Параметры TCB должны быть такими:<br />
<br />
{| <br />
| '''Время''' || '''Позиция X''' || '''Позиция Y''' || '''Комментарий'''||'''Натяжение'''|| '''Непрерывность'''|| '''Отклонение'''|| '''Временное Натяжение'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Высшая точка|| 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 20f || -125.0 || -15.522 || Низшая точка || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 40f || -75.0 || 92.0 || Высшая точка || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 60f || -25.0 || -15.522 || Низшая точка || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 80f || 25.0 || 92.0 || Высшая точка || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| ... || ... ||... || ... || ... || ... || ... || ...<br />
|}<br />
<br />
<br />
Вот анимация которую мы получили:<br />
<br />
{{l|Image:waypoint-2.gif}}<br />
<br />
И файл с исходниками file: {{l|Media:waypoint-2.sifz}}<br />
<br />
Обратите внимание что кривая на 0 и 80 кадрах имеет не правильную форму, это произошло из за того что параметры TCB должны принадлежать к фиксатору находящемуся между двух других чтобы произвести эффект. Если фиксатор является крайним (находится в начале или конце анимации) то параметр не может изменять кривую. Чтобы решить эту проблему вам стоит разделить координаты X и Y Исходной Точки (Origin) изменив метод интерполяции для Y на линейный, а X оставить без изменений. Правильной ход анимации прыжка в примере по этой причине заключён между вертикальными чёрными линиями.<br />
<br />
Заметьте также что вы можете сделать верхнюю точку более плоской увеличив параметр Временное Натяжение (хорошим значением будет 0.5). Это будет деформировать X так что вам нужно разделить координаты чтобы всё прошло гладко.<br />
<br />
А это сравнение двух методов создания прыжка одновременно.<br />
<br />
{{l|Image:waypoint-compare.gif}}<br />
<br />
Используя этот метод вы можете легко изменять значение верхней точки Y, а интерполяция позаботится об остальном. При ручной интерполяции вам пришлось бы каждый раз пересчитывать все x/y координаты чтобы сделать высоту прыжка меньше.<br />
<br />
== Ball Bounce following a path ==<br />
<br />
Before reading this section you should be familiar with {{l|Doc:Following_a_BLine}} tutorial. <br />
<br />
The use of a path to perform the bounce has some advantages: <br />
<br />
* You can see the complete ball bounces in one shot.<br />
* You can make the ball rotate along the path (this would allow to make bounces of non round objects).<br />
* You can make bounces to vertical, horizontal or any kind of walls you like. Just draw the path.<br />
<br />
and some disadvantages: <br />
<br />
* It is difficult to control the horizontal movement. It is due to the parameter that moves the object through the path is linked to the number of vertices of the path. If the path has five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.<br />
<br />
The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:<br />
<br />
{{l|Image:bline-path.png}}<br />
<br />
<small> (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)</small><br />
<br />
Once defined then create a circle or the ball you want to move and place it centered at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.<br />
<br />
Once linked you can drag it and it will stick to the bline. <br />
<br />
Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the one you need to animate to move the ball over the Bline. <br />
<br />
Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
This coincides with the main waypoints of the last method we have seen. But look what's the result:<br />
<br />
{{l|Image:bline-track.png|800px}}<br />
<br />
Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle. <br />
<br />
To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.<br />
<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|- <br />
| 24f || 0.2626 || <br />
|- <br />
| 28f || 0.3085 || <br />
|- <br />
| 32f || 0.3463 || <br />
|- <br />
| 36f || 0.3741 || <br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 44f || 0.4245 || <br />
|- <br />
| 48f || 0.4554 || <br />
|- <br />
| 52f || 0.4926 || <br />
|- <br />
| 56f || 0.5280 || <br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 64f || 0.6629 || <br />
|- <br />
| 68f || 0.7075 || <br />
|- <br />
| 72f || 0.7445 || <br />
|- <br />
| 76f || 0.7783 || <br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 84f || 0.8253 || <br />
|- <br />
| 88f || 0.8539 || <br />
|- <br />
| 92f || 0.8928 || <br />
|- <br />
| 96f || 0.9375 || <br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
Now look to the graphs again and notice that the X travel is now a ''straight'' line.<br />
<br />
{{l|Image:bline-track2.png|800px}}<br />
<br />
This is the resulting animation and the sifz file. <br />
<br />
{{l|Image:bline.gif}}<br />
<br />
The sample file: {{l|Media:bline.sifz}}<br />
<br />
It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.<br />
<br />
== Mathematical emulation ==<br />
<br />
Anyone want to try? :)<br />
<br />
==Conclusions==</div>Zurba11https://wiki.synfig.org/index.php?title=Doc:Ball_Bounce/ru&diff=16500Doc:Ball Bounce/ru2012-12-02T19:57:41Z<p>Zurba11: </p>
<hr />
<div><!-- Page info --><br />
{{Title|Прыгающий мяч}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
<!-- Page info end --><br />
<br />
В этой статье рассказывается о том как создать анимацию с прыгающим мячом. Мячи в мультиках обычно имеют достаточно причудливую форму когда двигаются и особенно когда ударяются об землю, но заниматься созданием таких деформаций мы будем в следующий раз, а сейчас рассмотрим способы создания самого движения мяча в пространстве.<br />
<br />
==Несколько разных способов достичь результата==<br />
<br />
Есть четыре способа создать прыгающий мяч используя Synfig:<br />
<br />
# Сделать прыгающий мяч вручную, это потребует создания нескольких фиксаторов которые надо расположить так чтобы положение мяча совпадало с параболической траекторией его движения (во времени и пространстве).<br />
# Используя параметр интерполяции фиксаторов, когда они установлены в режим TCB interpolation. Это значительно уменьшает количество необходимых фиксаторов и делает тайминг движения мяча на много проще.<br />
# Используя привязывание к кривой, если вы нарисуете путь по которому должен двигаться мяч используя кривую BLine, то достаточно просто сделать так чтобы мяч следовал вдоль кривой и даже изменял свою скорость во время движения. <br />
# Создать математическое уравнение описывающие движение мяча, это достаточно сложный способ но именно он должен оказаться самым точным из всех.<br />
<br />
== Создаём прыгающий мяч вручную ==<br />
<br />
Принцип создания прыгающего мяча вручную заключается в том чтобы нарисовать желаемую кривую траектории на бумаге, а за тем прочертить от горизонтальной оси линии пересекающие кривую траектории с одинаковыми промежутками между собой. Примерно как на этом рисунке:<br />
<br />
{{l|Image:bounce.jpg|256px}}<br />
<br />
Вы можете заметить что одинаковые промежутки на горизонтальной оси дают на вертикальной оси не одинаковые промежутки, это нормально так как проистекает из природы кривой.<br />
<br />
Определив точки пересечения с кривой в двух измерениях мы можем перенести их в Synfig напрямую, используя для этого сетку. Нарисовав их мы исправляем значения координат так чтобы они были полностью симметричны, что наглядно показано в этой таблице: <br />
<br />
{| <br />
| '''Время''' || '''Позиция X''' || '''Позиция Y''' || '''Комментарий'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Высшая точка<br />
|- <br />
| 4f || -165.0 || 92.0 ||<br />
|- <br />
| 8f || -155.0 || 81.118 ||<br />
|- <br />
| 12f || -145.0 || 63.678 ||<br />
|- <br />
| 16f || -135.0 || 29.479 ||<br />
|- <br />
| 20f || -125.0 || -15.522 || Низшая точка<br />
|- <br />
| 24f || -115.0 || 29.479 ||<br />
|- <br />
| 28f || -105.0 || 63.782 ||<br />
|- <br />
| ... || ... ||<br />
|}<br />
<br />
Вы можете видеть что позиция Х возрастает с шагом в 10.0, а позиция Y воспроизводит параболическую траекторию кривой.<br />
<br />
Чтобы получить большее количество прыжков просто скопируйте фиксаторы (поместите курсор на шкале времени в нужном месте, затем наведите мышь на фиксатор, нажмите правую кнопку мыши и выберите "продублировать") создав симметричное движение. Вам также придётся отредактировать значения Х вручную чтобы они возрастали на 10.0 на каждом новом фиксаторе.<br />
<br />
Ниже вы можете видеть график созданного вручную движения мяча.<br />
<br />
{{l|Image:manual-graph.png|800px}}<br />
<br />
Нижние точки графика не острые, чтобы исправить это нужно поместить большее количество фиксаторов в районе нижней точки (20f). Попробуйте сделать это сами с помощью приложенного файла с исходниками.<br />
<br />
Ниже вы видите готовую анимацию и файл.<br />
<br />
{{l|Image:manual.gif}}<br />
<br />
File: {{l|Media:manual.sifz}}<br />
<br />
==Создаём прыгающий мяч с помощью интерполяции фиксаторов==<br />
<br />
В режиме интерполяции TCB мы можем изменять такие параметры фиксаторов как Натяжение, Непрерывность, Отклонение и Временное Натяжение, поэтому есть возможность легко изменять характер интерполяции в месте нахождения фиксатора делая его плавным или резким.<br />
<br />
Сейчас мы возьмём те же значения для верхней и нижней точек что и в предыдущей таблице, но будем использовать только по одному фиксатору для каждой крайней точки, а оставшуюся часть кривой создадим с помощью TCB параметров.<br />
<br />
Таблица фиксаторов будет выглядеть так:<br />
<br />
{| <br />
| '''Время''' || '''Позиция X''' || '''Позиция Y''' || '''Комментарий'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Высшая точка<br />
|- <br />
| 20f || -125.0 || -15.522 || Низшая точка<br />
|-<br />
| 40f || -75.0 || 92.0 || Высшая точка<br />
|- <br />
| 60f || -25.0 || -15.522 || Низшая точка<br />
|- <br />
| ... || ... <br />
|}<br />
<br />
Как видите количество точек значительно уменьшилось.<br />
<br />
Если просто использовать обычную TCB интерполяцию это не даст желаемый результат, посмотрите на график:<br />
<br />
{{l|Image:waypoint-curves1.png|800px}}<br />
<br />
Но если изменить параметры TCB то мы получим то что хотели:<br />
<br />
{{l|Image:waypoint-graph2.png|800px}}<br />
<br />
<br />
Параметры TCB должны быть такими:<br />
<br />
{| <br />
| '''Время''' || '''Позиция X''' || '''Позиция Y''' || '''Комментарий'''||'''Натяжение'''|| '''Непрерывность'''|| '''Отклонение'''|| '''Временное Натяжение'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Высшая точка|| 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 20f || -125.0 || -15.522 || Низшая точка || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 40f || -75.0 || 92.0 || Высшая точка || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 60f || -25.0 || -15.522 || Низшая точка || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 80f || 25.0 || 92.0 || Высшая точка || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| ... || ... ||... || ... || ... || ... || ... || ...<br />
|}<br />
<br />
<br />
Вот анимация которую мы получили:<br />
<br />
{{l|Image:waypoint-2.gif}}<br />
<br />
И файл с исходниками file: {{l|Media:waypoint-2.sifz}}<br />
<br />
Обратите внимание что кривая на 0 и 80 кадрах имеет не правильную форму, это произошло из за того что параметры TCB должны принадлежать к фиксатору находящемуся между двух других чтобы произвести эффект. Если фиксатор является крайним (находится в начале или конце анимации) то параметр не может изменять кривую. Чтобы решить эту проблему вам стоит разделить координаты X и Y Исходной Точки (Origin) изменив метод интерполяции для Y на линейный,а X оставить без изменений. Правильной ход анимации прыжка в примере по этой причине заключён между вертикальными чёрными линиями.<br />
<br />
Заметьте также что вы можете сделать верхнюю точку более плоской увеличив параметр Временное Натяжение (хорошим значением будет 0.5). Это будет деформировать X так что вам нужно разделить координаты чтобы всё прошло гладко.<br />
<br />
А это сравнение двух методов создания прыжка одновременно.<br />
<br />
{{l|Image:waypoint-compare.gif}}<br />
<br />
Используя этот метод вы можете легко изменять значение верхней точки Y, а интерполяция позаботится об остальном. При ручной интерполяции вам пришлось бы каждый раз пересчитывать все x/y координаты чтобы сделать высоту прыжка меньше. <br />
With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.<br />
<br />
== Ball Bounce following a path ==<br />
<br />
Before reading this section you should be familiar with {{l|Doc:Following_a_BLine}} tutorial. <br />
<br />
The use of a path to perform the bounce has some advantages: <br />
<br />
* You can see the complete ball bounces in one shot.<br />
* You can make the ball rotate along the path (this would allow to make bounces of non round objects).<br />
* You can make bounces to vertical, horizontal or any kind of walls you like. Just draw the path.<br />
<br />
and some disadvantages: <br />
<br />
* It is difficult to control the horizontal movement. It is due to the parameter that moves the object through the path is linked to the number of vertices of the path. If the path has five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.<br />
<br />
The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:<br />
<br />
{{l|Image:bline-path.png}}<br />
<br />
<small> (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)</small><br />
<br />
Once defined then create a circle or the ball you want to move and place it centered at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.<br />
<br />
Once linked you can drag it and it will stick to the bline. <br />
<br />
Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the one you need to animate to move the ball over the Bline. <br />
<br />
Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
This coincides with the main waypoints of the last method we have seen. But look what's the result:<br />
<br />
{{l|Image:bline-track.png|800px}}<br />
<br />
Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle. <br />
<br />
To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.<br />
<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|- <br />
| 24f || 0.2626 || <br />
|- <br />
| 28f || 0.3085 || <br />
|- <br />
| 32f || 0.3463 || <br />
|- <br />
| 36f || 0.3741 || <br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 44f || 0.4245 || <br />
|- <br />
| 48f || 0.4554 || <br />
|- <br />
| 52f || 0.4926 || <br />
|- <br />
| 56f || 0.5280 || <br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 64f || 0.6629 || <br />
|- <br />
| 68f || 0.7075 || <br />
|- <br />
| 72f || 0.7445 || <br />
|- <br />
| 76f || 0.7783 || <br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 84f || 0.8253 || <br />
|- <br />
| 88f || 0.8539 || <br />
|- <br />
| 92f || 0.8928 || <br />
|- <br />
| 96f || 0.9375 || <br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
Now look to the graphs again and notice that the X travel is now a ''straight'' line.<br />
<br />
{{l|Image:bline-track2.png|800px}}<br />
<br />
This is the resulting animation and the sifz file. <br />
<br />
{{l|Image:bline.gif}}<br />
<br />
The sample file: {{l|Media:bline.sifz}}<br />
<br />
It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.<br />
<br />
== Mathematical emulation ==<br />
<br />
Anyone want to try? :)<br />
<br />
==Conclusions==</div>Zurba11https://wiki.synfig.org/index.php?title=Doc:Ball_Bounce/ru&diff=16409Doc:Ball Bounce/ru2012-11-18T12:56:08Z<p>Zurba11: /* Создаём прыгающий мяч с помощью интерполяции фиксаторов */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Прыгающий мяч}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
<!-- Page info end --><br />
<br />
В этой статье рассказывается о том как создать анимацию с прыгающим мячом. Мячи в мультиках обычно имеют достаточно причудливую форму когда двигаются и особенно когда ударяются об землю, но заниматься созданием таких деформаций мы будем в следующий раз, а сейчас рассмотрим способы создания самого движения мяча в пространстве.<br />
<br />
==Несколько разных способов достичь результата==<br />
<br />
Есть четыре способа создать прыгающий мяч используя Synfig:<br />
<br />
# Сделать прыгающий мяч вручную, это потребует создания нескольких фиксаторов которые надо расположить так чтобы положение мяча совпадало с параболической траекторией его движения (во времени и пространстве).<br />
# Используя параметр интерполяции фиксаторов, когда они установлены в режим TCB interpolation. Это значительно уменьшает количество необходимых фиксаторов и делает тайминг движения мяча на много проще.<br />
# Используя привязывание к кривой, если вы нарисуете путь по которому должен двигаться мяч используя кривую BLine, то достаточно просто сделать так чтобы мяч следовал вдоль кривой и даже изменял свою скорость во время движения. <br />
# Создать математическое уравнение описывающие движение мяча, это достаточно сложный способ но именно он должен оказаться самым точным из всех.<br />
<br />
== Создаём прыгающий мяч вручную ==<br />
<br />
Принцип создания прыгающего мяча вручную заключается в том чтобы нарисовать желаемую кривую траектории на бумаге, а за тем прочертить от горизонтальной оси линии пересекающие кривую траектории с одинаковыми промежутками между собой. Примерно как на этом рисунке:<br />
<br />
{{l|Image:bounce.jpg|256px}}<br />
<br />
Вы можете заметить что одинаковые промежутки на горизонтальной оси дают на вертикальной оси не одинаковые промежутки, это нормально так как проистекает из природы кривой.<br />
<br />
Определив точки пересечения с кривой в двух измерениях мы можем перенести их в Synfig напрямую, используя для этого сетку. Нарисовав их мы исправляем значения координат так чтобы они были полностью симметричны, что наглядно показано в этой таблице: <br />
<br />
{| <br />
| '''Время''' || '''Позиция X''' || '''Позиция Y''' || '''Комментарий'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Высшая точка<br />
|- <br />
| 4f || -165.0 || 92.0 ||<br />
|- <br />
| 8f || -155.0 || 81.118 ||<br />
|- <br />
| 12f || -145.0 || 63.678 ||<br />
|- <br />
| 16f || -135.0 || 29.479 ||<br />
|- <br />
| 20f || -125.0 || -15.522 || Низшая точка<br />
|- <br />
| 24f || -115.0 || 29.479 ||<br />
|- <br />
| 28f || -105.0 || 63.782 ||<br />
|- <br />
| ... || ... ||<br />
|}<br />
<br />
Вы можете видеть что позиция Х возрастает с шагом в 10.0, а позиция Y воспроизводит параболическую траекторию кривой.<br />
<br />
Чтобы получить большее количество прыжков просто скопируйте фиксаторы (поместите курсор на шкале времени в нужном месте, затем наведите мышь на фиксатор, нажмите правую кнопку мыши и выберите "продублировать") создав симметричное движение. Вам также придётся отредактировать значения Х вручную чтобы они возрастали на 10.0 на каждом новом фиксаторе.<br />
<br />
Ниже вы можете видеть график созданного вручную движения мяча.<br />
<br />
{{l|Image:manual-graph.png|800px}}<br />
<br />
Нижние точки графика не острые, чтобы исправить это нужно поместить большее количество фиксаторов в районе нижней точки (20f). Попробуйте сделать это сами с помощью приложенного файла с исходниками.<br />
<br />
Ниже вы видите готовую анимацию и файл.<br />
<br />
{{l|Image:manual.gif}}<br />
<br />
File: {{l|Media:manual.sifz}}<br />
<br />
==Создаём прыгающий мяч с помощью интерполяции фиксаторов==<br />
<br />
В режиме интерполяции TCB мы можем изменять такие параметры фиксаторов как Натяжение, Непрерывность, Отклонение и Временное Натяжение, поэтому есть возможность легко изменять характер интерполяции в месте нахождения фиксатора делая его плавным или резким.<br />
<br />
Сейчас мы возьмём те же значения для верхней и нижней точек что и в предыдущей таблице, но будем использовать только по одному фиксатору для каждой крайней точки, а оставшуюся часть кривой создадим с помощью TCB параметров.<br />
<br />
Таблица фиксаторов будет выглядеть так:<br />
<br />
{| <br />
| '''Время''' || '''Позиция X''' || '''Позиция Y''' || '''Комментарий'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Высшая точка<br />
|- <br />
| 20f || -125.0 || -15.522 || Низшая точка<br />
|-<br />
| 40f || -75.0 || 92.0 || Высшая точка<br />
|- <br />
| 60f || -25.0 || -15.522 || Низшая точка<br />
|- <br />
| ... || ... <br />
|}<br />
<br />
Как видите количество точек значительно уменьшилось.<br />
<br />
Если просто использовать обычную TCB интерполяцию это не даст желаемый результат, посмотрите на график:<br />
<br />
{{l|Image:waypoint-curves1.png|800px}}<br />
<br />
Но если изменить параметры TCB то мы получим то что хотели:<br />
<br />
{{l|Image:waypoint-graph2.png|800px}}<br />
<br />
<br />
Параметры TCB должны быть такими:<br />
<br />
{| <br />
| '''Время''' || '''Позиция X''' || '''Позиция Y''' || '''Комментарий'''||'''Натяжение'''|| '''Непрерывность'''|| '''Отклонение'''|| '''Временное Натяжение'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Высшая точка|| 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 20f || -125.0 || -15.522 || Низшая точка || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 40f || -75.0 || 92.0 || Высшая точка || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 60f || -25.0 || -15.522 || Низшая точка || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 80f || 25.0 || 92.0 || Высшая точка || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| ... || ... ||... || ... || ... || ... || ... || ...<br />
|}<br />
<br />
<br />
Вот анимация которую мы получили:<br />
<br />
{{l|Image:waypoint-2.gif}}<br />
<br />
И файл с исходниками file: {{l|Media:waypoint-2.sifz}}<br />
<br />
Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.<br />
<br />
Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values. <br />
<br />
Here is a comparison of both bounces a the same time.<br />
<br />
{{l|Image:waypoint-compare.gif}}<br />
<br />
With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.<br />
<br />
== Ball Bounce following a path ==<br />
<br />
Before reading this section you should be familiar with {{l|Doc:Following_a_BLine}} tutorial. <br />
<br />
The use of a path to perform the bounce has some advantages: <br />
<br />
* You can see the complete ball bounces in one shot.<br />
* You can make the ball rotate along the path (this would allow to make bounces of non round objects).<br />
* You can make bounces to vertical, horizontal or any kind of walls you like. Just draw the path.<br />
<br />
and some disadvantages: <br />
<br />
* It is difficult to control the horizontal movement. It is due to the parameter that moves the object through the path is linked to the number of vertices of the path. If the path has five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.<br />
<br />
The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:<br />
<br />
{{l|Image:bline-path.png}}<br />
<br />
<small> (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)</small><br />
<br />
Once defined then create a circle or the ball you want to move and place it centered at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.<br />
<br />
Once linked you can drag it and it will stick to the bline. <br />
<br />
Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the one you need to animate to move the ball over the Bline. <br />
<br />
Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
This coincides with the main waypoints of the last method we have seen. But look what's the result:<br />
<br />
{{l|Image:bline-track.png|800px}}<br />
<br />
Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle. <br />
<br />
To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.<br />
<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|- <br />
| 24f || 0.2626 || <br />
|- <br />
| 28f || 0.3085 || <br />
|- <br />
| 32f || 0.3463 || <br />
|- <br />
| 36f || 0.3741 || <br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 44f || 0.4245 || <br />
|- <br />
| 48f || 0.4554 || <br />
|- <br />
| 52f || 0.4926 || <br />
|- <br />
| 56f || 0.5280 || <br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 64f || 0.6629 || <br />
|- <br />
| 68f || 0.7075 || <br />
|- <br />
| 72f || 0.7445 || <br />
|- <br />
| 76f || 0.7783 || <br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 84f || 0.8253 || <br />
|- <br />
| 88f || 0.8539 || <br />
|- <br />
| 92f || 0.8928 || <br />
|- <br />
| 96f || 0.9375 || <br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
Now look to the graphs again and notice that the X travel is now a ''straight'' line.<br />
<br />
{{l|Image:bline-track2.png|800px}}<br />
<br />
This is the resulting animation and the sifz file. <br />
<br />
{{l|Image:bline.gif}}<br />
<br />
The sample file: {{l|Media:bline.sifz}}<br />
<br />
It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.<br />
<br />
== Mathematical emulation ==<br />
<br />
Anyone want to try? :)<br />
<br />
==Conclusions==</div>Zurba11https://wiki.synfig.org/index.php?title=Doc:Ball_Bounce/ru&diff=16408Doc:Ball Bounce/ru2012-11-18T10:54:02Z<p>Zurba11: /* Создаём прыгающий мяч с помощью интерполяции фиксаторов */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Прыгающий мяч}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
<!-- Page info end --><br />
<br />
В этой статье рассказывается о том как создать анимацию с прыгающим мячом. Мячи в мультиках обычно имеют достаточно причудливую форму когда двигаются и особенно когда ударяются об землю, но заниматься созданием таких деформаций мы будем в следующий раз, а сейчас рассмотрим способы создания самого движения мяча в пространстве.<br />
<br />
==Несколько разных способов достичь результата==<br />
<br />
Есть четыре способа создать прыгающий мяч используя Synfig:<br />
<br />
# Сделать прыгающий мяч вручную, это потребует создания нескольких фиксаторов которые надо расположить так чтобы положение мяча совпадало с параболической траекторией его движения (во времени и пространстве).<br />
# Используя параметр интерполяции фиксаторов, когда они установлены в режим TCB interpolation. Это значительно уменьшает количество необходимых фиксаторов и делает тайминг движения мяча на много проще.<br />
# Используя привязывание к кривой, если вы нарисуете путь по которому должен двигаться мяч используя кривую BLine, то достаточно просто сделать так чтобы мяч следовал вдоль кривой и даже изменял свою скорость во время движения. <br />
# Создать математическое уравнение описывающие движение мяча, это достаточно сложный способ но именно он должен оказаться самым точным из всех.<br />
<br />
== Создаём прыгающий мяч вручную ==<br />
<br />
Принцип создания прыгающего мяча вручную заключается в том чтобы нарисовать желаемую кривую траектории на бумаге, а за тем прочертить от горизонтальной оси линии пересекающие кривую траектории с одинаковыми промежутками между собой. Примерно как на этом рисунке:<br />
<br />
{{l|Image:bounce.jpg|256px}}<br />
<br />
Вы можете заметить что одинаковые промежутки на горизонтальной оси дают на вертикальной оси не одинаковые промежутки, это нормально так как проистекает из природы кривой.<br />
<br />
Определив точки пересечения с кривой в двух измерениях мы можем перенести их в Synfig напрямую, используя для этого сетку. Нарисовав их мы исправляем значения координат так чтобы они были полностью симметричны, что наглядно показано в этой таблице: <br />
<br />
{| <br />
| '''Время''' || '''Позиция X''' || '''Позиция Y''' || '''Комментарий'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Высшая точка<br />
|- <br />
| 4f || -165.0 || 92.0 ||<br />
|- <br />
| 8f || -155.0 || 81.118 ||<br />
|- <br />
| 12f || -145.0 || 63.678 ||<br />
|- <br />
| 16f || -135.0 || 29.479 ||<br />
|- <br />
| 20f || -125.0 || -15.522 || Низшая точка<br />
|- <br />
| 24f || -115.0 || 29.479 ||<br />
|- <br />
| 28f || -105.0 || 63.782 ||<br />
|- <br />
| ... || ... ||<br />
|}<br />
<br />
Вы можете видеть что позиция Х возрастает с шагом в 10.0, а позиция Y воспроизводит параболическую траекторию кривой.<br />
<br />
Чтобы получить большее количество прыжков просто скопируйте фиксаторы (поместите курсор на шкале времени в нужном месте, затем наведите мышь на фиксатор, нажмите правую кнопку мыши и выберите "продублировать") создав симметричное движение. Вам также придётся отредактировать значения Х вручную чтобы они возрастали на 10.0 на каждом новом фиксаторе.<br />
<br />
Ниже вы можете видеть график созданного вручную движения мяча.<br />
<br />
{{l|Image:manual-graph.png|800px}}<br />
<br />
Нижние точки графика не острые, чтобы исправить это нужно поместить большее количество фиксаторов в районе нижней точки (20f). Попробуйте сделать это сами с помощью приложенного файла с исходниками.<br />
<br />
Ниже вы видите готовую анимацию и файл.<br />
<br />
{{l|Image:manual.gif}}<br />
<br />
File: {{l|Media:manual.sifz}}<br />
<br />
==Создаём прыгающий мяч с помощью интерполяции фиксаторов==<br />
<br />
В режиме интерполяции TCB мы можем изменять такие параметры фиксаторов как Натяжение, Непрерывность, Отклонение и Временное натяжение, поэтому есть возможность легко изменять характер интерполяции в месте нахождения фиксатора делая его плавным или резким.<br />
<br />
Сейчас мы возьмём те же значения для верхней и нижней точек что и в предыдущей таблице, но будем использовать только по одному фиксатору для каждой крайней точки, а оставшуюся часть кривой создадим с помощью TCB параметров.<br />
<br />
Таблица фиксаторов будет выглядеть так:<br />
<br />
{| <br />
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Highest point<br />
|- <br />
| 20f || -125.0 || -15.522 || Lower point<br />
|-<br />
| 40f || -75.0 || 92.0 || Highest point<br />
|- <br />
| 60f || -25.0 || -15.522 || Lower point<br />
|- <br />
| ... || ... <br />
|}<br />
<br />
As you can see the number of points is reduced drastically.<br />
<br />
In you only use a default TCB interpolation it would give you a poor result. Look at the graph:<br />
<br />
{{l|Image:waypoint-curves1.png|800px}}<br />
<br />
But if you edit the TCB parameters this is the result you obtain:<br />
<br />
{{l|Image:waypoint-graph2.png|800px}}<br />
<br />
<br />
The TCB parameters are the following:<br />
<br />
{| <br />
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''||'''Tension'''|| '''Continuity'''|| '''Bias'''|| '''Temporal Tension'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Highest point|| 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 20f || -125.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 40f || -75.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 60f || -25.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 80f || 25.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| ... || ... ||... || ... || ... || ... || ... || ...<br />
|}<br />
<br />
<br />
That's the resulting animation:<br />
<br />
{{l|Image:waypoint-2.gif}}<br />
<br />
And the sample file: {{l|Media:waypoint-2.sifz}}<br />
<br />
Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.<br />
<br />
Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values. <br />
<br />
Here is a comparison of both bounces a the same time.<br />
<br />
{{l|Image:waypoint-compare.gif}}<br />
<br />
With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.<br />
<br />
== Ball Bounce following a path ==<br />
<br />
Before reading this section you should be familiar with {{l|Doc:Following_a_BLine}} tutorial. <br />
<br />
The use of a path to perform the bounce has some advantages: <br />
<br />
* You can see the complete ball bounces in one shot.<br />
* You can make the ball rotate along the path (this would allow to make bounces of non round objects).<br />
* You can make bounces to vertical, horizontal or any kind of walls you like. Just draw the path.<br />
<br />
and some disadvantages: <br />
<br />
* It is difficult to control the horizontal movement. It is due to the parameter that moves the object through the path is linked to the number of vertices of the path. If the path has five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.<br />
<br />
The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:<br />
<br />
{{l|Image:bline-path.png}}<br />
<br />
<small> (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)</small><br />
<br />
Once defined then create a circle or the ball you want to move and place it centered at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.<br />
<br />
Once linked you can drag it and it will stick to the bline. <br />
<br />
Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the one you need to animate to move the ball over the Bline. <br />
<br />
Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
This coincides with the main waypoints of the last method we have seen. But look what's the result:<br />
<br />
{{l|Image:bline-track.png|800px}}<br />
<br />
Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle. <br />
<br />
To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.<br />
<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|- <br />
| 24f || 0.2626 || <br />
|- <br />
| 28f || 0.3085 || <br />
|- <br />
| 32f || 0.3463 || <br />
|- <br />
| 36f || 0.3741 || <br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 44f || 0.4245 || <br />
|- <br />
| 48f || 0.4554 || <br />
|- <br />
| 52f || 0.4926 || <br />
|- <br />
| 56f || 0.5280 || <br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 64f || 0.6629 || <br />
|- <br />
| 68f || 0.7075 || <br />
|- <br />
| 72f || 0.7445 || <br />
|- <br />
| 76f || 0.7783 || <br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 84f || 0.8253 || <br />
|- <br />
| 88f || 0.8539 || <br />
|- <br />
| 92f || 0.8928 || <br />
|- <br />
| 96f || 0.9375 || <br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
Now look to the graphs again and notice that the X travel is now a ''straight'' line.<br />
<br />
{{l|Image:bline-track2.png|800px}}<br />
<br />
This is the resulting animation and the sifz file. <br />
<br />
{{l|Image:bline.gif}}<br />
<br />
The sample file: {{l|Media:bline.sifz}}<br />
<br />
It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.<br />
<br />
== Mathematical emulation ==<br />
<br />
Anyone want to try? :)<br />
<br />
==Conclusions==</div>Zurba11https://wiki.synfig.org/index.php?title=Doc:Ball_Bounce/ru&diff=16407Doc:Ball Bounce/ru2012-11-18T10:10:30Z<p>Zurba11: /* Создаём прыгающий мяч вручную */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Прыгающий мяч}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
<!-- Page info end --><br />
<br />
В этой статье рассказывается о том как создать анимацию с прыгающим мячом. Мячи в мультиках обычно имеют достаточно причудливую форму когда двигаются и особенно когда ударяются об землю, но заниматься созданием таких деформаций мы будем в следующий раз, а сейчас рассмотрим способы создания самого движения мяча в пространстве.<br />
<br />
==Несколько разных способов достичь результата==<br />
<br />
Есть четыре способа создать прыгающий мяч используя Synfig:<br />
<br />
# Сделать прыгающий мяч вручную, это потребует создания нескольких фиксаторов которые надо расположить так чтобы положение мяча совпадало с параболической траекторией его движения (во времени и пространстве).<br />
# Используя параметр интерполяции фиксаторов, когда они установлены в режим TCB interpolation. Это значительно уменьшает количество необходимых фиксаторов и делает тайминг движения мяча на много проще.<br />
# Используя привязывание к кривой, если вы нарисуете путь по которому должен двигаться мяч используя кривую BLine, то достаточно просто сделать так чтобы мяч следовал вдоль кривой и даже изменял свою скорость во время движения. <br />
# Создать математическое уравнение описывающие движение мяча, это достаточно сложный способ но именно он должен оказаться самым точным из всех.<br />
<br />
== Создаём прыгающий мяч вручную ==<br />
<br />
Принцип создания прыгающего мяча вручную заключается в том чтобы нарисовать желаемую кривую траектории на бумаге, а за тем прочертить от горизонтальной оси линии пересекающие кривую траектории с одинаковыми промежутками между собой. Примерно как на этом рисунке:<br />
<br />
{{l|Image:bounce.jpg|256px}}<br />
<br />
Вы можете заметить что одинаковые промежутки на горизонтальной оси дают на вертикальной оси не одинаковые промежутки, это нормально так как проистекает из природы кривой.<br />
<br />
Определив точки пересечения с кривой в двух измерениях мы можем перенести их в Synfig напрямую, используя для этого сетку. Нарисовав их мы исправляем значения координат так чтобы они были полностью симметричны, что наглядно показано в этой таблице: <br />
<br />
{| <br />
| '''Время''' || '''Позиция X''' || '''Позиция Y''' || '''Комментарий'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Высшая точка<br />
|- <br />
| 4f || -165.0 || 92.0 ||<br />
|- <br />
| 8f || -155.0 || 81.118 ||<br />
|- <br />
| 12f || -145.0 || 63.678 ||<br />
|- <br />
| 16f || -135.0 || 29.479 ||<br />
|- <br />
| 20f || -125.0 || -15.522 || Низшая точка<br />
|- <br />
| 24f || -115.0 || 29.479 ||<br />
|- <br />
| 28f || -105.0 || 63.782 ||<br />
|- <br />
| ... || ... ||<br />
|}<br />
<br />
Вы можете видеть что позиция Х возрастает с шагом в 10.0, а позиция Y воспроизводит параболическую траекторию кривой.<br />
<br />
Чтобы получить большее количество прыжков просто скопируйте фиксаторы (поместите курсор на шкале времени в нужном месте, затем наведите мышь на фиксатор, нажмите правую кнопку мыши и выберите "продублировать") создав симметричное движение. Вам также придётся отредактировать значения Х вручную чтобы они возрастали на 10.0 на каждом новом фиксаторе.<br />
<br />
Ниже вы можете видеть график созданного вручную движения мяча.<br />
<br />
{{l|Image:manual-graph.png|800px}}<br />
<br />
Нижние точки графика не острые, чтобы исправить это нужно поместить большее количество фиксаторов в районе нижней точки (20f). Попробуйте сделать это сами с помощью приложенного файла с исходниками.<br />
<br />
Ниже вы видите готовую анимацию и файл.<br />
<br />
{{l|Image:manual.gif}}<br />
<br />
File: {{l|Media:manual.sifz}}<br />
<br />
==Создаём прыгающий мяч с помощью интерполяции фиксаторов==<br />
<br />
В режиме интерполяции TCB мы можем изменять<br />
<br />
The TCB interpolation mode allows modify the Tension, Continuity, Bias, and Temporal Tension values of the waypoint. So you can create easily smooth or peak aproximation to the value of the valuenode in the waypoint position. <br />
<br />
This time I would use the same values for the highest and lower points of the table before. But I won't use more than one waypoint for each extreme position. The rest of the curve would be done using the TCB parameters.<br />
<br />
The table of waypoints gives this result:<br />
<br />
{| <br />
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Highest point<br />
|- <br />
| 20f || -125.0 || -15.522 || Lower point<br />
|-<br />
| 40f || -75.0 || 92.0 || Highest point<br />
|- <br />
| 60f || -25.0 || -15.522 || Lower point<br />
|- <br />
| ... || ... <br />
|}<br />
<br />
As you can see the number of points is reduced drastically.<br />
<br />
In you only use a default TCB interpolation it would give you a poor result. Look at the graph:<br />
<br />
{{l|Image:waypoint-curves1.png|800px}}<br />
<br />
But if you edit the TCB parameters this is the result you obtain:<br />
<br />
{{l|Image:waypoint-graph2.png|800px}}<br />
<br />
<br />
The TCB parameters are the following:<br />
<br />
{| <br />
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''||'''Tension'''|| '''Continuity'''|| '''Bias'''|| '''Temporal Tension'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Highest point|| 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 20f || -125.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 40f || -75.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 60f || -25.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 80f || 25.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| ... || ... ||... || ... || ... || ... || ... || ...<br />
|}<br />
<br />
<br />
That's the resulting animation:<br />
<br />
{{l|Image:waypoint-2.gif}}<br />
<br />
And the sample file: {{l|Media:waypoint-2.sifz}}<br />
<br />
Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.<br />
<br />
Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values. <br />
<br />
Here is a comparison of both bounces a the same time.<br />
<br />
{{l|Image:waypoint-compare.gif}}<br />
<br />
With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.<br />
<br />
== Ball Bounce following a path ==<br />
<br />
Before reading this section you should be familiar with {{l|Doc:Following_a_BLine}} tutorial. <br />
<br />
The use of a path to perform the bounce has some advantages: <br />
<br />
* You can see the complete ball bounces in one shot.<br />
* You can make the ball rotate along the path (this would allow to make bounces of non round objects).<br />
* You can make bounces to vertical, horizontal or any kind of walls you like. Just draw the path.<br />
<br />
and some disadvantages: <br />
<br />
* It is difficult to control the horizontal movement. It is due to the parameter that moves the object through the path is linked to the number of vertices of the path. If the path has five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.<br />
<br />
The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:<br />
<br />
{{l|Image:bline-path.png}}<br />
<br />
<small> (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)</small><br />
<br />
Once defined then create a circle or the ball you want to move and place it centered at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.<br />
<br />
Once linked you can drag it and it will stick to the bline. <br />
<br />
Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the one you need to animate to move the ball over the Bline. <br />
<br />
Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
This coincides with the main waypoints of the last method we have seen. But look what's the result:<br />
<br />
{{l|Image:bline-track.png|800px}}<br />
<br />
Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle. <br />
<br />
To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.<br />
<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|- <br />
| 24f || 0.2626 || <br />
|- <br />
| 28f || 0.3085 || <br />
|- <br />
| 32f || 0.3463 || <br />
|- <br />
| 36f || 0.3741 || <br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 44f || 0.4245 || <br />
|- <br />
| 48f || 0.4554 || <br />
|- <br />
| 52f || 0.4926 || <br />
|- <br />
| 56f || 0.5280 || <br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 64f || 0.6629 || <br />
|- <br />
| 68f || 0.7075 || <br />
|- <br />
| 72f || 0.7445 || <br />
|- <br />
| 76f || 0.7783 || <br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 84f || 0.8253 || <br />
|- <br />
| 88f || 0.8539 || <br />
|- <br />
| 92f || 0.8928 || <br />
|- <br />
| 96f || 0.9375 || <br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
Now look to the graphs again and notice that the X travel is now a ''straight'' line.<br />
<br />
{{l|Image:bline-track2.png|800px}}<br />
<br />
This is the resulting animation and the sifz file. <br />
<br />
{{l|Image:bline.gif}}<br />
<br />
The sample file: {{l|Media:bline.sifz}}<br />
<br />
It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.<br />
<br />
== Mathematical emulation ==<br />
<br />
Anyone want to try? :)<br />
<br />
==Conclusions==</div>Zurba11https://wiki.synfig.org/index.php?title=Doc:Ball_Bounce/ru&diff=16406Doc:Ball Bounce/ru2012-11-18T09:10:24Z<p>Zurba11: </p>
<hr />
<div><!-- Page info --><br />
{{Title|Прыгающий мяч}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
<!-- Page info end --><br />
<br />
В этой статье рассказывается о том как создать анимацию с прыгающим мячом. Мячи в мультиках обычно имеют достаточно причудливую форму когда двигаются и особенно когда ударяются об землю, но заниматься созданием таких деформаций мы будем в следующий раз, а сейчас рассмотрим способы создания самого движения мяча в пространстве.<br />
<br />
==Несколько разных способов достичь результата==<br />
<br />
Есть четыре способа создать прыгающий мяч используя Synfig:<br />
<br />
# Сделать прыгающий мяч вручную, это потребует создания нескольких фиксаторов которые надо расположить так чтобы положение мяча совпадало с параболической траекторией его движения (во времени и пространстве).<br />
# Используя параметр интерполяции фиксаторов, когда они установлены в режим TCB interpolation. Это значительно уменьшает количество необходимых фиксаторов и делает тайминг движения мяча на много проще.<br />
# Используя привязывание к кривой, если вы нарисуете путь по которому должен двигаться мяч используя кривую BLine, то достаточно просто сделать так чтобы мяч следовал вдоль кривой и даже изменял свою скорость во время движения. <br />
# Создать математическое уравнение описывающие движение мяча, это достаточно сложный способ но именно он должен оказаться самым точным из всех.<br />
<br />
== Создаём прыгающий мяч вручную ==<br />
<br />
Принцип создания прыгающего мяча вручную заключается в том чтобы нарисовать желаемую кривую траектории на бумаге, а за тем прочертить от горизонтальной оси линии пересекающие кривую траектории с одинаковыми промежутками между собой. Примерно как на этом рисунке:<br />
<br />
{{l|Image:bounce.jpg|256px}}<br />
<br />
Вы можете заметить что одинаковые промежутки на горизонтальной оси дают на вертикальной оси не одинаковые промежутки, это нормально так как проистекает из природы кривой.<br />
<br />
Определив точки пересечения с кривой в двух измерениях мы можем перенести их в Synfig напрямую, используя для этого сетку. Нарисовав их мы исправляем значения координат так чтобы они были полностью симметричны, что наглядно показано в этой таблице: <br />
<br />
{| <br />
| '''Время''' || '''Позиция X''' || '''Позиция Y''' || '''Комментарий'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Высшая точка<br />
|- <br />
| 4f || -165.0 || 92.0 ||<br />
|- <br />
| 8f || -155.0 || 81.118 ||<br />
|- <br />
| 12f || -145.0 || 63.678 ||<br />
|- <br />
| 16f || -135.0 || 29.479 ||<br />
|- <br />
| 20f || -125.0 || -15.522 || Низшая точка<br />
|- <br />
| 24f || -115.0 || 29.479 ||<br />
|- <br />
| 28f || -105.0 || 63.782 ||<br />
|- <br />
| ... || ... ||<br />
|}<br />
<br />
Вы можете видеть что позиция Х возрастает с шагом в 10.0, а позиция Y воспроизводит параболическую траекторию кривой.<br />
<br />
Чтобы получить большее количество прыжков просто скопируйте фиксаторы (наведите курсор на фиксатор, нажмите правую кнопку мыши и выберите "продублировать") создав симметричное движение. Вам также придётся отредактировать значения Х вручную чтобы они возрастали на 10.0 на каждом новом фиксаторе.<br />
<br />
Ниже вы можете видеть график созданного вручную движения мяча.<br />
<br />
{{l|Image:manual-graph.png|800px}}<br />
<br />
Нижние точки графика не острые, чтобы исправить это нужно поместить большее количество фиксаторов в районе нижней точки (20f). Попробуйте сделать это сами с помощью приложенного файла с исходниками.<br />
<br />
Ниже вы видите готовую анимацию и файл.<br />
<br />
{{l|Image:manual.gif}}<br />
<br />
File: {{l|Media:manual.sifz}}<br />
<br />
==Создаём прыгающий мяч с помощью интерполяции фиксаторов==<br />
<br />
В режиме интерполяции TCB мы можем изменять<br />
<br />
The TCB interpolation mode allows modify the Tension, Continuity, Bias, and Temporal Tension values of the waypoint. So you can create easily smooth or peak aproximation to the value of the valuenode in the waypoint position. <br />
<br />
This time I would use the same values for the highest and lower points of the table before. But I won't use more than one waypoint for each extreme position. The rest of the curve would be done using the TCB parameters.<br />
<br />
The table of waypoints gives this result:<br />
<br />
{| <br />
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Highest point<br />
|- <br />
| 20f || -125.0 || -15.522 || Lower point<br />
|-<br />
| 40f || -75.0 || 92.0 || Highest point<br />
|- <br />
| 60f || -25.0 || -15.522 || Lower point<br />
|- <br />
| ... || ... <br />
|}<br />
<br />
As you can see the number of points is reduced drastically.<br />
<br />
In you only use a default TCB interpolation it would give you a poor result. Look at the graph:<br />
<br />
{{l|Image:waypoint-curves1.png|800px}}<br />
<br />
But if you edit the TCB parameters this is the result you obtain:<br />
<br />
{{l|Image:waypoint-graph2.png|800px}}<br />
<br />
<br />
The TCB parameters are the following:<br />
<br />
{| <br />
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''||'''Tension'''|| '''Continuity'''|| '''Bias'''|| '''Temporal Tension'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Highest point|| 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 20f || -125.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 40f || -75.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 60f || -25.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 80f || 25.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| ... || ... ||... || ... || ... || ... || ... || ...<br />
|}<br />
<br />
<br />
That's the resulting animation:<br />
<br />
{{l|Image:waypoint-2.gif}}<br />
<br />
And the sample file: {{l|Media:waypoint-2.sifz}}<br />
<br />
Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.<br />
<br />
Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values. <br />
<br />
Here is a comparison of both bounces a the same time.<br />
<br />
{{l|Image:waypoint-compare.gif}}<br />
<br />
With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.<br />
<br />
== Ball Bounce following a path ==<br />
<br />
Before reading this section you should be familiar with {{l|Doc:Following_a_BLine}} tutorial. <br />
<br />
The use of a path to perform the bounce has some advantages: <br />
<br />
* You can see the complete ball bounces in one shot.<br />
* You can make the ball rotate along the path (this would allow to make bounces of non round objects).<br />
* You can make bounces to vertical, horizontal or any kind of walls you like. Just draw the path.<br />
<br />
and some disadvantages: <br />
<br />
* It is difficult to control the horizontal movement. It is due to the parameter that moves the object through the path is linked to the number of vertices of the path. If the path has five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.<br />
<br />
The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:<br />
<br />
{{l|Image:bline-path.png}}<br />
<br />
<small> (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)</small><br />
<br />
Once defined then create a circle or the ball you want to move and place it centered at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.<br />
<br />
Once linked you can drag it and it will stick to the bline. <br />
<br />
Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the one you need to animate to move the ball over the Bline. <br />
<br />
Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
This coincides with the main waypoints of the last method we have seen. But look what's the result:<br />
<br />
{{l|Image:bline-track.png|800px}}<br />
<br />
Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle. <br />
<br />
To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.<br />
<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|- <br />
| 24f || 0.2626 || <br />
|- <br />
| 28f || 0.3085 || <br />
|- <br />
| 32f || 0.3463 || <br />
|- <br />
| 36f || 0.3741 || <br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 44f || 0.4245 || <br />
|- <br />
| 48f || 0.4554 || <br />
|- <br />
| 52f || 0.4926 || <br />
|- <br />
| 56f || 0.5280 || <br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 64f || 0.6629 || <br />
|- <br />
| 68f || 0.7075 || <br />
|- <br />
| 72f || 0.7445 || <br />
|- <br />
| 76f || 0.7783 || <br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 84f || 0.8253 || <br />
|- <br />
| 88f || 0.8539 || <br />
|- <br />
| 92f || 0.8928 || <br />
|- <br />
| 96f || 0.9375 || <br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
Now look to the graphs again and notice that the X travel is now a ''straight'' line.<br />
<br />
{{l|Image:bline-track2.png|800px}}<br />
<br />
This is the resulting animation and the sifz file. <br />
<br />
{{l|Image:bline.gif}}<br />
<br />
The sample file: {{l|Media:bline.sifz}}<br />
<br />
It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.<br />
<br />
== Mathematical emulation ==<br />
<br />
Anyone want to try? :)<br />
<br />
==Conclusions==</div>Zurba11https://wiki.synfig.org/index.php?title=Doc:Ball_Bounce/ru&diff=16405Doc:Ball Bounce/ru2012-11-18T09:00:40Z<p>Zurba11: </p>
<hr />
<div><!-- Page info --><br />
{{Title|Прыгающий мяч}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
<!-- Page info end --><br />
<br />
В этой статье рассказывается о том как создать анимацию с прыгающим мячом. Мячи в мультиках обычно имеют достаточно причудливую форму когда двигаются и особенно когда ударяются об землю, но заниматься созданием таких деформаций мы будем в следующий раз, а сейчас рассмотрим способы создания самого движения мяча в пространстве.<br />
<br />
==Несколько разных способов достичь результата==<br />
<br />
Есть четыре способа создать прыгающий мяч используя Synfig:<br />
<br />
# Сделать прыгающий мяч вручную, это потребует создания нескольких фиксаторов которые надо расположить так чтобы положение мяча совпадало с параболической траекторией его движения (во времени и пространстве).<br />
# Используя параметр интерполяции фиксаторов, когда они установлены в режим TCB interpolation. Это значительно уменьшает количество необходимых фиксаторов и делает тайминг движения мяча на много проще.<br />
# Используя привязывание к кривой, если вы нарисуете путь по которому должен двигаться мяч используя кривую BLine, то достаточно просто сделать так чтобы мяч следовал вдоль кривой и даже изменял свою скорость во время движения. <br />
# Создать математическое уравнение описывающие движение мяча, это достаточно сложный способ но именно он должен оказаться самым точным из всех.<br />
<br />
== Создаём прыгающий мяч вручную ==<br />
<br />
Принцип создания прыгающего мяча вручную заключается в том чтобы нарисовать желаемую кривую траектории на бумаге, а за тем прочертить от горизонтальной оси линии пересекающие кривую траектории с одинаковыми промежутками между собой. Примерно как на этом рисунке:<br />
<br />
{{l|Image:bounce.jpg|256px}}<br />
<br />
Вы можете заметить что одинаковые промежутки на горизонтальной оси дают на вертикальной оси не одинаковые промежутки, это нормально так как проистекает из природы кривой.<br />
<br />
Определив точки пересечения с кривой в двух измерениях мы можем перенести их в Synfig напрямую, используя для этого сетку. Нарисовав их мы исправляем значения координат так чтобы они были полностью симметричны, что наглядно показано в этой таблице: <br />
<br />
{| <br />
| '''Время''' || '''Позиция X''' || '''Позиция Y''' || '''Комментарий'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Высшая точка<br />
|- <br />
| 4f || -165.0 || 92.0 ||<br />
|- <br />
| 8f || -155.0 || 81.118 ||<br />
|- <br />
| 12f || -145.0 || 63.678 ||<br />
|- <br />
| 16f || -135.0 || 29.479 ||<br />
|- <br />
| 20f || -125.0 || -15.522 || Низшая точка<br />
|- <br />
| 24f || -115.0 || 29.479 ||<br />
|- <br />
| 28f || -105.0 || 63.782 ||<br />
|- <br />
| ... || ... ||<br />
|}<br />
<br />
Вы можете видеть что позиция Х возрастает с шагом в 10.0, а позиция Y воспроизводит параболическую траекторию кривой.<br />
<br />
Чтобы получить большее количество прыжков просто скопируйте фиксаторы (наведите курсор на фиксатор, нажмите правую кнопку мыши и выберите "продублировать") создав симметричное движение. Вам также придётся отредактировать значения Х вручную чтобы они возрастали на 10.0 на каждом новом фиксаторе.<br />
<br />
На рисунке вы можете видеть график созданного вручную движения мяча.<br />
<br />
{{l|Image:manual-graph.png|800px}}<br />
<br />
Нижние точки графика не острые, чтобы исправить это нужно поместить большее количество фиксаторов в районе нижнего кадра (20f). Попробуйте сделать это сами с помощью приложенного файла с исходниками.<br />
<br />
Ниже вы видите готовую анимацию и файл.<br />
<br />
The lower points are not peak points. To do that you need to insert more waypoints in intermediate places around the lower frame (20f). TRy it by your self with the attached file.<br />
<br />
The resulting animation and file are those ones.<br />
<br />
{{l|Image:manual.gif}}<br />
<br />
File: {{l|Media:manual.sifz}}<br />
<br />
== Ball Bounce using waypoints interpolations==<br />
<br />
The TCB interpolation mode allows modify the Tension, Continuity, Bias, and Temporal Tension values of the waypoint. So you can create easily smooth or peak aproximation to the value of the valuenode in the waypoint position. <br />
<br />
This time I would use the same values for the highest and lower points of the table before. But I won't use more than one waypoint for each extreme position. The rest of the curve would be done using the TCB parameters.<br />
<br />
The table of waypoints gives this result:<br />
<br />
{| <br />
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Highest point<br />
|- <br />
| 20f || -125.0 || -15.522 || Lower point<br />
|-<br />
| 40f || -75.0 || 92.0 || Highest point<br />
|- <br />
| 60f || -25.0 || -15.522 || Lower point<br />
|- <br />
| ... || ... <br />
|}<br />
<br />
As you can see the number of points is reduced drastically.<br />
<br />
In you only use a default TCB interpolation it would give you a poor result. Look at the graph:<br />
<br />
{{l|Image:waypoint-curves1.png|800px}}<br />
<br />
But if you edit the TCB parameters this is the result you obtain:<br />
<br />
{{l|Image:waypoint-graph2.png|800px}}<br />
<br />
<br />
The TCB parameters are the following:<br />
<br />
{| <br />
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''||'''Tension'''|| '''Continuity'''|| '''Bias'''|| '''Temporal Tension'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Highest point|| 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 20f || -125.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 40f || -75.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 60f || -25.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 80f || 25.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| ... || ... ||... || ... || ... || ... || ... || ...<br />
|}<br />
<br />
<br />
That's the resulting animation:<br />
<br />
{{l|Image:waypoint-2.gif}}<br />
<br />
And the sample file: {{l|Media:waypoint-2.sifz}}<br />
<br />
Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.<br />
<br />
Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values. <br />
<br />
Here is a comparison of both bounces a the same time.<br />
<br />
{{l|Image:waypoint-compare.gif}}<br />
<br />
With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.<br />
<br />
== Ball Bounce following a path ==<br />
<br />
Before reading this section you should be familiar with {{l|Doc:Following_a_BLine}} tutorial. <br />
<br />
The use of a path to perform the bounce has some advantages: <br />
<br />
* You can see the complete ball bounces in one shot.<br />
* You can make the ball rotate along the path (this would allow to make bounces of non round objects).<br />
* You can make bounces to vertical, horizontal or any kind of walls you like. Just draw the path.<br />
<br />
and some disadvantages: <br />
<br />
* It is difficult to control the horizontal movement. It is due to the parameter that moves the object through the path is linked to the number of vertices of the path. If the path has five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.<br />
<br />
The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:<br />
<br />
{{l|Image:bline-path.png}}<br />
<br />
<small> (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)</small><br />
<br />
Once defined then create a circle or the ball you want to move and place it centered at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.<br />
<br />
Once linked you can drag it and it will stick to the bline. <br />
<br />
Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the one you need to animate to move the ball over the Bline. <br />
<br />
Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
This coincides with the main waypoints of the last method we have seen. But look what's the result:<br />
<br />
{{l|Image:bline-track.png|800px}}<br />
<br />
Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle. <br />
<br />
To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.<br />
<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|- <br />
| 24f || 0.2626 || <br />
|- <br />
| 28f || 0.3085 || <br />
|- <br />
| 32f || 0.3463 || <br />
|- <br />
| 36f || 0.3741 || <br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 44f || 0.4245 || <br />
|- <br />
| 48f || 0.4554 || <br />
|- <br />
| 52f || 0.4926 || <br />
|- <br />
| 56f || 0.5280 || <br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 64f || 0.6629 || <br />
|- <br />
| 68f || 0.7075 || <br />
|- <br />
| 72f || 0.7445 || <br />
|- <br />
| 76f || 0.7783 || <br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 84f || 0.8253 || <br />
|- <br />
| 88f || 0.8539 || <br />
|- <br />
| 92f || 0.8928 || <br />
|- <br />
| 96f || 0.9375 || <br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
Now look to the graphs again and notice that the X travel is now a ''straight'' line.<br />
<br />
{{l|Image:bline-track2.png|800px}}<br />
<br />
This is the resulting animation and the sifz file. <br />
<br />
{{l|Image:bline.gif}}<br />
<br />
The sample file: {{l|Media:bline.sifz}}<br />
<br />
It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.<br />
<br />
== Mathematical emulation ==<br />
<br />
Anyone want to try? :)<br />
<br />
==Conclusions==</div>Zurba11https://wiki.synfig.org/index.php?title=Doc:Ball_Bounce/ru&diff=16396Doc:Ball Bounce/ru2012-11-03T11:39:47Z<p>Zurba11: /* Создаём прыгающий мяч вручную */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Прыгающий мяч}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
<!-- Page info end --><br />
<br />
В этой статье рассказывается о том как создать анимацию с прыгающим мячом. Мячи в мультиках обычно имеют достаточно причудливую форму когда двигаются и особенно когда ударяются об землю, но заниматься созданием таких деформаций мы будем в следующий раз, а сейчас рассмотрим способы создания самого движения мяча в пространстве.<br />
<br />
<br />
==Несколько разных способов достичь результата==<br />
<br />
Есть четыре способа создать прыгающий мяч используя Synfig:<br />
<br />
<br />
<br />
# Сделать прыгающий мяч вручную, это потребует создания нескольких фиксаторов которые надо расположить так чтобы положение мяча совпадало с параболической траекторией его движения (во времени и пространстве).<br />
# Используя параметр интерполяции фиксаторов, когда они установлены в режим TCB interpolation. Это значительно уменьшает количество необходимых фиксаторов и делает тайминг движения мяча на много проще.<br />
# Используя привязывание к кривой, если вы нарисуете путь по которому должен двигаться мяч используя кривую BLine, то достаточно просто сделать так чтобы мяч следовал вдоль кривой и даже изменял свою скорость во время движения. <br />
# Создать математическое уравнение описывающие движение мяча, это достаточно сложный способ но именно он должен оказаться самым точным из всех.<br />
<br />
== Создаём прыгающий мяч вручную ==<br />
<br />
Принцип создания прыгающего мяча вручную заключается в том чтобы нарисовать желаемую кривую траектории на бумаге, а за тем прочертить от горизонтальной оси линии пересекающие кривую траектории с одинаковыми промежутками между собой. Примерно как на этом рисунке:<br />
<br />
{{l|Image:bounce.jpg|256px}}<br />
<br />
Вы можете заметить что одинаковые промежутки на горизонтальной оси дают на вертикальной оси не одинаковые промежутки, это нормально так как проистекает из природы кривой.<br />
<br />
Определив точки пересечения с кривой в двух измерениях мы можем перенести их в Synfig напрямую, используя для этого сетку. Нарисовав их мы исправляем значения координат так чтобы они были полностью симметричны, что наглядно показано на этой таблице: <br />
<br />
{| <br />
| '''Время''' || '''X''' || '''Y''' || '''Коментарий'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Высшая точка<br />
|- <br />
| 4f || -165.0 || 92.0 ||<br />
|- <br />
| 8f || -155.0 || 81.118 ||<br />
|- <br />
| 12f || -145.0 || 63.678 ||<br />
|- <br />
| 16f || -135.0 || 29.479 ||<br />
|- <br />
| 20f || -125.0 || -15.522 || Низшая точка<br />
|- <br />
| 24f || -115.0 || 29.479 ||<br />
|- <br />
| 28f || -105.0 || 63.782 ||<br />
|- <br />
| ... || ... ||<br />
|}<br />
<br />
Вы можете видеть что позиция Х возрастает с шагом в 10.0, а позиция Y воспроизводит параболическую траекторию кривой.<br />
<br />
Чтобы получить большее количество прыжков просто скопируйте фиксаторы. Вам также придётся отредактировать значения Х вручную чтобы они возрастали на 10.0 на каждом новом фиксаторе.<br />
<br />
To proceed with more than one bounce just duplicate the waypoints (place the cursor at the right place right click over the waypoint and duplicate) reproducing symmetrical movements. You should need to edit the X values manually to decrease by 10.0 for each new waypoint. <br />
<br />
This is the resulting graph for the manual approximation to the ball bounce.<br />
<br />
{{l|Image:manual-graph.png|800px}}<br />
<br />
The lower points are not peak points. To do that you need to insert more waypoints in intermediate places around the lower frame (20f). TRy it by your self with the attached file.<br />
<br />
The resulting animation and file are those ones.<br />
<br />
{{l|Image:manual.gif}}<br />
<br />
File: {{l|Media:manual.sifz}}<br />
<br />
== Ball Bounce using waypoints interpolations==<br />
<br />
The TCB interpolation mode allows modify the Tension, Continuity, Bias, and Temporal Tension values of the waypoint. So you can create easily smooth or peak aproximation to the value of the valuenode in the waypoint position. <br />
<br />
This time I would use the same values for the highest and lower points of the table before. But I won't use more than one waypoint for each extreme position. The rest of the curve would be done using the TCB parameters.<br />
<br />
The table of waypoints gives this result:<br />
<br />
{| <br />
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Highest point<br />
|- <br />
| 20f || -125.0 || -15.522 || Lower point<br />
|-<br />
| 40f || -75.0 || 92.0 || Highest point<br />
|- <br />
| 60f || -25.0 || -15.522 || Lower point<br />
|- <br />
| ... || ... <br />
|}<br />
<br />
As you can see the number of points is reduced drastically.<br />
<br />
In you only use a default TCB interpolation it would give you a poor result. Look at the graph:<br />
<br />
{{l|Image:waypoint-curves1.png|800px}}<br />
<br />
But if you edit the TCB parameters this is the result you obtain:<br />
<br />
{{l|Image:waypoint-graph2.png|800px}}<br />
<br />
<br />
The TCB parameters are the following:<br />
<br />
{| <br />
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''||'''Tension'''|| '''Continuity'''|| '''Bias'''|| '''Temporal Tension'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Highest point|| 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 20f || -125.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 40f || -75.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 60f || -25.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 80f || 25.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| ... || ... ||... || ... || ... || ... || ... || ...<br />
|}<br />
<br />
<br />
That's the resulting animation:<br />
<br />
{{l|Image:waypoint-2.gif}}<br />
<br />
And the sample file: {{l|Media:waypoint-2.sifz}}<br />
<br />
Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.<br />
<br />
Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values. <br />
<br />
Here is a comparison of both bounces a the same time.<br />
<br />
{{l|Image:waypoint-compare.gif}}<br />
<br />
With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.<br />
<br />
== Ball Bounce following a path ==<br />
<br />
Before reading this section you should be familiar with {{l|Doc:Following_a_BLine}} tutorial. <br />
<br />
The use of a path to perform the bounce has some advantages: <br />
<br />
* You can see the complete ball bounces in one shot.<br />
* You can make the ball rotate along the path (this would allow to make bounces of non round objects).<br />
* You can make bounces to vertical, horizontal or any kind of walls you like. Just draw the path.<br />
<br />
and some disadvantages: <br />
<br />
* It is difficult to control the horizontal movement. It is due to the parameter that moves the object through the path is linked to the number of vertices of the path. If the path has five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.<br />
<br />
The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:<br />
<br />
{{l|Image:bline-path.png}}<br />
<br />
<small> (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)</small><br />
<br />
Once defined then create a circle or the ball you want to move and place it centered at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.<br />
<br />
Once linked you can drag it and it will stick to the bline. <br />
<br />
Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the one you need to animate to move the ball over the Bline. <br />
<br />
Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
This coincides with the main waypoints of the last method we have seen. But look what's the result:<br />
<br />
{{l|Image:bline-track.png|800px}}<br />
<br />
Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle. <br />
<br />
To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.<br />
<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|- <br />
| 24f || 0.2626 || <br />
|- <br />
| 28f || 0.3085 || <br />
|- <br />
| 32f || 0.3463 || <br />
|- <br />
| 36f || 0.3741 || <br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 44f || 0.4245 || <br />
|- <br />
| 48f || 0.4554 || <br />
|- <br />
| 52f || 0.4926 || <br />
|- <br />
| 56f || 0.5280 || <br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 64f || 0.6629 || <br />
|- <br />
| 68f || 0.7075 || <br />
|- <br />
| 72f || 0.7445 || <br />
|- <br />
| 76f || 0.7783 || <br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 84f || 0.8253 || <br />
|- <br />
| 88f || 0.8539 || <br />
|- <br />
| 92f || 0.8928 || <br />
|- <br />
| 96f || 0.9375 || <br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
Now look to the graphs again and notice that the X travel is now a ''straight'' line.<br />
<br />
{{l|Image:bline-track2.png|800px}}<br />
<br />
This is the resulting animation and the sifz file. <br />
<br />
{{l|Image:bline.gif}}<br />
<br />
The sample file: {{l|Media:bline.sifz}}<br />
<br />
It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.<br />
<br />
== Mathematical emulation ==<br />
<br />
Anyone want to try? :)<br />
<br />
==Conclusions==</div>Zurba11https://wiki.synfig.org/index.php?title=Doc:Ball_Bounce/ru&diff=16395Doc:Ball Bounce/ru2012-11-03T11:05:48Z<p>Zurba11: /* Manual Ball Bounce */</p>
<hr />
<div><!-- Page info --><br />
{{Title|Прыгающий мяч}}<br />
{{Category|Tutorials}}<br />
{{Category|Tutorials Intermediate}}<br />
<!-- Page info end --><br />
<br />
В этой статье рассказывается о том как создать анимацию с прыгающим мячом. Мячи в мультиках обычно имеют достаточно причудливую форму когда двигаются и особенно когда ударяются об землю, но заниматься созданием таких деформаций мы будем в следующий раз, а сейчас рассмотрим способы создания самого движения мяча в пространстве.<br />
<br />
<br />
==Несколько разных способов достичь результата==<br />
<br />
Есть четыре способа создать прыгающий мяч используя Synfig:<br />
<br />
<br />
<br />
# Сделать прыгающий мяч вручную, это потребует создания нескольких фиксаторов которые надо расположить так чтобы положение мяча совпадало с параболической траекторией его движения (во времени и пространстве).<br />
# Используя параметр интерполяции фиксаторов, когда они установлены в режим TCB interpolation. Это значительно уменьшает количество необходимых фиксаторов и делает тайминг движения мяча на много проще.<br />
# Используя привязывание к кривой, если вы нарисуете путь по которому должен двигаться мяч используя кривую BLine, то достаточно просто сделать так чтобы мяч следовал вдоль кривой и даже изменял свою скорость во время движения. <br />
# Создать математическое уравнение описывающие движение мяча, это достаточно сложный способ но именно он должен оказаться самым точным из всех.<br />
<br />
== Создаём прыгающий мяч вручную ==<br />
<br />
Принцип создания прыгающего мяча вручную заключается в том чтобы нарисовать желаемую кривую траектории на бумаге, а за тем прочертить от горизонтальной оси линии пересекающие кривую траектории с одинаковыми промежутками между собой. Примерно как на этом рисунке:<br />
<br />
{{l|Image:bounce.jpg|256px}}<br />
<br />
You can notice that having regular intervals in the horizontal axis gives irregular intervals to the vertical axis. It is due to the nature of the curve. <br />
<br />
Once the points are located in a 2D grid then it can be drawn directly in Synfig doing use of the grid (F11). After drawing them we normalized the values to be completely symmetrical. That gives the following table:<br />
<br />
{| <br />
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Highest point<br />
|- <br />
| 4f || -165.0 || 92.0 ||<br />
|- <br />
| 8f || -155.0 || 81.118 ||<br />
|- <br />
| 12f || -145.0 || 63.678 ||<br />
|- <br />
| 16f || -135.0 || 29.479 ||<br />
|- <br />
| 20f || -125.0 || -15.522 || Lower point<br />
|- <br />
| 24f || -115.0 || 29.479 ||<br />
|- <br />
| 28f || -105.0 || 63.782 ||<br />
|- <br />
| ... || ... ||<br />
|}<br />
<br />
You can see that the X position is increasing in steps of 10.0 and the Y position reproduces a parabolic curve.<br />
<br />
To proceed with more than one bounce just duplicate the waypoints (place the cursor at the right place right click over the waypoint and duplicate) reproducing symmetrical movements. You should need to edit the X values manually to decrease by 10.0 for each new waypoint. <br />
<br />
This is the resulting graph for the manual approximation to the ball bounce.<br />
<br />
{{l|Image:manual-graph.png|800px}}<br />
<br />
The lower points are not peak points. To do that you need to insert more waypoints in intermediate places around the lower frame (20f). TRy it by your self with the attached file.<br />
<br />
The resulting animation and file are those ones.<br />
<br />
{{l|Image:manual.gif}}<br />
<br />
File: {{l|Media:manual.sifz}}<br />
<br />
== Ball Bounce using waypoints interpolations==<br />
<br />
The TCB interpolation mode allows modify the Tension, Continuity, Bias, and Temporal Tension values of the waypoint. So you can create easily smooth or peak aproximation to the value of the valuenode in the waypoint position. <br />
<br />
This time I would use the same values for the highest and lower points of the table before. But I won't use more than one waypoint for each extreme position. The rest of the curve would be done using the TCB parameters.<br />
<br />
The table of waypoints gives this result:<br />
<br />
{| <br />
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Highest point<br />
|- <br />
| 20f || -125.0 || -15.522 || Lower point<br />
|-<br />
| 40f || -75.0 || 92.0 || Highest point<br />
|- <br />
| 60f || -25.0 || -15.522 || Lower point<br />
|- <br />
| ... || ... <br />
|}<br />
<br />
As you can see the number of points is reduced drastically.<br />
<br />
In you only use a default TCB interpolation it would give you a poor result. Look at the graph:<br />
<br />
{{l|Image:waypoint-curves1.png|800px}}<br />
<br />
But if you edit the TCB parameters this is the result you obtain:<br />
<br />
{{l|Image:waypoint-graph2.png|800px}}<br />
<br />
<br />
The TCB parameters are the following:<br />
<br />
{| <br />
| '''Time''' || '''X position''' || '''Y position''' || '''Comments'''||'''Tension'''|| '''Continuity'''|| '''Bias'''|| '''Temporal Tension'''<br />
|- <br />
| 0f || -175.0 || 92.0 || Highest point|| 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 20f || -125.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 40f || -75.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| 60f || -25.0 || -15.522 || Lower point || 0.0 || -2.2 || 0.0 || 0.0<br />
|-<br />
| 80f || 25.0 || 92.0 || Highest point || 0.0 || 0.0 || 0.0 || 0.0<br />
|- <br />
| ... || ... ||... || ... || ... || ... || ... || ...<br />
|}<br />
<br />
<br />
That's the resulting animation:<br />
<br />
{{l|Image:waypoint-2.gif}}<br />
<br />
And the sample file: {{l|Media:waypoint-2.sifz}}<br />
<br />
Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve. To solve that you should split the X and Y coordinates of the Origin and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.<br />
<br />
Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values. <br />
<br />
Here is a comparison of both bounces a the same time.<br />
<br />
{{l|Image:waypoint-compare.gif}}<br />
<br />
With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.<br />
<br />
== Ball Bounce following a path ==<br />
<br />
Before reading this section you should be familiar with {{l|Doc:Following_a_BLine}} tutorial. <br />
<br />
The use of a path to perform the bounce has some advantages: <br />
<br />
* You can see the complete ball bounces in one shot.<br />
* You can make the ball rotate along the path (this would allow to make bounces of non round objects).<br />
* You can make bounces to vertical, horizontal or any kind of walls you like. Just draw the path.<br />
<br />
and some disadvantages: <br />
<br />
* It is difficult to control the horizontal movement. It is due to the parameter that moves the object through the path is linked to the number of vertices of the path. If the path has five vertices and it is an open Bline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the Bline section between vertices.<br />
<br />
The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this Bline:<br />
<br />
{{l|Image:bline-path.png}}<br />
<br />
<small> (You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)</small><br />
<br />
Once defined then create a circle or the ball you want to move and place it centered at the origin (0,0). I prefer that you encapsulate it and use the paste canvas origin parameter to make the animation. Once encapsulated select the bline you have created and the paste canvas of the encapsulated ball and select the Origin duck of the paste canvas. Then right click over the bline (avoiding any duck) and select "Link to Bline". You can see my green ball in the figure.<br />
<br />
Once linked you can drag it and it will stick to the bline. <br />
<br />
Now expand the Origin parameter of the paste canvas layer of the encapsulated ball and search for the Amount parameter. This parameter is the one you need to animate to move the ball over the Bline. <br />
<br />
Considering the example, the bline has 6 vertices and 5 bline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
This coincides with the main waypoints of the last method we have seen. But look what's the result:<br />
<br />
{{l|Image:bline-track.png|800px}}<br />
<br />
Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle. <br />
<br />
To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.<br />
<br />
<br />
{| <br />
| '''Time''' || '''Amount''' || '''Comments'''<br />
|- <br />
| 0f || 0.0 || Highest point<br />
|- <br />
| 20f || 0.2 || Lower point<br />
|- <br />
| 24f || 0.2626 || <br />
|- <br />
| 28f || 0.3085 || <br />
|- <br />
| 32f || 0.3463 || <br />
|- <br />
| 36f || 0.3741 || <br />
|-<br />
| 40f || 0.4 || Highest point<br />
|- <br />
| 44f || 0.4245 || <br />
|- <br />
| 48f || 0.4554 || <br />
|- <br />
| 52f || 0.4926 || <br />
|- <br />
| 56f || 0.5280 || <br />
|- <br />
| 60f || 0.6 || Lower point<br />
|- <br />
| 64f || 0.6629 || <br />
|- <br />
| 68f || 0.7075 || <br />
|- <br />
| 72f || 0.7445 || <br />
|- <br />
| 76f || 0.7783 || <br />
|- <br />
| 80f || 0.8 || Highest point<br />
|- <br />
| 84f || 0.8253 || <br />
|- <br />
| 88f || 0.8539 || <br />
|- <br />
| 92f || 0.8928 || <br />
|- <br />
| 96f || 0.9375 || <br />
|- <br />
| 100f || 1.0 || Lower point<br />
|}<br />
<br />
Now look to the graphs again and notice that the X travel is now a ''straight'' line.<br />
<br />
{{l|Image:bline-track2.png|800px}}<br />
<br />
This is the resulting animation and the sifz file. <br />
<br />
{{l|Image:bline.gif}}<br />
<br />
The sample file: {{l|Media:bline.sifz}}<br />
<br />
It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.<br />
<br />
== Mathematical emulation ==<br />
<br />
Anyone want to try? :)<br />
<br />
==Conclusions==</div>Zurba11