0

我正在使用 Javascript 来拖动和模拟旋转图像，方法是使用多个帧以 360 度显示图像。我对 JavaScript 比较陌生，并且在尝试插入一个触发器时遇到了困难，该触发器会在显示图像的某些帧（度数）时导致叠加图像淡入淡出。例如，当我拖动、旋转并显示图像的正面时，假设从第 10 帧到第 45 帧的范围内，4 个弹出标签将（同时）淡入并保持可见，直到我拖动并旋转图像远离该位置帧范围，导致标签淡出。在图像的背面，一旦显示可接受的帧范围内的任何帧，例如第 95 到 135 帧，我希望出现 3 个弹出标签。这可能吗？请在下面查看我一直在处理的代码：

  /*** 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 ();

我很感激对此的任何建议。谢谢！！-亚当

4

1 回答 1

0

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
于 2012-05-31T20:42:36.923 回答