【问题标题】:animate images but the image doesnt move动画图像但图像不动
【发布时间】:2016-04-14 17:58:40
【问题描述】:

所以这是我的总代码,所以我从 flickr 获取一个图像,将其存储在一个数组中,然后在 draw 中循环这些图像。然后我希望他们动画到 100,100 点。有关更详细的说明,请参阅我的评论。

int imageIndex;
XML xml; 
String tag_mode = "all";
String words[];
PImage[] displayImages;
int amount = 500;
int counter = 0;
PrintWriter output;
int j = 0;
int x =50;
int y = 50;
String labelNaam = "Medium";

void setup() {
  size(500, 500);
  String lines[] = loadStrings("text.txt");
  words = split(lines[0], " ");
  displayImages = new PImage[amount];
  output = createWriter("positions.txt"); 


  for (int k = 0; k<words.length; k++) { 

    int randomX = int(random(2));
    if (randomX == 1) {
       x = displayWidth;
    } else {
       x = -500;
    }
    int randomX2 = int(random(2, 4));
    if (randomX2 == 2) {
       y = displayHeight;
    } else {
       y = -500;
    }

    String query = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=MY_API_KEY&tags="+ words[k] + "&sort=relevance&extras=url_o&tag_mode="+ tag_mode +"format=rest";
    xml = loadXML(query);

    XML[] children = xml.getChildren("photos");
    if (children.length > 0) {
        XML[] childPhoto = children[0].getChildren("photo");
  //    println(childPhoto);

        if (childPhoto.length > 0) {
            for (int i = 0; i < 1; i++) {
               String id = childPhoto[i].getString("id");
               String title = childPhoto[i].getString("title");
               String user = childPhoto[i].getString("owner");
               String url = "https://www.flickr.com/photos/"+user+"/"+id;

               String query2 ="https://api.flickr.com/services/rest/?method=flickr.photos.getSizes&api_key=MY_APIKEY&photo_id="+id+"&format=rest";
               xml= loadXML(query2);
               XML[] children2 = xml.getChildren("sizes");

                  if (children2.length > 0) {
                     XML[] childSize2 = children2[0].getChildren("size");
                     if (childSize2.length >0) {
                         println(counter);
                         if (counter <= words.length) {
                              String labelNaam = "Medium";
                              String label = childSize2[5].getString("label");
                              String source = childSize2[5].getString("source");  
                              displayImages[counter] = loadImage(source, "jpg");
                              counter++;
                              }
                           }
                       }
                  }
             }
       }
   }

   textAlign(CENTER, CENTER);
   smooth();
}

void draw() {
  if (j > words.length-1) {
      j = 0;
  }

  if (displayImages[j] != null) {

     println(x + "|||||"+ y);
     image(displayImages[j], x, y);
     j++;
  }
  if (x < 100) {
      x+=100;
  } else {
      x-=100;
  }

  if (y < 100) {
     y+=100;
  } else {
     y-=100;
  }
  delay(1000);
}

【问题讨论】:

    标签: arrays image jquery-animate processing


    【解决方案1】:

    每次调用draw()时,您都将图像的位置设置在窗口边界之外。然后将图像移动 10 个像素。但是下次您只需将图像移回窗外的位置,因此增量移动实际上并没有做任何事情。

    相反,您应该只在草图开始时一次初始化图像的位置。

    int x;
    int y; 
    PImage image;
    int j =0;
    int amount = 500;
    
    void setup() {
      size(500, 500);
      image = loadImage("cat1.jpg");
    
      int randomX = int(random(2));
      if (randomX == 1) {
        x = width + 500;
      } else {
        x = -500;
      }
      int randomX2 = int(random(2, 4));
      if (randomX2 == 2) {
        y = height + 500;
      } else {
        y = -500;
      }
    }
    
    void draw() {
    
      background(255);
    
      if (x < 100) {
        x+=10;
      } else {
        x-=10;
      }
      if (y < 100) {
        y+=10;
      } else {
        y-=10;
      }
    
      println(x + ", " + y);
    
      image(image, x, y, 25, 25);
    }
    

    【讨论】:

    • 感谢您的回答!但我不希望所有图像都有相同的起点。所以这就是为什么我将位置放在绘图中,所以每个图像都有不同的起点。现在每个下面的图像都被放置在更接近 100,100 的位置,但我希望所有图像都像动画一样移动到 100,100 的位置,而不是将静态图像放置在更接近 100,100 的位置。我该怎么做?我编辑了我的原始帖子,所以你可以看到我的完整代码,也许它会更清楚一点。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-04-30
    • 2014-02-22
    • 1970-01-01
    • 1970-01-01
    • 2014-08-31
    相关资源
    最近更新 更多