Android实现波浪球效果

波浪球的效果一直都是想模仿的对象，在最近一段时间里模仿了这一界面，其实所用知识并不多。

1）、波浪的效果是利用三角函数来实现的，在自定义view中创建容量为width的数组，由y=Asin(Kx+T)+H得到每个x相对应的y值，然后存入数组里面。

2）、利用Android中Canvas提供的drawLine来从上部向下画线，每个像素上画完线之后就组成了图像。

3）、自定义view中的变量都与width建立了比例关系，可以任意大小，且效果一致。

4）、分别对y=Asin(Kx+T)+H中的T与H做valueAnimation的数字动画，就能实现波浪和上升的效果。

5）、利用Android中Paint的setXfermode来实现圆形效果。

6）、给外部提供了外部接口，可以对内部状态进行改变。

具体代码如下：

1 界面XML代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/activity_wave_view"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context="com.example.app_switchbutton.WaveViewActivity">

<Button
   android:id="@+id/begainButtton"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="开始"
   android:layout_below="@+id/waveview"
   android:layout_alignParentStart="true" />

<com.example.app_switchbutton.waveView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:id="@+id/waveview"
   android:layout_alignParentTop="true"
   android:layout_alignParentStart="true"
   android:layout_marginStart="11dp" />

</RelativeLayout>

2、waveView的java代码：

package com.example.app_switchbutton;

import android.animation.ValueAnimator;
import android.content.Context;
import android.content.pm.ProviderInfo;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
* Created by 尽途 on 2017/4/30.
*/

public class waveView extends View {
 private int widthSize;
 private int heightSize;
 private float[] mContentOneYs=null;
 private float[] mContentTwoYs=null;
 private float[] restoreOnes=null;
 private float[] restoreTwos=null;
 private float n=0.5f;
 private int SWINGONE;
 private int SWINGTWO;
 private int OFFSETONE=0;
 private int OFFSETTWO=0;
 private Paint mPaint1;
 private Paint mPaint2;
 private Paint circlePaint;
 private Canvas bitmapCanvas;
 private Bitmap bitmap;
 private float endValue;

public waveView(Context context){
   super(context);
   init();
 }
 public waveView(Context context, AttributeSet attributeSet){
   super(context,attributeSet);
   init();
 }
 private void init(){
   mPaint1=new Paint();
   mPaint1.setColor(Color.parseColor("#AB9DCF"));
   mPaint1.setStrokeWidth(4);
   mPaint1.setAlpha(240);
   mPaint1.setStyle(Paint.Style.FILL);
   mPaint1.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

mPaint2=new Paint();
   mPaint2.setColor(Color.parseColor("#A2D1F3"));
   mPaint2.setStrokeWidth(4);
   mPaint2.setAlpha(240);
   mPaint2.setStyle(Paint.Style.FILL);
   mPaint2.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

circlePaint=new Paint();
   circlePaint.setAntiAlias(true);
   circlePaint.setColor(Color.GRAY);
   // circlePaint.setAlpha(56);

}

@Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
   widthSize=MeasureSpec.getSize(widthMeasureSpec);
   heightSize=widthSize;
   setMeasuredDimension(widthSize,heightSize);

bitmap=Bitmap.createBitmap(widthSize,heightSize, Bitmap.Config.ARGB_8888);//实现圆球效果
   bitmapCanvas=new Canvas(bitmap);
   SWINGONE=widthSize/20;
   SWINGTWO=widthSize/10;
 }

@Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
   super.onSizeChanged(w, h, oldw, oldh);
   getPoints();
 }
 private void getPoints(){
   mContentOneYs=new float[widthSize];
   mContentTwoYs=new float[widthSize];
   restoreOnes=new float[widthSize];
   restoreTwos=new float[widthSize];
   for (int i=0;i<widthSize;i++){
     mContentOneYs[i]=getposition1(i,SWINGONE,OFFSETONE,(int)(widthSize*n));
     mContentTwoYs[i]=getposition2(i,SWINGTWO,OFFSETTWO,(int)(widthSize*n));
   }
 }
 private float getposition1(int x,int swing,int offset,int baseHeight){
   float cycle=(float)(2*Math.PI)/widthSize;
   return (float)Math.sin(cycle*x+offset)*swing+baseHeight;
 }
 private float getposition2(int x,int swing,int offset,int baseHeight){
   float cycle=(float)(2*Math.PI)/widthSize;
   return (float)Math.cos(cycle*x+offset)*swing+baseHeight;
 }

@Override
 protected void onDraw(Canvas canvas) {
   bitmapCanvas.drawCircle(widthSize/2,heightSize/2,widthSize/2,circlePaint);//实现圆球效果

canvas.save();
   getPoints();
   for (int i=0;i<widthSize;i++){
     final float x=i;
     final float y1=mContentOneYs[i];
     final float y2=mContentTwoYs[i];
     bitmapCanvas.drawLine(x,y1,x,heightSize,mPaint2);//实现了线的绘制最终生成了图，在画的球上画的线
     bitmapCanvas.drawLine(x,y2,x,heightSize,mPaint1);
   }
   canvas.drawBitmap(bitmap,0,0,null);//将球画在了主界面的View中。
 }

@Override
 public boolean onTouchEvent(MotionEvent event) {//按下就会产生动画效果
   switch (event.getAction()){
     case MotionEvent.ACTION_DOWN:
       return true;
     case MotionEvent.ACTION_MOVE:
       return false;
     case MotionEvent.ACTION_UP:
       begainAnimation();
       invalidate();
       default:
         break;
   }
   return super.onTouchEvent(event);
 }

public void begainAnimation(){//所有动画的实现都在这个函数里面
   final ValueAnimator valueAnimator=ValueAnimator.ofInt(0,20);
   final ValueAnimator valueAnimator1=ValueAnimator.ofInt(0,20);
   final ValueAnimator valueAnimator2=ValueAnimator.ofFloat(1,0.5f);
   valueAnimator2.setDuration(5000);
   valueAnimator.setDuration(5000);
   valueAnimator1.setDuration(5000);
   valueAnimator.setTarget(OFFSETTWO);
   valueAnimator1.setTarget(OFFSETONE);
   valueAnimator2.setTarget(n);
   valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
     @Override
     public void onAnimationUpdate(ValueAnimator animation) {
       OFFSETTWO=(int)valueAnimator.getAnimatedValue();
       invalidate();
     }
   });
   valueAnimator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
     @Override
     public void onAnimationUpdate(ValueAnimator animation) {
       OFFSETONE=(int)valueAnimator1.getAnimatedValue();
       invalidate();
     }
   });
   valueAnimator2.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
     @Override
     public void onAnimationUpdate(ValueAnimator animation) {
       n=(float)valueAnimator2.getAnimatedValue();
     }
   });
   valueAnimator.start();
   valueAnimator1.start();
   valueAnimator2.start();
 }
 public void changgeState(float endValue){//给外部的一个接口
   this.endValue=1-endValue;
   begainAnimation();
 }

}

3、waveActivity的java代码：  

package com.example.app_switchbutton;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class WaveViewActivity extends AppCompatActivity {
 private Button begainButton;
 private waveView waveview;

@Override
 protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_wave_view);
   waveview=(waveView)findViewById(R.id.waveview);
   begainButton=(Button)findViewById(R.id.begainButtton);
   begainButton.setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View v) {
       waveview.begainAnimation();
     }
   });
 }
}

在此也多些网上的老前辈的学习代码。

来源：https://blog.csdn.net/ZQL2288/article/details/71066389