如何为p5js创建动画类库

Question

我正在开发一个应用程序，在其中我希望使用p5js在一系列视频上提供不同动画的叠加。我正在设法组织我的动画类型类，以便每个动画都具有类似的结构以在每个循环中更新和销毁对象。我的计划是让一系列动画当前处于“活动状态”，并在每次循环迭代时对其进行更新，然后在完成动画时销毁它们。我建立了一个以这种方式淡入淡出文本的类，但是每次在另一个动画中间触发新动画时，都会出现一些奇怪的浮华行为。我一直在尝试调试它，但是没有成功。您对以下方面有什么建议吗？（1）是否由于我的代码结构？ （也许您有更好的建议），要么（2）我做错了什么吗？

这里是代码：

// create an array of currently executing animations to update 
// each animation class needs to have one function and one attribute: 
//      (1) update() -- function to move the objects where ever they need to be moved
//      (2) done -- attribute to determine if they should be spliced out of the array 
var animations = []; 

//////////////////////////////////////////
// Global Variables for Animations      //
//////////////////////////////////////////


let start = false; 
let count = 0; 

function setup(){
    let canv = createCanvas(1920, 1080); 
    canv.id = "myP5canvas"; 
    background(0);  
}

function draw(){

    background(0); 
    // Check things to see if we should be adding any animations to the picture 
    var drawText = random(100); 
    if (drawText > 98) { 
    //if (start == false) {
        let r = 255; 
        let g = 204; 
        let b = 0; 
        let x = random(width-10); 
        let y = random(height-10); 
        animations.push(new TextFader("Wowwwzers!", 100, 'Georgia', r, g, b, x, y, count)); 
        start = true; 
        count += 1; 
    }



    // Update animations that exist! 
    for (var i=0; i < animations.length; i++) { 
        // update the position/attributes of the animation
        animations[i].update(); 
        // check if the animation is done and should be removed from the array 
        if (animations[i].done) { 
            console.log("SPLICE: " + animations[i].id); 
            animations.splice(i, 1); 
        } 

    }
}


// EXAMPLE ANIMATION 
// TEXT FADE 
let TextFader = function(words, size, font, red, green, blue, xloc, yloc, id) {
    this.id = id; 
    console.log("create fader: " + this.id); 
    // translating inputs to variables 
    this.text = words; 
    this.size = size; 
    this.font = font; 
    // To Do: separating out each of the values until I figure out how to fade separately from the color constructor
    this.red = red; 
    this.green = green; 
    this.blue = blue; 

    this.xloc = xloc; 
    this.yloc = yloc; 

    // Maybe add customization in the future for fading... 
    this.fade = 255; 
    this.fadeTime = 3; // in seconds 
    this.fadeIncrement = 5; 
    // Variables to use for destruction
    this.createTime = millis(); 
    this.done = false; 
}

TextFader.prototype.update = function() { 
    // Update the fade 
    // If the fade is below zero don't update and set to be destroyed 
    this.fade -= this.fadeIncrement; 
    if (this.fade <= 0) { 
        this.done = true; 
    } else { 
        this.show(); 
    }
}

TextFader.prototype.show = function() { 
    textFont(this.font); 
    textSize(this.size); 
    fill(this.red, this.green, this.blue, this.fade); 
    text(this.text, this.xloc, this.yloc);
    console.log("Drawing: " + this.id + " fade: " + this.fade + " done: " + this.done); 
}

Answer 1

是，我给你答案！当您反转遍历动画的for循环时，它的工作原理与预期的一样。

由于您在循环内拼接同一数组的元素，因此将跳过某些元素。例如; animations [0] .done = true，将其删除。这意味着animations [1]现在位于animations [0]的位置，animations [2]现在处于animations [1]的位置。i变量增加到1，因此在下一个循环中，您更新animations [1]（并跳过现在位于animation [0]中的动画）。

当您反转循环时，所拼接元素之前的所有内容保持不变，并且不会跳过任何内容。例如; animations [2] .done = true，将其删除。这意味着animations [1]仍然处于animations [1]的位置。i变量递减为1，因此在下一个循环中，您更新动画[1]，并且不跳过任何元素。

// Update animations that exist! 
for (var i = animations.length - 1; i >= 0; i--) { 
    // update the position/attributes of the animation
    animations[i].update(); 
    // check if the animation is done and should be removed from the array 
    if (animations[i].done) { 
        //console.log("SPLICE: " + animations[i].id); 
        animations.splice(i, 1); 
    } 

}