圈圈之地

代码： 全选

<div id="contentInner">
                <h1 id="basic-usage">基本用法</h1>

<ul id="markdown-toc">
  <li><a href="#basic-usage" id="markdown-toc-basic-usage">基本用法</a>    <ul>
      <li><a href="#project-and-first-scene-creation" id="markdown-toc-project-and-first-scene-creation">專案與第一個場景建立</a></li>
      <li><a href="#canvas-zooming-and-panning" id="markdown-toc-canvas-zooming-and-panning">畫布縮放與平移</a></li>
      <li><a href="#creating-assets" id="markdown-toc-creating-assets">建立資產</a></li>
      <li><a href="#importing-and-linking" id="markdown-toc-importing-and-linking">匯入與連結</a></li>
      <li><a href="#basic-animation" id="markdown-toc-basic-animation">基本動畫</a>        <ul>
          <li><a href="#keyframes" id="markdown-toc-keyframes">關鍵影格</a></li>
          <li><a href="#timeline" id="markdown-toc-timeline">時間軸</a></li>
          <li><a href="#graph-view" id="markdown-toc-graph-view">圖形視圖</a></li>
        </ul>
      </li>
      <li><a href="#preview" id="markdown-toc-preview">預覽</a></li>
      <li><a href="#saving-the-project" id="markdown-toc-saving-the-project">儲存專案</a></li>
      <li><a href="#export" id="markdown-toc-export">匯出</a>        <ul>
          <li><a href="#animated-svg" id="markdown-toc-animated-svg">動畫 SVG</a></li>
          <li><a href="#rendered-animation" id="markdown-toc-rendered-animation">渲染動畫</a></li>
        </ul>
      </li>
      <li><a href="#advanced" id="markdown-toc-advanced">進階</a>        <ul>
          <li><a href="#effects-and-shaders" id="markdown-toc-effects-and-shaders">效果與著色器</a></li>
          <li><a href="#tools" id="markdown-toc-tools">工具</a></li>
          <li><a href="#alignment" id="markdown-toc-alignment">對齊</a></li>
          <li><a href="#layouts" id="markdown-toc-layouts">佈局</a></li>
        </ul>
      </li>
      <li><a href="#learning-resources" id="markdown-toc-learning-resources">學習資源</a>        <ul>
          <li><a href="#tutorials" id="markdown-toc-tutorials">教學</a></li>
          <li><a href="#video-tutorials" id="markdown-toc-video-tutorials">影片教學</a></li>
          <li><a href="#other" id="markdown-toc-other">其他</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<p>在學習<a href="userinterface.html">使用者介面</a>如何運作之後，是時候建立專案、建立或新增一些資產並開始動畫化它們。</p>

<p>重要的是要了解<strong>Friction 不是向量或光柵繪圖軟體，而是一款動畫軟體</strong>。</p>

<p>當然，它可以建立一些基本的向量形狀，例如矩形、正方形、橢圓、圓形、基於節點和貝茲曲線的形狀、手繪曲線，甚至可以匯入位圖影像（光柵），但如果堅持在 Friction 內尋找常見的繪圖工具，設計師可能會錯過許多工具。因此，強烈建議在 Friction 外部設計資產，然後匯入或連結到軟體中。</p>

<p>一些建議用於設計資產的工具如下：</p>

<ul>
  <li><strong>向量圖形設計</strong>
    <ul>
      <li><strong><a href="(https://inkscape.org/)">Inkscape</a></strong></li>
      <li><strong><a href="https://affinity.serif.com/en-us/designer/">Affinity Designer</a></strong></li>
      <li>任何能夠匯出至 SVG 向量圖形檔案的軟體。</li>
    </ul>
  </li>
  <li><strong>位圖圖形設計</strong>
    <ul>
      <li><strong><a href="(https://krita.org/)">Krita</a></strong></li>
      <li><strong><a href="(https://www.gimp.org/)">Gimp</a></strong></li>
      <li><strong><a href="https://affinity.serif.com/en-us/photo/">Affinity Photo</a></strong></li>
      <li>任何能夠匯出至 JPEG、PNG 或 WEBP 影像檔案的軟體。</li>
    </ul>
  </li>
</ul>

<h2 id="project-and-first-scene-creation">專案與第一個場景建立</h2>

<p>開啟 Friction 後，畫布面板將提示使用者：</p>
<ul>
  <li><strong>新建</strong>：建立新專案。</li>
  <li><strong>開啟</strong>：使用作業系統檔案瀏覽器開啟現有 Friction 專案。</li>
  <li><strong>最近檔案</strong>：開啟先前開啟的 Friction 專案。點擊按鈕可取得依日期排序（最新至最舊）的可用專案清單。</li>
</ul>

<p><img src="/assets/documentation/usage/usage_startup.png" alt="Startup window" /></p>

<p>假設這是使用者第一次開啟 Friction，請點擊<code class="language-plaintext highlighter-rouge">新建</code>以建立新專案。一個視窗將彈出顯示場景屬性：</p>

<p><img src="/assets/documentation/usage/usage_scene_properties.png" alt="Scene Properties window" /></p>

<p>一個獨特的 Friction 專案能夠擁有任意數量的場景，但在第一次建立專案時，它會提示使用者建立第一個場景。</p>

<p>可以設定定義場景的參數（之後皆可修改）：</p>
<ul>
  <li>畫布尺寸：<strong>寬度</strong>和<strong>高度</strong>，以像素表示</li>
  <li>場景<strong>持續時間</strong>：設定第一影格（通常為 0）和最後一影格，以<code class="language-plaintext highlighter-rouge">影格</code>或<code class="language-plaintext highlighter-rouge">秒</code>表示。請注意，Friction 內部以<code class="language-plaintext highlighter-rouge">影格</code>運作，因此如果使用者選擇<code class="language-plaintext highlighter-rouge">秒</code>，它將使用下一個參數 FPS 轉換成<code class="language-plaintext highlighter-rouge">影格</code>。</li>
  <li><strong>FPS</strong>（每秒影格數）：每秒影格數。</li>
  <li><strong>背景</strong>：定義場景背景顏色的 RGB 顏色。注意，可以透過將<code class="language-plaintext highlighter-rouge">Alpha 顏色</code>設為 0 來設定「透明」顏色。</li>
</ul>

<p>按下<code class="language-plaintext highlighter-rouge">...</code>按鈕將列出一些預設和常用值，或先前專案中使用的自訂值。</p>

<p>當對設定滿意時，使用者可以按下<code class="language-plaintext highlighter-rouge">確定</code>以建立第一個場景。</p>

<p><img src="/assets/documentation/usage/usage_scene_blank.png" alt="Blank scene" /></p>

<p>此時，其他面板和所有工具皆已啟用，讓使用者開始在場景畫布中建立或新增（匯入或連結）資產。</p>

<h2 id="canvas-zooming-and-panning">畫布縮放與平移</h2>

<p>如同其他 2D 圖形軟體，畫布可以使用兩種運動類型導航：</p>

<ul>
  <li>
    <p><strong>平移</strong>：使用中間滑鼠按鈕點擊並拖曳，或在觸控板上使用兩個手指。</p>
  </li>
  <li>
    <p><strong>縮放</strong>：使用滑鼠滾輪，或在觸控板上使用兩個手指「捏合」以放大，或「展開」以縮小。</p>
  </li>
</ul>

<p><strong>注意：</strong>目前僅在 macOS 上支援手勢。</p>

<p>在<strong><code class="language-plaintext highlighter-rouge">檢視 &gt; 縮放</code></strong>中，有額外的畫布導航方式，例如<code class="language-plaintext highlighter-rouge">適合畫布</code>或<code class="language-plaintext highlighter-rouge">重設縮放</code>，並且皆可使用<a href="shortcuts.html">鍵盤快捷鍵</a>觸發。</p>

<h2 id="creating-assets">建立資產</h2>

<p>可以使用 Friction <strong><a href="userinterface.html#tools">工具面板</a></strong>建立基本形狀。如果是第一次嘗試，請嘗試建立矩形（<code class="language-plaintext highlighter-rouge">shift</code> + 拖曳以建立正方形）或橢圓（<code class="language-plaintext highlighter-rouge">shift</code> + 拖曳以建立圓形），在畫布中點擊並拖曳滑鼠指標。釋放以完成形狀建立。</p>

<p>這些形狀是向量圖形，因此之後可以編輯它們，請切換至<code class="language-plaintext highlighter-rouge">物件選擇工具</code>，然後選擇形狀。現在：</p>

<ul>
  <li>在<strong><a href="userinterface.html#properties">屬性面板</a></strong>：展開項目，可以瀏覽並變更定義形狀的所有參數。</li>
  <li>在<strong><a href="userinterface.html#fill-and-stroke">填滿與描邊面板</a></strong>：可以編輯填滿類型、顏色以及與形狀填滿與描邊相關的一些參數。</li>
  <li>在<strong><a href="userinterface.html#timeline">時間軸面板</a></strong>：可以瀏覽並變更定義形狀的所有參數，類似於<strong><a href="userinterface.html#properties">屬性面板</a></strong>，但這裡有時間軸在右側，因此這些參數可以在時間上動畫化等。</li>
</ul>

<p>例如，前往<strong><a href="userinterface.html#properties">屬性面板</a></strong>，展開形狀至<code class="language-plaintext highlighter-rouge">形狀 &gt; 變形 &gt; 平移 &gt; x</code>，並變更值，使形狀移動至畫布右側附近。</p>

<p><img src="/assets/documentation/usage/usage_edit_parameter.png" alt="Change parameter value" /></p>

<p>現在，前往<strong><a href="userinterface.html#fill-and-stroke">填滿與描邊面板</a></strong>，在<code class="language-plaintext highlighter-rouge">填滿</code>下，將類型從<code class="language-plaintext highlighter-rouge">無</code>變更為<code class="language-plaintext highlighter-rouge">填滿</code>，並移動顏色通道滑桿以選擇漂亮的顏色。</p>

<p><img src="/assets/documentation/usage/usage_edit_color.png" alt="Change color value" /></p>

<h2 id="importing-and-linking">匯入與連結</h2>

<p>如先前所述，Friction 不是向量圖形設計軟體，而是一款動畫軟體，因此強烈建議外部建立資產。</p>

<p>有兩種匯入資產的方式：</p>

<ul>
  <li>
    <p><strong>匯入</strong>：如果資產是<code class="language-plaintext highlighter-rouge">SVG</code>，使用此選項時，形狀將匯入專案內部。可以在 Friction 內修改顏色、形狀等。</p>
  </li>
  <li>
    <p><strong>連結</strong>：如果資產是位圖圖形（<code class="language-plaintext highlighter-rouge">JPEG</code>、<code class="language-plaintext highlighter-rouge">PNG</code>等）或甚至<code class="language-plaintext highlighter-rouge">SVG</code>向量，使用此選項時，它們將被連結或外部參考。將新增變形參數，但無法在 Friction 內編輯資產。此方法的優點是可以在外部修改它們，並自動在 Friction 中更新結果。
每個連結資產將註冊在<strong><a href="userinterface.html#assets">資產面板</a></strong>，從那裡可以<code class="language-plaintext highlighter-rouge">重新載入</code>、<code class="language-plaintext highlighter-rouge">取代</code>或<code class="language-plaintext highlighter-rouge">移除</code>資產。</p>
  </li>
</ul>

<p><img src="/assets/documentation/usage/usage_import_link.png" alt="Import and link buttons in the main window" /></p>

<p>兩個選項皆可在<strong><a href="userinterface.html#main-toolbar">主工具列</a></strong>或<code class="language-plaintext highlighter-rouge">檔案</code>選單下找到。</p>

<p>位圖圖形將始終被<strong>連結</strong>，即使使用<strong>匯入</strong>選項新增，因為 Friction 內沒有編輯像素基礎影像的工具。</p>

<p>可以從任何檔案瀏覽器「拖放」資產至 Friction 畫布，如果可能（<code class="language-plaintext highlighter-rouge">SVG</code>）將匯入，如果不可能（<code class="language-plaintext highlighter-rouge">JPEG</code>、<code class="language-plaintext highlighter-rouge">PNG</code>等）則連結。</p>

<h2 id="basic-animation">基本動畫</h2>

<h3 id="keyframes">關鍵影格</h3>

<p>任何物件、形狀或一般來說，它們的任何參數，皆可使用<a href="https://en.wikipedia.org/wiki/Key_frame">關鍵影格技術</a>動畫化。不需要動畫化每個影格，而是動畫化它們在時間上重要的位置或值，<strong>中間影格將自動插值</strong>。</p>

<p>例如，選擇畫布中已有的形狀、物件、影像等，展開其屬性以查看<code class="language-plaintext highlighter-rouge">物件 &gt; 變形 &gt; 平移 &gt; x</code>。如果變更值，除非啟用「動畫值」按鈕，否則場景的所有影格位置皆會更新：</p>

<p><img src="/assets/documentation/usage/usage_animate_value.png" alt="Animate value button" /></p>

<p>一旦按下，「點圖示」將從白色變為紅色，表示該值已被動畫化。另一種啟用方式是選擇參數，使用次要滑鼠按鈕開啟上下文選單，並選擇<code class="language-plaintext highlighter-rouge">新增關鍵影格</code>選項。
在啟用動畫的同時，關鍵影格圖示（圓圈）將出現在時間軸上，正好在<code class="language-plaintext highlighter-rouge">時間線</code>所在影格處。</p>

<p>延續範例，如果在例如「影格 0」處為<code class="language-plaintext highlighter-rouge">物件 &gt; 變形 &gt; 平移 &gt; x</code>參數建立關鍵影格，然後將時間線移動至另一影格，例如「影格 30」，並在那裡變更參數值，可以透過不同方式完成：</p>
<ul>
  <li>使用數值欄位變更參數值</li>
  <li>將物件移動至畫布中不同位置，即畫布中具有不同<code class="language-plaintext highlighter-rouge">x</code>值的位置。</li>
  <li>如果時間線位於沒有關鍵影格的影格，但使用者想要新增具有該影格目前值相同的關鍵影格，請使用次要滑鼠按鈕開啟上下文選單，並選擇<code class="language-plaintext highlighter-rouge">新增關鍵影格</code>選項</li>
  <li>最後，使用者可以使用<code class="language-plaintext highlighter-rouge">插入</code>鍵盤按鈕</li>
</ul>

<p>可以透過按下<code class="language-plaintext highlighter-rouge">刪除</code>或使用上下文選單移除個別關鍵影格。</p>

<p>如果使用者想要完全刪除參數的所有關鍵影格，只需再次按下紅色圖示，它將變回白色，表示參數不再動畫化，並在時間上取單一值。注意，它將「選擇」的值將是按下紅色按鈕時時間線所在影格的值。</p>

<h3 id="timeline">時間軸</h3>

<p><strong><a href="userinterface.html#timeline">時間軸</a></strong>面板將非常有助於查看關鍵影格在時間上的位置，並輕鬆重新對應它們在時間上的位置，因為可以點擊並拖曳它們並移動至另一時間。</p>

<p>在此面板中，可以<code class="language-plaintext highlighter-rouge">複製</code>、<code class="language-plaintext highlighter-rouge">貼上</code>甚至<code class="language-plaintext highlighter-rouge">複製</code>關鍵影格至新影格，只需將時間線置於所需影格並執行命令。</p>

<h3 id="graph-view">圖形視圖</h3>

<p>關鍵影格之間的插值<strong>預設為線性</strong>，但可以使用<code class="language-plaintext highlighter-rouge">圖形視圖</code>變更，因為它新增了以圖形方式編輯從一個關鍵影格到另一關鍵影格的值動畫「速度」和演變的可能性。</p>

<p>為了啟用它，需要在<strong><a href="userinterface.html#timeline">時間軸</a></strong>面板（在屬性面板中無法運作，因為該面板沒有時間軸）中選擇至少一個參數（如果多於一個，只需使用<code class="language-plaintext highlighter-rouge">Shift</code>修飾鍵新增更多至選擇，「啟用動畫」按鈕與參數標籤之間的顏色將顯示圖形曲線的顏色），並按下<code class="language-plaintext highlighter-rouge">圖形視圖</code>圖示：</p>

<p><img src="/assets/documentation/usage/usage_graph_view_1.png" alt="Graph view button" /></p>

<p>一旦啟用圖形視圖，它將看起來像這樣：</p>

<p><img src="/assets/documentation/usage/usage_graph_view_2.png" alt="Graph view button" /></p>

<p>可以使用置於圖形視圖右下方的以下按鈕選擇關鍵影格（或現在的節點，因為曲線是<strong>貝茲曲線</strong>）、開啟其切線手柄等：</p>

<p><img src="/assets/documentation/usage/usage_graph_view_3.png" alt="Graph view button" /></p>

<p>從左至右：</p>
<ul>
  <li><strong>緩動模式</strong>：一些預設以輕鬆動畫化兩個關鍵影格之間的運動。它可以考慮區段的左（<code class="language-plaintext highlighter-rouge">in</code>）和/或右（<code class="language-plaintext highlighter-rouge">out</code>）節點。檢查<a href="tips.html#easing-reference-chart">這裡</a>的可用模式。</li>
  <li><strong>線段</strong>：關鍵影格之間的預設「曲線」。</li>
  <li><strong>曲線段</strong>：使節點（或關鍵影格）手柄出現</li>
  <li><strong>對稱手柄</strong>：使左與右手柄對稱</li>
  <li><strong>平滑節點</strong>：從角轉為平滑手柄，在此模式中，左與右節點手柄共享相同的切線角度。</li>
  <li><strong>角節點</strong>：從平滑轉為角手柄，在此模式中，左與右節點手柄具有獨立的切線角度。</li>
  <li><strong>垂直適合視圖</strong>：適合所有關鍵影格（或節點）於視圖中</li>
  <li><strong>水平適合視圖</strong>：適合所有選取的關鍵影格（或節點）於視圖中。如果未選取，則適合整個場景。</li>
</ul>

<p>具有平滑手柄的關鍵影格範例：</p>

<p><img src="/assets/documentation/usage/usage_graph_view_4.png" alt="Graph view button" /></p>

<h2 id="preview">預覽</h2>

<p><img src="/assets/documentation/usage/usage_preview_play.png" alt="Play button" /></p>

<p>在 Friction 內有幾種方式預覽場景動畫：</p>
<ul>
  <li><strong>手動拖曳</strong>「時間線」向左或向右，這不是真正的「模式」，但動畫師常用。</li>
  <li><strong>預覽快取</strong>：按下時間軸頂部的「播放」按鈕播放動畫。預設此預覽將渲染至暫時快取，然後以即時播放。</li>
  <li><strong>編輯器內預覽</strong>：如果<code class="language-plaintext highlighter-rouge">檢視 &gt; 預覽快取</code>選單核取方塊被停用，則動畫將不快取播放，這更快播放，但可能不是即時，因為它取決於您的硬體（如果您的電腦無法以場景 FPS 渲染所有影格），因此，此預覽可能不是即時播放。此模式的優點是選取物件將顯示其邊界框、樞紐點等，這對動畫師檢查動畫執行方式可能很有趣。</li>
  <li><strong>SVG 預覽</strong>：如果動畫設計在所有 SVG 動畫功能內，可以在<strong><a href="userinterface.html#main-toolbar">主工具列</a></strong>中執行<code class="language-plaintext highlighter-rouge">預覽 SVG</code>按鈕，並在電腦的預設 SVG 播放器（可能為網際網路瀏覽器）中預覽它。</li>
</ul>

<h2 id="saving-the-project">儲存專案</h2>

<p>在任何時間，<strong>Friction</strong> 讓使用者將專案儲存至具有<code class="language-plaintext highlighter-rouge">.friction</code> 擴充名的檔案中。除了連結資產外，一切皆會儲存於文件中。檔案為二進位，因此無法使用文字編輯器讀取，但未來可能變更，因為有計劃移至基於文字的專案檔案。</p>

<h2 id="export">匯出</h2>

<p><strong>匯出</strong>功能讓使用者將專案動畫（捆綁至場景）發布至媒體檔案。有 2 種主要匯出方式：</p>

<h3 id="animated-svg">動畫 SVG</h3>

<p>此選項將使用<em>尚未廢棄的</em><a href="https://www.w3.org/TR/REC-smil/"><strong>SMIL</strong> (Synchronized Multimedia Integration Language)</a> 格式建立動畫<strong>SVG</strong> 檔案。此格式主要用於<strong>網頁設計</strong>，因為它建立輕量檔案，與大多數網際網路瀏覽器和裝置相容。</p>

<p>為了匯出至<strong>SVG</strong>，使用者將找到 2 個選項：</p>
<ul>
  <li><strong>預覽 SVG</strong>：它將匯出並在您的預設網際網路瀏覽器中預覽檔案。這是快速預覽動畫的非常有用且快速方式。</li>
  <li><strong>匯出 SVG</strong>：將顯示新視窗，包含產生最終<strong>SVG</strong> 檔案的選項。在自明選項中，有<code class="language-plaintext highlighter-rouge">針對網路最佳化</code>，使用<strong><a href="https://github.com/svg/svgo">SVGO</a></strong> 減少檔案大小，以及<code class="language-plaintext highlighter-rouge">混合混合模式</code>，使用<code class="language-plaintext highlighter-rouge">CSS</code> 規則啟用圖層顏色混合至最終 SVG 檔案。</li>
</ul>

<p><img src="/assets/documentation/export/export_svg-dialog.png" alt="Export SVG dialog" /></p>

<p>兩個選項皆可在<strong><a href="userinterface.html#main-toolbar">主工具列</a></strong>中取得。</p>

<p><strong>重要注意</strong>：並非所有<strong>Friction</strong> 功能皆與動畫 SVG 相容（並且可能有些尚未實作至匯出器）。在<a href="export.html#svg-animation">匯出章節</a>中有更多資訊。</p>

<h3 id="rendered-animation">渲染動畫</h3>

<p>第二種匯出方式是將場景動畫傳統渲染至影片和/或音訊格式。</p>

<p>為了配置匯出，使用者應開啟<a href="userinterface.html#queue">佇列面板</a>，並設定：</p>
<ul>
  <li><strong>場景屬性</strong>：如果它們正確設定且無需修剪、調整或選擇<code class="language-plaintext highlighter-rouge">IN/OUT</code> 選項，則可略過此選項。</li>
  <li><strong>設定檔</strong>：儲存的設定檔方便選擇影片/音訊、格式、編解碼器及其設定。</li>
  <li><strong>格式</strong>：如果需要手動變更設定，這裡是地方。</li>
</ul>

<p><img src="/assets/documentation/export/export_video-dialog.png" alt="Export Queue panel" /></p>

<p>有關所有匯出選項的更多資訊，有整個關於<strong><a href="export.html#video--audio">匯出選項</a></strong>的部分。</p>

<h2 id="advanced">進階</h2>

<h3 id="effects-and-shaders">效果與著色器</h3>

<p>使用先前註釋的功能將讓動畫師建立相當豐富且複雜的動畫，但使用以下功能，在某些情況下可以簡化動畫過程，和/或建立無法使用「傳統」動畫完成的新的動畫。視為中級至進階功能，預設隱藏，顯示全部或逐一的方式是使用次要滑鼠按鈕開啟上下文選單，並啟用需要的功能。一旦啟用，新區段將出現在物件階層中，並列在自然位置：</p>

<p><img src="/assets/documentation/usage/usage_effects.png" alt="Effects hierarchy" /></p>

<p>延續先前圖片，從上至下：</p>

<ul>
  <li><strong>自訂屬性</strong>：能夠建立自訂參數，用於運算式編輯器，並能夠輕鬆動畫化或控制物件在時間上的行為。可以建立單一或雙值參數。</li>
</ul>

<p><img src="/assets/documentation/usage/usage_custom_properties.png" alt="Custom Properties" /></p>

<ul>
  <li><strong>混合效果</strong>：這些效果控制物件的圖層位置，並在需要動畫化位置以在時間上變更時有用。</li>
  <li><strong>互動 SVG 屬性</strong>：控制物件的 SVG 播放，因為它允許在滑鼠懸停、點擊、雙擊等時播放它。</li>
  <li><strong>變形效果</strong>：允許以位置、旋轉、縮放和傾斜操縱物件，並使用其他物件作為參考。</li>
  <li><strong>路徑基礎效果</strong>：直接應用至向量路徑，允許修改例如位移、空間位移、虛線、重複、子路徑、固化、總和、線條、鋸齒或細分。</li>
  <li><strong>填滿效果</strong>：控制形狀的填滿屬性，包括純色、漸層和圖案。可用效果類似於路徑基礎效果，但應用至填滿。</li>
  <li><strong>輪廓基礎效果</strong>：應用至物件的輪廓的相同效果。效果清單與先前類型效果相同。</li>
  <li><strong>輪廓效果</strong>：建立「新輪廓」並應用選取效果。效果清單與先前類型效果相同。</li>
</ul>

<p>有關此主題的更多資訊，在單獨的部分<strong><a href="effects.html">效果</a></strong> 和 <strong><a href="shaders.html">著色器</a></strong>。</p>

<h3 id="tools">工具</h3>
<ul>
  <li><strong>空物件</strong>：新增不可見參考物件，可用於群組或控制其他元素，透過在合成中應用<code class="language-plaintext highlighter-rouge">變形效果</code>。</li>
</ul>

<h3 id="alignment">對齊</h3>

<p>在<strong><a href="userinterface.html#properties">屬性面板</a></strong>中，有一組下拉式和按鈕，允許使用者將一個或多個物件對齊至選擇的參考。</p>

<p><img src="/assets/documentation/usage/usage_alignment_panel.png" alt="Alignment tools" /></p>

<p>選項允許對齊<code class="language-plaintext highlighter-rouge">幾何</code>、<code class="language-plaintext highlighter-rouge">幾何依其樞紐</code>以及僅<code class="language-plaintext highlighter-rouge">樞紐</code>並保持幾何在原位。</p>

<p>對齊目的地稱為「參考」，可以是<code class="language-plaintext highlighter-rouge">場景</code>、<code class="language-plaintext highlighter-rouge">邊界框</code>、<code class="language-plaintext highlighter-rouge">最後選取</code>物件或<code class="language-plaintext highlighter-rouge">最後選取樞紐</code>，參考最後選取物件的樞紐。</p>

<p>按鈕讓使用者僅應用對齊至一側<code class="language-plaintext highlighter-rouge">左</code>、<code class="language-plaintext highlighter-rouge">水平中心</code>、<code class="language-plaintext highlighter-rouge">右</code>、<code class="language-plaintext highlighter-rouge">上</code>、<code class="language-plaintext highlighter-rouge">垂直中心</code>和<code class="language-plaintext highlighter-rouge">下</code>。</p>

<p><img src="/assets/documentation/usage/usage_alignment_example.gif" alt="Alignment example" /></p>

<h3 id="layouts">佈局</h3>

<p><img src="/assets/documentation/usage/usage_layout.png" alt="Layouts" /></p>

<p>此功能讓使用者建立並儲存不同<code class="language-plaintext highlighter-rouge">畫布</code>和/或<code class="language-plaintext highlighter-rouge">時間軸</code>分割，置於名稱下，並從一個切換至另一個。它不儲存面板位置或可見狀態（顯示或隱藏），而是儲存<code class="language-plaintext highlighter-rouge">畫布</code>和<code class="language-plaintext highlighter-rouge">時間軸</code>分割的大小、數量和應用場景：</p>

<p><img src="/assets/documentation/ui/ui_timeline-splitting-panel.png" alt="Division splitter" /></p>

<h2 id="learning-resources">學習資源</h2>

<p>這是一個不斷成長的章節，隨著時間可能會包含新資源。</p>

<p>有趣的是，<strong>Friction</strong> 是 <strong>Enve</strong> 的分支，因此如果您找不到解釋功能的教學或影片，您可能在網際網路上搜尋包含<code class="language-plaintext highlighter-rouge">Enve</code> 關鍵字時找到它。</p>

<h3 id="tutorials">教學</h3>
<ul>
  <li><strong><a href="https://theflydesign.es/manual-enve-2d-animation-english/">Enve 手冊</a></strong></li>
</ul>

<h3 id="video-tutorials">影片教學</h3>
<ul>
  <li><strong><a href="https://www.youtube.com/watch?v=dIzzXyrJRHs">Friction 2d 初學者教學 - Freeware Camp</a></strong></li>
  <li><strong><a href="https://github.com/orgs/friction2d/discussions/403">Friction2d 介紹（教學）</a></strong></li>
  <li><strong><a href="https://www.youtube.com/playlist?list=PLiIhhu566LD9xzcRXgRqMkr8sIqaKO1HF">Enve 初學者教學</a></strong></li>
  <li><strong><a href="https://www.youtube.com/playlist?list=PLiIhhu566LD-4zvcPCCGZtp1KS1Ew5Ehu">Enve 2D 初學者完整指南</a></strong></li>
  <li><strong><a href="https://www.youtube.com/playlist?list=PLQFW7x3qFlrBAqVFHCS8QGf2ooegv4riN">Enve 的 Alexander Kiryanov 進階教學</a></strong></li>
</ul>

<h3 id="other">其他</h3>
<ul>
  <li><strong><a href="https://github.com/orgs/friction2d/discussions/434">Friction 提示元執行緒</a></strong></li>
  <li><strong><a href="https://github.com/orgs/friction2d/discussions/407">Friction2d (Friction 2d) 展示/渲染</a></strong></li>
  <li><strong><a href="https://github.com/orgs/friction2d/discussions/292">運算式教學？</a></strong></li>
  <li><strong><a href="https://github.com/orgs/friction2d/discussions/242">Friction 的運算式編輯器支援常見運算式</a></strong></li>
  <li><strong><a href="https://github.com/orgs/friction2d/discussions">Friction 討論面板</a></strong></li>
  <li><strong>Friction 社群平台</strong>（連結在本網頁頁尾）</li>
</ul>

                
                
                
                
                <div class="nextPrevContainer">
                    
                    <a href="/documentation/userinterface.html"><span class="nextPrevButton">&lt; User Interface</span></a>
                    
                    
                    <a href="/documentation/export.html"><span class="nextPrevButton">Export &gt;</span></a>
                    
                    </div>
            </div>

代码： 全选

 Conversation with Gemini

將文檔中的#contentInner翻譯成繁體中文

這翻譯涵蓋了 hwhwhw_048dcf.html 文件中 #contentInner 的完整內容，並已轉換為繁體中文。
基本用法 (Basic Usage)

    基本用法

        建立專案與第一個場景

        畫布縮放與平移

        建立素材

        匯入與連結

        基本動畫

            關鍵影格

            時間軸

            圖表視圖

        預覽

        儲存專案

        匯出

            動畫 SVG

            渲染動畫

        進階功能

            特效與著色器

            工具

            對齊

            版面配置

        學習資源

            教學文件

            教學影片

            其他

在了解 使用者介面 (User Interface) 如何運作後，接著就是建立專案、建立或新增一些素材，並開始製作動畫。

必須理解 Friction 不是向量或點陣繪圖軟體，而是一套動畫軟體。

當然，它可以建立一些基本的向量形狀，例如矩形、正方形、橢圓、圓形、基於節點和貝茲曲線 (Bezier curves) 的形狀、手繪曲線，甚至可以匯入點陣圖 (raster/bitmap) 影像，但如果一般設計師堅持要在 Friction 內部尋找他們習慣的繪圖工具，可能會發現缺少了很多功能。話雖如此，強烈建議在 Friction 外部設計素材，然後將它們匯入或連結到軟體中。

以下是一些建議用於設計素材的工具：

    向量圖形設計 (Vector graphics design)

        Inkscape

        Affinity Designer

        任何能夠匯出 SVG 向量圖形檔案的軟體。

    點陣圖形設計 (Bitmap graphic design)

        Krita

        Gimp

        Affinity Photo

        任何能夠匯出 JPEG、PNG 或 WEBP 影像檔案的軟體。

建立專案與第一個場景 (Project and first scene creation)

開啟 Friction 後，畫布 (Canvas) 面板會提示使用者：

    New (新增)：建立一個新專案。

    Open (開啟)：使用作業系統的檔案瀏覽器開啟現有的 Friction 專案。

    Recent files (最近的檔案)：開啟先前開啟過的 Friction 專案。點擊按鈕可取得按日期排序（由新到舊）的可用專案列表。

假設這是使用者第一次開啟 Friction，點擊 New 來建立新專案。會彈出一個顯示場景屬性 (Scene Properties) 的視窗：

一個 Friction 專案可以包含任意數量的場景，但在首次建立專案時，會提示使用者建立第一個場景。

可以設定定義場景的參數（之後都可以修改）：

    畫布的尺寸：以像素 (pixels) 為單位的 Width (寬度) 和 Height (高度)。

    場景的 Duration (持續時間)：設定第一格（通常為 0）和最後一格，單位可用 frames (影格) 或 seconds (秒)。請注意，Friction 內部以 frames 運作，所以如果使用者選擇 seconds，它將使用下一個參數 FPS 來換算成 frames。

    FPS (Frames Per Second)：每秒的影格數。

    Background (背景)：定義場景背景顏色的 RGB 顏色。注意，可以通過將 Alpha color 設定為 0 來設定「透明」顏色。

按下 ... 按鈕將列出一些預設值、常用值或先前專案中使用過的自訂值。

設定滿意後，使用者可以按下 OK 來建立第一個場景。

此時，其他面板和所有工具都已啟用，讓使用者開始建立或新增（匯入或連結）素材到場景畫布中。
畫布縮放與平移 (Canvas zooming and panning)

如同其他 2D 圖形軟體，畫布可以透過兩種動作進行導覽：

    Pan (平移)：使用滑鼠中鍵點擊並拖曳，或在觸控板上使用兩指移動。

    Zoom (縮放)：使用滑鼠滾輪，或在觸控板上使用兩指「捏合」來縮小或「張開」來放大。

注意： 手勢操作目前僅在 macOS 上支援。

在 View > Zoom 中還有其他的畫布導覽方式，例如 Fit to canvas (符合畫布大小) 或 Reset Zoom (重設縮放)，這些也都可以透過 鍵盤快速鍵 (Keyboard Shortcuts) 來觸發。
建立素材 (Creating assets)

可以使用 Friction 的 工具面板 (Tools panel) 建立基本形狀。如果是第一次使用，試著透過在畫布中點擊並拖曳滑鼠游標來建立一個矩形（按住 shift + 拖曳可建立正方形）或橢圓（按住 shift + 拖曳可建立圓形）。放開滑鼠即可完成形狀的建立。

這些形狀是向量圖形，因此之後可以進行編輯。切換到 Object selection tool (物件選取工具) 然後選取該形狀。現在：

    在 屬性面板 (Properties panel) 中：展開該項目，可以瀏覽並更改定義該形狀的所有參數。

    在 填充與描邊面板 (Fill and Stroke panel) 中：可以編輯填充類型、顏色以及一些與形狀的填充和描邊相關的參數。

    在 時間軸面板 (Timeline panel) 中：可以瀏覽並更改定義該形狀的所有參數，方式與 屬性面板 類似，但這裡右側有時間軸，因此這些參數可以隨時間進行動畫化等操作。

例如，前往 屬性面板 將形狀展開至 Shape > transform > translation > x 並更改數值，使形狀移動到畫布右側附近。

現在，前往 填充與描邊面板，在 Fill (填充) 下方將類型從 none (無) 更改為 fill (填充)，並移動顏色通道滑桿來選擇一個喜歡的顏色。
匯入與連結 (Importing and linking)

如前所述，Friction 不是向量圖形設計軟體，而是動畫軟體，因此強烈建議在外部建立素材。

有兩種匯入素材的方式：

    Import (匯入)：如果素材是 SVG，使用此選項時，形狀將被匯入到專案內部。可以在 Friction 內修改顏色、形狀等。

    Link (連結)：如果素材是點陣圖形 (JPEG, PNG,...) 或甚至是 SVG 向量圖，使用此選項時，它們將被連結或外部引用。會增加一個變形 (transform) 參數，但素材無法在 Friction 內部進行編輯。使用此方法的巨大優勢是，可以在外部修改它們，結果將自動在 Friction 中更新。 每個連結的素材都會在 素材面板 (Assets Panel) 中註冊，從那裡可以 reload (重新載入)、replace (替換) 或 remove (移除) 該素材。

這兩個選項都可以在 主工具列 (Main toolbar) 或 File 選單下找到。

點陣圖形 (Bitmap graphics) 將永遠被 連結 (linked)，即使使用 Import (匯入) 選項加入也是如此，因為 Friction 內部沒有編輯像素圖的工具。

素材可以從任何檔案瀏覽器透過「拖放 (drag & drop)」到 Friction 畫布來加入，如果是 (SVG) 則盡可能匯入，如果不是 (JPEG, PNG,...) 則會建立連結。
基本動畫 (Basic animation)
關鍵影格 (Keyframes)

任何物件、形狀或通常來說它們的任何參數，都可以使用 關鍵影格技術 進行動畫製作。不需要為每一格製作動畫，只需設定它們隨時間變化的重要位置或數值，中間的影格會自動進行插值 (interpolated)。

例如，選取畫布中已存在的一個形狀、物件、圖片等，展開其屬性查看 Object > Transform > Translate > x。如果更改數值，場景中所有影格的位置都會更新，除非啟用了「動畫數值 (animate value)」按鈕：

按下後，「圓點圖示」會從白色變為紅色，表示該數值已啟用動畫。啟用的另一種方法是選取參數，按滑鼠右鍵開啟上下文選單，然後選擇 Add Key(s) 選項。 在啟用動畫的同時，會在 time line (時間指針) 所在的影格處，於時間軸上出現一個關鍵影格圖示（圓形）。

延續這個例子，如果在（例如）「第 0 格」為 Object > Transform > Translate > x 參數建立了一個關鍵影格，然後將時間指針移動到另一個影格（例如「第 30 格」），並在那裡更改參數的數值，這可以透過不同方式完成：

    使用數值欄位更改參數數值。

    將物件移動到畫布中的不同位置，也就是畫布中 x 值不同的地方。

    如果時間指針位於沒有關鍵影格的影格上，但使用者想添加一個關鍵影格，其數值與該影格當前的數值相同，可以按滑鼠右鍵開啟上下文選單並選擇 Add Key(s) 選項。

    最後，使用者可以使用鍵盤的 Insert 鍵。

可以透過按 Delete 鍵或使用上下文選單來移除個別的關鍵影格。

如果使用者想完全刪除該參數的所有關鍵影格，只需再次按下紅色圖示，它會變回白色，表示該參數不再具有動畫，並且會隨時間保持單一數值。注意，它將「選擇」保留的數值，會是按下紅色按鈕時時間指針所在影格的當前數值。
時間軸 (Timeline)

時間軸 (Timeline) 面板對於查看關鍵影格在時間上的位置非常有幫助，並且易於重新映射它們在時間上的位置，因為可以點擊並拖曳它們移動到另一個時間點。

在此面板中，只需將時間指針放置在所需的影格並執行指令，即可 copy (複製)、paste (貼上) 甚至 duplicate (重製) 關鍵影格到新的影格。
圖表視圖 (Graph view)

關鍵影格之間的插值 預設是線性的 (linear)，但這可以透過 Graph view (圖表視圖) 來改變，因為它增加了以圖形方式編輯從一個關鍵影格到另一個關鍵影格的數值動畫「速度」和演變的可能性。

為了啟用它，需要在 時間軸 (Timeline) 面板中選取至少一個參數（如果多於一個，請使用 Shift 鍵加選，在「啟用動畫」按鈕和參數標籤之間的顏色將顯示圖表曲線的顏色）（在屬性面板中無法運作，因為該面板沒有時間軸），然後按下 Graph view 圖示：

一旦啟用圖表視圖，看起來會像這樣：

可以使用位於圖表視圖右下角的以下按鈕來選取關鍵影格（現在稱為節點，因為曲線是 貝茲曲線 (Bezier curves)），開啟它們的切線手柄等等：

從左到右：

    Easing modes (緩動模式)：一些預設設定，用於輕鬆動畫化兩個關鍵影格之間的移動。它可以考慮區段的左側 (in) 和/或右側 (out) 節點。在此查看可用的模式 Easing reference chart。

    line segment (線段)：關鍵影格之間的預設「曲線」。

    curved segment (曲線段)：讓節點（或關鍵影格）的手柄出現。

    symmetric handles (對稱手柄)：讓左側和右側手柄對稱。

    smooth node (平滑節點)：從轉角轉為平滑手柄，在此模式下，左側和右側節點手柄共享相同的切線角度。

    corner nodes (轉角節點)：從平滑轉為轉角手柄，在此模式下，左側和右側節點手柄擁有獨立的切線角度。

    vertical fit view (垂直符合視圖)：將所有關鍵影格（或節點）縮放至視圖內。

    horizontal fit view (水平符合視圖)：將所有選取的關鍵影格（或節點）縮放至視圖內。如果未選取任何項目，則會縮放整個場景。

帶有平滑手柄的關鍵影格範例：
預覽 (Preview)

在 Friction 內部有幾種預覽場景動畫的方式：

    Manual scrubbing (手動拖曳)：向左或向右拖曳「時間指針」，這並不是真正的「模式」，但動畫師非常常用。

    Preview Cache (預覽快取)：按下時間軸上方的「Play (播放)」按鈕播放動畫。預設情況下，此預覽會渲染到臨時快取中，然後以即時速度播放。

    in editor Preview (編輯器內預覽)：如果 View > Preview Cache 選單核取方塊被停用，則動畫將在不進行快取的情況下播放，這播放起來更快，但可能不是即時的，這取決於您的硬體（如果電腦無法以場景 FPS 渲染所有影格），因此，此預覽可能無法即時播放。此模式的好處是選取的物件會顯示其邊界框、軸心點等，這對於動畫師檢查動畫執行情況可能很有趣。

    SVG Preview (SVG 預覽)：如果動畫是在 SVG 動畫的所有功能範圍內設計的，可以執行 主工具列 (Main toolbar) 中的 Preview SVG 按鈕，並在電腦的預設 SVG 播放器（可能是網際網路瀏覽器）中進行預覽。

儲存專案 (Saving the project)

在任何時候，Friction 都允許使用者將專案儲存為副檔名為 .friction 的檔案。除了連結的素材外，所有內容都將儲存在檔案內。該檔案是二進位的，因此無法用文字編輯器讀取，但這在未來可能會改變，因為有計劃轉向基於文字的專案檔案。
匯出 (Export)

Export (匯出) 功能讓使用者將專案動畫（打包在場景中）發佈為媒體檔案。主要有 2 種匯出方式：
動畫 SVG (Animated SVG)

此選項將使用 尚未被棄用 的 SMIL (Synchronized Multimedia Integration Language) 格式建立動畫 SVG 檔案。此格式主要用於 網頁設計 (web design)，因為它建立的檔案輕量且與大多數網際網路瀏覽器和裝置相容。

為了匯出為 SVG，使用者會發現 2 個選項：

    Preview SVG (預覽 SVG)：它將匯出檔案並在您的預設網際網路瀏覽器中預覽。這是快速預覽動畫非常有用且快速的方法。

    Export SVG (匯出 SVG)：會出現一個新視窗，其中包含生成最終 SVG 檔案的選項。在這些不言自明的選項中，有使用 SVGO 來縮減檔案大小的 Optimize for Web (為網頁最佳化)，以及使用 CSS 規則將圖層顏色混合啟用至最終 SVG 檔案的 Mix Blend Modes (混合模式)。

這兩個選項都可以在 主工具列 (Main Toolbar) 中找到。

重要提示：並非所有 Friction 功能都與動畫 SVG 相容（可能有些尚未實作到匯出器中）。更多資訊請參閱 匯出章節。
渲染動畫 (Rendered animation)

第二種匯出方式是將場景動畫常規渲染為視訊和/或音訊格式。

為了設定匯出，使用者應開啟 佇列面板 (Queue panel) 並設定：

    Scene Properties (場景屬性)：如果設定正確且不需要修剪、調整或選擇 IN/OUT 選項，則可以跳過此選項。

    Profiles (設定檔)：儲存的設定檔方便選擇視訊/音訊、格式、編解碼器及其設定。

    Format (格式)：如果需要手動更改設定，就是在這裡進行。

有關所有匯出選項的更多資訊，請參閱關於 匯出選項 的完整章節。
進階功能 (Advanced)
特效與著色器 (Effects and shaders)

使用前面提到的功能可以讓動畫師創作出相當豐富和複雜的動畫，但透過以下功能，在某些情況下可以簡化動畫製作過程，和/或能夠創作出「傳統」動畫無法做到的新動畫。由於被視為中級到進階功能，它們預設是隱藏的，顯示全部或逐一顯示的方法是按滑鼠右鍵開啟上下文選單並啟用所需的項目。一旦啟用，物件層級中會出現新的區段，並列在自然的位置：

依據上圖，從上到下：

    Custom Properties (自訂屬性)：能夠建立自訂參數以用於表達式編輯器，並能夠輕鬆地動畫化或控制物件隨時間的行為。可以建立單一或雙數值參數。

    Blend effects (混合特效)：這些特效控制物件的圖層位置，當需要動畫化使其位置隨時間改變時很有用。

    Interactive SVG Properties (互動式 SVG 屬性)：控制物件的 SVG 播放，允許在滑鼠懸停、點擊、雙擊等情況下播放。

    Transform effects (變形特效)：允許在位置、旋轉、縮放和傾斜方面操作物件，並使用其他物件作為參考。

    Path base effects (路徑基礎特效)：直接應用於向量路徑，允許修改如置換 (Displace)、空間置換 (Spatial Displace)、虛線 (Dash)、複製 (Duplicate)、子路徑 (Sub-Path)、固化 (Solidify)、總和 (Sum)、線條 (Lines)、鋸齒 (ZigZag) 或細分 (Subdivide)。

    Fill effects (填充特效)：控制形狀的填充屬性，包括純色、漸層和圖樣。可用的特效類似於路徑基礎特效，但應用於填充。

    Outline base effects (輪廓基礎特效)：應用於物件的與輪廓相同的特效。特效列表與前一類特效相同。

    Outline effects (輪廓特效)：建立「新輪廓」並應用選取的特效。特效列表與前一類特效相同。

更多關於此主題的資訊請參閱 特效 (Effects) 和 著色器 (Shaders) 的獨立章節。
工具 (Tools)

    Null objects (空物件)：新增一個不可見的參考物件，可用於透過在合成中應用 Transform Effects (變形特效) 來群組或控制其他元素。

對齊 (Alignment)

在 屬性面板 (Properties panel) 中有一組下拉選單和按鈕，允許使用者將一個或多個物件對齊到選定的參考。

選項允許對齊 Geometry (幾何圖形)、Geometry by its pivot (幾何圖形依據其軸心) 以及僅對齊 Pivot (軸心) 而保持幾何圖形在原位。

對齊的目標稱為「參考 (reference)」，可以是 Scene (場景)、Bounding box (邊界框)、Last selected (最後選取的) 物件或 Last selected pivot (最後選取的軸心) 即參考最後選取物件的軸心。

按鈕讓使用者可以僅對一側應用對齊：Left (左)、Horizontal center (水平置中)、Right (右)、Top (上)、Vertical center (垂直置中) 和 Bottom (下)。
版面配置 (Layouts)

此功能讓使用者以一名稱建立並儲存不同的 Canvas (畫布) 和/或 Timeline (時間軸) 分割，並在它們之間切換。它不會儲存面板位置或可見狀態（顯示或隱藏），但會儲存大小、數量以及應用於 Canvas 和 Timeline 分割的場景：
學習資源 (Learning resources)

這是一個不斷增長的章節，隨著時間推移可能會包含新的資源。

有趣的是，Friction 是 Enve 的分支 (fork)，所以如果你找不到解釋某個功能的教學或影片，試著用 Enve 關鍵字在網路上搜尋可能會找到。
教學文件 (Tutorials)

    Enve 手冊

教學影片 (Video tutorials)

    Friction 2d 初學者教學 - Freeware Camp

    Friction2d 介紹 (教學)

    初學者 Enve 教學

    初學者 Enve 2D 完整指南

    Enve 的 Alexander Kiryanov 進階教學

其他 (Other)

    Friction 技巧彙整串

    Friction2d (Friction 2d) 展示/渲染作品

    表達式教學?

    Friction 表達式編輯器中通用表達式的支援

    Friction 討論區

    Friction 社群平台 (連結於此網頁頁尾)


Gemini can make mistakes, so double-check it