Is it possible to animate objects inside a tableview row?

mfor1967 · February 4, 2014, 3:31am

Hello, I have a tableview and I’d like to fade in an element when the user has decided to delete one of the rows. I can transition to the whole row, but how can I fade in a graphic that is in that row? Here is what I have tried so far…

local function onRowRender( event ) &nbsp; &nbsp; local row = event.row &nbsp; &nbsp; local rowHeight = row.contentHeight &nbsp; &nbsp; local rowWidth = row.contentWidth local whichOne = BookmarksTable[row.index][1] &nbsp; &nbsp; local rowTitle = display.newText( row, buttonColors[BookmarksTable[row.index][1]][4] , 0, 0, "Univers-Light", 24 ) &nbsp; &nbsp; rowTitle:setFillColor( 0 ) &nbsp; &nbsp; rowTitle.anchorX = 0 &nbsp; &nbsp; rowTitle.x = 100 &nbsp; &nbsp; rowTitle.y = rowHeight \* 0.3 &nbsp; &nbsp; local delImage = display.newImage(row, "assets/delete\_gradient.png", true) &nbsp; &nbsp; delImage.anchorX, delImage.anchorY = 0, 0 &nbsp; &nbsp; delImage.x = 100 &nbsp; &nbsp; delImage.y = 0 &nbsp; &nbsp; delImage.alpha = 0.5 end &nbsp;

local function onRowTouch( event ) &nbsp; &nbsp; &nbsp;local row = event.target &nbsp; &nbsp; &nbsp;if event.phase == "press" then &nbsp; &nbsp; &nbsp;elseif event.phase == "swipeLeft" then &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;print( "Swiped left." ) &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;delRow = event.target &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (delRow.id == nil) then &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print("swiped empty area") &nbsp; &nbsp; &nbsp; &nbsp;else &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition.to( delRow, { time = 250, x = -50 } ) &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; transition.to( delRow.delImage, { time = 250, alpha = 1.0 } ) &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; local alert = native.showAlert( "Bookmark", "Delete bookmark?", { "No", "Yes" }, onDELComplete ) &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; end &nbsp; &nbsp; &nbsp; &nbsp; elseif event.phase == "swipeRight" then &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; print( "Swiped right." ) &nbsp; &nbsp; &nbsp; &nbsp; elseif event.phase == "tap" then &nbsp; &nbsp; &nbsp; &nbsp; print( "Tapped." ) &nbsp; &nbsp; &nbsp; &nbsp; end &nbsp; &nbsp; &nbsp; &nbsp; return true end &nbsp;

The second transitionto “transition.to( delRow.delImage,…” is what isn’t giving an error or working.

Any ideas where I went wrong, or how to do it correctly?

Thanks!

mfor1967 · February 5, 2014, 9:39pm

I found a workaround. In the row I rendered everything twice, one set offset to the right of the screen where it’s not seen, than instead of animating something withing the row, I animate the whole row to shift over to reveal the second set.

transition.to( delRow, { time = 1, x = -640 } )

From the users point of view, something new pops up with the rest of the row. A workaround, but working

rob · February 6, 2014, 2:17am

You can do something like this:

local function onRowRender( event ) &nbsp; &nbsp; local row = event.row &nbsp; &nbsp; local rowHeight = row.contentHeight &nbsp; &nbsp; local rowWidth = row.contentWidth local whichOne = BookmarksTable[row.index][1] &nbsp; &nbsp; row.rowTitle = display.newText( row, buttonColors[BookmarksTable[row.index][1]][4] , 0, 0, "Univers-Light", 24 ) &nbsp; &nbsp; rowTitle:setFillColor( 0 ) &nbsp; &nbsp; rowTitle.anchorX = 0 &nbsp; &nbsp; rowTitle.x = 100 &nbsp; &nbsp; rowTitle.y = rowHeight \* 0.3 &nbsp; &nbsp; row.delImage = display.newImage(row, "assets/delete\_gradient.png", true) &nbsp; &nbsp; delImage.anchorX, delImage.anchorY = 0, 0 &nbsp; &nbsp; delImage.x = 100 &nbsp; &nbsp; delImage.y = 0 &nbsp; &nbsp; delImage.alpha = 0.5 end

By adding your row objects to the row itself, you can then reference them in your onRowTouch function.

Rob

mfor1967 · February 8, 2014, 7:54am

Thanks! That works well.

mfor1967 · February 5, 2014, 9:39pm