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