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

最新推荐文章于 2022-07-18 19:49:20 发布

behappy0_o

最新推荐文章于 2022-07-18 19:49:20 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：工具类 android开发 demo 文章标签： android开发 animation demo 切换 Util

本文链接：https://blog.youkuaiyun.com/u014324292/article/details/25560713

工具类同时被 3 个专栏收录

4 篇文章

订阅专栏

android开发

4 篇文章

订阅专栏

demo

2 篇文章

订阅专栏

这篇博客介绍了如何封装Android的动画工具类，包括TranslateAnimation、ScaleAnimation和AlphaAnimation的使用，解决动画结束后瞬间闪烁的问题，并提供了一种简洁的调用方式。通过AnimUtils初始化并添加各种动画，简化了代码，方便进行视图切换和动画效果设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话一句：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;
			}
		};
	};

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initViews();
		initData();
		findViewById(R.id.btn_up).setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				if (currentPosition > 0) {
					currentPosition--;
					slidingDown();
				}
			}
		});
		findViewById(R.id.btn_down).setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				if (currentPosition < itemList.size() - 1) {
					currentPosition++;
					slidingUp();
				}
			}
		});
	}

	@Override
	public 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标题褪色至previous
		AnimationSet 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标题显示至current
		AnimationSet 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标题显示至current
		AnimationSet 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标题褪色至next
		AnimationSet 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"));
		else
			tvPrevious.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"));
		else
			tvNext.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%

大家慢慢玩~