Android仿抖音音樂旋轉(zhuǎn)效果
這次是實(shí)現(xiàn)一個(gè)仿抖音的音樂旋轉(zhuǎn)自定義View，先看一下效果：
實(shí)現(xiàn)這個(gè)效果主要是采用的拼湊的方法，即先實(shí)現(xiàn)音符動畫再實(shí)現(xiàn)圖片旋轉(zhuǎn)動畫然后將兩個(gè)效果合并到一起。
先看下概念圖
●音符動畫
音符動畫這里是利用貝塞爾曲線
+PathMeasure+ValueAnimator來實(shí)現(xiàn)的
1、貝塞爾曲線的繪制：因?yàn)橐舴倪\(yùn)動軌跡是自下而上的，因此我們在添加Path路徑的時(shí)候需要先將起點(diǎn)移到右下角，然后再繪制貝塞爾曲線。
path = new Path();//將起點(diǎn)移到右下角path.moveTo(getWidth(),getHeight()-getWidth()/6);//繪制自下而上的貝塞爾曲線path.quadTo(0,getHeight(),getWidth()/4,0);
2、PathMeasure+ValueAnimator實(shí)現(xiàn)音符沿軌跡運(yùn)動
private void initPath() {//新建兩個(gè)float數(shù)組pos用來存儲每個(gè)軌跡點(diǎn)的坐標(biāo)，tan用來存儲正切值pos = new float[2];tan = new float[2];path = new Path();path.moveTo(getWidth(),getHeight()-getWidth()/6);path.quadTo(0,getHeight(),getWidth()/4,0);pathMeasure = new PathMeasure(path,false);length = pathMeasure.getLength();valueAnimator = ValueAnimator.ofFloat(0,2f);valueAnimator.setDuration(3000);//設(shè)置重復(fù)執(zhí)行動畫valueAnimator.setRepeatCount(ValueAnimator.INFINITE);//設(shè)置為勻速運(yùn)動valueAnimator.setInterpolator(new LinearInterpolator());valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {float temp=(float) animation.getAnimatedValue();val= temp/2;//這里實(shí)現(xiàn)音符的透明度從0~1~0的效果if(temp>1){Music3.this.setAlpha(Math.abs(temp-2f));}else {Music3.this.setAlpha(temp);}//更新界面invalidate();}});valueAnimator.start();}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);//獲取每個(gè)點(diǎn)對應(yīng)的坐標(biāo)pathMeasure.getPosTan(length*val,pos,tan);//創(chuàng)建音符BitMap寬高是逐漸放大的scaledBitmap = Bitmap.createScaledBitmap(bitmap, (int)(getWidth()/5*val)+4, (int)(getWidth()/5*val)+4, true);canvas.drawPath(path,paint);canvas.drawBitmap(scaledBitmap,pos[0],pos[1],paint);}
●圖片旋轉(zhuǎn)
這里我引用的一個(gè)第三方的圓形圖片庫
implementation 'de.hdodenhof:circleimageview:2.2.0'實(shí)現(xiàn)圖片旋轉(zhuǎn)
circleImageView = findViewById(R.id.mm);RotateAnimation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);rotateAnimation.setInterpolator(new LinearInterpolator());rotateAnimation.setDuration(4000);rotateAnimation.setRepeatCount(Animation.INFINITE);circleImageView.startAnimation(rotateAnimation);
評論
圖片
表情