Android代码实现长按显示波纹外扩动画

项目两张图片:

wave  btn

代码:

package com.example.waveanimation;

import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.app.Activity;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.animation.AlphaAnimation;
import android.view.animation.AnimationSet;
import android.view.animation.ScaleAnimation;
import android.widget.ImageView;

public class MainActivity extends Activity {
	private static final int ANIMATIONEACHOFFSET = 600; // 每个动画的播放时间间隔
	private AnimationSet aniSet, aniSet2, aniSet3;
	private ImageView btn, wave1, wave2, wave3;
	private Handler handler = new Handler() {

		@Override
		public void handleMessage(Message msg) {
			if (msg.what == 0x222) {
				wave2.startAnimation(aniSet2);
			} else if (msg.what == 0x333) {
				wave3.startAnimation(aniSet3);
			}
			super.handleMessage(msg);
		}

	};

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		aniSet = getNewAnimationSet();
		aniSet2 = getNewAnimationSet();
		aniSet3 = getNewAnimationSet();
		setContentView(R.layout.activity_main);
		btn = (ImageView) findViewById(R.id.btn);
		wave1 = (ImageView) findViewById(R.id.wave1);
		wave2 = (ImageView) findViewById(R.id.wave2);
		wave3 = (ImageView) findViewById(R.id.wave3);
		btn.setOnTouchListener(new OnTouchListener() {

			@Override
			public boolean onTouch(View v, MotionEvent event) {
				switch (event.getAction()) {
				case MotionEvent.ACTION_DOWN:
					showWaveAnimation();
					break;
				case MotionEvent.ACTION_UP:
					cancalWaveAnimation();
					break;
				case MotionEvent.ACTION_CANCEL:
					cancalWaveAnimation();
					break;
				}
				return true;
			}
		});
	}

	private AnimationSet getNewAnimationSet() {
		AnimationSet as = new AnimationSet(true);
		ScaleAnimation sa = new ScaleAnimation(1f, 2.3f, 1f, 2.3f,
				ScaleAnimation.RELATIVE_TO_SELF, 0.5f,
				ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
		sa.setDuration(ANIMATIONEACHOFFSET * 3);
		sa.setRepeatCount(-1);// 设置循环
		AlphaAnimation aniAlp = new AlphaAnimation(1, 0.1f);
		aniAlp.setRepeatCount(-1);// 设置循环
		as.setDuration(ANIMATIONEACHOFFSET * 3);
		as.addAnimation(sa);
		as.addAnimation(aniAlp);
		return as;
	}

	private void showWaveAnimation() {
		wave1.startAnimation(aniSet);
		handler.sendEmptyMessageDelayed(0x222, ANIMATIONEACHOFFSET);
		handler.sendEmptyMessageDelayed(0x333, ANIMATIONEACHOFFSET * 2);

	}

	private void cancalWaveAnimation() {
		wave1.clearAnimation();
		wave2.clearAnimation();
		wave3.clearAnimation();
	}

}

xml文件:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

            <ImageView
                android:id="@+id/wave1"
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:layout_centerInParent="true"
                android:background="@drawable/wave"
                 />

            <ImageView
                android:id="@+id/wave2"
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:layout_centerInParent="true"
                android:background="@drawable/wave"/>

            <ImageView
                android:id="@+id/wave3"
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:layout_centerInParent="true"
                android:background="@drawable/wave" />

            <ImageView
                android:id="@+id/btn"
                android:layout_width="166dp"
                android:layout_height="166dp"
                android:layout_centerInParent="true"
                android:background="@drawable/btn" />

</RelativeLayout>

效果图:


  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现圆形波纹动画可以使用帧动画和属性动画的组合。 首先,我们可以在drawable文件夹下创建一个帧动画的xml文件,定义波纹的帧动画效果,例如ripple_anim.xml: ```xml <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:drawable="@drawable/ripple1" android:duration="200" /> <item android:drawable="@drawable/ripple2" android:duration="200" /> <item android:drawable="@drawable/ripple3" android:duration="200" /> <item android:drawable="@drawable/ripple4" android:duration="200" /> </animation-list> ``` 其中,@drawable/ripple1~4是定义好的波纹图片。 然后,我们可以在代码中使用属性动画实现波纹的扩散效果: ```java public void startRippleAnimation(View view) { int centerX = view.getWidth() / 2; int centerY = view.getHeight() / 2; // 计算波纹扩散的半径 int maxRadius = Math.max(view.getWidth(), view.getHeight()) / 2; AnimatorSet animatorSet = new AnimatorSet(); animatorSet.setDuration(2000); animatorSet.setInterpolator(new AccelerateDecelerateInterpolator()); // 创建一个波纹的属性动画,扩散半径从0到maxRadius ObjectAnimator rippleAnimator = ObjectAnimator.ofInt(view, "rippleRadius", 0, maxRadius); rippleAnimator.setDuration(1000); // 创建一个透明度属性动画,从1.0到0.0 ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(view, "alpha", 1.0f, 0.0f); alphaAnimator.setDuration(1000); animatorSet.playTogether(rippleAnimator, alphaAnimator); animatorSet.start(); } ``` 其中,"rippleRadius"和"alpha"是自定义的属性,可以通过自定义View的方式实现: ```java public class RippleView extends View { private int mRippleRadius; private int mRippleColor; public RippleView(Context context) { this(context, null); } public RippleView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public RippleView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(attrs); } private void init(AttributeSet attrs) { TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.RippleView); mRippleColor = ta.getColor(R.styleable.RippleView_rippleColor, Color.parseColor("#33B5E5")); ta.recycle(); } public void setRippleRadius(int rippleRadius) { mRippleRadius = rippleRadius; invalidate(); } public void setRippleColor(int rippleColor) { mRippleColor = rippleColor; invalidate(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int centerX = getWidth() / 2; int centerY = getHeight() / 2; Paint paint = new Paint(); paint.setColor(mRippleColor); paint.setStyle(Paint.Style.FILL); paint.setAntiAlias(true); canvas.drawCircle(centerX, centerY, mRippleRadius, paint); } } ``` 在布局文件中使用自定义的波纹View: ```xml <com.example.rippleview.RippleView android:id="@+id/ripple_view" android:layout_width="200dp" android:layout_height="200dp" android:background="@drawable/ripple_anim" app:rippleColor="#33B5E5" /> ``` 最后,在代码中调用startRippleAnimation方法就可以启动波纹动画了: ```java RippleView rippleView = findViewById(R.id.ripple_view); rippleView.startRippleAnimation(); ``` 完整的示例代码请见:https://github.com/luoyesiqiu/Android-RippleView。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值