使用Javascript中的多個圖像幀的3D旋轉效果-如何觸發某些幀上的元素淡入/淡出？

Question

我正在使用Javascript通過使用多個以360度顯示圖像的幀來拖動和模擬旋轉圖像。 我對JavaScript相對較新，並且在腳本中很難插入一個觸發器，該觸發器將在顯示圖像的某些幀（度）時導致疊加圖像淡入淡出。 例如，當我拖動，旋轉並顯示圖像的正面時，假設第10幀到第45幀的范圍內，有4個彈出標簽會（同時）淡入並保持可見，直到我拖動並旋轉圖像遠離該位置為止框架范圍，導致標簽淡出。 我希望在圖像的背面顯示3個彈出標簽，一旦顯示了可接受范圍內的任何幀，比如說95至135幀。這可能嗎？ 請從下面查看我一直在處理的代碼：

  /*** configuration variables ***/
var
totalFrames = 72,
frameUrlTemplate =
'images/frames/Skeleton_[#frame].jpg'
;

/*** state variables ***/
var
rotation = 0,
lastFrameNo = -1,
dragStartRotation
;

/*** create the Uize.Widget.Drag instance ***/
var rotationViewer = page.addChild (
'rotationViewer',
Uize.Widget.Drag,
{
cancelFade:{duration:2000,curve:Uize.Curve.Rubber.easeOutBounce ()},
releaseTravel:function (speed) {
var
deceleration = 2000, // measured in pixels/s/s
duration = speed / deceleration
;
return {
duration:duration,
distance:Math.round (speed * duration / 2),
curve:function (_value) {return 1 - (_value = 1 - _value) * _value}
};
},
html:function (input) {
var
htmlChunks = [],
frameNodeIdPrefix = input.idPrefix + '-frame'
;
for (var frameNo = 0; ++frameNo <= totalFrames;) {
htmlChunks.push (
'<img' +
' id="' + frameNodeIdPrefix + frameNo + '"' +
' src="' + Uize.substituteInto (frameUrlTemplate,{frame:(frameNo < 10 ? '0' : '') + frameNo}) +'"' +
'/>'
);
}
return htmlChunks.join ('');
},
built:false
}
);

/*** wire up the drag widget with events for updating rotation degree ***/
function updateRotation (newRotation) {
rotation = ((newRotation % 360) + 360) % 360;
var frameNo = 1 + Math.round (rotation / 360 * (totalFrames - 1));
if (frameNo != lastFrameNo) {
rotationViewer.showNode ('frame'+ lastFrameNo,false);
rotationViewer.showNode ('frame'+ (lastFrameNo = frameNo));
}
}
rotationViewer.wire ({
'Drag Start':function () {dragStartRotation = rotation},
'Drag Update':function (e) {updateRotation (dragStartRotation - e.source.eventDeltaPos [0] / -2.5)}
});

/*** function for animating spin ***/
function spin (degrees,duration,curve) {
Uize.Fade.fade (updateRotation,rotation,rotation + degrees,duration,{quantization:1,curve:curve});
}

/*** initialization ***/
Uize.Node.wire (window,'load',function () {spin (-360,2700,Uize.Curve.easeInOutPow (4))});

/*** wire up the page widget ***/
page.wireUi ();

我對此表示感謝。 謝謝！！ -亞當

Answer 1

javascrip fot html元素中有3d轉換，甚至還有一些庫。 如果它是平面圖像，請使用它。 如果您希望模擬它的3d圖像，那么僅用120張圖片就已經可以獲得非常逼真的效果。

 rotation = ((newRotation % 360) + 360) % 360;
 var frameNo = 1 + Math.round (rotation / 360 * (totalFrames -1));
 if (frameNo > 0 && frameNo< 60 )//code to show box