破碎与无法重置的时间线

看到一条鱼,好玩,想学。

原文作者:Jics
次元通道

效果图

破碎与无法重置的时间线_第1张图片
大鱼

逻辑看了一遍,不是很懂,直接撸代码

学习思路

  • 熟悉绘制方法
  • 坐标计算的思路
  • 怎么让鱼动起来的

继承Drawable,重载了四个方法

  • draw(@NonNull Canvas canvas):和自定义View中的onDraw()一样绘制
  • setAlpha(@IntRange(from = 0, to = 255) int alpha):设置Drawable的透明度,一般情况下将此alpha值设置给Paint
  • setColorFilter(@Nullable ColorFilter colorFilter):设置颜色滤镜同上
  • getOpacity():获取绘制模式

固定宽高大小

    @Override
    public int getIntrinsicHeight() {
        return (int) (8.38f * HEAD_RADIUS);
    }

    @Override
    public int getIntrinsicWidth() {
        return (int) (8.38f * HEAD_RADIUS);
    }

以鱼脑袋的半径为基础计算宽高,使小鱼能够360°旋转。

画一条大鱼draw(@NonNull Canvas canvas)

    @Override
    public void draw(@NonNull Canvas canvas) {
        //生成一个半透明图层,否则与背景白色形成干扰,尺寸必须与view的大小一致否则鱼显示不全
        //类似与PS的新建一个图层,在这个新建的图层上设置透明度,画布大小,alpha通道,保存全部属性
        canvas.saveLayerAlpha(0, 0, canvas.getWidth(), canvas.getHeight(), 240, Canvas.ALL_SAVE_FLAG);
        makeBody(canvas, HEAD_RADIUS);//绘制鱼身体
        canvas.restore();//去除当年保存的画布属性
        mPath.reset();//干掉自己之前path设置的东西
        mPaint.setColor(Color.argb(OTHER_ALPHA, 244, 92, 71));//重新设置pathColor
    }

makeBody部分涉及到坐标计算,摆动角度,和绘制等等,因为不具备通用性,一会一下就可以了。

动画,让鱼摇摆起来

        finsAnimator = ObjectAnimator.ofFloat(this, "finsAngle", 0f, 1f, 0f);//自己查找setFinsAngle方法
        finsAnimator.setRepeatMode(ValueAnimator.REVERSE);//播放模式,两种:reverse表示倒序回放,restart表示从头播放
        finsAnimator.setRepeatCount(new Random().nextInt(3));//设置动画循环次数,设置了随机的数量[0,3);

        //引擎部分
        ValueAnimator valueAnimator = ValueAnimator.ofInt(0, 540 * 100);//周期数值
        valueAnimator.setDuration(180 * 1000);//时间
        valueAnimator.setInterpolator(new LinearInterpolator());//均匀的插值器,让动画平滑执行
        valueAnimator.setRepeatCount(ValueAnimator.INFINITE);//循环
        valueAnimator.setRepeatMode(ValueAnimator.REVERSE);//正序
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {//监听
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                currentValue = (int) (animation.getAnimatedValue());
                invalidateSelf();//刷新自己
            }
        });
        valueAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationRepeat(Animator animation) {
                super.onAnimationRepeat(animation);
                finsAnimator.start();
            }
        });
        valueAnimator.start();

效果图,录制的比较渣,实际效果挺好看的,textview加点文字看一下绘制模式。

破碎与无法重置的时间线_第2张图片
你倒是动啊

OVER 男人致死是少年.


破碎与无法重置的时间线_第3张图片
既不回头,何必不忘

你可能感兴趣的:(破碎与无法重置的时间线)