Fatal编程技术网

JavaScript中的动画数组

javascript arrays animation

JavaScript中的动画数组,javascript,arrays,animation,jsfiddle,Javascript,Arrays,Animation,Jsfiddle,我想出了一个小动画，它在一个数组中使用图像，但它是草率的。我真正想要的是将其模块化，这样我就可以使用同一函数的多个实例来根据按下的键设置不同数组的动画。另外，如果可能的话，我希望获得它，以便在释放关键帧时，动画停止。我意识到全局调用所有这些变量是一个很大的禁忌，但我不知道如何让它在其他情况下工作！最后但并非最不重要的一点是，我想弄清楚如何将内联脚本的最后一位移到外部文件中，并使其仍然正常工作。任何帮助都将不胜感激！但请注意，我是JavaScript新手，因此请尽量具体/详细，以便我可以从您的智慧

我想出了一个小动画，它在一个数组中使用图像，但它是草率的。我真正想要的是将其模块化，这样我就可以使用同一函数的多个实例来根据按下的键设置不同数组的动画。另外，如果可能的话，我希望获得它，以便在释放关键帧时，动画停止。我意识到全局调用所有这些变量是一个很大的禁忌，但我不知道如何让它在其他情况下工作！最后但并非最不重要的一点是，我想弄清楚如何将内联脚本的最后一位移到外部文件中，并使其仍然正常工作。任何帮助都将不胜感激！但请注意，我是JavaScript新手，因此请尽量具体/详细，以便我可以从您的智慧中学习！谢谢大家!

我创造了一个新的世界

HTML:


元素=document.getElementById（“jajo”）；
JavaScript:

var i = 0;
var element;
var waveArray = ["wave0.png","wave1.png","wave2.png","wave3.png","wave4.png","wave5.png"];
var jumpArray = ["jump0.png","jump1.png","jump2.png","jump3.png","jump4.png","jump5.png"];
var foodArray = ["food0.png","food1.png","food2.png","food3.png","food4.png","food5.png"];

document.onkeydown = function(event) {
var keyPress = String.fromCharCode(event.keyCode);

if(keyPress == "W") { // if "w" is pressed, display wave animation
    increment ();

    document.onkeyup = function(event) { // if "w" is released, display default image
        document.getElementById("jajo").innerHTML= "<img alt='Jajo' src='jajo.png'>";
    }
} else if(keyPress == "A") { // if "a" is pressed, display jump animation
} else if(keyPress == "S") { // if "s" is pressed, display food animation
}
}

function increment (){
i++;
if(i > (waveArray.length - 1)){
    i = 0;
}
setTimeout(animation,1000/30);
}


function animation() {
var img = '<img src="' + waveArray[i] + '" alt="Jajo" />';
element.innerHTML = img;
setTimeout(increment, 2000/30);
}

var i=0；
var元素；
var waveArray=[“wave0.png”、“wave1.png”、“wave2.png”、“wave3.png”、“wave4.png”、“wave5.png”]；
var jumpArray=[“jump0.png”、“jump1.png”、“jump2.png”、“jump3.png”、“jump4.png”、“jump5.png”]；
var foodaray=[“food0.png”、“food1.png”、“food2.png”、“food3.png”、“food4.png”、“food5.png”]；
document.onkeydown=函数（事件）{
var keyPress=String.fromCharCode（event.keyCode）；
如果（按键==“W”）{//如果按下“W”，则显示波浪动画
增量（）；
document.onkeyup=函数（事件）{//如果释放了“w”，则显示默认图像
document.getElementById（“jajo”）.innerHTML=“”；
}
}否则，如果（按键==“A”）{//如果按下“A”，则显示跳跃动画
}否则，如果（按键==“S”）{//如果按下“S”，则显示食物动画
}
}
函数增量（）{
i++；
if（i>（waveArray.length-1））{
i=0；
}
设置超时（动画，1000/30）；
}
函数动画（）{
var img=“”；
element.innerHTML=img；
设置超时（增量，2000/30）；
}
Demo

模块 方法 添加 添加具有以下参数的新动画：

  • 键
    ：激活动画的键
  • target
    ：图像的包装（如果指定了
    image
    ，则为可选）
  • 图像
    ：要设置动画的图像（可选，默认为
    目标
    中的第一个图像）
  • default
    ：图像的默认url（可选，默认为原始url）
  • 索引
    ：数组中的初始位置（可选，默认为
    0
    ）
  • 数组
    ：图像数组
去除 删除与指定的
关键点相关的动画

使残废
禁用动画（键入关键点将无效），并停止当前的动画

使可能

启用动画（键入键可以启动动画）。
切勿将
setTimeout
/
setInterval
与字符串一起使用，就像使用邪恶的
eval
！使用
setTimeout（增量，2000/30）相反。小提琴不起作用。固定在嘎，谢谢你！我将在帖子中更新该链接。这正是我所需要的！非常感谢你！

var i = 0;
var element;
var waveArray = ["wave0.png","wave1.png","wave2.png","wave3.png","wave4.png","wave5.png"];
var jumpArray = ["jump0.png","jump1.png","jump2.png","jump3.png","jump4.png","jump5.png"];
var foodArray = ["food0.png","food1.png","food2.png","food3.png","food4.png","food5.png"];

document.onkeydown = function(event) {
var keyPress = String.fromCharCode(event.keyCode);

if(keyPress == "W") { // if "w" is pressed, display wave animation
    increment ();

    document.onkeyup = function(event) { // if "w" is released, display default image
        document.getElementById("jajo").innerHTML= "<img alt='Jajo' src='jajo.png'>";
    }
} else if(keyPress == "A") { // if "a" is pressed, display jump animation
} else if(keyPress == "S") { // if "s" is pressed, display food animation
}
}

function increment (){
i++;
if(i > (waveArray.length - 1)){
    i = 0;
}
setTimeout(animation,1000/30);
}


function animation() {
var img = '<img src="' + waveArray[i] + '" alt="Jajo" />';
element.innerHTML = img;
setTimeout(increment, 2000/30);
}



var animation = (function() {
    var delay = 1000 / 30;
    var map = {}, active = [], timer;
    function animate() {
        for(var i=0, l=active.length; i<l; ++i) {
            var data = map[active[i]];
            ++data.index;
            data.index %= data.array.length;
            data.image.src = data.array[data.index];
        }
        timer = setTimeout(animate, delay);
    }
    function begin(e) {
        var key = String.fromCharCode(e.keyCode),
            data = map[key];
        if(!data) return;
        if(!active.length) timer = setTimeout(animate, delay);
        if(!~active.indexOf(key)) active.push(key);
    }
    function end(e) {
        var key = String.fromCharCode(e.keyCode),
            data = map[key];
        if(!data) return;
        data.image.src = data.default;
        var index = active.indexOf(key);
        if(!~index) return;        
        active.splice(index, 1);
        if(!active.length) clearTimeout(timer);
    }
    return {
        add: function(data) {
            data.index = data.index || 0;
            data.image = data.image || data.target.getElementsByTagName('img')[0];
            data.default = data.default || data.image.src;
            map[data.key] = data;
        },
        remove: function(key) {
            delete map[key];
        },
        enable: function() {
            document.addEventListener('keydown', begin, false);
            document.addEventListener('keyup', end, false);
        },
        disable: function() {
            document.removeEventListener('keydown', begin, false);
            document.removeEventListener('keyup', end, false);
            clearTimeout(timer);
            active = [];
        }
    };
})();



animation.enable();
animation.add({
    key: 'W',
    target: document.getElementById('jajo'),
    array: [
        "http://static.spoonful.com/sites/default/files/styles/square_128x128/public/crafts/fingerprint-flowers-spring-craft-photo-420x420-aformaro-01.jpg",
        "http://static.spoonful.com/sites/default/files/styles/square_128x128/public/crafts/paper-flowers-spring-craft-photo-420x420-aformaro-11.jpg",
        "http://static.spoonful.com/sites/default/files/styles/square_128x128/public/crafts/tissue-paper-flowers-kaboose-craft-photo-350-fs-IMG_8971_rdax_65.jpg"
    ]
});
animation.add({ /* ... */ });