2017年流行发型及颜色2、非常修颜的一款水波纹烫发,器型硕大

图片 6

图片 1

图片 2

图片 3

水波纹效果已经不是什么稀罕的东西了,用过5.0新控件的小伙伴都知道这个效果,可是如果使用一个TextView或者Button或者其它普通控件的话,你是否知道如何给它设置水波纹效果呢?OK,我们今天就来看看这个水波纹效果的实现。水波纹效果的实现有系统自带属性可以实现,我们也可以自定义实现效果。

图片 4

概述

最近看到支付宝咻咻的页面就想模仿一下,话不多说,先看效果图。(录制的有点渣)

图片 5

GIF.gif

先说说这个效果:

1.点击中间图标开始搜索附近的人。
2.开始搜索后水波纹一圈圈的加速向外扩张。
3.搜索到人之后以一个圆圈显示在水波纹上。

技术点:

1.要熟悉canvas,paint,,其中canvas的画圆,画图片(主要用于中间圆形图片的绘制,小圆圈也要用圆形图片来绘制的,由于偷懒就用蓝圆点了)。
2.水波纹一圈圈的向外扩张,圆圈扩张的半径计算是利用ValueAnimator来获取的,其中加速扩张还是减速扩张等等这些效果通过Interpolator插值器来实现的,当然也可以自己自定义Interpolator来实现想要的效果。
3.小圆圈是通过自定义viewgroup的onlayout来定位的,这里实现的定位是通过随机的角度加上随机的半径来算出小圆圈所在的坐标,当然你也可以通过距离的远近或者其他来算出小圆圈的坐标。

图片 6

个性网导读:文章主要介绍“2017年流行发型及颜色,俏皮又减龄的水波纹烫发!”
的相关内容。

1.系统自带水波纹实现方式

个性网导读:文章主要介绍“最流行的发型,水波纹烫发!” 的相关内容。

水波纹效果WaveView

需要水波不停的一波波的向外扩张,所以需要不停的创建水波纹,这里利用了Runnable加上postDelayed来不停的创建水波纹。

private Runnable mWaveRunable = new Runnable() {
    @Override
    public void run() {
        if (mIsRuning) {
            newWaveAnimator();
            invalidate();
            postDelayed(mWaveRunable, mSpeed);
        }
    }
};

 private ValueAnimator newWaveAnimator() {
        final ValueAnimator mWaveAnimator = new ValueAnimator();
        mWaveAnimator.setFloatValues(mMiniRadius, mMaxRadius);
        mWaveAnimator.setDuration(mWaveDuration);
        mWaveAnimator.setRepeatCount(0);
        mWaveAnimator.setInterpolator(mInterpolator);
        mWaveAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
//                (Float) animation.getAnimatedValue();
            }
        });
        mAnimatorList.add(mWaveAnimator);
        mWaveAnimator.start();
        return mWaveAnimator;
    }

绘制的时候遍历所有的水波纹,然后根据AnimatedValue来获取透明度和半径,当半径达到最大半径的时候删除水波纹,最后就是绘制中间的图标,然后每隔10ms的重新绘制水波纹(貌似10ms是属性动画的帧间隔时间)

@Override
protected void onDraw(Canvas canvas){
    Iterator<ValueAnimator> iterator = mAnimatorList.iterator();
    while (iterator.hasNext()){
        ValueAnimator valueAnimator = iterator.next();
        Log.e("AnimatedValue",(float)valueAnimator.getAnimatedValue() + "mMaxRadius:" + mMaxRadius);
        if (!valueAnimator.getAnimatedValue().equals(mMaxRadius)){
            //设置透明度
            mWavePaint.setAlpha(getAlpha((Float) valueAnimator.getAnimatedValue()));
            //画水波纹
            canvas.drawCircle(getMeasuredWidth() / 2,getMeasuredHeight() / 2, (Float) valueAnimator.getAnimatedValue(),mWavePaint);
        }else{
            valueAnimator.cancel();
            iterator.remove();
        }
    }
    //绘制中间图标
    drawCenterBitmap(canvas);
    if (mAnimatorList.size() > 0){
        postInvalidateDelayed(10);
    }
}

点击中间图标开启水波纹,是通过onTouchEvent来判断是否点击了中间的图标,如果点击了中间图标,水波纹又没开启的话,开启水波纹。

//中间图标区域
private Rect mCenterBitmapArea = new Rect();
//是否开启水波纹
private boolean mIsRuning = false;
//是否点击了中间图标
private boolean mIsCenterClick = false;

@Override
public boolean onTouchEvent(MotionEvent event){
    switch (event.getActionMasked()){
        case MotionEvent.ACTION_DOWN:
            //当按钮只有在图片即按钮区域内则认定为点击,其他不作点击
            mIsCenterClick = false;
            if (mCenterBitmapArea.contains((int)event.getX(),(int)event.getY())){
                mIsCenterClick = true;
            }
            break;
        case MotionEvent.ACTION_CANCEL:
            break;
        case MotionEvent.ACTION_MOVE:
            break;
        case MotionEvent.ACTION_UP:
            if (mIsCenterClick && !mIsRuning){
                //当点击了按钮,启动水波纹
               start();
            }
            break;
    }
    return true;
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    mMaxRadius = Math.min(w, h) / 2;
    //计算中间图标区域
    mCenterBitmapArea.set((w - mCenterBitmap.getWidth()) / 2,(h - mCenterBitmap.getHeight()) / 2
            ,(w + mCenterBitmap.getWidth()) / 2,(h + mCenterBitmap.getHeight()) / 2);
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注