1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"><!-- InstanceBegin template="/Templates/default_template.dwt" codeOutsideHTMLIsLocked="false" --> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5<meta http-equiv="Content-Style-Type" content="text/css" /> 6<!-- InstanceBeginEditable name="CSS の相対パス指定" --> 7<link href="../../../common/manual.css" rel="stylesheet" type="text/css" /> 8<!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="ページのタイトル" --> 9<title>Animation Curves</title> 10<!-- InstanceEndEditable --> 11</head> 12<body> 13<div> 14 <div class="body"> <!-- InstanceBeginEditable name="本文のタイトル" --> 15 <h1>Animation Curves</h1> 16 <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="本文" --> 17 <p>This section describes the types of <I>animation curves</I> you can configure in CreativeStudio's <B>Curve Editor</B> panel.</p> 18 <h2>About Animation Curves</h2> 19 <p>An <I>animation curve</I> is a curve that controls animations. To read details about animation curves, see <a href="../../../glossary/index.html#animation_curv">here</a>.</p> 20 <h2>Key Frames</h2> 21 <p>This section describes key frames.<br /> The table below lists the types of information that can be stored in animation curve <I>keys</I>.</p> 22 <table> 23 <thead> 24 <tr> 25 <th>Information Type</th> 26 <th>Description</th> 27 </tr> 28 </thead> 29 <tbody> 30 <tr> 31 <th>Frame</th> 32 <td>Time specifying a key.<br /> Specifies the number of frames.</td> 33 </tr> 34 <tr> 35 <th>Value</th> 36 <td>The key's value.<br /> The value to specify differs depending on the animation elements.</td> 37 </tr> 38 <tr> 39 <th>Slope</th> 40 <td>The key's slope.<br /> Specifies the vertical length for a horizontal length of 1.</td> 41 </tr> 42 </tbody> 43 </table> 44 <p> </p> 45 <p>You can select from among <I>four animation-curve formats</I> to fit your purpose of using animation.</p> 46 <p>The table below describes the <I>animation curves</I> you can work with in CreativeStudio.</p> 47 <table> 48 <thead> 49 <tr> 50 <th>Type</th> 51 <th>Description</th> 52 </tr> 53 </thead> 54 <tbody> 55 <tr> 56 <th>Constant</th> 57 <td>The value between keyframes is always constant.</td> 58 </tr> 59 <tr> 60 <th>Step</th> 61 <td>The value between keyframes changes at irregular intervals.</td> 62 </tr> 63 <tr> 64 <th>Linear</th> 65 <td>The value between keyframes changes linearly.</td> 66 </tr> 67 <tr> 68 <th>Hermite</th> 69 <td>The value between keyframes changes smoothly.<br /> By moving the slope for both keyframes, you can adjust the key slope.</td> 70 </tr> 71 </tbody> 72 </table> 73 <h3>Constant Format</h3><!-- #BeginLibraryItem "/Library/glossary_animation_curve_constant.lbi" --> <!-- コンスタント形式 ( constant curve ) --> 74 <p>Constant format only saves a single <I>value</I> for each key. It doesn't perform any special calculation.</p> 75 <!-- #EndLibraryItem --><p>The figure below shows constant format. The horizontal axis is time (frames) and the vertical axis is the value.</p> 76 <img class="user_guide_chart" src="assets/animation_curve_constant.png" alt="Constant Curve"/> 77 <h3>Step Format</h3> 78 <!-- #BeginLibraryItem "/Library/glossary_animation_curve_step.lbi" --> <!-- ステップ形式 ( step curve ) --> 79 <p>Step format saves a set of key information consisting of a <I>frame</I> and a <I>value</I>. The value at a given frame is looked up based on the value at the previous frame.</p> 80 <!-- #EndLibraryItem --> 81 <p>The figure below shows step format.</p> 82 <img class="user_guide_chart" src="assets/animation_curve_step.png" alt="Step Curve"/> 83 <h3>Linear Format</h3> 84 <!-- #BeginLibraryItem "/Library/glossary_animation_curve_linear.lbi" --> <!-- リニア形式 ( linear curve ) --> 85 <p>Linear format saves a set of key information consisting of a <I>frame</I> and a <I>value</I>. The value at a given frame is calculated by <I>linearly interpolating</I> between the values of the two neighboring keys.</p> 86 <!-- #EndLibraryItem --> 87 <p>The figure below shows linear format.</p> 88 <img class="user_guide_chart" src="assets/animation_curve_linear.png" alt="Linear Curve"/> 89 <h3>Hermite Format</h3> 90 <!-- #BeginLibraryItem "/Library/glossary_animation_curve_hermite.lbi" --> <!-- エルミート式 ( hermite curve ) --> 91 <p>Hermite format saves a set of key information consisting of a <I>frame</I>, a <I>value</I>, and <I>slope</I>. The value at a given frame is calculated by using the <I>Hermite formula</I> to interpolate between the values of the two neighboring keys. 92 </p> 93 <!-- #EndLibraryItem --> 94 <p>The figure below shows Hermite format.</p> 95 <img class="user_guide_chart" src="assets/animation_curve_hermite.png" alt="Hermite Curve"/> 96 <p class="hint">When specifying a key, specify one of four keyframe formats depending on the intended use of the animation to reduce the <I>amount of data</I> that must be stored in each key and the <I>amount of calculation</I> that must be done to interpolate between keys.</p> 97 <h2>Creating an Animation Curve</h2> 98 <p>This section explains how to create an animation curve.</p> 99 <h3>Adjusting Slope</h3> 100 <p>When a keyframe is in <I>Hermite format</I>, you can create a smooth animation by adjusting the slope. To read details about slopes, see <a href="../../../glossary/index.html#slope">here</a>.</p> 101 <p>The figure below shows an example where the left-side slope value is set to 1.0 and the right-side slope value is set to 1.0.</p> 102 <img class="user_guide_chart" src="assets/animation_curve_slope_value01.png" alt="Slope Values"/> 103 <p>The figure below shows an example where the left-side slope value is set to -2.0 and the right-side slope value is set to 2.0.</p> 104 <img class="user_guide_chart" src="assets/animation_curve_slope_value02.png" alt="Slope Values"/> 105 <h3>Creating Animations for Specific Uses</h3> 106 <p>You can create <I>Hermite format</I> and <I>linear format</I> animation curves depending on the intended use of the animation.</p> 107 <h4>One-time Animation</h4> 108 <p>This is an animation with different starting and ending frame states. Create an animation curve for an animation that will be played through once.</p> 109 <p>The figure below shows a sample animation curve for a one-time animation, created in CreativeStudio from frame 0 through frame 4.</p> 110 <img class="user_guide_chart" src="assets/animation_curve_onetime_anim.png" alt="One-time Animation"/> 111 <p>If you play only integer frames, the five frames 0, 1, 2, 3, and 4 are displayed. If you play in slow motion in CreativeStudio, frames 0.0 through 4.0 are displayed, and from frame 4.0 to 4.99, the displayed image is static.</p> 112 <h4>Loop Animation</h4> 113 <!-- #BeginLibraryItem "/Library/glossary_animation_curve_loop.lbi" --> <!-- ループアニメーション ( animation＿curve_loop ) --> 114 <p>A <I>loop animation</I> is an animation in which the ending frame transitions smoothly into the starting frame. To create one, create an animation curve that will transition smoothly when looped.</p> 115 <!-- #EndLibraryItem --> 116 <p class="warning">Create an animation curve using a 3DCG tool so that the start frame and end frame are in the same state.</p> 117 <p>The figure below shows a sample animation curve for a loop animation, created in CreativeStudio from frame 0 through frame 4.</p> 118 <img class="user_guide_chart" src="assets/animation_curve_loop_anim.png" alt="Loop Animation"/> 119 <p>If you play only integer frames, the four frames 0, 1, 2, and 3 are displayed. If you play in slow motion in CreativeStudio, frames 0.0 through 3.99 are displayed. When playback reaches frame 4.0, the display loops back to frame 0.0.</p> 120 <h2>Outputting an Animation Curve</h2> 121 <p>This section explains the process of <I>baking</I> that is done when the animation curve is output.</p> 122 <h3>Animation Curve Baking</h3> 123 <!-- #BeginLibraryItem "/Library/glossary_animation_curve_bake.lbi" --> <!-- アニメーションカーブのベイク ( bake animation curve ) --> 124 <p><em>Animation curve baking</em> is an optimization process performed when outputting an animation created with a 3DCG tool as game data.<br /> When an animation curve is created using methods such as Hermite curve interpolation, the calculations required to interpolate between two neighboring keys requires some processing overhead. By "baking" the animation curves, programmers and artists can keep this calculation overhead in check.</p> 125 <!-- #EndLibraryItem --><!-- InstanceEndEditable --> </div> 126 <div class="footer" /> 127</div> 128<hr><p>CONFIDENTIAL</p></body> 129<!-- InstanceEnd --></html> 130
