实现效果如下:
实现原理:准备好两张图片,一张作为正面,一张作为背面,当点击图片的正面后,正面的图片的横坐标x进行收缩,直到缩为0%,当正面图片的横坐标x收缩为0之后图片切换为作为背面图片,背面图片的横坐标x由x放大到100%。通过两个动画的交替使用实现翻牌效果
步骤一:定义两个动画文件
收缩动画:back.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000">
<scale
android:fromXScale="100%"
android:fromYScale="100%"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0%"
android:toYScale="100%"></scale>
</set>
放大动画:font.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000">
<scale
android:fromXScale="0%"
android:fromYScale="100%"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="100%"
android:toYScale="100%"></scale>
</set>
布局文件:activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/ima"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@drawable/meinv" />
</LinearLayout>
java实现代码:
package com.contentprovide.liuliu.dabian_gridview;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
public class MainActivity extends AppCompatActivity {
ImageView ima;
Animation animation;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ima = (ImageView) findViewById(R.id.ima);
animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.back);
ima.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// 调用setAnimationListener方法对动画的实现过程进行监听
animation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {//当动画结束时需要执行的行为
animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.font);
ima.setBackgroundResource(R.drawable.ruhua);
ima.startAnimation(animation);
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
ima.startAnimation(animation);
}
});
}
}