Question

我的应用程序中有一个按钮，我想为该按钮提供连续/无限的连锁效果。如何在没有点击android的情况下给按钮提供无限的涟漪效果。

Answer 1

Android L's Ripple Effect - Touch Feedback for Buttons - Using XML

您可以这样做：

<div *ngFor="#item of mission?.assignedCards"
      class="b-progress-bar__item m-progress-bar__item_completed">
  <div class="b-progress-bar__inner">{{item}}</div>
</div>

Answer 2

创建一个类和RippleBackground.java并放置以下代码

public class RippleBackground extends RelativeLayout{

private static final int DEFAULT_RIPPLE_COUNT=6;
private static final int DEFAULT_DURATION_TIME=3000;
private static final float DEFAULT_SCALE=6.0f;
private static final int DEFAULT_FILL_TYPE=0;

private int rippleColor;
private float rippleStrokeWidth;
private float rippleRadius;
private int rippleDurationTime;
private int rippleAmount;
private int rippleDelay;
private float rippleScale;
private int rippleType;
private Paint paint;
private boolean animationRunning=false;
private AnimatorSet animatorSet;
private ArrayList<Animator> animatorList;
private LayoutParams rippleParams;
private ArrayList<RippleView> rippleViewList=new ArrayList<RippleView>();

public RippleBackground(Context context) {
    super(context);
}

public RippleBackground(Context context, AttributeSet attrs) {
    super(context, attrs);
    init(context, attrs);
}

public RippleBackground(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(context, attrs);
}

private void init(final Context context, final AttributeSet attrs) {
    if (isInEditMode())
        return;

    if (null == attrs) {
        throw new IllegalArgumentException("Attributes should be provided to this view,");
    }

    final TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RippleBackground);
    rippleColor=typedArray.getColor(R.styleable.RippleBackground_rb_color, getResources().getColor(R.color.rippelColor));
    rippleStrokeWidth=typedArray.getDimension(R.styleable.RippleBackground_rb_strokeWidth, getResources().getDimension(R.dimen.rippleStrokeWidth));
    rippleRadius=typedArray.getDimension(R.styleable.RippleBackground_rb_radius,getResources().getDimension(R.dimen.rippleRadius));
    rippleDurationTime=typedArray.getInt(R.styleable.RippleBackground_rb_duration,DEFAULT_DURATION_TIME);
    rippleAmount=typedArray.getInt(R.styleable.RippleBackground_rb_rippleAmount,DEFAULT_RIPPLE_COUNT);
    rippleScale=typedArray.getFloat(R.styleable.RippleBackground_rb_scale,DEFAULT_SCALE);
    rippleType=typedArray.getInt(R.styleable.RippleBackground_rb_type,DEFAULT_FILL_TYPE);
    typedArray.recycle();

    rippleDelay=rippleDurationTime/rippleAmount;

    paint = new Paint();
    paint.setAntiAlias(true);
    if(rippleType==DEFAULT_FILL_TYPE){
        rippleStrokeWidth=0;
        paint.setStyle(Paint.Style.FILL);
    }else
        paint.setStyle(Paint.Style.STROKE);
    paint.setColor(rippleColor);

    rippleParams=new LayoutParams((int)(2*(rippleRadius+rippleStrokeWidth)),(int)(2*(rippleRadius+rippleStrokeWidth)));
    rippleParams.addRule(CENTER_IN_PARENT, TRUE);

    animatorSet = new AnimatorSet();
    animatorSet.setInterpolator(new AccelerateDecelerateInterpolator());
    animatorList=new ArrayList<Animator>();

    for(int i=0;i<rippleAmount;i++){
        RippleView rippleView=new RippleView(getContext());
        addView(rippleView,rippleParams);
        rippleViewList.add(rippleView);
        final ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(rippleView, "ScaleX", 1.0f, rippleScale);
        scaleXAnimator.setRepeatCount(ObjectAnimator.INFINITE);
        scaleXAnimator.setRepeatMode(ObjectAnimator.RESTART);
        scaleXAnimator.setStartDelay(i * rippleDelay);
        scaleXAnimator.setDuration(rippleDurationTime);
        animatorList.add(scaleXAnimator);
        final ObjectAnimator scaleYAnimator = ObjectAnimator.ofFloat(rippleView, "ScaleY", 1.0f, rippleScale);
        scaleYAnimator.setRepeatCount(ObjectAnimator.INFINITE);
        scaleYAnimator.setRepeatMode(ObjectAnimator.RESTART);
        scaleYAnimator.setStartDelay(i * rippleDelay);
        scaleYAnimator.setDuration(rippleDurationTime);
        animatorList.add(scaleYAnimator);
        final ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(rippleView, "Alpha", 1.0f, 0f);
        alphaAnimator.setRepeatCount(ObjectAnimator.INFINITE);
        alphaAnimator.setRepeatMode(ObjectAnimator.RESTART);
        alphaAnimator.setStartDelay(i * rippleDelay);
        alphaAnimator.setDuration(rippleDurationTime);
        animatorList.add(alphaAnimator);
    }

    animatorSet.playTogether(animatorList);
}

private class RippleView extends View{

    public RippleView(Context context) {
        super(context);
        this.setVisibility(View.INVISIBLE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int radius=(Math.min(getWidth(),getHeight()))/2;
        canvas.drawCircle(radius,radius,radius-rippleStrokeWidth,paint);
    }
}

public void startRippleAnimation(){
    if(!isRippleAnimationRunning()){
        for(RippleView rippleView:rippleViewList){
            rippleView.setVisibility(VISIBLE);
        }
        animatorSet.start();
        animationRunning=true;
    }
}

public void stopRippleAnimation(){
    if(isRippleAnimationRunning()){
        animatorSet.end();
        animationRunning=false;
    }
}

public boolean isRippleAnimationRunning(){
    return animationRunning;
}

}

在主类中定义RippleBackground rippleBackground;并将以下代码放入Activity主类

rippleBackground = (RippleBackground) view.findViewById(R.id.bg_ripple);
 rippleBackground.startRippleAnimation();

在布局文件中使用标签RippleBackground定义视图

如何给按钮带来无限的涟漪效果

2 个答案: