FLIP Animation

Project  : The Path Game

Requirement 
Create flip effect on ImageButtons : When play button is touched, the menu buttons (achievement, leader-board, sound and in-app purchase buttons) should flip-out to become blank tiles and the game-mode(x5, x7 and hex) buttons should flip-in from blank tiles. Play button changes into 'back' button and when 'back' button is touched, game-mode buttons should flip-out and menu buttons should flip in.

Solution
Create two ObjectAnimator for each ImageButton to be flipped, one which animates the rotation around Y axis from 0 to 90 and another from 90 to 180 around Y axis.

	ImageButton leaderBoard = (ImageButton) this.findViewById(R.id.MenuLeaderboard);
	ObjectAnimator board_flip_0_90 = ObjectAnimator.ofFloat(leaderBoard,View.ROTATION_Y, 0,90);
	ObjectAnimator board_flip_90_180 = ObjectAnimator.ofFloat(leaderBoard,View.ROTATION_Y, 90, 180);

view raw flip_1 hosted with ❤ by GitHub

Create two functions which uses these ObjectAnimators to create the flipping effect

	/*
	This function first rotates the tile from 0 to 90 degree and then changes the image of the tile
	and then rotates it from 90 to 180. This gives the effect of flipping a tile with two faces.
	Here the flipOutLeaderboard() flipsOut the side with icon and flips in the gray tile.
	flipInLeaderboard() flipsout the gray side and flips in the side with icon.
	*/
	public void flipOutLeaderboard(){
	board_flip_0_90 .start();
	ImageButton leaderBoard = (ImageButton) this.findViewById(R.id.MenuLeaderboard);
	leaderBoard.setImageResource(R.drawable.gray_tile);
	board_flip_90_180 .start();
	}
	public void flipInLeaderboard(){
	board_flip_90_180.reverse();
	ImageButton leaderBoard = (ImageButton) this.findViewById(R.id.MenuLeaderboard);
	leaderBoard.setImageResource(R.drawable.rank_tile);
	board_flip_0_90.reverse();
	}

view raw flip_2 hosted with ❤ by GitHub

Now when the play button is clicked, the flipOutLeaderboard() is called which flips out the icon side of the tile and flips in the blank side. When the back button is clicked, flipInLeaderboard() is called which flips out the blank side and flips in the icon side . Here the play button and the back button are one and the same, so a Boolean value has to toggled to record the state of the tile ie user facing side of the tile.

	/*
	This method is called when onClick is triggered for the play/back ImageButton. The playVisible is set to true in onCreate method.
	*/
	public void showModes(View button){
	if(playVisible){
	flipOutLeaderboard();
	playVisible = false; // play side of the tile is not visible
	}else{
	flipInLeaderboard();
	playVisible = true; // play side is visible
	}
	}

view raw flip_3 hosted with ❤ by GitHub