Hi,
I need to display a grid of thumbnails (of image).
When the user taps on a thumbnai I would like to perform the following animation:
the thumbnail shall move the center of the screen
the thumbnail size shall increase and the containing image shall be resize accordingly.
I’m using using the following ofImage method to perform the animation:
The animation is not so smooth and the problem is the resize method since, as I have read in this forum, is run on CPU.
I would like to know it there is an alternative approach in order to implement an animation as described above with a better perfomance.
Thanks
Alessandro
Jildert
September 5, 2018, 9:04am
#2
Hi!
I think resize isn’t needed, since you can use
draw(x, y, w, h)
I tried to make something that moves and scales at the same time with this class:
class movingImage: public ofImage{
public:
movingImage(ofVec2f loc, ofVec2f size){
this->loc = loc;
this->size = size;
fullSize = ofVec2f(400, 400);
endPos = ofVec2f(50, 50);
}
ofVec2f loc, size, fullSize, endPos;
void display(){
draw(loc.x, loc.y, size.x, size.y);
}
bool bGrow = false;
bool bMove = false;
void update(){
if(bGrow){
if(size == fullSize){
bGrow = false;
} else{
size += ofVec2f(5, 5);
}
}
if(bMove){
if(loc.distance(endPos) < 2){
bMove = false;
} else{
loc -= ofVec2f(1, 1);
}
}
}
};
And this in ofApp.h
movingImage* i;
ofApp.cpp
void ofApp::setup(){
ofSetFrameRate(30);
ofSetWindowShape(500, 500);
ofBackground(200);
i = new movingImage(ofVec2f(100, 100), ofVec2f(200, 200));
i->load("test.jpg");
i->bGrow = true;
i->bMove = true;
}
//--------------------------------------------------------------
void ofApp::update(){
i->update();
}
//--------------------------------------------------------------
void ofApp::draw(){
i->display();
}
I’m not sure what you mean by not so smooth , but in my implementation I see some noise in the scaling picture, but I think that’s inevitable.
Oh, and if you’re looking for a (way) better implementation of moving (and scaling) an object, take a look at the examples in Nature Of Code by Daniel Shiffman.
1 Like
Thanks, I will try your solution, but the image has to been resized since its size is bigger the rect size used to display on the app.