Removal of texture

1

Hi,

I am trying to learn cinder and hence was trying with certain animations. I created a rectangle using textures which pops out from left to right followed by text appearance on the block. Once the text appears I want the text to change color by shifting to new position. The rectangle should also transform into a line (as an underline for the text). While I try to do this, the rectangle is getting transformed to a line but a new texture is formed. The earlier rectangle stays as it is with the formation of new line. How do I remove the earlier rectangle texture when the new transformation is happening?

Kindly suggest as to how do I transform the rectangle texture once appeared into a line with position change of the same?

void CinderProjectApp::mouseDown(MouseEvent event)
{
	Rectf areaS1(vec2(10.0, 100.0), vec2(10.0, getWindowHeight() / 4 + 100));
	Rectf areaF1(vec2(10.0, 100.0), vec2(getWindowWidth() - 100, getWindowHeight() / 4 + 100));
	timeline().apply(&mWhite, areaS1, areaF1, 1.0f, EaseInOutSine());

	timeline().apply(&mRed, areaS1, areaF1, 0.7f, EaseInCubic()).appendTo(&mWhite, -0.4);

	timeline().apply(&mTextAnim1, vec2(getWindowWidth() - 1000, getWindowHeight() / 4 - 115), vec2(0.0, getWindowHeight() / 4 - 115), 0.8, EaseInQuad()).appendTo(&mRed, -0.5);

Rectf areaW(10,100,getWindowWidth()-100,getWindowHeight()/4);
	Rectf areaW2(10, 450, getWindowWidth() - 100, getWindowHeight() / 4+300);

	timeline().apply(&mWhiteD, areaW, areaW2, 1.0f, EaseInOutExpo()).appendTo(&mTextAnim1,1.0f);
	timeline().apply(&mRedD, areaW, areaW2, 1.0f, EaseInOutExpo()).appendTo(&mWhiteD, -0.5f);

}

void CinderProjectApp::draw()
{
	gl::setMatricesWindow(getWindowSize());
	gl::enableAlphaBlending(true);

	gl::clear( Color( 0.0, 0.1, 0 ) ); 
	gl::draw(mWhiteTexture, mWhite);
	gl::draw(mRedTexture, mRed);
	gl::draw(mText1, mTextAnim1);
	
	gl::draw(mWhiteTexture,  mWhiteD);
	gl::draw(mRedTexture, mRedD);
	
}
2

Hi,

these are very specific questions. It would probably help if you learn a bit more about the Timeline. For instance, instead of using apply, you could use appendTo to schedule a new animation that follows the first. For example, you could fade in and then out again using:

const float kDuration = 1.0f;
timeline().apply( &mAlpha, 1.0f, kDuration );
timeline().appendTo( &mAlpha, 0.0f, kDuration );

You can also specify a delay, so that we wait 5 seconds before fading out. Replace the second line with:

timeline().appendTo( &mAlpha, 0.0f, kDuration ).delay( 5.0f );

You can also add a callback function, which will be called once we’re done fading:

timeline().appendTo( &mAlpha, 0.0f, kDuration ).delay( 5.0f ).finishFn( [&]() { 
    // Do something in this lambda function. Example: just quit.
    quit();
} );

Hopefully with these additional tools under your belt you will be able to animate what you need.

-Paul

3

Thank you Paul :slight_smile: