套路一：
- 无图无真相
- 这里要感谢两位大神的博客 参照很多
- 下面的4个小球完全参照 Android仿百度贴吧客户端Loading小球 实现 有意向的同学可以点击过去看看
#######套路二：
- 分析
顶部有水波纹不断的浮动
头像跟着水波纹的浮动而浮动
- 解决
- 先到网上百度一番 结果还真有: 仿百度外卖的酷炫水波纹效果及解析
于是马上看源码
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.setDrawFilter(mDrawFilter);
mAbovePath.reset();
mBelowWavePath.reset();
φ-=0.1f;
float y,y2;
double ω = 2*Math.PI / getWidth();
mAbovePath.moveTo(getLeft(),getBottom());
mBelowWavePath.moveTo(getLeft(),getBottom());
for (float x = 0; x <= getWidth(); x += 20) {
/**
* y=Asin(ωx+φ)+k
* A—振幅越大，波形在y轴上最大与最小值的差值越大
* ω—角速度， 控制正弦周期(单位角度内震动的次数)
* φ—初相，反映在坐标系上则为图像的左右移动。这里通过不断改变φ,达到波浪移动效果
* k—偏距，反映在坐标系上则为图像的上移或下移。
*/
y = (float) (8 * Math.cos(ω * x + φ) +8);
y2 = (float) (8 * Math.sin(ω * x + φ));
mAbovePath.lineTo(x, y);
mBelowWavePath.lineTo(x, y2);
//回调 把y坐标的值传出去(在activity里面接收让小机器人随波浪一起摇摆)
mWaveAnimationListener.OnWaveAnimation(y);
}
mAbovePath.lineTo(getRight(),getBottom());
mBelowWavePath.lineTo(getRight(),getBottom());
canvas.drawPath(mAbovePath,mAboveWavePaint);
canvas.drawPath(mBelowWavePath,mBelowWavePaint);
postInvalidateDelayed(20);
}
What？ω φ 这些是什么意思啊 奈何这个大神内功太深厚 这一招一式打出来实在是参悟不透啊 估计再看下去会走火入魔,赶紧离开。
但是心有不甘,于是静坐冥想1小时。。。。
1.水波纹 不就是贝塞尔曲线嘛 用path.quadTo()能解决 再借鉴下Android仿百度贴吧客户端Loading小球中的周期函数思想 让水波纹不断的浮动起来
2.图片随水波纹的浮动而浮动 图片在x轴是固定不变得 只是在y轴有上下的波动 只要能获取贝塞尔曲线中 path经过与图片x轴重合的y轴的坐标点就ok 刚好Android中有PathMeasure类结合Path 可以做到
想好这些 就开始撸码
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Path fulPath = getActionFulPath(currentPercent);
canvas.drawPath(fulPath,fulPaint);
Path idmPath=getActionDimPath(currentPercent);
canvas.drawPath(idmPath,dimPaint);
}
private Path getActionDimPath(float percent) {
int quadWidth = width / 4;
int quadHeight = height/3;
Path path=new Path();
int x=-width;
x+=percent*width;
path.moveTo(x,height/2);
//第一段
path.rQuadTo(quadWidth,-quadHeight,quadWidth*2,0);
path.rQuadTo(quadWidth,quadHeight,quadWidth*2,0);
//第二段
path.rQuadTo(quadWidth,-quadHeight,quadWidth*2,0);
path.rQuadTo(quadWidth,quadHeight,quadWidth*2,0);
//闭合
path.lineTo(x+width*2,height);
path.lineTo(x,height);
path.close();
//关联一个path
measure.setPath(path,true);
//获取path到view中心的长度
float length = Math.abs(x)+ (width / 2);
//获取该path该位置时的坐标值
measure.getPosTan(length,pos,null);
//将y坐标的值通过接口传递出去
onWaveAnimationListener.onWaveAnimation(pos[1]+currentPercent);
return path;
}
注意这里是使用的path.rQuadTo() 是相对上次结束坐标来进行二次贝塞尔曲线的 不是相对于原点
上面的path差不多是这样的(ps:实在不会用AI绘图 若侵权了立马删除)
声明传递数据的接口
public void setOnWaveAnimationListener(OnWaveAnimationListener listener){
onWaveAnimationListener =listener;
}
//接口
public interface OnWaveAnimationListener{
void onWaveAnimation(float y);
}
仔细看效果图 有2个贝塞尔曲线 所以这个贝塞尔曲线与上面那个是相反的
public Path getActionFulPath(float percent) {
int quadWidth = width / 4;
int quadHeight = height/3;
Path path=new Path();
int x=-width;
x+=percent*width;
path.moveTo(x,height/2);
path.rQuadTo(quadWidth,quadHeight,quadWidth*2,0);
path.rQuadTo(quadWidth,-quadHeight,quadWidth*2,0);
path.rQuadTo(quadWidth,quadHeight,quadWidth*2,0);
path.rQuadTo(quadWidth,-quadHeight,quadWidth*2,0);
path.lineTo(x+width*2,height);
path.lineTo(x,height);
path.close();
return path;
}
在初始化的时候 启动属性动画 让水波纹浮动起来
private void init() {
fulPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
fulPaint.setColor(Color.parseColor("#fafafa"));
fulPaint.setStyle(Paint.Style.FILL);
dimPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
dimPaint.setColor(Color.parseColor("#fafafa"));
dimPaint.setAlpha(80);
dimPaint.setStyle(Paint.Style.FILL);
//画布抗锯齿
//mDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
measure = new PathMeasure();
ValueAnimator animator=ValueAnimator.ofFloat(0,1);
animator.setDuration(3000);
animator.setInterpolator(new LinearInterpolator());
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.setRepeatMode(ValueAnimator.RESTART);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//不断改变currentPercent的值 让水波纹不断的浮动起来
currentPercent=animation.getAnimatedFraction();
invalidate();
}
});
animator.start();
}
最后布局文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.sharemodule.LoadingActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#29a3fe">
<com.example.sharemodule.widget.BaiduTopView
android:id="@+id/waveView"
android:layout_width="match_parent"
android:layout_height="15dp"
android:layout_gravity="bottom" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:text="百度外卖"
android:textColor="@android:color/white"
android:textSize="18sp"
android:textStyle="bold" />
<ImageView
android:id="@+id/image"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="bottom|center_horizontal"
android:scaleType="centerCrop" />
</FrameLayout>
Activity中实现
public class LoadingActivity extends AppCompatActivity {
private static final String TAG= LoadingView.class.getSimpleName();
@BindView(R.id.image)
ImageView imageView;
@BindView(R.id.waveView)
BaiduTopView waveView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_loading);
ButterKnife.bind(this);
Glide.with(this).load(R.drawable.head_gif).asGif().into(imageView);
}
@Override
protected void onResume() {
super.onResume();
final FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) imageView.getLayoutParams();
waveView.setOnWaveAnimationListener(new BaiduTopView.OnWaveAnimationListener() {
@Override
public void onWaveAnimation(float y) {
Log.e(TAG,"坐标："+y);
layoutParams.bottomMargin= (int)y;
imageView.setLayoutParams(layoutParams);
}
});
}
}
哎 先去找AI画图教程学习下 不然还有诸多不方便 如果有什么疑问的地方请随时留言。
网友评论