android 属性翻牌动画,Android通过动画实现翻牌效果

实现效果如下：

实现原理：准备好两张图片，一张作为正面，一张作为背面，当点击图片的正面后，正面的图片的横坐标x进行收缩，直到缩为0%，当正面图片的横坐标x收缩为0之后图片切换为作为背面图片，背面图片的横坐标x由x放大到100%。通过两个动画的交替使用实现翻牌效果

步骤一：定义两个动画文件

收缩动画：back.xml

android:duration="2000">

android:fromXScale="100%"

android:fromYScale="100%"

android:pivotX="50%"

android:pivotY="50%"

android:toXScale="0%"

android:toYScale="100%">

放大动画：font.xml

android:duration="2000">

android:fromXScale="0%"

android:fromYScale="100%"

android:pivotX="50%"

android:pivotY="50%"

android:toXScale="100%"

android:toYScale="100%">

布局文件：activity_main.xml

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:orientation="vertical">

android:id="@+id/ima"

android:layout_width="100dp"

android:layout_height="100dp"

android:background="@drawable/meinv" />

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);

}

});

}

}