A:振幅—默认200
φ:初相,默认0
曲线总长:测试阶段:-600~600 共1200
T:周期–600
ω:2π/T
2.2–绘制正弦函数
/**
- 作者:张风捷特烈
- 时间:2018/11/16 0016:9:04
- 邮箱:1981462002@qq.com
- 说明:旋律视图
*/
public class RhythmView2 extends View {
private Point mCoo = new Point(800, 500);//原点坐标
private double mMaxHeight = 200;//最到点
private double min = -600;//最小x
private double max = 600;//最大x
private double φ = 0;//初相
private double A = mMaxHeight;//振幅
private double ω;//角频率
private Paint mPaint;//主画笔
private Path mPath;//主路径
private Path mReflexPath;//镜像路径
public RhythmView2(Context context) {
this(context, null);
}
public RhythmView2(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();//初始化
}
private void init() {
//初始化主画笔
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(Color.BLUE);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(6);
//初始化主路径
mPath = new Path();
mReflexPath = new Path();
}
@Override
protected void onDraw(Canvas canvas) {
mPath.reset();
mReflexPath.reset();
super.onDraw(canvas);
canvas.save();
canvas.translate(mCoo.x, mCoo.y);
formPath();
canvas.drawPath(mPath, mPaint);
canvas.restore();
}
/**
- 对应法则
- @param x 原像(自变量)
- @return 像(因变量)
*/
private double f(double x) {
double len = max - min;
ω = 2 * Math.PI / (rad(len) / 2);
double y = A * Math.sin(ω * rad(x) - φ);
return y;
}
private void formPath() {
mPath.moveTo((float) min, (float) f(min));
for (double x = min; x <= max; x++) {
double y = f(x);
mPath.lineTo((float) x, (float) y);
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mAnimator.start();
break;
}
return true;
}
private double rad(double deg) {
return deg / 180 * Math.PI;
}
}
3.正弦函数的动起来
什么影响正弦函数的横向位移–相位:φ
那还等什么,ValueAnimator走起,从0~2 * Math.PI
//数字时间流
mAnimator = ValueAnimator.ofFloat(0, (float) (2 * Math.PI));
mAnimator.setDuration(1000);
mAnimator.setRepeatMode(ValueAnimator.RESTART);
mAnimator.setInterpolator(new LinearInterpolator());
mAnimator.addUpdateListener(a -> {
φ = (float) a.getAnimatedValue();
invalidate();
});
就这么简单?—是的
4.让凸起的部分渐渐平息
不就是对A值进行渐变嘛…非常简单
mAnimator.addUpdateListener(a -> {
φ = (float) a.getAnimatedValue();
A = (float) (mMaxHeight* (1 - (float) a.getAnimatedValue() / (2 * Math.PI)));
invalidate();
});
二、加入衰减函数与渐变色
1.加入衰减函数
虽然有那么点感觉,但是还是差很多,关键在对应法则,说起来也简单
但是操作起来挺费劲,衰减函数凑了好一会…
/**
- 对应法则
- @param x 原像(自变量)
- @return 像(因变量)
*/
private double f(double x) {
double len = max - min;
double a = 4 / (4 + Math.pow(rad(x / Math.PI * 800 / len), 4));
double aa = Math.pow(a, 2.5);
ω = 2 * Math.PI / (rad(len) / 2);
double y = aa * A * Math.sin(ω * rad(x) - φ);
return y;
}
2.加渐变色
什么颜色好呢,好吧,我计较懒,搭条彩虹吧(以前实现过)
int[] colors = new int[]{
Color.parseColor(“#F60C0C”),//红
Color.parseColor(“#F3B913”),//橙
Color.parseColor(“#E7F716”),//黄
Color.parseColor(“#3DF30B”),//绿
Color.parseColor(“#0DF6EF”),//青
Color.parseColor(“#0829FB”),//蓝
Color.parseColor(“#B709F4”),//紫
};
float[] pos = new float[]{
1.f / 7, 2.f / 7, 3.f / 7, 4.f / 7, 5.f / 7, 6.f / 7, 1
};
mPaint.setShader(
new LinearGradient(
(int) min, 0, (int) max, 0,
colors, pos,
Shader.TileMode.CLAMP
));
三、第二条曲线的绘制
1.路径的形成
会了一个,另一个Y镜像一下就行了(y坐标边-y)
private void formPath() {
mPath.moveTo((float) min, (float) f(min));
mReflexPath.moveTo((float) min, (float) f(min));
for (double x = min; x <= max; x++) {
double y = f(x);
mPath.lineTo((float) x, (float) y);
mReflexPath.lineTo((float) x, -(float) y);
}
}
2.绘制第二条曲线:onDraw
第二条淡一点
mPaint.setAlpha(255);
canvas.drawPath(mPath, mPaint);
mPaint.setAlpha(66);
canvas.drawPath(mReflexPath, mPaint);
3.高度设置
我的用意是在录音是监听音量大小,然后让图象波动
暴漏设置高度的方法,在设置时执行动画,下面是点击设置随机高度效果
/**
- 设置高度
- @param maxHeight
*/
public void setMaxHeight(double maxHeight) {
mMaxHeight = maxHeight;
mAnimator.start();
invalidate();
}
四、扫尾–封装
该dp的dp,该删的删,该封装的封装,该优化的优化,直接贴代码
/**
- 作者:张风捷特烈
- 时间:2018/11/16 0016:9:04
- 邮箱:1981462002@qq.com
- 说明:贝塞尔三次曲线–旋律视图
*/
public class RhythmView extends View {
private double mMaxHeight = 0;//最到点
private double mPerHeight = 0;//最到点
private double min;//最小x
private double max;//最大x
private double φ = 0;//初相
private double A = mMaxHeight;//振幅
private double ω;//角频率
private Paint mPaint;//主画笔
private Path mPath;//主路径
private Path mReflexPath;//镜像路径
private ValueAnimator mAnimator;
private int mHeight;
private int mWidth;
public RhythmView(Context context) {
this(context, null);
}
public RhythmView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();//初始化
}
private void init() {
//初始化主画笔
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(Color.BLUE);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(dp(2));
//初始化主路径
mPath = new Path();
mReflexPath = new Path();
//数字时间流
mAnimator = ValueAnimator.ofFloat(0, (float) (2 * Math.PI));
mAnimator.setDuration(1000);
mAnimator.setRepeatMode(ValueAnimator.RESTART);
mAnimator.setInterpolator(new LinearInterpolator());
mAnimator.addUpdateListener(a -> {
φ = (float) a.getAnimatedValue();
A = (float) (mMaxHeight * mPerHeight * (1 - (float) a.getAnimatedValue() / (2 * Math.PI)));
invalidate();
});
}
public void setPerHeight(double perHeight) {
mPerHeight = perHeight;
mAnimator.start();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mWidth = MeasureSpec.getSize(widthMeasureSpec);
mHeight = MeasureSpec.getSize(heightMeasureSpec);
mMaxHeight = mHeight / 2 * 0.9;
min = -mWidth / 2;
max = mWidth / 2;
handleColor();
setMeasuredDimension(mWidth, mHeight);
}
private void handleColor() {
int[] colors = new int[]{
Color.parseColor(“#33F60C0C”),//红
Color.parseColor(“#F3B913”),//橙
Color.parseColor(“#E7F716”),//黄
Color.parseColor(“#3DF30B”),//绿
Color.parseColor(“#0DF6EF”),//青
Color.parseColor(“#0829FB”),//蓝
Color.parseColor(“#33B709F4”),//紫
};
float[] pos = new float[]{
1.f / 10, 2.f / 7, 3.f / 7, 4.f / 7, 5.f / 7, 9.f / 10, 1
};
mPaint.setShader(
new LinearGradient(
(int) min, 0, (int) max, 0,
colors, pos,
Shader.TileMode.CLAMP
));
}
@Override
protected void onDraw(Canvas canvas) {
mPath.reset();
mReflexPath.reset();
super.onDraw(canvas);
canvas.save();
canvas.translate(mWidth / 2, mHeight / 2);
formPath();
mPaint.setAlpha(255);
canvas.drawPath(mPath, mPaint);
mPaint.setAlpha(66);
canvas.drawPath(mReflexPath, mPaint);
canvas.restore();
}
/**
- 对应法则
- @param x 原像(自变量)
- @return 像(因变量)
*/
private double f(double x) {
double len = max - min;
double a = 4 / (4 + Math.pow(rad(x / Math.PI * 800 / len), 4));
double aa = Math.pow(a, 2.5);
ω = 2 * Math.PI / (rad(len) / 2);
double y = aa * A * Math.sin(ω * rad(x) - φ);
return y;
}
private void formPath() {
mPath.moveTo((float) min, (float) f(min));
mReflexPath.moveTo((float) min, (float) f(min));
for (double x = min; x <= max; x++) {
double y = f(x);
mPath.lineTo((float) x, (float) y);
mReflexPath.lineTo((float) x, -(float) y);
}
}
private double rad(double deg) {
return deg / 180 * Math.PI;
}
protected float dp(float dp) {
return TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, dp, getResources().getDisplayMetrics());
}
最后
题外话,我在一线互联网企业工作十余年里,指导过不少同行后辈。帮助很多人得到了学习和成长。
我意识到有很多经验和知识值得分享给大家,也可以通过我们的能力和经验解答大家在IT学习中的很多困惑,所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限,很多程序员朋友无法获得正确的资料得到学习提升,故此将并将重要的Android进阶资料包括自定义view、性能优化、MVC与MVP与MVVM三大框架的区别、NDK技术、阿里面试题精编汇总、常见源码分析等学习资料。
【Android思维脑图(技能树)】
知识不体系?这里还有整理出来的Android进阶学习的思维脑图,给大家参考一个方向。
【Android进阶学习视频】、【全套Android面试秘籍】
希望我能够用我的力量帮助更多迷茫、困惑的朋友们,帮助大家在IT道路上学习和发展
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
oid思维脑图(技能树)】**
知识不体系?这里还有整理出来的Android进阶学习的思维脑图,给大家参考一个方向。
[外链图片转存中…(img-d39NK2fM-1714212908242)]
【Android进阶学习视频】、【全套Android面试秘籍】
希望我能够用我的力量帮助更多迷茫、困惑的朋友们,帮助大家在IT道路上学习和发展
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!