android animation demo (2014-12-11 封装为工具类)

废话一句：TranslateAnimation（移动） ScaleAnimation（大小）AlphaAnimation（透明度）

上代码

public class MainActivity extends Activity {private List<Map<String, Object>> itemList;private TextView tvPrevious, tvCurrent, tvNext;private ImageView ivCurrent, ivSelect;private final int DURATION = 600; // 动画时长private final int MSG_UPDATE_THE_CONTENT = 1;private int currentPosition = 0;@SuppressLint("HandlerLeak")Handler handler = new Handler() {public void handleMessage(Message msg) {switch (msg.what) {case MSG_UPDATE_THE_CONTENT:setValue();break;}};};@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initViews();initData();findViewById(R.id.btn_up).setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {if (currentPosition > 0) {currentPosition--;slidingDown();}}});findViewById(R.id.btn_down).setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {if (currentPosition < itemList.size() - 1) {currentPosition++;slidingUp();}}});}@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {switch (keyCode) {case KeyEvent.KEYCODE_DPAD_UP:if (currentPosition > 0) {currentPosition--;slidingDown();}break;case KeyEvent.KEYCODE_DPAD_DOWN:if (currentPosition < itemList.size() - 1) {currentPosition++;slidingUp();}break;}return super.onKeyDown(keyCode, event);}// 按住下键向上滑动private void slidingUp() {slidingUpAnimation();handler.sendEmptyMessageDelayed(MSG_UPDATE_THE_CONTENT, DURATION + 10);}// 按住上键向下滑动private void slidingDown() {slidingDownAnimation();handler.sendEmptyMessageDelayed(MSG_UPDATE_THE_CONTENT, DURATION + 10);}/** * 向上滑动时候显示的动画 */private void slidingUpAnimation() {// previous标题隐藏Animation tvPreviousFadeOut = new AlphaAnimation(0.5f, 0f);tvPreviousFadeOut.setDuration(DURATION);tvPrevious.setAnimation(tvPreviousFadeOut);tvPrevious.startAnimation(tvPreviousFadeOut);// current标题褪色至previousAnimationSet tvCurrentToFade = new AnimationSet(true);float currentToFadeScale = (float) tvPrevious.getHeight() / tvCurrent.getHeight();tvCurrentToFade.addAnimation(new TranslateAnimation(0, 0, 0, -(tvCurrent.getTop() - tvPrevious.getTop()) / currentToFadeScale));tvCurrentToFade.addAnimation(new ScaleAnimation(1, currentToFadeScale, 1, currentToFadeScale));tvCurrentToFade.addAnimation(new AlphaAnimation(1f, 0.5f));tvCurrentToFade.setDuration(DURATION);tvCurrent.setAnimation(tvCurrentToFade);tvCurrent.startAnimation(tvCurrentToFade);// next标题显示至currentAnimationSet tvNextToShow = new AnimationSet(true);float nextToShowScale = (float) tvCurrent.getHeight() / tvNext.getHeight();tvNextToShow.addAnimation(new TranslateAnimation(0, 0, 0, -(tvNext.getTop() - tvCurrent.getTop()) / nextToShowScale));tvNextToShow.addAnimation(new ScaleAnimation(1, nextToShowScale, 1, nextToShowScale));tvNextToShow.addAnimation(new AlphaAnimation(0.5f, 1f));tvNextToShow.setDuration(DURATION);tvNext.setAnimation(tvNextToShow);tvNext.startAnimation(tvNextToShow);// current图片隐藏AnimationSet ivCurrentToFadePart1 = new AnimationSet(true);ivCurrentToFadePart1.addAnimation(new TranslateAnimation(0, 0, 0, -ivCurrent.getHeight() / 5));ivCurrentToFadePart1.addAnimation(new AlphaAnimation(1f, 0.0f));ivCurrentToFadePart1.setDuration(DURATION / 2);ivCurrentToFadePart1.setFillAfter(true);ivCurrent.setAnimation(ivCurrentToFadePart1);ivCurrent.startAnimation(ivCurrentToFadePart1);// next图片显示Map<String, Object> nextItem = itemList.get(currentPosition);ivSelect.setImageResource((Integer) nextItem.get("image"));AnimationSet ivNextToShowPart2 = new AnimationSet(true);ivNextToShowPart2.addAnimation(new TranslateAnimation(0, 0, ivCurrent.getHeight() / 5, 0));ivNextToShowPart2.addAnimation(new AlphaAnimation(0f, 1f));ivNextToShowPart2.setStartOffset(DURATION / 2);ivNextToShowPart2.setDuration(DURATION / 2);ivSelect.setAnimation(ivNextToShowPart2);ivSelect.startAnimation(ivNextToShowPart2);}/** * 向下滑动时候显示的动画 */private void slidingDownAnimation() {// next标题隐藏Animation tvNextFadeOut = new AlphaAnimation(0.5f, 0f);tvNextFadeOut.setDuration(DURATION);tvNext.setAnimation(tvNextFadeOut);tvNext.startAnimation(tvNextFadeOut);// pervious标题显示至currentAnimationSet PreviousToShow = new AnimationSet(true);float previousToShowScale = (float) tvCurrent.getHeight() / tvPrevious.getHeight();PreviousToShow.addAnimation(new TranslateAnimation(0, 0, 0, (tvCurrent.getTop() - tvPrevious.getTop()) / previousToShowScale));PreviousToShow.addAnimation(new ScaleAnimation(1, previousToShowScale, 1, previousToShowScale));PreviousToShow.addAnimation(new AlphaAnimation(0.5f, 1f));PreviousToShow.setDuration(DURATION);tvPrevious.setAnimation(PreviousToShow);tvPrevious.startAnimation(PreviousToShow);// current标题褪色至nextAnimationSet tvCurrentToFade = new AnimationSet(true);float CurrentToFadeScale = (float) tvNext.getHeight() / tvCurrent.getHeight();tvCurrentToFade.addAnimation(new TranslateAnimation(0, 0, 0, (tvNext.getTop() - tvCurrent.getTop()) / CurrentToFadeScale));tvCurrentToFade.addAnimation(new ScaleAnimation(1, CurrentToFadeScale, 1, CurrentToFadeScale));tvCurrentToFade.addAnimation(new AlphaAnimation(1f, 0.5f));tvCurrentToFade.setDuration(DURATION);tvCurrent.setAnimation(tvCurrentToFade);tvCurrent.startAnimation(tvCurrentToFade);// current图片隐藏AnimationSet ivCurrentToFadePart1 = new AnimationSet(true);ivCurrentToFadePart1.addAnimation(new TranslateAnimation(0, 0, 0, ivCurrent.getHeight() / 5));ivCurrentToFadePart1.addAnimation(new AlphaAnimation(1f, 0.0f));ivCurrentToFadePart1.setDuration(DURATION / 2);ivCurrentToFadePart1.setFillAfter(true);ivCurrent.setAnimation(ivCurrentToFadePart1);ivCurrent.startAnimation(ivCurrentToFadePart1);// previous 图片显示Map<String, Object> previousItem = itemList.get(currentPosition);ivSelect.setImageResource((Integer) previousItem.get("image"));AnimationSet ivPreviousToShowPart2 = new AnimationSet(true);ivPreviousToShowPart2.addAnimation(new TranslateAnimation(0, 0, -ivSelect.getHeight() / 5, 0));ivPreviousToShowPart2.addAnimation(new AlphaAnimation(0f, 1f));ivPreviousToShowPart2.setStartOffset(DURATION / 2);ivPreviousToShowPart2.setDuration(DURATION / 2);ivSelect.setAnimation(ivPreviousToShowPart2);ivSelect.startAnimation(ivPreviousToShowPart2);}private void initData() {itemList = new ArrayList<Map<String, Object>>();Map<String, Object> item1 = new HashMap<String, Object>();item1.put("title", "USB设备:sda");item1.put("image", R.drawable.gallery_audio);itemList.add(item1);Map<String, Object> item2 = new HashMap<String, Object>();item2.put("title", "USB设备:sdb");item2.put("image", R.drawable.gallery_file);itemList.add(item2);Map<String, Object> item3 = new HashMap<String, Object>();item3.put("title", "USB设备:sdc");item3.put("image", R.drawable.gallery_image);itemList.add(item3);Map<String, Object> item4 = new HashMap<String, Object>();item4.put("title", "USB设备:sdd");item4.put("image", R.drawable.gallery_video);itemList.add(item4);setValue();}private void setValue() {// 更新tvPrevious:title值Map<String, Object> previousItem = currentPosition > 0 ? itemList.get(currentPosition - 1) : null;if (previousItem != null)tvPrevious.setText((CharSequence) previousItem.get("title"));elsetvPrevious.setText(" ");tvPrevious.clearAnimation();// 更新tvCurrent:title值和tvCurrent：image值Map<String, Object> currentItem = itemList.get(currentPosition);tvCurrent.setText((CharSequence) currentItem.get("title"));tvCurrent.clearAnimation();ivCurrent.setImageResource((Integer) currentItem.get("image"));ivCurrent.clearAnimation();// 更新tvNext:title值Map<String, Object> nextItem = currentPosition + 1 < itemList.size() ? itemList.get(currentPosition + 1) : null;if (nextItem != null)tvNext.setText((CharSequence) nextItem.get("title"));elsetvNext.setText(" ");tvNext.clearAnimation();}private void initViews() {tvPrevious = (TextView) findViewById(R.id.tv_previous);tvCurrent = (TextView) findViewById(R.id.tv_current);tvNext = (TextView) findViewById(R.id.tv_next);ivCurrent = (ImageView) findViewById(R.id.iv_current);ivSelect = (ImageView) findViewById(R.id.iv_select);}}

View.clearAnimation() 解决动画完毕一瞬间闪烁问题
animation.setStartOffset()使中间的图片切换动画的错落有致
animation.setFillAfter()使动画执行完毕时不还原到之前的位置

initData()中item想放几个都行

然后布局 activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/my_blue" >    <RelativeLayout        android:id="@+id/layout_image"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:paddingBottom="@dimen/image_spacing" >        <ImageView            android:id="@+id/iv_select"            android:layout_width="wrap_content"            android:layout_height="@dimen/image_hight"            android:layout_marginBottom="@dimen/image_spacing"            android:layout_marginTop="@dimen/image_spacing" />        <ImageView            android:id="@+id/iv_current"            android:layout_width="wrap_content"            android:layout_height="@dimen/image_hight"            android:layout_marginBottom="@dimen/image_spacing"            android:layout_marginTop="@dimen/image_spacing" />    </RelativeLayout>    <TextView        android:id="@+id/tv_current"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_above="@id/layout_image"        android:textColor="@color/white"        android:textSize="26sp" />    <TextView        android:id="@+id/tv_previous"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_above="@id/tv_current"        android:textColor="@color/fade_white"        android:textSize="12sp" />    <TextView        android:id="@+id/tv_next"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@id/layout_image"        android:textColor="@color/fade_white"        android:textSize="12sp" />    <Button        android:id="@+id/btn_up"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:text="up"        android:textColor="@color/white" />    <Button        android:id="@+id/btn_down"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_toRightOf="@id/btn_up"        android:text="down"        android:textColor="@color/white" /></RelativeLayout>

dimens.xml

<resources>    <!-- Default screen margins, per the Android Design guidelines. -->    <dimen name="image_spacing">30dp</dimen>    <dimen name="image_hight">200dp</dimen></resources>

colors.xml

<?xml version="1.0" encoding="utf-8"?><resources>    <color name="white">#FFFFFF</color>    <color name="fade_white">#AAFFFFFF</color>    <color name="my_blue">#15A0F5</color></resources>

完成！

以上内容为本人 刚刚学android时候随便写的。 关于代码设置动画看起来很重复 很烦。

现在自己封了个工具类用,共享给大家

public class AnimUtils {public static final int default_duration = 800;private AnimationSet set;private AnimUtils() {}public static AnimUtils init() {AnimUtils animUtils = new AnimUtils();animUtils.set = new AnimationSet(false);return animUtils;}public AnimUtils addAlpha(float fromAlpha, float toAlpha) {AlphaAnimation alpha = new AlphaAnimation(fromAlpha, toAlpha);alpha.setDuration(default_duration);set.addAnimation(alpha);return this;}public AnimUtils addAlpha(float fromAlpha, float toAlpha, long offset,long duration, Interpolator interpolator, int repeatMode) {AlphaAnimation alpha = new AlphaAnimation(fromAlpha, toAlpha);alpha.setDuration(duration);alpha.setStartOffset(offset);alpha.setInterpolator(interpolator);alpha.setRepeatMode(repeatMode);if (repeatMode == Animation.REVERSE)alpha.setRepeatCount(1);set.addAnimation(alpha);return this;}public AnimUtils addScale(float fromX, float toX, float fromY, float toY,float pivotX, float pivotY) {ScaleAnimation scale = new ScaleAnimation(fromX, toX, fromY, toY,Animation.RELATIVE_TO_SELF, pivotX, Animation.RELATIVE_TO_SELF,pivotY);scale.setDuration(default_duration);set.addAnimation(scale);return this;}public AnimUtils addScale(float fromX, float toX, float fromY, float toY,int pivotXType, float pivotXValue, int pivotYType,float pivotYValue, long offset, long duration,Interpolator interpolator) {ScaleAnimation scale = new ScaleAnimation(fromX, toX, fromY, toY,pivotXType, pivotXValue, pivotYType, pivotYValue);scale.setDuration(duration);scale.setStartOffset(offset);scale.setInterpolator(interpolator);set.addAnimation(scale);return this;}public AnimUtils addTranslate(float fromXDelta, float toXdelta,float fromYdelta, float toYDelta) {TranslateAnimation translate = new TranslateAnimation(fromXDelta,toXdelta, fromYdelta, toYDelta);translate.setDuration(default_duration);set.addAnimation(translate);return this;}public AnimUtils addTranslate(float fromXDelta, float toXdelta,float fromYdelta, float toYDelta, long offset, long duration,Interpolator interpolator) {TranslateAnimation translate = new TranslateAnimation(fromXDelta,toXdelta, fromYdelta, toYDelta);translate.setDuration(duration);translate.setStartOffset(offset);translate.setInterpolator(interpolator);set.addAnimation(translate);return this;}public AnimUtils addTranslate(int fromXType, float fromXValue, int toXType,float toXValue, int fromYType, float fromYValue, int toYType,float toYValue, long offset, long duration,Interpolator interpolator) {TranslateAnimation translate = new TranslateAnimation(fromXType,fromXValue, toXType, toXValue, fromYType, fromYValue, toYType,toYValue);translate.setDuration(duration);translate.setStartOffset(offset);translate.setInterpolator(interpolator);set.addAnimation(translate);return this;}public AnimUtils addRotate(float fromDegrees, float toDegrees,float pivotX, float pivotY) {RotateAnimation rotate = new RotateAnimation(fromDegrees, toDegrees,Animation.RELATIVE_TO_SELF, pivotX, Animation.RELATIVE_TO_SELF,pivotY);rotate.setDuration(default_duration);set.addAnimation(rotate);return this;}public AnimUtils addRotate(float fromDegrees, float toDegrees,int pivotXType, float pivotXValue, int pivotYType,float pivotYValue, long offset, long duration,Interpolator interpolator) {RotateAnimation rotate = new RotateAnimation(fromDegrees, toDegrees,pivotXType, pivotXValue, pivotYType, pivotYValue);rotate.setDuration(duration);rotate.setStartOffset(offset);rotate.setInterpolator(interpolator);set.addAnimation(rotate);return this;}public AnimationSet create() {return set;}public static AnimationSet cearteAlpha(float fromAlpha,float toAlpha){return AnimUtils.init().addAlpha(fromAlpha, toAlpha).create();}}

链式写法 可以连续点的。  使用方法

AnimUtils.init().add *** .add ***   .create();    就可以了

然后调用 view.startAnimation(animation);

add 四种动画都有重载， 可以自己配置 。 比如

AnimUtils.init()
 .addAlpha(1f, 0.2f, 200, 200,new LinearInterpolator(), Animation.REVERSE)
 .create()

表示 0.2秒钟后 view 透明度用0.2秒时间从100%到20%紧接着再从20%变回100% 

大家慢慢玩~