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 に答える