因此，我嘗試使用 PaperJs（PaperJs 也是路徑和元素的制作方式）沿路徑為畫布元素（或在本例中為 PaperJs 路徑/文本）設定影片。它的作業方式是我有一組用戶創建的框架（當我說框架時，我的意思是從這里開始的這個用戶創建的框架），其中有用戶在其中繪制的 0-10 條路徑。從這里我在一個位置創建一個數字，并將對該畫布元素的參考存盤在一個名為 text 的陣列中，并將相應的路徑存盤在一個名為 paths 的陣列中。對于每一幀，我附加的代碼都與它的路徑和文本串列一起運行。我的代碼可以作業，但非常笨拙，并且我想添加的功能受到限制。問題是我希望能夠呼叫一個函式 animate_frame(OBJ_WITH_PATHS[0]) 并讓它為幀設定影片，然后一旦它完成了第一幀的影片呼叫 animate_frame(OBJ_WITH_PATHS[1]) 所以整個 OBJ 串列與路徑按順序進行影片處理。目前發生這種情況是因為該行
if ((event.time > frame_num*2) && (event.time < ((frame_num*2) 2))) {.
需要這條線的原因是程式使用 onFrame 事件為每一幀制作所有文本和路徑，并且沒有嚴格限制物件可見的時間和影片所有幀同時進行而不是逐幀（我的有路徑的框架）。這種行為是我將每幀的總時間嚴格限制為 2 秒的原因。我還應該注意我將填充顏色更改為黑色然后透明的原因，因此元素僅在影片期間可見，而不是在 2 秒影片周期之前或之后。我目前正在使用的相關代碼如下所示
var offset = [];
for(let i = 0; i < paths.length; i ) {
offset[i] = 0;
}
var time_sec = 2;
for(let i = 0; i < paths.length; i ) {
text[i].onFrame = function (event) {
var speed = paths[i].length/time_sec;
if ((event.time > frame_num*2) && (event.time < ((frame_num*2) 2))) {
text[i].fillColor = "black";
if (offset[i] < paths[i].length){
text[i].position = paths[i].getPointAt(offset[i]);
offset[i] = event.delta*speed; // speed - 150px/second
} else {
offset[i] = paths[i].length;
}
} else {
text[i].fillColor = new paper.Color(0.5,0);
}
paper.view.draw();
}
}
我的代碼限制了我想要添加的功能，例如
- 暫停
- 跳到下一幀/回傳一幀
- 播放幀（然后暫停，直到他們再次點擊播放，然后播放單幀）
- 可變速度（即一幀需要 2 秒，第二幀需要 4 秒）
我還想談談我已經嘗試在呼叫 animate_frame 之間實作等待 2 秒，但是在此等待期間不會發生來自 PaperJS 的 onFrame(event) 所以它不起作用），我還嘗試了一個標志 var 和一個 while 回圈但這也不起作用。
所以我想知道是否有更好的方法來做到這一點。我喜歡我創建一個影片物件，其中該物件包含要移動/影片的路徑和畫布元素，并且可以通過類似 animation.play(); 呼叫影片。然后它還可以等待上一個影片完成，這樣我就可以擁有一組影片幀。對于整個專案，此時我已與 PaperJs 結婚，但我可以將路徑位置資料放入常規 JS 陣列并將其傳遞到新包中，如果有一個包可以在畫布頂部設定影片元素適合我正在嘗試做的事情。感謝您的幫助/想法！
uj5u.com熱心網友回復：
對于復雜的影片場景，我建議您使用適當的影片庫，這將使整個事情變得更容易。
例如，GSAP可能對所有播放/暫停...處理都有很大幫助。
這是一個簡單的小提琴演示如何使用它來控制基于 Paper.js 的影片。
您應該能夠使其適應您的特定用例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Debug Paper.js</title>
<script src="https://unpkg.com/acorn"></script>
<script src="https://unpkg.com/paper"></script>
<script src="https://unpkg.com/gsap"></script>
<style>
html,
body {
margin : 0;
overflow : hidden;
height : 100%;
}
canvas[resize] {
width : 100%;
height : 100%;
}
#buttons {
position : fixed;
top : 50px;
left : 50px;
display : flex;
gap : 15px;
}
</style>
</head>
<body>
<div id="buttons">
<button id="play">play</button>
<button id="pause">pause</button>
<button id="reverse">reverse</button>
</div>
<canvas id="canvas" resize></canvas>
<script>
paper.setup('canvas');
const initialPosition = paper.view.center;
const circle = new paper.Path.Circle({
center: initialPosition,
radius: 50,
fillColor: 'orange'
});
function update(t) {
circle.position = initialPosition.add([t * 100, 0]);
}
const obj = { value: 0 };
var timeLine = gsap.timeline({
onUpdate: (event) => {
update(obj.value);
}
});
timeLine.to(obj, { value: 1, duration: 1 });
timeLine.pause();
document.querySelector('#play').addEventListener('click', () => timeLine.play());
document.querySelector('#pause').addEventListener('click', () => timeLine.pause());
document.querySelector('#reverse').addEventListener('click', () => timeLine.reverse());
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/405703.html
標籤：
下一篇：我怎樣才能解決這個問題