仿唱吧UI效果

这几天想放开歌喉 唱歌 下了唱吧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>