自定義波浪動畫

今天講講以前項目的一個動畫，先看看效果,實際是連貫的，gif會卡一下

2017-08-18-20-38-38.gif

---

2017-08-19-12-02-52.gif

原理：正弦曲線y=asin(bα+c)+m;

a:控制振幅 b:控制波長 c:控制軸偏移 m:控制y軸偏移 α：角度

思路：畫出波的path，通過動畫控制振幅a達到水波的起伏效果
控制c的值達到移動效果

使用

 <com.example.ck.waveanimation.WaveView
        android:id="@+id/waveline"
        android:background="#999"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
      />
      //監(jiān)聽硬幣偏移量
    WaveView waveView= (WaveView) findViewById(R.id.waveline);
    waveView.setWaveHeightListener(new WaveView.WaveHeightListener() {
        @Override
        public void currentWaveHeightMove(float currentWavePercent) {
                Log.i("WaveView", "currentWaveHeightScal: "+currentWavePercent);
        }
    });

第一步：View的測量

在非EXACTLY模式下，默認一個高度
   if (heightMeasureMode == MeasureSpec.AT_MOST || heightMeasureMode ==     MeasureSpec.UNSPECIFIED) {
       heightMeaure = dp2px(DEFAULT_HEIGHT);
       heightMeasureSpec = MeasureSpec.makeMeasureSpec(heightMeaure, MeasureSpec.EXACTLY);
        }

在onSizeChanged獲取一些初始值
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        viewHeight = h;
        viewWidth = w;
        viewCenterY = 2 * viewHeight / 3;
        waveAmplifier = (waveAmplifier * 2 > viewHeight) ? (viewHeight / 2) : waveAmplifier;
        waveAnim();
    }

View的繪制

各個波的path路徑繪制出來
    path1.reset();
        path2.reset();
        path3.reset();
        path1.moveTo(0, viewCenterY - waveAmplifier * getRoundRate(wavePhase, waveFrequency, -1));
        path2.moveTo(0, viewCenterY - 1.3f * waveAmplifier2 * getRoundRate(wavePhase + 90, waveFrequency, -1));
        path3.moveTo(0, viewCenterY + waveAmplifier2 * getRoundRate(wavePhase, waveFrequency, -1));


        for (int i = 0; i < viewWidth - 1; i++) {

            path1.lineTo((float) (i + 1), viewCenterY - waveAmplifier * getRoundRate(wavePhase, waveFrequency, (i + 1)));
            path2.lineTo((float) (i + 1), viewCenterY - 1.3f * waveAmplifier2 * getRoundRate(wavePhase + 90, 0.8f * waveFrequency, (i + 1)));
            path3.lineTo((float) (i + 1), viewCenterY + waveAmplifier2 * getRoundRate(wavePhase, waveFrequency, -1));

        }
        path1.lineTo(viewWidth, viewHeight + 5);
        path2.lineTo(viewWidth, viewHeight);
        path3.lineTo(viewWidth, viewHeight);

        path1.lineTo(0, viewHeight + 5);
        path2.lineTo(0, viewHeight);
        path3.lineTo(0, viewHeight);

        path1.close();
        path2.close();
        path3.close();

draw path以及硬幣
wavePaint.setColor(0xc0ffffff);
        canvas.drawPath(path1, wavePaint);

        wavePaint.setColor(0xB0ffffff);
        canvas.drawPath(path2, wavePaint);

        wavePaint.setColor(0xffffffff);
        canvas.drawBitmap(bitmap, viewWidth / 2 - bitmap.getWidth() / 2, viewCenterY - 1.3f * waveAmplifier *
                getRoundRate(wavePhase + 90, waveFrequency * 0.8f, (viewWidth / 2 + 1)) - bitmap.getHeight() + 20, wavePaint);

        wavePaint.setColor(0x80ffffff);
        canvas.drawPath(path3, wavePaint);

動畫的控制
  public void waveAnim() {
        set = new AnimatorSet();
        //控制平移
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(1.F, 0F);
        valueAnimator.setDuration(3000);
        valueAnimator.setRepeatMode(ValueAnimator.RESTART);
        valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                Float aFloat = Float.valueOf(animation.getAnimatedValue().toString());
                wavePhase = 360.F * aFloat;
                if (waveHeightListener != null) {
                    waveHeightListener.currentWaveHeightMove(1.3f * waveAmplifier * getRoundRate(wavePhase + 90, waveFrequency * 0.8f, (viewWidth / 2 + 1)));
                }
                invalidate();
            }
        });

       //控制振幅
        ValueAnimator valueAnimator2 = ValueAnimator.ofFloat(1.F, 0F);
        valueAnimator2.setDuration(4000);
        valueAnimator2.setRepeatMode(ValueAnimator.REVERSE);
        valueAnimator2.setRepeatCount(ValueAnimator.INFINITE);
        valueAnimator2.setInterpolator(new LinearInterpolator());
        valueAnimator2.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                Float aFloat = Float.valueOf(animation.getAnimatedValue().toString());
                waveAmplifier = 10f + 10 * aFloat;
                waveAmplifier2 = 20f + 10 * (1f - aFloat);

            }
        });
        set.playTogether(valueAnimator, valueAnimator2);
        set.start();

    }