JavaFX custom ListCell - javafx-8

Question

I'm trying to animate ListCell when they appear.
Specially I try to animate a new cell when it was just added to the list.
For now it's working pretty OK except when I scroll the ListView, then indexes get messed up and the wrong cell is animated.
I use a boolean flag (entering) in my item model to detect when a cell is used for a brand new item.
public class TimeListCell extends ListCell<MarkItem> {
private static final String BUTTON_GOTO_MARK_CLASS = "but-markgoto";
private static final String LABEL_TIME_MARK_CLASS = "track-time";
private static final String BUTTON_DELETE_MARK_CLASS = "but-markdel";
private static final String MARK_HIGHLIGHT_CURRENT_CLASS = "highlighted";
private Instant time;
private MarkItem markItem;
protected ListCellAnimation anim;
private HBox root = new HBox();
private Button go = new Button();
private Label track = new Label();;
private Button del = new Button();
private ChangeListener<? super Boolean> highlightChange = (e, o, n) -> { setHighlighted(n); };
public TimeListCell (Consumer<MarkItem> onGoto, Consumer<MarkItem> onDelete) {
root.setAlignment(Pos.CENTER);
go.getStyleClass().add(BUTTON_GOTO_MARK_CLASS);
go.setOnAction( e -> {
if (onGoto != null) {
// Trigger GOTO consumer function
onGoto.accept(markItem);
}
});
track.getStyleClass().add(LABEL_TIME_MARK_CLASS);
del.getStyleClass().add(BUTTON_DELETE_MARK_CLASS);
del.setOnAction( e -> {
// First trigger exit animation then delete item
this.animateExit(onDelete);
});
root.getChildren().add(go);
root.getChildren().add(track);
root.getChildren().add(del);
}
#Override
protected void updateItem (final MarkItem item, boolean empty) {
super.updateItem(item, empty);
if (markItem != null) {
markItem.highlightedProperty().removeListener(highlightChange);
}
if (!empty && item != null) {
markItem = item;
time = item.getTime();
track.setText(DateUtil.format(time, DateUtil.Pattern.TIME));
setGraphic(root);
item.highlightedProperty().addListener(highlightChange);
setHighlighted(item.isHighlighted());
if (anim == null) {
//Adding Animation to the ListCell
anim = new ListCellAnimation(this);
//KeyFrame[] f = getKeyFrames(types);
KeyFrame[] frames = null;
if (anim.getKeyFrames().size() == 0) {
KeyFrame[] f = anim.getPopIn(frames);
if (f != null) {
anim.getKeyFrames().addAll(f);
}
}
}
if (item.isEntering()) {
//Checking when to play Animation
animateEnter();
item.setEntering(false);
}
} else {
setGraphic(null);
}
}
/**
* Set/unset cell highlighted style for display.
*
* #param highlighted
* Whether or not to highlight the cell
*/
public void setHighlighted (boolean highlighted) {
track.getStyleClass().remove(MARK_HIGHLIGHT_CURRENT_CLASS);
if (highlighted)
track.getStyleClass().add(MARK_HIGHLIGHT_CURRENT_CLASS);
}
/**
* Animate entering cell.
*/
private void animateEnter() {
if (anim != null && anim.getKeyFrames().size() >= 0
&& (anim.getTimeline().getStatus() == Timeline.Status.STOPPED
|| anim.getTimeline().getStatus() == Timeline.Status.PAUSED)) {
anim.getTimeline().playFromStart();
}
}
/**
* Animate exiting cell.
* Trigger DELETE consumer function when animation is complete.
*/
private void animateExit (Consumer<MarkItem> onDelete) {
anim.getReversedTimeline().setOnFinished( t -> {
// Remove item from list
if (onDelete != null) {
onDelete.accept(markItem);
}
// Prepare cell for next item to use it
scaleXProperty().set(1);
scaleYProperty().set(1);
});
anim.getReversedTimeline().playFromStart();
}
public Instant getTime () {
return time;
}
}
Has anyone any idea of what could mess up the cell indexing ?
Thanks.

Answer 1

If a cell which is animating is reused to display an item that is not "entering", then you need to stop the current animation:
if (item.isEntering()) {
//Checking when to play Animation
animateEnter();
item.setEntering(false);
} else {
anim.getTimeline().stop();
}
In general, you seem to be assuming that any given cell is only ever used for a single item, which is certainly not the case. There may be other bugs in your code that are consequences of this assumption, but this is the main one I can see.