mirror of
https://github.com/SamEyeBam/animate.git
synced 2026-02-04 01:14:15 +00:00
mobile ui fixed
This commit is contained in:
Sam
14634
Tests/webGl/my-threejs-test/package-lock.json
generated
14634
Tests/webGl/my-threejs-test/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -11,7 +11,7 @@
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"parcel": "^2.12.0"
|
||||
"parcel": "^1.12.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"@parcel/transformer-glsl": "^2.12.0",
|
||||
|
||||
@@ -57,6 +57,26 @@ canvas {
|
||||
}
|
||||
|
||||
|
||||
/* Playback controls - pinned to bottom of toolbar */
|
||||
.playback-controls {
|
||||
margin-top: auto;
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
padding: 15px 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.15);
|
||||
background: rgba(25, 25, 25, 0.95);
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playback-controls {
|
||||
margin-left: -10px;
|
||||
margin-right: -10px;
|
||||
padding: 15px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
margin: 8px 0px;
|
||||
@@ -117,6 +137,32 @@ canvas {
|
||||
|
||||
.buttonReset{
|
||||
background-color: #f4e1e1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Speed Control */
|
||||
.speed-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 8px 0;
|
||||
padding: 8px 12px;
|
||||
background: rgba(40, 45, 50, 0.4);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.speed-label {
|
||||
color: #e0e0e0;
|
||||
font-family: Roboto, system-ui;
|
||||
font-size: 14px;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
#inputSpeed {
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
cursor: pointer;
|
||||
accent-color: #3a9bdc;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
@@ -128,7 +174,7 @@ canvas {
|
||||
flex-direction: column;
|
||||
margin: 2px 0;
|
||||
padding: 6px 8px;
|
||||
background: rgba(40, 45, 50, 0.5);
|
||||
background: rgba(40, 45, 50, 0.35);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@@ -258,7 +304,7 @@ canvas {
|
||||
.control-settings-panel {
|
||||
margin-top: 8px;
|
||||
padding: 8px;
|
||||
background: rgba(30, 35, 40, 0.6);
|
||||
background: rgba(30, 35, 40, 0.4);
|
||||
border-radius: 4px;
|
||||
border-left: 2px solid #5a6a7a;
|
||||
}
|
||||
@@ -319,7 +365,7 @@ canvas {
|
||||
|
||||
/* Individual filter item */
|
||||
.filter-item {
|
||||
background: rgba(40, 50, 60, 0.5);
|
||||
background: rgba(40, 50, 60, 0.35);
|
||||
border-left: 3px solid #4a9eff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
padding: 6px 8px;
|
||||
@@ -453,7 +499,7 @@ canvas {
|
||||
.param-bounds-panel {
|
||||
margin-top: 4px;
|
||||
padding: 4px;
|
||||
background: rgba(30, 40, 50, 0.5);
|
||||
background: rgba(30, 40, 50, 0.35);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@@ -499,8 +545,8 @@ canvas {
|
||||
.scene-btn {
|
||||
padding: 6px 10px;
|
||||
font-size: 11px;
|
||||
background: #3a3a3a;
|
||||
border: 1px solid #444;
|
||||
background: rgba(58, 58, 58, 0.7);
|
||||
border: 1px solid rgba(68, 68, 68, 0.6);
|
||||
border-radius: 4px;
|
||||
color: #e0e0e0;
|
||||
cursor: pointer;
|
||||
@@ -708,8 +754,8 @@ canvas {
|
||||
|
||||
/* Layer panels */
|
||||
.layer-panel {
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
background: rgba(26, 26, 26, 0.7);
|
||||
border: 1px solid rgba(51, 51, 51, 0.6);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
@@ -719,8 +765,8 @@ canvas {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 10px;
|
||||
background: #252525;
|
||||
border-bottom: 1px solid #333;
|
||||
background: rgba(37, 37, 37, 0.7);
|
||||
border-bottom: 1px solid rgba(51, 51, 51, 0.6);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
|
||||
@@ -12,25 +12,20 @@
|
||||
<div id="toolbar">
|
||||
<!-- Shape layers -->
|
||||
<div id="layers-container"></div>
|
||||
<br>
|
||||
<p>Controls:</p>
|
||||
<p>
|
||||
Press "Space" to pause and start the animation
|
||||
</p>
|
||||
<p>
|
||||
Press "P" to show/hide the control panel
|
||||
</p>
|
||||
<br>
|
||||
<p>Speed</p>
|
||||
<input type="text" id="inputDegPerSec" value="10" onchange="ChangeDegPerSec(this.value)">
|
||||
<br>
|
||||
<p>Controls</p>
|
||||
<div class="controls">
|
||||
<button class="controlFrameButton button-8" onclick="BackwardFrame()"><</button>
|
||||
<button class="controlPauseButton button-8" id="pauseButton" onclick="TogglePause()">Play</button>
|
||||
<button class="controlFrameButton button-8" onclick="ForwardFrame()">></button>
|
||||
|
||||
<!-- Playback controls - pinned to bottom -->
|
||||
<div class="playback-controls">
|
||||
<div class="speed-control">
|
||||
<span class="speed-label">Speed: <span id="speedValue">1.0</span>x</span>
|
||||
<input type="range" id="inputSpeed" min="-10" max="10" step="0.1" value="1" oninput="ChangeSpeed(this.value)">
|
||||
</div>
|
||||
<div class="controls">
|
||||
<button class="controlFrameButton button-8" onclick="BackwardFrame()"><</button>
|
||||
<button class="controlPauseButton button-8" id="pauseButton" onclick="TogglePause()">Pause</button>
|
||||
<button class="controlFrameButton button-8" onclick="ForwardFrame()">></button>
|
||||
</div>
|
||||
<button class="buttonReset button-8" id="resetButton" onclick="Reset()">Reset Timeline</button>
|
||||
</div>
|
||||
<button class="buttonReset button-8" id="resetButton" onclick="Reset()">Reset Rotation</button>
|
||||
</div>
|
||||
<div>
|
||||
<button onclick="manualToggleSettings()" class="button">Show/hide</button>
|
||||
|
||||
@@ -17,6 +17,7 @@ class AnimationEngine {
|
||||
this.elapsedTime = 0;
|
||||
this.rotation = 0;
|
||||
this.degPerSec = 10;
|
||||
this.speedMultiplier = 1.0;
|
||||
|
||||
// State
|
||||
this.paused = false;
|
||||
@@ -78,8 +79,8 @@ class AnimationEngine {
|
||||
|
||||
if (!this.paused) {
|
||||
this.rotation += this.degPerSec / this.targetFps;
|
||||
this.elapsedTime += deltaTime;
|
||||
adjustedDeltaTime = deltaTime / 100;
|
||||
this.elapsedTime += deltaTime * this.speedMultiplier;
|
||||
adjustedDeltaTime = (deltaTime * this.speedMultiplier) / 100;
|
||||
}
|
||||
|
||||
const adjustedElapsed = this.elapsedTime / 1000;
|
||||
@@ -127,24 +128,24 @@ class AnimationEngine {
|
||||
}
|
||||
|
||||
/**
|
||||
* Step forward one frame
|
||||
* Step forward one frame (advances elapsed time by 1 frame)
|
||||
*/
|
||||
stepForward() {
|
||||
this.rotation += this.degPerSec / this.targetFps;
|
||||
this.elapsedTime += this.frameDuration;
|
||||
}
|
||||
|
||||
/**
|
||||
* Step backward one frame
|
||||
* Step backward one frame (rewinds elapsed time by 1 frame)
|
||||
*/
|
||||
stepBackward() {
|
||||
this.rotation -= this.degPerSec / this.targetFps;
|
||||
this.elapsedTime = Math.max(0, this.elapsedTime - this.frameDuration);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set degrees per second
|
||||
* Set speed multiplier (-10 to 10)
|
||||
*/
|
||||
setSpeed(degPerSec) {
|
||||
this.degPerSec = parseFloat(degPerSec);
|
||||
setSpeed(speed) {
|
||||
this.speedMultiplier = parseFloat(speed);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -48,7 +48,7 @@ function toggleSettings(e) {
|
||||
toolbarShowing = !toolbarShowing;
|
||||
}
|
||||
if (e.code === "Space") {
|
||||
engine.togglePause();
|
||||
TogglePause();
|
||||
}
|
||||
|
||||
let tb = document.getElementById("toolbar");
|
||||
@@ -73,8 +73,10 @@ function BackwardFrame() {
|
||||
engine.stepBackward();
|
||||
}
|
||||
|
||||
function ChangeDegPerSec(newValue) {
|
||||
engine.setSpeed(newValue);
|
||||
function ChangeSpeed(newValue) {
|
||||
const speed = parseFloat(newValue);
|
||||
engine.setSpeed(speed);
|
||||
document.getElementById('speedValue').textContent = speed.toFixed(1);
|
||||
}
|
||||
|
||||
function render_clear() {
|
||||
|
||||
Reference in New Issue
Block a user