/**
* 图片翻转效果
*
* @author liujie445012100
*
*/
public class MainActivity extends Activity {
private ImageView imgView;
private boolean bool = false;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imgView = (ImageView) findViewById(R.id.imgview);
// 添加点击事件
imgView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Animation animation = AnimationUtils.loadAnimation(
MainActivity.this, R.anim.back_scale);
animation
.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
if (bool) {
imgView.setImageResource(R.drawable.boy);
bool = false;
} else {
imgView.setImageResource(R.drawable.girl);
bool = true;
}
// 通过AnimationUtils得到动画配置文件(/res/anim/front_scale.xml),然后在把动画交给ImageView
imgView.startAnimation(AnimationUtils
.loadAnimation(MainActivity.this,
R.anim.front));
}
});
imgView.startAnimation(animation);
}
});
}
}
back_sacle.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<scale
android:fromXScale="1.0"
android:toXScale="0.0"
android:fromYScale="1.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="150" />
</set>
front.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<scale
android:fromXScale="0.0"
android:toXScale="1.0"
android:fromYScale="1.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="150" />
</set>
fromXScale 起始时x坐标的尺寸,设置为1.0说明是整个图片x轴的长度
toXScale 结束时x坐标的尺寸,设置为0.0说明整个图片x轴完全收缩到无
fromYScal e 起始时y坐标的尺寸,设置为1.0说明是整个图片y轴的长度
toYScale 结束时y坐标的尺寸,设置为1.0说明是在收缩时y轴的长度保持不变
那么他们的变化都是先对于某一点来变化的,因此pivotX和pivotY就是确定这个点的位置。
在一个数轴上(原点为图片的左上角,x轴和y轴的射线分别是向右和向下,我测试过) :
pivotX="50%" 说明是以图片本身的一半作为x轴的坐标;
pivotY="50%" 说明是以图片本身的一半作为y轴的坐标;
所以圆心点的坐标就是(0.5x,0.5y)。(x y是原图片的长和高)
此效果就是以这个点的y轴为轴,x轴不断减小到0。
duration 是设置的动画执行时间 因为要体现出翻牌的效果 所以不能太慢 也不能一下就翻开
同样也有一个伸展的效果配置文件