将图片实现镜面翻转效果

摘要: 运用Animation中的方法实现镜面翻转效果

实现步骤：

1、在main_activity.xml中添加要实现的两个图片，布局为相对布局

2、在主方法中，定义两个ScaleAnimation 对象，用来实现图片翻转效果，将图片初始化

3、定义两个内部类，实现图片的显示效果

4、对布局文件设置监听事件，监听点击的发生，实现图片的点击反应

5、对其中一个ScaleAnimation对象做监听，用来实现对另一个对象的连续操作

代码如下

1、XML中的代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/rl"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.day2505.MainActivity" >

<ImageView
android:id="@+id/iv1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@string/hello_world"
android:src="@drawable/image_a" />
<ImageView
android:id="@+id/iv2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@string/hello_world"
android:src="@drawable/image_b" />

</RelativeLayout>

2、MainActivity中的代码：

public class MainActivity extends Activity {

private ImageView ivA, ivB;
private RelativeLayout rl = null;

private ScaleAnimation sa1 = new ScaleAnimation(1, 0, 1, 1,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

private ScaleAnimation sa2 = new ScaleAnimation(0, 1, 1, 1,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

initView();

// 两张图片所对应容器的监听
rl.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
// ivA可见
if (ivA.getVisibility() == View.VISIBLE) {
ivA.startAnimation(sa1);
} else { // ivA不可见（ivB可见）
ivB.startAnimation(sa1);
}
}
});
}

private void initView() {
ivA = (ImageView) findViewById(R.id.ivA);
ivB = (ImageView) findViewById(R.id.ivB);

rl = (RelativeLayout) findViewById(R.id.rl);

// 默认开始时，显示ivA
showA();

// 分别设置两个动画的持续时间
sa1.setDuration(1000);
sa2.setDuration(1000);

// 给sa1设置动画监听
sa1.setAnimationListener(new AnimationListener() {

/**
* 动画开始时调用该方法
*
* @Override
*/
public void onAnimationStart(Animation animation) {

}

/**
* 动画重复时调用该方法
*
* @Override
*/
public void onAnimationRepeat(Animation animation) {

}

/**
* 动画结束时调用该方法
*
* @Override
*/
public void onAnimationEnd(Animation animation) {
if (ivA.getVisibility() == View.VISIBLE) {
ivA.setAnimation(null);
showB();
ivB.startAnimation(sa2);
} else {
ivB.setAnimation(null);
showA();
ivA.startAnimation(sa2);
}
}
});
}

// 显示图片A
private void showA() {
ivA.setVisibility(View.VISIBLE);
ivB.setVisibility(View.INVISIBLE);
}

// 显示图片B
private void showB() {
ivB.setVisibility(View.VISIBLE);
ivA.setVisibility(View.INVISIBLE);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

}

7fe0