Android实现波浪球效果
作者:番茄炒蛋不要蛋 时间:2021-09-02 16:07:53
波浪球的效果一直都是想模仿的对象,在最近一段时间里模仿了这一界面,其实所用知识并不多。
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
标签:Android,波浪球
0
投稿
猜你喜欢
Android Studio中统一管理版本号引用配置问题
2023-03-06 04:23:54
Spring Cloud Gateway 如何修改HTTP响应信息
2021-07-20 13:33:40
原生Java操作兔子队列RabbitMQ
2022-03-12 21:27:25
Java AWT中常用的三种布局管理器详解
2023-02-11 20:55:25
java通过方向键控制小球移动的小游戏
2023-11-10 05:25:59
Java cookie和session会话技术介绍
2021-12-30 06:51:22
Java使用GZIP压缩导致HTTP请求返回乱码问题解决
2022-04-12 07:31:09
Android 优雅的读写Excel
2021-09-19 15:10:37
Android SQLite详解及示例代码
2023-08-04 22:26:35
详解Java中的反射机制和动态代理
2023-11-27 15:41:00
Java 异步线程监听与结果回调及异常捕获总结分析
2021-10-14 01:23:40
关于Maven的使用,这些你都真的了解么
2022-01-02 14:19:08
MAC配置java+jmeter环境变量过程解析
2021-09-30 00:16:23
Java httpClient介绍以及使用示例
2023-03-15 23:51:15
java读取文件内容,解析Json格式数据方式
2021-10-07 13:56:23
Java 入门图形用户界面设计之复选框
2022-06-19 15:22:53
Java Runnable和Thread实现多线程哪个更好你知道吗
2021-08-17 05:48:50
C# WinForm导出Excel方法介绍
2022-12-01 13:25:57
浅析Java设计模式编程中的单例模式和简单工厂模式
2021-10-13 15:27:54
Android编程开发之在Canvas中利用Path绘制基本图形(圆形,矩形,椭圆,三角形等)
2021-11-16 03:28:09