Javascript动摇html元素 [英] Javascript shake html element
问题描述
我在这里找到了这段代码：
pre $ shake =函数（sprite，magnitude = 16，angular = false）{
//计数器数量
var counter = 1;
//震动总次数（每帧将有1震动）
var numberOfShakes = 10;
//捕获精灵的位置和角度，以便您可以
//在震动完成后恢复它们
var startX = sprite.x，
startY = sprite .y，
startAngle = sprite.rotation;
//将幅度分成10个单位，以便您可以
//每帧减少10％的抖动量
var magnitudeUnit = magnitude / numberOfShakes;
//`randomInt`辅助函数
var randomInt =（min，max）=> {
return Math.floor（Math.random（）*（max - min + 1））+ min;
};
//将精灵添加到`shakingSprites`数组，如果
//不在那里
if（shakingSprites.indexOf（sprite）=== -1） {
//console.log(\"added）
shakingSprites.push（sprite）;
//向精灵添加一个`updateShake`方法。
//将在游戏循环中调用每帧
的`updateShake`方法。摇动效果类型可以是
//向上和向下（x / y摇动）或角度（旋转摇动）。
sprite.updateShake =（）=> {
if（angular）{
angularShake（）;
} else {
upAndDownShake（）;
}
};
}
//'upAndDownShake`函数
函数upAndDownShake（）{
//当`counter`小于时抖动精灵
//`numberOfShakes`
if（counter< numberOfShakes）{
//在每次开始时重置精灵的位置
sprite.x = startx的;
sprite.y = startY;
//减小幅值
幅值 - = magnitudeUnit;
//随机更改精灵的位置
sprite.x + = randomInt（-magnitude，magnitude）;
sprite.y + = randomInt（-magnitude，magnitude）;
//将1加到计数器
计数器+ = 1;
}
//当震动结束时，将精灵恢复到原来的
//位置，并将它从`shakingSprites`数组中移除
if（counter > = numberOfShakes）{
sprite.x = startX;
sprite.y = startY;
shakingSprites.splice（shakingSprites.indexOf（sprite），1）;
//'angularShake`函数
//首先将初始倾斜角度设置为右（+1）
var tiltAngle = 1;
函数angularShake（）{
if（counter< numberOfShakes）{
//重设精灵的旋转
sprite.rotation = startAngle;
//减小幅值
幅值 - = magnitudeUnit;
//根据方向
//旋转精灵向左或向右，以弧度为单位的量与
相匹配sprite.rotation = magnitude * tiltAngle;
counter + = 1;
//颠倒倾斜角度，使得精灵在相反的方向上倾斜
//，以便下一次摇动
tiltAngle * = -1;
}
//当抖动完成时，重置精灵的角度并
//将其从`shakingSprites`数组中移除
if（counter> = numberOfShakes）{
sprite.rotation = startAngle;
shakingSprites.splice（shakingSprites.indexOf（sprite），1）;
//console.log(\"removed）
}
}
}
但它只适用于画布精灵。我怎样才能使它与HTML元素一起工作？感谢。
我已经调整了您的函数，以便它可以在DOM元素上工作。这是一个非常大的震动，但你可能想玩一些参数来阻止它：
var shakingElements = [];
var shake = function（element，magnitude = 16，angular = false）{
//首先将初始倾斜角度设置到右侧（+1）
var tiltAngle = 1;
//一个计数器来计算震动次数
var counter = 1;
//抖动总数（每帧将有1个抖动）
var numberOfShakes = 15;
//捕获元素的位置和角度，以便您可以
//在震动结束后恢复它们
var startX = 0，
startY = 0，
startAngle = 0;
//将幅度分成10个单位，以便您可以
//每帧减少10％的抖动量
var magnitudeUnit = magnitude / numberOfShakes;
//`randomInt`辅助函数
var randomInt =（min，max）=> {
return Math.floor（Math.random（）*（max - min + 1））+ min;
};
//如果
//尚不存在，则将该元素添加到`rocksElements`数组
if（shakingElements.indexOf（element）=== -1） {
//console.log(\"added）
shakingElements.push（element）;
//向元素添加一个`updateShake`方法。
//将在游戏循环中调用每帧
的`updateShake`方法。摇动效果类型可以是
//向上和向下（x / y摇动）或角度（旋转摇动）。
if（angular）{
angularShake（）;
} else {
upAndDownShake（）;
'upAndDownShake`函数
函数upAndDownShake（）{
//摇动元素，计数器小于
//`numberOfShakes`
if（counter< numberOfShakes）{
//在每次摇动开始时重置元素的位置
element.style.transform ='translate（'+ startX +'px，'+ startY +'px）';
//减小幅值
幅值 - = magnitudeUnit;
//随机改变元素的位置
var randomX = randomInt（-magnitude，magnitude）;
var randomY = randomInt（-magnitude，magnitude）;
element.style.transform ='translate（'+ randomX +'px，'+ randomY +'px）';
//将1加到计数器
计数器+ = 1;
requestAnimationFrame（upAndDownShake）;
}
//当震动结束时，将元素恢复到原来的
//位置，并将其从`shakingElements`数组中移除
if（counter > = numberOfShakes）{
element.style.transform ='translate（'+ startX +'，'+ startY +'）';
shakingElements.splice（shakingElements.indexOf（element），1）;
``angularShake``
function angularShake（）{
if（counter< numberOfShakes）{
的console.log（tiltAngle）;
//重置元素的旋转
element.style.transform ='rotate（'+ startAngle +'deg）';
//减小幅值
幅值 - = magnitudeUnit;
//根据方向
//向左或向右旋转元素，其值与弧度值相等
var angle = Number（magnitude * tiltAngle） （2）.toFixed;
console.log（angle）;
element.style.transform ='rotate（'+ angle +'deg）';
counter + = 1;
//颠倒倾斜角度，使元素在相反方向倾斜
//，以便下一次摇动
tiltAngle * = -1;
requestAnimationFrame（angularShake）;
}
//当震动完成时，重置元素的角度并
//将其从`rocksElements`数组中移除
if（counter> = numberOfShakes）{
element.style.transform ='rotate（'+ startAngle +'deg）';
shakingElements.splice（shakingElements.indexOf（element），1）;
//console.log(\"removed）
}
}
};
DEMO
<看看小提琴中的演示。 红色块是常规 upAndDownShake ，而绿色一个使用 angularShake ：
https://jsfiddle.net/12aueufy/1/
I'm trying to shake an html element for my game.
I found this code here:
shake = function (sprite, magnitude = 16, angular = false) {
//A counter to count the number of shakes
var counter = 1;
//The total number of shakes (there will be 1 shake per frame)
var numberOfShakes = 10;
//Capture the sprite's position and angle so you can
//restore them after the shaking has finished
var startX = sprite.x,
startY = sprite.y,
startAngle = sprite.rotation;
// Divide the magnitude into 10 units so that you can
// reduce the amount of shake by 10 percent each frame
var magnitudeUnit = magnitude / numberOfShakes;
//The `randomInt` helper function
var randomInt = (min, max) => {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
//Add the sprite to the `shakingSprites` array if it
//isn't already there
if(shakingSprites.indexOf(sprite) === -1) {
//console.log("added")
shakingSprites.push(sprite);
//Add an `updateShake` method to the sprite.
//The `updateShake` method will be called each frame
//in the game loop. The shake effect type can be either
//up and down (x/y shaking) or angular (rotational shaking).
sprite.updateShake = () => {
if(angular) {
angularShake();
} else {
upAndDownShake();
}
};
}
//The `upAndDownShake` function
function upAndDownShake() {
//Shake the sprite while the `counter` is less than
//the `numberOfShakes`
if (counter < numberOfShakes) {
//Reset the sprite's position at the start of each shake
sprite.x = startX;
sprite.y = startY;
//Reduce the magnitude
magnitude -= magnitudeUnit;
//Randomly change the sprite's position
sprite.x += randomInt(-magnitude, magnitude);
sprite.y += randomInt(-magnitude, magnitude);
//Add 1 to the counter
counter += 1;
}
//When the shaking is finished, restore the sprite to its original
//position and remove it from the `shakingSprites` array
if (counter >= numberOfShakes) {
sprite.x = startX;
sprite.y = startY;
shakingSprites.splice(shakingSprites.indexOf(sprite), 1);
}
}
//The `angularShake` function
//First set the initial tilt angle to the right (+1)
var tiltAngle = 1;
function angularShake() {
if (counter < numberOfShakes) {
//Reset the sprite's rotation
sprite.rotation = startAngle;
//Reduce the magnitude
magnitude -= magnitudeUnit;
//Rotate the sprite left or right, depending on the direction,
//by an amount in radians that matches the magnitude
sprite.rotation = magnitude * tiltAngle;
counter += 1;
//Reverse the tilt angle so that the sprite is tilted
//in the opposite direction for the next shake
tiltAngle *= -1;
}
//When the shaking is finished, reset the sprite's angle and
//remove it from the `shakingSprites` array
if (counter >= numberOfShakes) {
sprite.rotation = startAngle;
shakingSprites.splice(shakingSprites.indexOf(sprite), 1);
//console.log("removed")
}
}
}
However it only works for canvas sprites. How can I get it to work with HTML elements? Thanks.
I have adapted your function so that it works on DOM elements. It is a pretty hefty shake though, you might want to play with the parameters to damped it a little bit:
var shakingElements = [];
var shake = function (element, magnitude = 16, angular = false) {
//First set the initial tilt angle to the right (+1)
var tiltAngle = 1;
//A counter to count the number of shakes
var counter = 1;
//The total number of shakes (there will be 1 shake per frame)
var numberOfShakes = 15;
//Capture the element's position and angle so you can
//restore them after the shaking has finished
var startX = 0,
startY = 0,
startAngle = 0;
// Divide the magnitude into 10 units so that you can
// reduce the amount of shake by 10 percent each frame
var magnitudeUnit = magnitude / numberOfShakes;
//The `randomInt` helper function
var randomInt = (min, max) => {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
//Add the element to the `shakingElements` array if it
//isn't already there
if(shakingElements.indexOf(element) === -1) {
//console.log("added")
shakingElements.push(element);
//Add an `updateShake` method to the element.
//The `updateShake` method will be called each frame
//in the game loop. The shake effect type can be either
//up and down (x/y shaking) or angular (rotational shaking).
if(angular) {
angularShake();
} else {
upAndDownShake();
}
}
//The `upAndDownShake` function
function upAndDownShake() {
//Shake the element while the `counter` is less than
//the `numberOfShakes`
if (counter < numberOfShakes) {
//Reset the element's position at the start of each shake
element.style.transform = 'translate(' + startX + 'px, ' + startY + 'px)';
//Reduce the magnitude
magnitude -= magnitudeUnit;
//Randomly change the element's position
var randomX = randomInt(-magnitude, magnitude);
var randomY = randomInt(-magnitude, magnitude);
element.style.transform = 'translate(' + randomX + 'px, ' + randomY + 'px)';
//Add 1 to the counter
counter += 1;
requestAnimationFrame(upAndDownShake);
}
//When the shaking is finished, restore the element to its original
//position and remove it from the `shakingElements` array
if (counter >= numberOfShakes) {
element.style.transform = 'translate(' + startX + ', ' + startY + ')';
shakingElements.splice(shakingElements.indexOf(element), 1);
}
}
//The `angularShake` function
function angularShake() {
if (counter < numberOfShakes) {
console.log(tiltAngle);
//Reset the element's rotation
element.style.transform = 'rotate(' + startAngle + 'deg)';
//Reduce the magnitude
magnitude -= magnitudeUnit;
//Rotate the element left or right, depending on the direction,
//by an amount in radians that matches the magnitude
var angle = Number(magnitude * tiltAngle).toFixed(2);
console.log(angle);
element.style.transform = 'rotate(' + angle + 'deg)';
counter += 1;
//Reverse the tilt angle so that the element is tilted
//in the opposite direction for the next shake
tiltAngle *= -1;
requestAnimationFrame(angularShake);
}
//When the shaking is finished, reset the element's angle and
//remove it from the `shakingElements` array
if (counter >= numberOfShakes) {
element.style.transform = 'rotate(' + startAngle + 'deg)';
shakingElements.splice(shakingElements.indexOf(element), 1);
//console.log("removed")
}
}
};
DEMO
Have a look at the demo in the fiddle. The red block is the regular upAndDownShake, whereas the green one uses angularShake:
https://jsfiddle.net/12aueufy/1/
这篇关于Javascript动摇html元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
