android 两种按钮的动画效果

先来看效果:

上面为两个按钮，点击对应的按钮，绿色背景会滚动到相应的按钮后面
点击红色方块会有反转效果，仿照win8磁铁的效果

下面是代码
ScrollAnimation.java

package com.iaiai.activity;import android.graphics.Camera;import android.graphics.Matrix;import android.util.Log;import android.view.View;import android.view.animation.Animation;import android.view.animation.LinearInterpolator;import android.view.animation.Transformation;/** *  * <br/> * Title: ScrollAnimation.java<br/> * E-Mail: 176291935@qq.com<br/> * QQ: 176291935<br/> * Http: iaiai.iteye.com<br/> * Create time: 2013-2-19 上午10:53:06<br/> * <br/> *  * @author 丸子 * @version 0.0.1 */public class ScrollAnimation extends Animation {private View view;private Camera camera = new Camera();private boolean direction = true; // true往右，false往左public ScrollAnimation(View view, boolean direction) {this.view = view;this.direction = direction;}@Overridepublic void initialize(int width, int height, int parentWidth, int parentHeight) {super.initialize(width, height, parentWidth, parentHeight);setDuration(300);setFillAfter(true);setFillBefore(true);setInterpolator(new LinearInterpolator());}protected void applyTransformation(float interpolatedTime, Transformation transformation) {Matrix matrix = transformation.getMatrix();camera.save();if (direction) {camera.translate(interpolatedTime * view.getWidth(), 0.0f, 0);} else {camera.translate(view.getWidth() - (interpolatedTime * view.getWidth()), 0.0f, 0);}camera.getMatrix(matrix);camera.restore();}}

RotateAnimation.java

package com.iaiai.activity;import android.graphics.Camera;import android.graphics.Matrix;import android.view.View;import android.view.animation.Animation;import android.view.animation.Transformation;/** *  * <br/> * Title: RotateAnimation.java<br/> * E-Mail: 176291935@qq.com<br/> * QQ: 176291935<br/> * Http: iaiai.iteye.com<br/> * Create time: 2013-2-19 上午10:07:57<br/> * <br/> *  * @author 丸子 * @version 0.0.1 */public class RotateAnimation extends Animation {/** 值为true时可明确查看动画的旋转方向。 */public static final boolean DEBUG = false;/** 沿Y轴正方向看，数值减1时动画逆时针旋转。 */public static final boolean ROTATE_DECREASE = true;/** 沿Y轴正方向看，数值减1时动画顺时针旋转。 */public static final boolean ROTATE_INCREASE = false;/** Z轴上最大深度。 */public static final float DEPTH_Z = 310.0f;/** 动画显示时长。 */public static final long DURATION = 800l;/** 图片翻转类型。 */private final boolean type;private final float centerX;private final float centerY;private Camera camera;/** 用于监听动画进度。当值过半时需更新txtNumber的内容。 */private InterpolatedTimeListener listener;public RotateAnimation(View view, boolean type) {centerX = view.getWidth() / 2.0f;centerY = view.getHeight() / 2.0f;this.type = type;setDuration(DURATION);}public void initialize(int width, int height, int parentWidth, int parentHeight) {// 在构造函数之后、getTransformation()之前调用本方法。super.initialize(width, height, parentWidth, parentHeight);camera = new Camera();}public void setInterpolatedTimeListener(InterpolatedTimeListener listener) {this.listener = listener;}protected void applyTransformation(float interpolatedTime, Transformation transformation) {// interpolatedTime:动画进度值，范围为[0.0f,10.f]if (listener != null) {listener.interpolatedTime(interpolatedTime);}float from = 0.0f, to = 0.0f;if (type == ROTATE_DECREASE) {from = 0.0f;to = 180.0f;} else if (type == ROTATE_INCREASE) {from = 360.0f;to = 180.0f;}float degree = from + (to - from) * interpolatedTime;boolean overHalf = (interpolatedTime > 0.5f);if (overHalf) {// 翻转过半的情况下，为保证数字仍为可读的文字而非镜面效果的文字，需翻转180度。degree = degree - 180;}// float depth = 0.0f;float depth = (0.5f - Math.abs(interpolatedTime - 0.5f)) * DEPTH_Z;final Matrix matrix = transformation.getMatrix();camera.save();camera.translate(0.0f, 0.0f, depth);camera.rotateY(degree);camera.getMatrix(matrix);camera.restore();if (DEBUG) {if (overHalf) {matrix.preTranslate(-centerX * 2, -centerY);matrix.postTranslate(centerX * 2, centerY);}} else {// 确保图片的翻转过程一直处于组件的中心点位置matrix.preTranslate(-centerX, -centerY);matrix.postTranslate(centerX, centerY);}}/** 动画进度监听器。 */public static interface InterpolatedTimeListener {public void interpolatedTime(float interpolatedTime);}}

MainActivity.java

package com.iaiai.activity;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.view.animation.AnimationUtils;import android.widget.TextView;import com.iaiai.activity.RotateAnimation.InterpolatedTimeListener;public class MainActivity extends Activity implements OnClickListener, InterpolatedTimeListener {private boolean bol = true;private boolean enableRefresh;private int number = 0;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);findViewById(R.id.btn1).setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {if (!bol)findViewById(R.id.tv).startAnimation(new ScrollAnimation(findViewById(R.id.tv), false));bol = true;}});findViewById(R.id.btn2).setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {if (bol)findViewById(R.id.tv).startAnimation(new ScrollAnimation(findViewById(R.id.tv), true));bol = false;}});findViewById(R.id.layout1).setOnClickListener(this);}public void onClick(View v) {enableRefresh = true;RotateAnimation rotateAnim = null;if (bol) {number--;rotateAnim = new RotateAnimation(findViewById(R.id.layout1), RotateAnimation.ROTATE_DECREASE);} else {number++;rotateAnim = new RotateAnimation(findViewById(R.id.layout1), RotateAnimation.ROTATE_INCREASE);}if (rotateAnim != null) {rotateAnim.setInterpolatedTimeListener(this);rotateAnim.setFillAfter(true);findViewById(R.id.layout1).startAnimation(rotateAnim);}}@Overridepublic void interpolatedTime(float interpolatedTime) {// 监听到翻转进度过半时，更新txtNumber显示内容。if (enableRefresh && interpolatedTime > 0.5f) {((TextView) findViewById(R.id.ltv)).setText(Integer.toString(number));enableRefresh = false;}}}

main.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:background="@android:color/white"    android:orientation="vertical" >    <LinearLayout        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:paddingBottom="10dip"        android:paddingLeft="20dip"        android:paddingRight="20dip"        android:paddingTop="10dip" >        <RelativeLayout            android:layout_width="fill_parent"            android:layout_height="wrap_content" >            <LinearLayout                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:orientation="horizontal" >                <TextView                    android:id="@+id/tv"                    android:layout_width="fill_parent"                    android:layout_height="fill_parent"                    android:layout_weight="1"                    android:background="#00ff00" />                <TextView                    android:layout_width="fill_parent"                    android:layout_height="fill_parent"                    android:layout_weight="1"                    android:textColor="@android:color/black"                    android:textSize="20dip"                    android:visibility="invisible" />            </LinearLayout>            <LinearLayout                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:orientation="horizontal" >                <TextView                    android:id="@+id/btn1"                    android:layout_width="fill_parent"                    android:layout_height="fill_parent"                    android:layout_weight="1"                    android:gravity="center"                    android:text="左旋转"                    android:textColor="@android:color/black"                    android:textSize="20dip" />                <TextView                    android:id="@+id/btn2"                    android:layout_width="fill_parent"                    android:layout_height="fill_parent"                    android:layout_weight="1"                    android:gravity="center"                    android:text="右旋转"                    android:textColor="@android:color/black"                    android:textSize="20dip" />            </LinearLayout>        </RelativeLayout>    </LinearLayout>    <LinearLayout        android:id="@+id/layout1"        android:layout_width="150dip"        android:layout_height="150dip"        android:background="#ff0000" >        <TextView            android:id="@+id/ltv"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="文字"            android:textColor="@android:color/white"            android:textSize="20dip" />    </LinearLayout></LinearLayout>

更多相关文章

随机推荐