標注到動態(tài)標注的完整教程)
用 Remotion 給視頻加箭頭和高亮從靜態(tài)標注到動態(tài)標注的完整教程【免費下載鏈接】remotion Make videos programmatically with React項目地址: https://gitcode.com/GitHub_Trending/re/remotion想在教程視頻里加箭頭、高亮框和會呼吸的圓圈這套玩法就藏在 Remotion 視頻標注里裝好remotion/shapes和remotion/paths兩個 npm 包標注就能寫進代碼里——跟著畫面走、踩著節(jié)拍進場。讀完你能自己拼出一個完整教程場景高亮框先出現(xiàn)箭頭沿曲線滑入圓圈隨講解節(jié)奏脈動。一、先解決定位問題讓標注釘在畫面的指定位置這一節(jié)回答標注出現(xiàn)在哪。結(jié)論先行Remotion 給每個畫面一塊畫布——AbsoluteFill鋪滿整個視頻尺寸標注組件靠 x、y 兩個數(shù)字落位就像往桌面上貼便利貼。關(guān)鍵只有一個鉤子useCurrentFrame()取當前幀號它相當于視頻的計時器。把標注的位置、大小、透明度都寫成幀號的函數(shù)靜態(tài)和動態(tài)標注就都在你手邊了。import {AbsoluteFill} from remotion; const Stage ({children}) ( AbsoluteFill style{{backgroundColor: #0f172a}} {children} /AbsoluteFill );之后所有標注都放進這個容器Rect x{80} y{120} ... /就表示圖形左上角距畫面左邊 80px、距頂部 120px。在 Studio 里拖幀預(yù)覽坐標改多少畫面立刻變多少不用肉眼猜。二、3 步畫出靜態(tài)標注高亮框、焦點圓與氣泡指注一次到位這一節(jié)回答畫哪些標注。remotion/shapes自帶一整套 SVG 組件Rect圓角矩形、Circle圓、Ellipse橢圓、Callout氣泡指注、Star星形等——而且有現(xiàn)成的Arrow組件不必自己拼路徑。第 1 步選形狀、給尺寸Rect傳width/heightCircle傳radiusCallout再加pointerDirection控制小尾巴朝哪邊。第 2 步調(diào)觀感所有組件都吃標準 SVG 屬性fill用rgba半透明就是高亮色stroke/strokeWidth畫描邊cornerRadius做圓角。第 3 步用上一節(jié)的 x/y 落位完成。四種常用標注合在一段代碼里import {Rect, Circle, Callout, Arrow} from remotion/shapes; const StaticMarks () ( Rect width{560} height{120} cornerRadius{12} fillrgba(59,130,246,0.15) x{80} y{140} / Circle radius{70} fillrgba(250,204,21,0.25) x{640} y{420} / Arrow length{180} directionleft fill#f87171 x{760} y{200} / Callout width{320} height{90} cornerRadius{8} pointerDirectionleft fill#e2e8f0 x{1100} y{380} / / );Arrow還暴露了headWidth、headLength、shaftWidth三個參數(shù)粗短有力或細長的指示箭頭都能畫出來。每個形狀的完整屬性可直接翻 packages/shapes/src/components/ 下的組件源碼。三、讓標注動起來的兩種方式脈動高亮與沿路徑滑行這一節(jié)回答標注怎么動。核心只有一句話把組件屬性寫成幀號的函數(shù)。方式一脈動高亮。幀號套進正弦函數(shù)再映射成縮放圓圈就像在呼吸pathStyle{{transform: scale(1.2)}}。注意用pathStyle改圖形本身直接傳style改的是外層 SVG 容器。方式二沿曲線滑行這是最出效果的一招。remotion/paths里的getPointAtLength(path, distance)接收 SVG 路徑串和一個距離返回該距離處的坐標讓距離隨幀號增長標注就會貼著曲線滑過去。兩種方式合進一個組件import {useCurrentFrame, interpolate} from remotion; import {getPointAtLength} from remotion/paths; import {Circle} from remotion/shapes; const TRACK M 120 520 C 420 120 720 120 880 420; const GuideDot () { const frame useCurrentFrame(); const distance interpolate(frame, [0, 59], [0, 380]); const {x, y} getPointAtLength(TRACK, distance); const scale 1 0.25 * Math.sin(frame / 4); return ( Circle radius{26} fillrgba(248,113,113,0.9) x{x} y{y} pathStyle{{transform: scale(${scale})}} / ); };想同時插值平移、旋轉(zhuǎn)、縮放整段transform字符串remotion/animation-utils里的interpolateStyles和makeTransform是現(xiàn)成工具源碼在 packages/animation-utils/。四、拼出一個教程場景4 種元素按節(jié)拍登場這一節(jié)回答怎么組合。把Sequence當分鏡表用給每塊標注一個from第幾幀登場和durationInFrames展示多久一屏畫面就變成有起承轉(zhuǎn)合的小劇本。import {AbsoluteFill, Sequence} from remotion; import {Rect, Arrow, Circle} from remotion/shapes; const TutorialScene () ( AbsoluteFill style{{backgroundColor: #0f172a}} Sequence from{10} durationInFrames{400} Rect width{620} height{300} cornerRadius{8} fillrgba(59,130,246,0.12) x{60} y{100} / Rect width{560} height{30} fillrgba(250,204,21,0.3) x{90} y{200} / /Sequence Sequence from{80} durationInFrames{330} Arrow length{160} directionleft fill#f87171 x{700} y{210} / Circle radius{40} fillrgba(34,197,94,0.25) x{400} y{460} / /Sequence /AbsoluteFill );動手前記住四條 顏色固定編碼紅色指點、黃色標重點、綠色表成功全片統(tǒng)一觀眾不用思考就能讀懂。一屏最多 2~3 個焦點標注堆多了畫面只會更吵不會更專業(yè)。靜態(tài)標注別每幀重算形狀參數(shù)不變就抽成常量或包一層useMemo避免冗余計算。坐標對分辨率敏感要讓同一場景適配不同分辨率把寫死的 x/y 換成比例 × 畫布寬高集中在一處縮放。五、源碼在哪看自定義標注前先看這 3 個目錄內(nèi)置組件不夠用時比如想換一種緩動、畫一種新標注別從零造輪子按順序看這三處形狀組件packages/shapes/src/components/——每個Rect、Circle、Arrow、Callout如何把參數(shù)翻譯成 SVG 路徑這里都有。路徑算法packages/paths/——getPointAtLength、getTangentAtLength、translatePath等沿路徑移動、路徑變形的工具全集。動畫輔助packages/animation-utils/——interpolateStyles、makeTransform等變換插值函數(shù)。看完這三處標注問題就閉環(huán)了用 x/y 定位、用 shapes 畫形、用幀號驅(qū)動、用Sequence排期剩下的只是調(diào)參數(shù)?！久赓M下載鏈接】remotion Make videos programmatically with React項目地址: https://gitcode.com/GitHub_Trending/re/remotion創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 用 Remotion 給視頻加箭頭和高亮：從靜態(tài)標注到動態(tài)標注的完整教程
用 Remotion 給視頻加箭頭和高亮從靜態(tài)標注到動態(tài)標注的完整教程【免費下載鏈接】remotion Make videos programmatically with React項目地址: https://gitcode.com/GitHub_Trending/re/remotion想在教程視頻里加箭頭、高亮框和會呼吸的圓圈這套玩法就藏在 Remotion 視頻標注里裝好remotion/shapes和remotion/paths兩個 npm 包標注就能寫進代碼里——跟著畫面走、踩著節(jié)拍進場。讀完你能自己拼出一個完整教程場景高亮框先出現(xiàn)箭頭沿曲線滑入圓圈隨講解節(jié)奏脈動。一、先解決定位問題讓標注釘在畫面的指定位置這一節(jié)回答標注出現(xiàn)在哪。結(jié)論先行Remotion 給每個畫面一塊畫布——AbsoluteFill鋪滿整個視頻尺寸標注組件靠 x、y 兩個數(shù)字落位就像往桌面上貼便利貼。關(guān)鍵只有一個鉤子useCurrentFrame()取當前幀號它相當于視頻的計時器。把標注的位置、大小、透明度都寫成幀號的函數(shù)靜態(tài)和動態(tài)標注就都在你手邊了。import {AbsoluteFill} from remotion; const Stage ({children}) ( AbsoluteFill style{{backgroundColor: #0f172a}} {children} /AbsoluteFill );之后所有標注都放進這個容器Rect x{80} y{120} ... /就表示圖形左上角距畫面左邊 80px、距頂部 120px。在 Studio 里拖幀預(yù)覽坐標改多少畫面立刻變多少不用肉眼猜。二、3 步畫出靜態(tài)標注高亮框、焦點圓與氣泡指注一次到位這一節(jié)回答畫哪些標注。remotion/shapes自帶一整套 SVG 組件Rect圓角矩形、Circle圓、Ellipse橢圓、Callout氣泡指注、Star星形等——而且有現(xiàn)成的Arrow組件不必自己拼路徑。第 1 步選形狀、給尺寸Rect傳width/heightCircle傳radiusCallout再加pointerDirection控制小尾巴朝哪邊。第 2 步調(diào)觀感所有組件都吃標準 SVG 屬性fill用rgba半透明就是高亮色stroke/strokeWidth畫描邊cornerRadius做圓角。第 3 步用上一節(jié)的 x/y 落位完成。四種常用標注合在一段代碼里import {Rect, Circle, Callout, Arrow} from remotion/shapes; const StaticMarks () ( Rect width{560} height{120} cornerRadius{12} fillrgba(59,130,246,0.15) x{80} y{140} / Circle radius{70} fillrgba(250,204,21,0.25) x{640} y{420} / Arrow length{180} directionleft fill#f87171 x{760} y{200} / Callout width{320} height{90} cornerRadius{8} pointerDirectionleft fill#e2e8f0 x{1100} y{380} / / );Arrow還暴露了headWidth、headLength、shaftWidth三個參數(shù)粗短有力或細長的指示箭頭都能畫出來。每個形狀的完整屬性可直接翻 packages/shapes/src/components/ 下的組件源碼。三、讓標注動起來的兩種方式脈動高亮與沿路徑滑行這一節(jié)回答標注怎么動。核心只有一句話把組件屬性寫成幀號的函數(shù)。方式一脈動高亮。幀號套進正弦函數(shù)再映射成縮放圓圈就像在呼吸pathStyle{{transform: scale(1.2)}}。注意用pathStyle改圖形本身直接傳style改的是外層 SVG 容器。方式二沿曲線滑行這是最出效果的一招。remotion/paths里的getPointAtLength(path, distance)接收 SVG 路徑串和一個距離返回該距離處的坐標讓距離隨幀號增長標注就會貼著曲線滑過去。兩種方式合進一個組件import {useCurrentFrame, interpolate} from remotion; import {getPointAtLength} from remotion/paths; import {Circle} from remotion/shapes; const TRACK M 120 520 C 420 120 720 120 880 420; const GuideDot () { const frame useCurrentFrame(); const distance interpolate(frame, [0, 59], [0, 380]); const {x, y} getPointAtLength(TRACK, distance); const scale 1 0.25 * Math.sin(frame / 4); return ( Circle radius{26} fillrgba(248,113,113,0.9) x{x} y{y} pathStyle{{transform: scale(${scale})}} / ); };想同時插值平移、旋轉(zhuǎn)、縮放整段transform字符串remotion/animation-utils里的interpolateStyles和makeTransform是現(xiàn)成工具源碼在 packages/animation-utils/。四、拼出一個教程場景4 種元素按節(jié)拍登場這一節(jié)回答怎么組合。把Sequence當分鏡表用給每塊標注一個from第幾幀登場和durationInFrames展示多久一屏畫面就變成有起承轉(zhuǎn)合的小劇本。import {AbsoluteFill, Sequence} from remotion; import {Rect, Arrow, Circle} from remotion/shapes; const TutorialScene () ( AbsoluteFill style{{backgroundColor: #0f172a}} Sequence from{10} durationInFrames{400} Rect width{620} height{300} cornerRadius{8} fillrgba(59,130,246,0.12) x{60} y{100} / Rect width{560} height{30} fillrgba(250,204,21,0.3) x{90} y{200} / /Sequence Sequence from{80} durationInFrames{330} Arrow length{160} directionleft fill#f87171 x{700} y{210} / Circle radius{40} fillrgba(34,197,94,0.25) x{400} y{460} / /Sequence /AbsoluteFill );動手前記住四條 顏色固定編碼紅色指點、黃色標重點、綠色表成功全片統(tǒng)一觀眾不用思考就能讀懂。一屏最多 2~3 個焦點標注堆多了畫面只會更吵不會更專業(yè)。靜態(tài)標注別每幀重算形狀參數(shù)不變就抽成常量或包一層useMemo避免冗余計算。坐標對分辨率敏感要讓同一場景適配不同分辨率把寫死的 x/y 換成比例 × 畫布寬高集中在一處縮放。五、源碼在哪看自定義標注前先看這 3 個目錄內(nèi)置組件不夠用時比如想換一種緩動、畫一種新標注別從零造輪子按順序看這三處形狀組件packages/shapes/src/components/——每個Rect、Circle、Arrow、Callout如何把參數(shù)翻譯成 SVG 路徑這里都有。路徑算法packages/paths/——getPointAtLength、getTangentAtLength、translatePath等沿路徑移動、路徑變形的工具全集。動畫輔助packages/animation-utils/——interpolateStyles、makeTransform等變換插值函數(shù)。看完這三處標注問題就閉環(huán)了用 x/y 定位、用 shapes 畫形、用幀號驅(qū)動、用Sequence排期剩下的只是調(diào)參數(shù)?！久赓M下載鏈接】remotion Make videos programmatically with React項目地址: https://gitcode.com/GitHub_Trending/re/remotion創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考