先看一下效果：

其中頂部是模仿的股票數(shù)據(jù)分時(shí)圖，以前也寫過(guò)詳細(xì)的文章傳送門，只不過(guò)不支持左右滑動(dòng)，這款是在那個(gè)基礎(chǔ)上的修改

在說(shuō)一下分時(shí)圖的思路吧：

1. 可以看作是一條條相連的直線首尾相接，通過(guò)不斷給View數(shù)據(jù)，達(dá)到動(dòng)態(tài)添加的效果
2. 左右滑動(dòng)也沒(méi)有想象中那么復(fù)雜，我們有所有的分時(shí)圖數(shù)據(jù)集合，當(dāng)屏幕顯示不開時(shí)，我只選取最新的一段數(shù)據(jù)給View顯示出來(lái)，當(dāng)右滑時(shí)，我截取對(duì)應(yīng)的的數(shù)據(jù)段讓View顯示，就可以達(dá)到滑動(dòng)效果

其中滑動(dòng)的核心代碼如下：
mShowList 為需要顯示的集合
mTimeList 為全部數(shù)據(jù)集合
通過(guò) subList 截取需要的數(shù)據(jù)段，截取后實(shí)時(shí)去刷新當(dāng)前View

    /*** 滑動(dòng)監(jiān)聽(tīng)* *///當(dāng)前的X軸坐標(biāo)，我要記錄上次滑動(dòng)的最后坐標(biāo)，才能實(shí)時(shí)判斷是否左右滑動(dòng)private float startTouchX = 0f; //滑動(dòng)的距離，通過(guò)他來(lái)截取對(duì)應(yīng)的數(shù)據(jù)段private int moveTouchX = 0;@Overridepublic boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN://手指按下Log.e(TAG, "onTouchEvent: 123456789->按下");//moveTouchX = 0;startTouchX = event.getX();break;case MotionEvent.ACTION_MOVE:if (mTimeList.size() > 50){stopRe = true;//手指移動(dòng)if (startTouchX > event.getX()){Log.e(TAG, "onTouchEvent: 123456789->向左滑動(dòng)--" + moveTouchX);if (moveTouchX > 0){moveTouchX = moveTouchX - 1;mShowList.clear();mShowList.addAll(mTimeList.subList(mTimeList.size() - (50 + moveTouchX), mTimeList.size() - moveTouchX));postInvalidate();}else {moveTouchX = 0;stopRe = false;}}else {Log.e(TAG, "onTouchEvent: 123456789->向右滑動(dòng)---" + moveTouchX);if (mTimeList.size() > (50 + moveTouchX)){moveTouchX = moveTouchX + 1;mShowList.clear();mShowList.addAll(mTimeList.subList(mTimeList.size() - (50 + moveTouchX), mTimeList.size() - moveTouchX));}postInvalidate();}}startTouchX = event.getX();break;case MotionEvent.ACTION_UP://手指松開Log.e(TAG, "onTouchEvent: 123456789->松開");break;}return true;}

下方三個(gè)動(dòng)畫(屬性動(dòng)畫)也是我遇到過(guò)比較常見(jiàn)的

第一個(gè)是放大縮小，比如在送禮按鈕上，和禮物圖標(biāo)上，更有沖擊感
第二個(gè)是上下移動(dòng)，比如某個(gè)按鈕上的氣泡
第三個(gè)是卡片點(diǎn)擊左右兩邊時(shí)有一個(gè)緩沖效果
當(dāng)然常見(jiàn)的還有漸變效果，比如占位圖消失時(shí)，加一個(gè)漸變消失用戶體驗(yàn)可能會(huì)更好

下面貼一下代碼

可滑動(dòng)分時(shí)圖: TimeView

/*** 作者:zch* 時(shí)間:2023/10/10 15:08* 描述:自定義分時(shí)圖View*/
public class TimeView extends View {private Paint paint;private int mCanvasHeight;private int mCanvasWidth;private int mStartX = 0;private int mStartY;private int paintColor = 0;private int canvasColor = 0;private int bgColor = 0;private boolean isShowBg = false;//是否停止刷新，但是總數(shù)據(jù)一樣往里面添加private boolean stopRe = false;//總數(shù)據(jù)private ArrayList<Integer> mTimeList = new ArrayList<>();//需要顯示在屏幕上的數(shù)據(jù)private ArrayList<Integer> mShowList = new ArrayList<>();public TimeView(Context context, @Nullable AttributeSet attrs) {super(context, attrs);}//開始繪畫邏輯@SuppressLint("DrawAllocation")@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);//首先定義畫筆paint = new Paint();//防鋸齒paint.setAntiAlias(true);//獲取畫板高度mCanvasHeight = getMeasuredHeight();//獲取畫板寬度mCanvasWidth = getMeasuredWidth();//設(shè)置畫筆顏色paint.setColor(paintColor == 0 ? Color.YELLOW : paintColor);//設(shè)置畫板背景canvas.drawColor(canvasColor == 0 ? Color.GRAY : canvasColor);//設(shè)置畫筆粗細(xì)paint.setStrokeWidth((float)3);//Y軸的起止都在折線圖的四分之一處開始，因?yàn)閿?shù)據(jù)的范圍是折線圖的二分之一//這樣數(shù)據(jù)波動(dòng)位置就處于折線圖居中位置mStartY = mCanvasHeight / 4;//畫線drawView(canvas);}/***注釋：*繪畫邏輯*/private void drawView(Canvas canvas){mStartX = 0;//如果有數(shù)據(jù)if (mShowList.size() > 0){int startX = 0,startY = 0;int stopX,stopY;for (int i = 0; i < mShowList.size(); i++){Integer t = mShowList.get(i);stopY = t+ mStartY;mStartX = mStartX + 10;//stopX = t.getStopX();stopX = mStartX;//首次的時(shí)候起始位置就等于終止位置if (i == 0){startX = stopX;startY = stopY;}//畫線canvas.drawLine(startX,startY,stopX,stopY,paint);//是否畫背景if (isShowBg){setDrawBg(startX,startY,stopX,stopY,canvas);}//下次畫線的時(shí)候的起始位置等于上次畫線位置的終止位置startX = stopX;startY = stopY;}}}/*** 滑動(dòng)監(jiān)聽(tīng)* *///當(dāng)前的X軸坐標(biāo)，我要記錄上次滑動(dòng)的最后坐標(biāo)，才能實(shí)時(shí)判斷是否左右滑動(dòng)private float startTouchX = 0f;//滑動(dòng)的距離，通過(guò)他來(lái)截取對(duì)應(yīng)的數(shù)據(jù)段private int moveTouchX = 0;@Overridepublic boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN://手指按下Log.e(TAG, "onTouchEvent: 123456789->按下");//moveTouchX = 0;startTouchX = event.getX();break;case MotionEvent.ACTION_MOVE:if (mTimeList.size() > 50){stopRe = true;//手指移動(dòng)if (startTouchX > event.getX()){Log.e(TAG, "onTouchEvent: 123456789->向左滑動(dòng)--" + moveTouchX);if (moveTouchX > 0){moveTouchX = moveTouchX - 1;mShowList.clear();mShowList.addAll(mTimeList.subList(mTimeList.size() - (50 + moveTouchX), mTimeList.size() - moveTouchX));postInvalidate();}else {moveTouchX = 0;stopRe = false;}}else {Log.e(TAG, "onTouchEvent: 123456789->向右滑動(dòng)---" + moveTouchX);if (mTimeList.size() > (50 + moveTouchX)){moveTouchX = moveTouchX + 1;mShowList.clear();mShowList.addAll(mTimeList.subList(mTimeList.size() - (50 + moveTouchX), mTimeList.size() - moveTouchX));}postInvalidate();}}startTouchX = event.getX();break;case MotionEvent.ACTION_UP://手指松開Log.e(TAG, "onTouchEvent: 123456789->松開");break;}return true;}/***注釋：* 畫折線下背景*/private void setDrawBg(int tx,int ty,int px,int py,Canvas canvas){//設(shè)置畫筆Paint paint = new Paint();//防鋸齒paint.setAntiAlias(true);//設(shè)置顏色paint.setColor(bgColor == 0 ? Color.WHITE : bgColor);//畫陰影部分Path bg = new Path();bg.moveTo(tx, ty);bg.lineTo(tx, mCanvasHeight);bg.lineTo(px, mCanvasHeight);bg.lineTo(px, py);bg.lineTo(tx, ty);bg.close();//添加到畫板上canvas.drawPath(bg, paint);}/***注釋：* 設(shè)置分?jǐn)?shù)圖數(shù)據(jù)，由外部傳輸*/public void setViewData(ArrayList<Integer> m) {this.mTimeList = m;//刷新界面 - 無(wú)需在UI線程，在工作線程即可被調(diào)用，invalidate()必須在UI線程if (!stopRe){mShowList.clear();//只取最后50個(gè)數(shù)據(jù)if (mTimeList.size() > 50){mShowList.addAll(mTimeList.subList(mTimeList.size()-50, mTimeList.size() - 1));}else {mShowList.addAll(mTimeList);}postInvalidate();}}/***注釋：*設(shè)置分時(shí)圖背景和畫筆顏色* p - 畫筆顏色* c - 背景顏色* b - 折線下背景顏色*/public void setViewColor(int p,int c,int b){this.paintColor = p;this.canvasColor = c;this.bgColor = b;}/***注釋：* 是否顯示折線下的背景*/public void setShowBgBottom(boolean b){this.isShowBg = b;}}

使用：
這里用定時(shí)來(lái)動(dòng)態(tài)獲取數(shù)據(jù)，其中 initData 為請(qǐng)求數(shù)據(jù)，這里用的模擬數(shù)據(jù)

    /*** 通過(guò)線程來(lái)動(dòng)態(tài)設(shè)置View達(dá)到動(dòng)畫效果*/private val thread: Thread = object : Thread() {@RequiresApi(api = Build.VERSION_CODES.N)override fun run() {while (true) {try {initData()//如果數(shù)據(jù)終止X的值大于界面寬度停止線程或者其他操作/*if (mTimeList.size > 0 && mTimeList.get(mTimeList.size - 1).stopX > tvTime!!.measuredWidth) {//清除容器數(shù)據(jù)，重新添加startX = 0mTimeList.clear()//thread.stop(); //終止線程}*//**休息時(shí)間 */sleep(1000)} catch (e: InterruptedException) {e.printStackTrace()}}}}

    private val mTimeList: ArrayList<Int> = ArrayList()@RequiresApi(Build.VERSION_CODES.N)private fun initData() {//設(shè)置Y軸數(shù)據(jù)的終止位置，無(wú)需設(shè)置起始位置，因?yàn)槊織l線的起始位置就是上一條線的終點(diǎn)位置val ra = Random()val stopY: Int = ra.nextInt(40)//給分時(shí)圖設(shè)置數(shù)據(jù)mTimeList.add(stopY)tvTime?.setViewData(mTimeList)}

縮放動(dòng)畫：
這里分兩部分，先縮，監(jiān)聽(tīng)縮結(jié)束后去放，如此反復(fù)

    //縮，將View傳進(jìn)來(lái)即可fun showS1(view: View) {val scaleAnimation = ScaleAnimation(1f, 0.5f,1f, 0.5f,Animation.RELATIVE_TO_SELF, 0.5f,Animation.RELATIVE_TO_SELF, 0.5f)scaleAnimation.setAnimationListener(object : Animation.AnimationListener {override fun onAnimationStart(animation: Animation) {}override fun onAnimationEnd(animation: Animation) {showF1(view)}override fun onAnimationRepeat(animation: Animation) {}})scaleAnimation.duration = 300scaleAnimation.fillAfter = trueview.startAnimation(scaleAnimation)}//放fun showF1(view: View) {val scaleAnimation = ScaleAnimation(0.5f, 1f,0.5f, 1f,Animation.RELATIVE_TO_SELF, 0.5f,Animation.RELATIVE_TO_SELF, 0.5f)scaleAnimation.duration = 300scaleAnimation.setAnimationListener(object : Animation.AnimationListener {override fun onAnimationStart(animation: Animation) {}override fun onAnimationEnd(animation: Animation) {view.clearAnimation()showS1(view)}override fun onAnimationRepeat(animation: Animation) {}})scaleAnimation.fillAfter = trueview.startAnimation(scaleAnimation)}

上下動(dòng)畫

    fun sx(){val view = findViewById<TextView>(R.id.tv_vip1)val upAnim = ObjectAnimator.ofFloat(view, "translationY", 0F, -50F, 0F)upAnim.duration = 2000upAnim.interpolator = LinearInterpolator()upAnim.addListener(object :AnimatorListenerAdapter(){override fun onAnimationEnd(animation: Animator?) {super.onAnimationEnd(animation)//動(dòng)畫結(jié)束}})upAnim.repeatCount = ValueAnimator.INFINITE;//無(wú)限循環(huán)//啟動(dòng)upAnim.start()}

卡片傾斜動(dòng)畫

    /*** 傾斜動(dòng)畫 f- 傾斜角度，這里建議 30-50*/fun showQX(view: View, f: Float?) {val valueAnimator = ValueAnimator.ofFloat(0f, f!!)valueAnimator.addUpdateListener { animation ->val deltaY = animation.animatedValue as Floatview.rotationY = deltaY}valueAnimator.addListener(object : Animator.AnimatorListener {override fun onAnimationStart(animator: Animator) {}override fun onAnimationEnd(animator: Animator) {showHuiFu(view, f)}override fun onAnimationCancel(animator: Animator) {}override fun onAnimationRepeat(animator: Animator) {}})//默認(rèn)duration是300毫秒valueAnimator.duration = 300valueAnimator.start()}/*** 恢復(fù)傾斜動(dòng)畫 */fun showHuiFu(view: View, f: Float?) {val valueAnimator = ValueAnimator.ofFloat(f!!, 0f)valueAnimator.addUpdateListener { animation ->val deltaY = animation.animatedValue as Floatview.rotationY = deltaY}//默認(rèn)duration是300毫秒valueAnimator.duration = 300valueAnimator.start()}