Android自定义View实现波浪动画

2023-07-17 23:04:04 321

本文实例为大家分享了Android自定义View实现波浪动画的具体代码，供大家参考，具体内容如下

效果演示

代码调用与实现效果

xml中调用

实现原理

属性配置

attrs.xml文件中,进行属性配置

获取属性,同时对属性赋默认值

finalTypedArrayarray=context.obtainStyledAttributes(set,R.styleable.Wave);
mSpeed=array.getFloat(R.styleable.Wave_speed,DEFAULT_SPEED);
mWaveColor=array.getColor(R.styleable.Wave_waveColor,DEFAULT_WAVE_COLOR);
mWaveBKColor=array.getColor(R.styleable.Wave_waveBackgroundColor,DEFAULT_WAVE_BK_COLOR);
mAmplitude=array.getInt(R.styleable.Wave_amplitude,DEFAULT_AMPLITUDE);
mQuadrant=array.getFloat(R.styleable.Wave_quadrant,DEFAULT_QUADRANT);
mFrequency=array.getFloat(R.styleable.Wave_frequency,DEFAULT_FREQUENCY);
array.recycle();

绘制波浪

在onDraw()中使用Canvas进行绘制即可,这里需要注意的正弦曲线的绘制.

正弦曲线(y=Asin(ωx+φ)+k)的一些参数如下:

A——振幅，当物体作轨迹符合正弦曲线的直线往复运动时，其值为行程的1/2。
(ωx+φ)——相位，反映变量y所处的状态。
φ——初相，x=0时的相位；反映在坐标系上则为图像的左右移动。
k——偏距，反映在坐标系上则为图像的上移或下移。
ω——角速度，控制正弦周期(单位角度内震动的次数)。

onDraw中的代码:

@Override
protectedvoidonDraw(Canvascanvas){
super.onDraw(canvas);
finalintwidth=getWidth();
finalintheight=getHeight();

finalintwaveHeight=(int)(getHeight()*mQuadrant);
//绘制背景
canvas.drawColor(mWaveBKColor);
mWavePath.moveTo(0,height);
mWavePath.lineTo(0,waveHeight);
for(inti=1;i<=width;i++){
//绘制正弦曲线y=ASin(ωt+ρ)=Asin(2πft+ρ)
finalfloaty=(float)(waveHeight+mAmplitude*Math.sin(2*Math.PI*i*mFrequency+mShift));
mWavePath.lineTo(i,y);
}
//将曲线闭合
mWavePath.lineTo(width,height);
canvas.drawPath(mWavePath,mWavePaint);
}

波浪动画

这时波浪应该已经绘制完成了,下面使用Handler中的周期任务实现动画效果.

//创建一个周期任务,它的职责是改变正弦曲线的偏移量
finalclassWaveAnimationimplementsRunnable{

@Override
publicvoidrun(){
mWavePath.reset();
mShift+=mSpeed;
invalidate();
Wave.this.postDelayed(this,DEFAULT_PERIOD);
}
}

在View被创建的时候让它进行执行

//开始波浪动画
postDelayed(newWaveAnimation(),DEFAULT_PERIOD);

完整代码

publicclassWaveextendsView{

//默认属性值
privatestaticfinalintDEFAULT_AMPLITUDE=200;
privatestaticfinalintDEFAULT_PERIOD=16;
privatestaticfinalfloatDEFAULT_SPEED=.1F;
privatestaticfinalfloatDEFAULT_QUADRANT=.33F;
privatestaticfinalfloatDEFAULT_FREQUENCY=1F/360F;
privatestaticfinalintDEFAULT_WAVE_COLOR=Color.parseColor("#64B5F6");
privatestaticfinalintDEFAULT_WAVE_BK_COLOR=Color.parseColor("#EEEEEE");

@SuppressWarnings("FieldCanBeLocal")
@ColorInt
privateintmWaveColor;
@ColorInt
privateintmWaveBKColor;
//振幅
privateintmAmplitude;
//波浪位于View的位置
privatefloatmQuadrant;
//波浪的频率,这个值越大,波浪越密集
privatefloatmFrequency;

//速度
privatefloatmSpeed;
privatefloatmShift;

privatefinalPaintmWavePaint=newPaint(Paint.ANTI_ALIAS_FLAG);
privatefinalPathmWavePath=newPath();



publicWave(Contextcontext){
this(context,null);
}

publicWave(Contextcontext,AttributeSetattrs){
this(context,attrs,0);
}

publicWave(Contextcontext,AttributeSetattrs,intdefStyleAttr){
super(context,attrs,defStyleAttr);
init(context,attrs);
}

privatevoidinit(Contextcontext,AttributeSetset){
finalTypedArrayarray=context.obtainStyledAttributes(set,R.styleable.Wave);
mSpeed=array.getFloat(R.styleable.Wave_speed,DEFAULT_SPEED);
mWaveColor=array.getColor(R.styleable.Wave_waveColor,DEFAULT_WAVE_COLOR);
mWaveBKColor=array.getColor(R.styleable.Wave_waveBackgroundColor,DEFAULT_WAVE_BK_COLOR);
mAmplitude=array.getInt(R.styleable.Wave_amplitude,DEFAULT_AMPLITUDE);
mQuadrant=array.getFloat(R.styleable.Wave_quadrant,DEFAULT_QUADRANT);
mFrequency=array.getFloat(R.styleable.Wave_frequency,DEFAULT_FREQUENCY);
array.recycle();

mWavePaint.setStrokeWidth(2);
mWavePaint.setColor(mWaveColor);

//开始波浪动画
postDelayed(newWaveAnimation(),DEFAULT_PERIOD);
}


@Override
protectedvoidonDraw(Canvascanvas){
super.onDraw(canvas);
finalintwidth=getWidth();
finalintheight=getHeight();

finalintwaveHeight=(int)(getHeight()*mQuadrant);
//绘制背景
canvas.drawColor(mWaveBKColor);
mWavePath.moveTo(0,height);
mWavePath.lineTo(0,waveHeight);
for(inti=1;i<=width;i++){
//绘制正弦曲线y=ASin(ωt+ρ)=Asin(2πft+ρ)
finalfloaty=(float)(waveHeight+mAmplitude*Math.sin(2*Math.PI*i*mFrequency+mShift));
mWavePath.lineTo(i,y);
}
//将曲线闭合
mWavePath.lineTo(width,height);
canvas.drawPath(mWavePath,mWavePaint);
}


finalclassWaveAnimationimplementsRunnable{

@Override
publicvoidrun(){
mWavePath.reset();
mShift+=mSpeed;
invalidate();
Wave.this.postDelayed(this,DEFAULT_PERIOD);
}
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Android自定义View实现波浪动画

热门推荐

随机推荐