这几天想放开歌喉 唱歌 下了唱吧app,发现里面的交互效果 挺好玩的,突然就想写出来 (可能这就是本能吧)
左侧是本地效果,图二是唱吧效果
这里写代码片
这里写图片描述
这里写图片描述
这里写图片描述
实现1
想下移动这个实现较为简单 实际是个ViewPager+FragmentPagerAdapter 的操作 ,然后加个Fragment的动画
public class ChangBarViewPagerTransforms implements ViewPager.PageTransformer {
private int height=300;
@Override
public void transformPage(View page, float position) {
if (position > 0 && position <= 1) {//right scorlling
page.setTranslationY(-height * position);
page.setAlpha(1-position);
} else if (position >= -1 && position < 0) {//left scrolling
page.setTranslationY(height * position);
page.setAlpha(1-position);
} else {
}
}
}
这这样实现了 唱吧切换的效果 这个实现还是基本操作的
实现2
最难的感觉还是顶部栏背景的变色 扩散的形式变色 看上去很酷炫 ,操作还是shader取处理的 通过LinearGradient
然后处理起始的坐标,案例中简单的通过rgb 中的b 递增来做到 首位的颜色相近, 大体的思路是这样的
public class ColorBar extends FrameLayout {
Shader mLinearGradient1 = null;
Paint mPaint = null;
private Point mCurrentPoint;
public ColorBar(@NonNull Context context) {
super(context);
init();
}
public ColorBar(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public ColorBar(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
private void init() {
setWillNotDraw(false);
Random random = new Random();
r = random.nextInt(256);
g = random.nextInt(256);
b = random.nextInt(256);
endr=r;
endg=g;
endb=0;
}
private int num=0;
private int r;
private int g;
private int b;
private int endr;
private int endg;
private int endb;
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Point changeColrPoint = getChangeColrPoint();
mLinearGradient1 = new LinearGradient(0, 0, getMeasuredWidth(), getMeasuredHeight(), new int[]{
changeColrPoint.x,changeColrPoint.y}, null,
Shader.TileMode.CLAMP);
mPaint = new Paint();
mPaint.setShader(mLinearGradient1);
canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);
postDelayed(new Runnable() {
@Override
public void run() {
invalidate();
}
},50);
}
private Point getChangeColrPoint(){
if (num>= b){
mCurrentPoint=null;
init();
num=0;
}
if (mCurrentPoint==null){
mCurrentPoint= new Point(Color.rgb(r,g,b),Color.rgb(endr,endg,endb));
}
mCurrentPoint.y=Color.rgb(endr,endg,num);
num++;
return mCurrentPoint;
}
}
<com.linqw.changbar.ColorBar
android:id="@+id/color_bar"
android:layout_width="match_parent"
android:layout_height="45dp">
<RelativeLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:gravity="center"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:shadowColor="#0f0"
android:textSize="16sp"
android:gravity="center"
android:text="标题栏"/>
</RelativeLayout>
</com.linqw.changbar.ColorBar>
