Reputation: 1
I'm trying to make an effect on two images, as if it were a flip card annimation. Image 1 = "botaoiniciar" and Image 2 = "botaosair". At the moment when I click on the initial, it turns the second, but then it gets stuck on the second image and I would like it to come back. I am using the following code. I thank you for your attention.
final ImageView botaoiniciar = (ImageView) findViewById(R.id.botaoiniciar);
botaoiniciar.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
final ObjectAnimator oa1 = ObjectAnimator.ofFloat(botaoiniciar, "scaleX", 1f, 0f);
final ObjectAnimator oa2 = ObjectAnimator.ofFloat(botaoiniciar, "scaleX", 0f, 1f);
oa1.setInterpolator(new DecelerateInterpolator());
oa2.setInterpolator(new AccelerateDecelerateInterpolator());
oa1.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
botaoiniciar.setImageResource(R.drawable.botaosair);
oa2.start();
}
});
oa1.start();
}
});
Upvotes: 0
Views: 647
Reputation: 2489
You need to keep animators and change them when card flips. A Boolean can keeps the fliping state. Here is my example:
public class MyFragment extends Fragment {
@OnClick(R.id.frmMain) //onclick for container of two sides
public void onClick() {
flipCard(); //call method that flips card base on current "mIsBackVisible" state
}
@BindView(R.id.card_front)
FrameLayout mCardFront;
@BindView(R.id.card_back)
FrameLayout mCardBack;
AnimatorSet animFront;
AnimatorSet animBack;
private boolean mIsBackVisible = false; //keeping card flip state
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View root = inflater.inflate(R.layout.myLauyout, container, false);
ButterKnife.bind(this, root);
//important part is this two lines + onclick for container
loadAnimations(); //initialize animations
changeCameraDistance(); //optimize card appearance (optional)
return root;
}
private void changeCameraDistance() {
int distance = 8000;
float scale = getResources().getDisplayMetrics().density * distance;
mCardFront.setCameraDistance(scale);
mCardBack.setCameraDistance(scale);
}
private void loadAnimations() {
animBack = (AnimatorSet) AnimatorInflater.loadAnimator(getContext(), R.animator.flip_back);
animFront = (AnimatorSet) AnimatorInflater.loadAnimator(getContext(), R.animator.flip_front);
}
public void flipCard() {
if (!mIsBackVisible) {
animBack.setTarget(mCardFront);
animFront.setTarget(mCardBack);
animBack.start();
animFront.start();
mIsBackVisible = true;
} else {
animBack.setTarget(mCardBack);
animFront.setTarget(mCardFront);
animBack.start();
animFront.start();
mIsBackVisible = false;
}
}
}
and here is my animator in res/animator/flip_front.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:valueFrom="-180"
android:valueTo="0"
android:propertyName="rotationY"
android:repeatMode="reverse"
android:duration="@integer/anim_length" />
<objectAnimator
android:valueFrom="0.0"
android:valueTo="1.0"
android:propertyName="alpha"
android:startOffset="@integer/anim_length_half"
android:duration="0" />
</set>
res/animator/flip_back.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:valueFrom="0"
android:valueTo="180"
android:propertyName="rotationY"
android:duration="@integer/anim_length" />
<objectAnimator
android:valueFrom="1.0"
android:valueTo="0.0"
android:propertyName="alpha"
android:startOffset="@integer/anim_length_half"
android:duration="0" />
</set>
If have any question, just comment. ;)
Upvotes: 1