Android可滑动的分时图以及常用动画

先看一下效果：

自定义View

其中顶部是模仿的股票数据分时图，以前也写过详细的文章传送门，只不过不支持左右滑动，这款是在那个基础上的修改

在说一下分时图的思路吧：

1. 可以看作是一条条相连的直线首尾相接，通过不断给View数据，达到动态添加的效果
2. 左右滑动也没有想象中那么复杂，我们有所有的分时图数据集合，当屏幕显示不开时，我只选取最新的一段数据给View显示出来，当右滑时，我截取对应的的数据段让View显示，就可以达到滑动效果

其中滑动的核心代码如下：
mShowList 为需要显示的集合
mTimeList 为全部数据集合
通过 subList 截取需要的数据段，截取后实时去刷新当前View

    /*** 滑动监听* *///当前的X轴坐标，我要记录上次滑动的最后坐标，才能实时判断是否左右滑动private float startTouchX = 0f; //滑动的距离，通过他来截取对应的数据段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;//手指移动if (startTouchX > event.getX()){Log.e(TAG, "onTouchEvent: 123456789->向左滑动--" + 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->向右滑动---" + 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;}

下方三个动画(属性动画)也是我遇到过比较常见的

第一个是放大缩小，比如在送礼按钮上，和礼物图标上，更有冲击感
第二个是上下移动，比如某个按钮上的气泡
第三个是卡片点击左右两边时有一个缓冲效果
当然常见的还有渐变效果，比如占位图消失时，加一个渐变消失用户体验可能会更好

下面贴一下代码

可滑动分时图: TimeView

/*** 作者:zch* 时间:2023/10/10 15:08* 描述:自定义分时图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;//是否停止刷新，但是总数据一样往里面添加private boolean stopRe = false;//总数据private ArrayList<Integer> mTimeList = new ArrayList<>();//需要显示在屏幕上的数据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();//设置画笔颜色paint.setColor(paintColor == 0 ? Color.YELLOW : paintColor);//设置画板背景canvas.drawColor(canvasColor == 0 ? Color.GRAY : canvasColor);//设置画笔粗细paint.setStrokeWidth((float)3);//Y轴的起止都在折线图的四分之一处开始，因为数据的范围是折线图的二分之一//这样数据波动位置就处于折线图居中位置mStartY = mCanvasHeight / 4;//画线drawView(canvas);}/***注释：*绘画逻辑*/private void drawView(Canvas canvas){mStartX = 0;//如果有数据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;//首次的时候起始位置就等于终止位置if (i == 0){startX = stopX;startY = stopY;}//画线canvas.drawLine(startX,startY,stopX,stopY,paint);//是否画背景if (isShowBg){setDrawBg(startX,startY,stopX,stopY,canvas);}//下次画线的时候的起始位置等于上次画线位置的终止位置startX = stopX;startY = stopY;}}}/*** 滑动监听* *///当前的X轴坐标，我要记录上次滑动的最后坐标，才能实时判断是否左右滑动private float startTouchX = 0f;//滑动的距离，通过他来截取对应的数据段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;//手指移动if (startTouchX > event.getX()){Log.e(TAG, "onTouchEvent: 123456789->向左滑动--" + 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->向右滑动---" + 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){//设置画笔Paint paint = new Paint();//防锯齿paint.setAntiAlias(true);//设置颜色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);}/***注释：* 设置分数图数据，由外部传输*/public void setViewData(ArrayList<Integer> m) {this.mTimeList = m;//刷新界面 - 无需在UI线程，在工作线程即可被调用，invalidate()必须在UI线程if (!stopRe){mShowList.clear();//只取最后50个数据if (mTimeList.size() > 50){mShowList.addAll(mTimeList.subList(mTimeList.size()-50, mTimeList.size() - 1));}else {mShowList.addAll(mTimeList);}postInvalidate();}}/***注释：*设置分时图背景和画笔颜色* 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;}}

使用：
这里用定时来动态获取数据，其中 initData 为请求数据，这里用的模拟数据

    /*** 通过线程来动态设置View达到动画效果*/private val thread: Thread = object : Thread() {@RequiresApi(api = Build.VERSION_CODES.N)override fun run() {while (true) {try {initData()//如果数据终止X的值大于界面宽度停止线程或者其他操作/*if (mTimeList.size > 0 && mTimeList.get(mTimeList.size - 1).stopX > tvTime!!.measuredWidth) {//清除容器数据，重新添加startX = 0mTimeList.clear()//thread.stop(); //终止线程}*//**休息时间 */sleep(1000)} catch (e: InterruptedException) {e.printStackTrace()}}}}

    private val mTimeList: ArrayList<Int> = ArrayList()@RequiresApi(Build.VERSION_CODES.N)private fun initData() {//设置Y轴数据的终止位置，无需设置起始位置，因为每条线的起始位置就是上一条线的终点位置val ra = Random()val stopY: Int = ra.nextInt(40)//给分时图设置数据mTimeList.add(stopY)tvTime?.setViewData(mTimeList)}

缩放动画：
这里分两部分，先缩，监听缩结束后去放，如此反复

    //缩，将View传进来即可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)}

上下动画

    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)//动画结束}})upAnim.repeatCount = ValueAnimator.INFINITE;//无限循环//启动upAnim.start()}

卡片倾斜动画

    /*** 倾斜动画 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) {}})//默认duration是300毫秒valueAnimator.duration = 300valueAnimator.start()}/*** 恢复倾斜动画 */fun showHuiFu(view: View, f: Float?) {val valueAnimator = ValueAnimator.ofFloat(f!!, 0f)valueAnimator.addUpdateListener { animation ->val deltaY = animation.animatedValue as Floatview.rotationY = deltaY}//默认duration是300毫秒valueAnimator.duration = 300valueAnimator.start()}