【发布时间】：2020-07-25 10:41:11
【问题描述】：
我在 GitHub 上找到了一个非常棒的 Gsap 动画：https://github.com/mthomps4/Dice-Roll
它看起来很棒，但我想在 React 中使用。我让它在表面上工作得更少，但是当我掷骰子时，骰子上显示的内容和存储的内容不匹配。它们总是很奇怪，但不合逻辑。
IE：
Shown Console Log
1 0
2 2
5 3
6 1
这也是我可以使用的唯一 4 个值。我已经尝试调整生成随机数的代码：
const startRoll = function () {
console.log('RUN!');
let randomNum = Math.floor(Math.random() * 3); //between 0 and 5
和
const faceRoll = function () {
let randomNum = Math.floor(Math.random() * 6); //between 0 and 5
（这些 cmets 来自原始仓库）
请告诉我如何完善这个小骰子，滚，因为它看起来很棒，而且快完成了。真的希望我能让它工作，在此先感谢。
JSX
export default function Dice() {
//////////// Copy Pasta ////////
const cubeRef = useRef();
const sceneRef = useRef();
let i = 90;
let j = 0;
//Main DOM Variables and Selectors
//Selects Cube Face X via CSS Degree Rotatation
const cubeFace = [
'translateX(200px)',
'rotateX(90deg)',
'rotateX(180deg)',
'rotateX(270deg)',
];
TweenMax.set(sceneRef.current, { perspective: 0 });
//Rotates through cubeFace array on each click.
//If i>cubeFace reset to 0 and preform 1st step.
const RotateY = function () {
TweenMax.to(cubeRef.current, 0.5, {
transform: cubeFace[i],
ease: Linear.easeNone,
});
if (i < cubeFace.length) {
i++;
console.log(i);
} else {
i = 1;
TweenMax.to(cubeRef.current, 0.5, {
transform: cubeFace[0],
ease: Linear.easeNone,
});
console.log(i);
}
}; //RotateY Function
const RotateX = function () {
TweenMax.to(cubeRef.current, 0.5, { transform: 'rotateY(' + i + 'deg)' });
i += 90;
};
//Random Experimental Scene
const tl = new TimelineMax({ paused: true, repeat: 3 });
tl.yoyo(true);
tl.to(cubeRef.current, 1, { rotation: 360 })
.to(cubeRef.current, 1, { rotationY: 360, rotationX: 360 }, '-=1')
.to(sceneRef.current, 1, { scale: 0.2 }, '-=1')
.to(cubeRef.current, 1, { x: 500 }, '-=1');
tl.timeScale(1);
const start = function () {
tl.restart();
};
//TweenMax would not take Array String used if statement
// const cubeRef.currentFace2 = [
// "rotationY:0, rotationX:0",
// "rotationX:90",
// "rotationX:180",
// "rotationX:270",
// "rotationY:90",
// "rotationY:180"];
// const rl = new TimelineMax({onComplete:faceRoll});
//Roll Die Timeline
const startRoll = function () {
console.log('RUN!');
let randomNum = Math.floor(Math.random() * 3); //between 0 and 5
let rl = new TimelineMax({ onComplete: faceRoll });
rl.to(cubeRef.current, 0.01, { rotationY: 0, rotationX: 0 });
rl.to(cubeRef.current, 3, { rotationY: 1800, rotationX: 1800 });
rl.to(sceneRef.current, 3, { scale: 0.2 }, '-.1');
rl.timeScale(4);
rl.restart();
};
const faceRoll = function () {
let randomNum = Math.floor(Math.random() * 6); //between 0 and 5
if (randomNum === 0) {
TweenMax.to(cubeRef.current, 0.2, { rotationY: 0, rotationX: 0 }, '-1');
TweenMax.to(sceneRef.current, 0.2, { scale: 1 }, '-1');
}
if (randomNum === 1) {
TweenMax.to(cubeRef.current, 0.2, { rotationX: 90, scale: 1 }, '-1');
TweenMax.to(sceneRef.current, 0.2, { scale: 1 }, '-1');
}
if (randomNum === 2) {
TweenMax.to(cubeRef.current, 0.2, { rotationX: 180, scale: 1 }, '-1');
TweenMax.to(sceneRef.current, 0.2, { scale: 1 }, '-1');
}
if (randomNum === 3) {
TweenMax.to(cubeRef.current, 0.2, { rotationX: 270, scale: 1 }, '-1');
TweenMax.to(sceneRef.current, 0.2, { scale: 1 }, '-1');
}
if (randomNum === 4) {
TweenMax.to(cubeRef.current, 0.2, { rotationY: 90, scale: 1 }, '-1');
TweenMax.to(sceneRef.current, 0.2, { scale: 1 }, '-1');
}
if (randomNum === 5) {
TweenMax.to(cubeRef.current, 0.2, { rotationY: 270, scale: 1 }, '-1');
TweenMax.to(sceneRef.current, 0.2, { scale: 1 }, '-1');
}
console.log(randomNum);
}; //FaceRoll If Statement
/////////////////////
return (
<DiceWrap>
<header>
<h1> Random Die Throw </h1>
<h3> Cube Rotation and Animation </h3>
</header>
<div id="box1">
<div className="scene" ref={sceneRef}>
<div className="cube" ref={cubeRef}>
<div className="cube-face front-face rfront"></div>
<div className="cube-face back-face rback"></div>
<div className="cube-face left-face rleft"></div>
<div className="cube-face right-face rright"></div>
<div className="cube-face top-face rtop"></div>
<div className="cube-face bottom-face rbottom"></div>
</div>
</div>
</div>
<div id="Roll">
<button id="RollDie" onClick={startRoll}>
Roll Die
</button>
</div>
<div id="animations">
<button id="StartB" onClick={RotateX}>
Rotate X
</button>
<button id="StartA" onClick={start}>
Start Scale Animation
</button>
<button id="StartC" onClick={RotateY}>
Rotate Y
</button>
</div>
</DiceWrap>
);
}
Styled-Components（不确定是不是这个原因？）
.cube{
margin-top:80px;
margin:auto;
width:150px;
height:150px;
/*position:relative;*/
transform-style: preserve-3d;
}
.cube-face {
width: 150px;
height: 150px;
position: absolute;
}
.front-face{
background:red;
transform:translate3d(0,0,75px);
/*border-radius:20px;*/
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
background: url(${DiceOne});
background-size: contain;
}
.back-face{
background:yellow;
transform:rotateY(180deg) translate3d(0,0,75px);
/*border-radius:20px;*/
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
background: url(${DiceTwo});
background-size: contain;
}
.left-face{
background: orange;
transform: rotateY(-90deg) translate3d(0, 0, 75px);
/*border-radius:20px;*/
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
background: url(${DiceThree});
background-size: contain;
}
.right-face{
background:lime;
transform: rotateY(90deg) translate3d(0, 0, 75px);
/*border-radius:20px;*/
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
background: url(${DiceFour});
background-size: contain;
}
.top-face {
background:blue;
transform: rotateX(90deg) translate3d(0, 0, 75px);
/*border-radius:20px;*/
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
background: url(${DiceFive});
background-size: contain;
}
.bottom-face {
background:magenta;
transform: rotateX(-90deg) translate3d(0, 0, 75px);
/*border-radius:20px;*/
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
background: url(${DiceSix});
background-size: contain;
}
【问题讨论】：