问题描述
### Increments the part of the string
## $1: version itself
## $2: number of part: 0 – major,1 – minor,2 – patch
increment_version() {
local delimiter=.
local array=($(echo "$1" | tr $delimiter '\n'))
for index in ${!array[@]}; do
if [ $index -eq $2 ]; then
local value=array[$index]
value=$((value+1))
array[$index]=$value
break
fi
done
echo $(IFS=$delimiter ; echo "${array[*]}")
}
const initEyeMove = () => {
let eyeBall = document.querySelector(`.eyeball`);
let pupil = document.querySelector(`.pupil`);
if (eyeBall && pupil) {
let eyeArea = eyeBall.getBoundingClientRect();
let pupilArea = pupil.getBoundingClientRect();
let R = eyeArea.width / 2;
let r = pupilArea.width / 2;
let centerX = eyeArea.left + R;
let centerY = eyeArea.top + R;
document.addEventListener(`mousemove`,(e) => {
let x = e.clientX - centerX;
let y = e.clientY - centerY;
let theta = Math.atan2(y,x);
let angle = theta * 180 / Math.PI + 360;
if (angle < 330 || angle > 380) {
angle = 0;
}
pupil.style.transform = `translateX(${R - r + `px`}) rotate(${angle + `deg`})`;
pupil.style.transformOrigin = `${r + `px`} center`;
});
}
};
initEyeMove();
.pupil {
background-color: transparent;
width: 1px;
height: 1px;
border-radius: 50%;
}
.pupil svg {
top: 50%;
left: 50%;
transform: translate(30%,30%);
}
.eye {
position: absolute;
top: 1px;
left: 6px;
}
.eyeball {
width: 10px;
height: 10px;
background-color: none;
position: absolute;
top: 120px;
left: 6px;
}
具有if语句,该语句在某些条件下使mousemove上的元素的角度返回零。 需要使它从超出设定条件之前的角度缓慢回到零。
更新:添加了更多详细信息,希望该下垂的眼睛回到初始位置时更加平滑,而不是在角度大于或小于所需角度时保持不变。
解决方法
要使其恢复正常,您将必须使用animationFrame在逐帧的基础上对其进行调整。我认为最简单的方法是将角度的计算和应用分开,然后允许一种方法继续调用角度的减小。由于我不确定最终结果是什么,因此以下只是一个猜测(并假设您的角度是否回到0):
const initEyeMove = () => {
let eyeBall = document.querySelector(`.eyeball`);
let pupil = document.querySelector(`.pupil`);
if (eyeBall && pupil) {
let eyeArea = eyeBall.getBoundingClientRect();
let pupilArea = pupil.getBoundingClientRect();
let R = eyeArea.width / 2;
let r = pupilArea.width / 2;
let centerX = eyeArea.left + R;
let centerY = eyeArea.top + R;
// Store this globally so both your methods can access and change it
let angle = 0;
function undoPupil( t ){
// Reduce the angle,limit it,etc...
angle -= 1;
angle = angle < 0 ? 0 : angle;
// Only request an animation frame if the angle needs to change further
if( angle > 0 ) window.requestAnimationFrame( applyPupil );
}
function applyPupil( angle ){
pupil.style.transform = `translateX(${R - r + `px`}) rotate(${angle + `deg`})`;
pupil.style.transformOrigin = `${r + `px`} center`;
// Start undoing the angle here
undoPupil();
}
document.addEventListener(`mousemove`,(e) => {
let x = e.clientX - centerX;
let y = e.clientY - centerY;
let theta = Math.atan2(y,x);
angle = theta * 180 / Math.PI + 360;
applyPupil();
});
}
};
export {initEyeMove};
如果您想要更流畅的体验,或者可以控制持续时间,则可以选择以下路线,我们在其中存储时间并使用它来计算增量,以便我们可以在给定时间内应用它。
const initEyeMove = () => {
let eyeBall = document.querySelector(`.eyeball`);
let pupil = document.querySelector(`.pupil`);
if (eyeBall && pupil) {
let eyeArea = eyeBall.getBoundingClientRect();
let pupilArea = pupil.getBoundingClientRect();
let R = eyeArea.width / 2;
let r = pupilArea.width / 2;
let centerX = eyeArea.left + R;
let centerY = eyeArea.top + R;
let angle = 0;
// We will store the time the animation frame gets called here
let time = 0;
// Store the duration as well.
let duration = 5000;
function undoPupil( t ){
const delta = time - t;
time = t;
// Reduce the angle,etc...
angle *= 1 - (delta / duration);
angle = angle < 0 ? 0 : angle;
// Only request an animation frame if the angle needs to change further
if( angle > 0 ) window.requestAnimationFrame( applyPupil );
}
function applyPupil( angle ){
pupil.style.transform = `translateX(${R - r + `px`}) rotate(${angle + `deg`})`;
pupil.style.transformOrigin = `${r + `px`} center`;
// Start undoing the angle here
undoPupil();
}
document.addEventListener(`mousemove`,(e) => {
let x = e.clientX - centerX;
let y = e.clientY - centerY;
let theta = Math.atan2(y,x);
angle = theta * 180 / Math.PI + 360;
time = window.performance ? window.performance.now() : Date.now()
applyPupil();
});
}
};
export {initEyeMove};
请注意,我没有测试这些内容,因为我没有关于应该发生的情况的上下文。在此处的代码段中添加HTML以及也许一些代码来显示您想要的效果,然后我们可以为您提供进一步的帮助。