当前位置: 代码迷 >> Android >> android 两种旋钮的动画效果
  详细解决方案

android 两种旋钮的动画效果

热度:17   发布时间:2016-05-01 11:37:33.0
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: [email protected]<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;	}	@Override	public 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: [email protected]<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;	@Override	public void onCreate(Bundle savedInstanceState) {		super.onCreate(savedInstanceState);		setContentView(R.layout.main);		findViewById(R.id.btn1).setOnClickListener(new OnClickListener() {			@Override			public 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() {			@Override			public 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);		}	}	@Override	public 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>


  相关解决方案