Android动画——Bezier曲线

1. 了解Bezier曲线

如何表示一条曲线，能够精确地控制曲线的路径，一直以来是一个很困难的问题。Bezier曲线就是利用数学公式，能够精确描述一条我们想要的曲线。主要是由起始点、终止点和控制点三个部分组成，其中控制点是控制曲线的关键。

接下来看一下具体的实现：

  • 一阶Bezier曲线


    一阶动画.gif

    一阶Bezier曲线，是两个点的连线，是一条直线。

  • 二阶Bezier曲线


    二阶动画.gif

    其中的p0和p2分别是起始点和终止点，p1即是控制点。在三个点形成的两条线段上，选取各自的起始位置然后向各自的终点位置移动，并且将两个点连接成一条辅助线，在这条辅助线上同样有一个点从起始位置移动到重点位置，这个点与p0点的连线就是一条二阶Bezier曲线。

  • 三阶Bezier曲线


    三阶动画.gif

    可以看出与二阶Bezier曲线类似，只不过是控制点变成了2个，形成的三条线段构成了两条辅助线，在这两条辅助线上又构造了一条辅助线，并且其运动的点与p0的连线构成一条三阶Bezier曲线。

在Android中，提供了二阶和三阶的实现api，对于其他多阶Bezier曲线通过二阶和三阶的拼接也能达到同样地效果。

2. Bezier曲线Demo

接下来通过两个Demo来简单认识一下Bezier曲线的实现。

2.1 二阶Bezier曲线

首先创建SecondBezierActivity及其布局，然后创建一个自定义的SecondBezierView：

public class SecondBezierActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second_bezier);
    }
}

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.blue.animationart.SecondBezierActivity">

    <com.blue.animationart.view.SecondBezierView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.constraint.ConstraintLayout>

接下来，我们着重看一下SecondBezierView.java这个自定义view的实现。
先创建一系列坐标点：

    private float mStartPointX;
    private float mStartPointY;
    private float mEndPointX;
    private float mEndPointY;
    private float mFlagPointX;
    private float mFlagPointY;

在onSizeChanged方法里对这些坐标点进行赋值：

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        // 起始点横坐标是屏幕宽度的四分之一处
        mStartPointX = w / 4;
       // 起始点纵坐标是屏幕高度的一半再减200
        mStartPointY = h / 2 - 200;
        mEndPointX = w * 3 / 4;
        mEndPointY = h / 2 - 200;
        mFlagPointX = w / 2;
        mFlagPointY = h - 400;
    }

在onDraw方法里对曲线进行绘制，在绘制之前需要创建一个Path路径描述类的实例和对应的Paint画笔实例：

    private Path mPath;
    // 曲线的画笔
    private Paint mPaintBezier;
    // 控制点的画笔
    private Paint mPaintFlag;
... ...
    public SecondBezierView(Context context, AttributeSet attrs) {
        super(context, attrs);
       // 消除锯齿
        mPaintBezier = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintBezier.setStrokeWidth(8);
        mPaintBezier.setStyle(Paint.Style.STROKE);

        mPaintFlag = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintFlag.setStrokeWidth(3);
        mPaintFlag.setStyle(Paint.Style.STROKE);
    }
... ...
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        ... ...
        mPath = new Path();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 让Path恢复，养成良好的习惯
        mPath.reset();
        // 将Path移动到初始位置点
        mPath.moveTo(mStartPointX, mStartPointY);
        // quadTo即二阶Bezier曲线的Android API方法，前两个参数是控制点坐标，后两个参数是终止点坐标
        mPath.quadTo(mFlagPointX, mFlagPointY, mEndPointX, mEndPointY);
       // 下面是绘制一些辅助的点和线段
        canvas.drawPoint(mStartPointX, mStartPointY, mPaintFlag);
        canvas.drawPoint(mEndPointX, mEndPointY, mPaintFlag);
        canvas.drawPoint(mFlagPointX, mFlagPointY, mPaintFlag);
        canvas.drawLine(mStartPointX, mStartPointY, mFlagPointX, mFlagPointY, mPaintFlag);
        canvas.drawLine(mEndPointX, mEndPointY, mFlagPointX, mFlagPointY, mPaintFlag);
        // 绘制曲线
        canvas.drawPath(mPath, mPaintBezier);
    }
二阶Demo.png

接下来对其进行拓展，在手机屏幕上触摸会改变控制点的坐标，以达到动态改变二阶Bezier曲线的目的。实现起来很简单，只需要实现onTouchEvent，获取MotionEvent.ACTION_MOVE，把当前的坐标点赋值给控制点，最后刷新即可：

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_MOVE:
                mFlagPointX = event.getX();
                mFlagPointY = event.getY();
                invalidate();
                break;
        }
        return true;
    }
二阶动态动画.gif

2.2 三阶Bezier曲线

与二阶Bezier曲线的原理类似，还是先创建所承载的activity和自定义的view：

public class ThridBezierActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_thrid_bezier);
    }
}

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.blue.animationart.ThridBezierActivity">

    <com.blue.animationart.view.ThridBezierView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.constraint.ConstraintLayout>

接下来也是着重看一下自定义的view实现。

定义变量，初始化画笔实例：

    private float mStartPointX;
    private float mStartPointY;
    private float mEndPointX;
    private float mEndPointY;

    private float mFlagPointOneX;
    private float mFlagPointOneY;
    private float mFlagPointTwoX;
    private float mFlagPointTwoY;

    private Path mPath;
    private Paint mPaintBezier;
    private Paint mPaintFlag;

    public ThridBezierView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaintBezier = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintBezier.setStrokeWidth(8);
        mPaintBezier.setStyle(Paint.Style.STROKE);

        mPaintFlag = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintFlag.setStrokeWidth(3);
        mPaintFlag.setStyle(Paint.Style.STROKE);
    }

在onSizeChanged方法中对坐标点进行赋值：

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mStartPointX = w / 4 - 100;
        mStartPointY = h / 2 - 200;
        mEndPointX = w * 3 / 4 + 100;
        mEndPointY = h / 2 - 200;

        mFlagPointOneX = w / 2 - 200;
        mFlagPointOneY = h / 2 + 200;

        mFlagPointTwoX = w / 2 + 200;
        mFlagPointTwoY = h / 2 + 100;

        mPath = new Path();
    }

在onDraw方法对曲线和坐标点等进行绘制：

        mPath.reset();
        mPath.moveTo(mStartPointX, mStartPointY);
        // 三阶Bezier曲线的API是cubicTo，同样地前四个参数对应两个控制点的坐标，后两个参数对应终止点坐标
        mPath.cubicTo(mFlagPointOneX, mFlagPointOneY, mFlagPointTwoX, mFlagPointTwoY, mEndPointX, mEndPointY);

        canvas.drawPoint(mStartPointX, mStartPointY, mPaintFlag);
        canvas.drawPoint(mEndPointX, mEndPointY, mPaintFlag);
        canvas.drawPoint(mFlagPointOneX, mFlagPointOneY, mPaintFlag);
        canvas.drawLine(mStartPointX, mStartPointY, mFlagPointOneX, mFlagPointOneY, mPaintFlag);
        canvas.drawLine(mEndPointX, mEndPointY, mFlagPointTwoX, mFlagPointTwoY, mPaintFlag);
        canvas.drawLine(mFlagPointOneX, mFlagPointOneY, mFlagPointTwoX, mFlagPointTwoY, mPaintFlag);
        canvas.drawPath(mPath, mPaintBezier);
三阶Bezier
  • 总结
  1. Android只提供二阶和三阶的实现，多阶可以通过拼接方式来实现；
  2. 在自定义view中，先赋值坐标点，然后初始化Paint对象设置样式，最后在onDraw方法中进行绘制；
  3. 二阶对应方法quadTo方法，三阶对应cubicTo方法。

3. Bezier曲线实践

3.1 路径变换

之前的文章提到过，VectorDrawable在L版本以下是不支持路径变换动画的，我们可以通过Bezier曲线来实现L版本以下的路径变换。

path.gif

  • 分析
    能够看出，是利用三阶Bezier曲线所实现，通过属性动画控制两个控制点的坐标向下运动，从而带动曲线跟着运动，进而实现了路径的变换动画。

  • 实现
    创建对应的activity和自定义的view，与前面的demo的方式相同，在此不多做介绍。

下面来实现这个自定义view。

首先还是创建坐标点和Paint画笔的变量：

    private float mStartPointX;
    private float mStartPointY;

    private float mEndPointX;
    private float mEndPointY;

    private float mFlagPointOneX;
    private float mFlagPointOneY;
    private float mFlagPointTwoX;
    private float mFlagPointTwoY;

    private Path mPath;
    private Paint mPaintBezier;
    private Paint mPaintFlag;

然后设置画笔的样式：

    public PathMorphingView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaintBezier = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintBezier.setStrokeWidth(8);
        mPaintBezier.setStyle(Paint.Style.STROKE);

        mPaintFlag = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintFlag.setStrokeWidth(3);
        mPaintFlag.setStyle(Paint.Style.STROKE);
    }

接着在onSizeChanged给坐标点赋值，此处我们给控制点坐标初始赋值为起始点和终止点坐标，让曲线初始状态是直线：

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mStartPointX = w / 4;
        mStartPointY = h / 2 - 200;
        mEndPointX = w * 3 / 4;
        mEndPointY = h / 2 - 200;

        mFlagPointOneX = mStartPointX;
        mFlagPointOneY = mStartPointY;

        mFlagPointTwoX = mEndPointX;
        mFlagPointTwoY = mEndPointY;

        mPath = new Path();
    }

在onDraw方法中对曲线进行绘制：

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPath.reset();
        mPath.moveTo(mStartPointX, mStartPointY);
        mPath.cubicTo(mFlagPointOneX, mFlagPointOneY, mFlagPointTwoX, mFlagPointTwoY, mEndPointX, mEndPointY);

        canvas.drawPoint(mStartPointX, mStartPointY, mPaintFlag);
        canvas.drawPoint(mEndPointX, mEndPointY, mPaintFlag);
        canvas.drawPoint(mFlagPointOneX, mFlagPointOneY, mPaintFlag);
        canvas.drawLine(mStartPointX, mStartPointY, mFlagPointOneX, mFlagPointOneY, mPaintFlag);
        canvas.drawLine(mEndPointX, mEndPointY, mFlagPointTwoX, mFlagPointTwoY, mPaintFlag);
        canvas.drawLine(mFlagPointOneX, mFlagPointOneY, mFlagPointTwoX, mFlagPointTwoY, mPaintFlag);
        canvas.drawPath(mPath, mPaintBezier);
    }

接下来就是重要的属性动画的实现：

   private ValueAnimator mValueAnimator;
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
       ... ...
        // 属性动画数值增长的范围
        mValueAnimator = ValueAnimator.ofFloat(mStartPointY, h);
        // 弹性效果的插值器
        mValueAnimator.setInterpolator(new BounceInterpolator());
        mValueAnimator.setDuration(1000);
        // 监听属性动画所改变的值，并且将值设置给两个控制点
        mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                mFlagPointOneY = (float) valueAnimator.getAnimatedValue();
                mFlagPointTwoY = (float) valueAnimator.getAnimatedValue();
                invalidate();
            }
        });
        // 设置点击事件
        setOnClickListener(this);
    }

在点击事件中，播放动画：

    @Override
    public void onClick(View view) {
        mValueAnimator.start();
    }
  • 总结
  1. Bezier曲线的路径变化动画可以解决VectorDrawable不能向下兼容的问题；
  2. Bezier曲线的路径变化的实现原理就是通过属性动画来动态改变坐标点的值，进而带动改变曲线的路径。

3.2 波浪运动

波浪动画在手机清理软件和加载动画上运用很多，运用Bezier曲线的实现效果如下图：


wave.gif
  • 分析
    要实现动态地波浪效果，首先要知道怎么绘制一个静态的波浪曲线。

波浪

（desmos是一个绘制数学公式的工具。）

能够看到，两个二阶Bezier曲线就能够组成一个完整的波形曲线。将这个组装而成的波形通过循环波长个数进行绘制，就能达到一连串的波形曲线。而曲线的起始点、终止点和控制点的横坐标由属性动画操作向右移动，达到曲线移动的效果。但是要注意的是，需要在屏幕之外添加一个完整的波形，这样在整个波形移动的时候不会发生中断。

  • 实现
    下面来实现这个自定义view。

首先初始化相应的变量，并且确定需要绘制的波长个数：

    private Path mPath;
    private Paint mPaintBezier;
    private int mWaveCount;

    private int mWaveLength;
    private int mScreenHeight, mScreenWidth;
    // 波形绘制的纵坐标
    private int mCenterY;
    public WaveBezierView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaintBezier = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintBezier.setColor(Color.BLUE);
        mPaintBezier.setStrokeWidth(8);
        mPaintBezier.setStyle(Paint.Style.FILL_AND_STROKE);
        // 定义波长的长度
        mWaveLength = 800;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mPath = new Path();
        setOnClickListener(this);
        mScreenHeight = h;
        mScreenWidth = w;
        mCenterY = h / 2;
        // 屏幕的宽度除以波长长度是屏幕所容纳的个数，1.5是屏幕之外的波长个数
        mWaveCount = (int) Math.round(mScreenWidth / mWaveLength + 1.5);
    }

接下来是绘制波形：

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPath.reset();
        // 从屏幕外开始，所以需要初始位置在屏幕之外一个波长的距离
        mPath.moveTo(-mWaveLength, mCenterY);
        // 将之前计算而得的波长个数进行循环绘制
        for (int i = 0; i < mWaveCount; i++) {
            // 控制点对应着波峰和波谷，然后依次向后一个波长位置继续绘制
            mPath.quadTo(-mWaveLength * 3 / 4 + i * mWaveLength, mCenterY + 60, -mWaveLength / 2 + i * mWaveLength, mCenterY);
            mPath.quadTo(-mWaveLength / 4 + i * mWaveLength, mCenterY - 60, i * mWaveLength, mCenterY);
        }
        // 图形与屏幕下边缘封闭，然后对封闭图形填充颜色。
        mPath.lineTo(mScreenWidth, mScreenHeight);
        mPath.lineTo(0, mScreenHeight);
        mPath.close();
        canvas.drawPath(mPath, mPaintBezier);
    }

接下来对坐标点的横坐标进行偏移：

    private ValueAnimator mValueAnimator;
    // 偏移量
    private int moffset;
    ... ...
    @Override
    public void onClick(View view) {
        // 设置范围
        mValueAnimator = ValueAnimator.ofInt(0, mWaveLength);
        mValueAnimator.setDuration(1000);
        mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        // 线性插值器
        mValueAnimator.setInterpolator(new LinearInterpolator());
        mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                // 给偏移量进行赋值
                moffset = (int) valueAnimator.getAnimatedValue();
                invalidate();
            }
        });
        mValueAnimator.start();
    }

将偏移量moffset作用到整个波形曲线上，只需要修改quadTo方法即可：

    @Override
    protected void onDraw(Canvas canvas) {
        ... ...
        mPath.moveTo(-mWaveLength + moffset, mCenterY);
        for (int i = 0; i < mWaveCount; i++) {
            mPath.quadTo(-mWaveLength * 3 / 4 + i * mWaveLength + moffset, mCenterY + 60, -mWaveLength / 2 + i * mWaveLength + moffset, mCenterY);
            mPath.quadTo(-mWaveLength / 4 + i * mWaveLength + moffset, mCenterY - 60, i * mWaveLength + moffset, mCenterY);
        }
        ... ...
    }
  • 总结
  1. 运用Bezier曲线实现路径变化动画是不需要考虑兼容性问题的。
  2. 横坐标偏移的动画要考虑到屏幕之外也需要绘制。
  3. 绘制路径变化动画的一般流程：画出静态的整个图像，通过属性动画改变坐标点的坐标。

3.3 模拟物体运动轨迹

movepath.gif

模拟添加物品到购物车的运动轨迹动画。

  • 分析
    此动画分为两个部分，一个是Bezier曲线的绘制，一个是曲线上的点移动。在Android API中没有提供获取Bezier曲线上点的坐标值，需要通过一系列计算公式，计算出其坐标值：
二阶公式
三阶公式

通过使用估值器TypeEvaluator来计算动画运动的值，根据这个值来让点移动，从而达到Bezier曲线所规划的运动轨迹。

  • 实现

首先实现计算Bezier曲线坐标点的工具类：

public class BezierUtil {

    /**
     * B(t) = (1 - t)^2 * P0 + 2t * (1 - t) * P1 + t^2 * P2, t ∈ [0,1]
     *
     * @param t  曲线长度比例
     * @param p0 起始点
     * @param p1 控制点
     * @param p2 终止点
     * @return t对应的点
     */
    public static PointF CalculateBezierPointForQuadratic(float t, PointF p0, PointF p1, PointF p2) {
        PointF point = new PointF();
        float temp = 1 - t;
        point.x = temp * temp * p0.x + 2 * t * temp * p1.x + t * t * p2.x;
        point.y = temp * temp * p0.y + 2 * t * temp * p1.y + t * t * p2.y;
        return point;
    }

    /**
     * B(t) = P0 * (1-t)^3 + 3 * P1 * t * (1-t)^2 + 3 * P2 * t^2 * (1-t) + P3 * t^3, t ∈ [0,1]
     *
     * @param t  曲线长度比例
     * @param p0 起始点
     * @param p1 控制点1
     * @param p2 控制点2
     * @param p3 终止点
     * @return t对应的点
     */
    public static PointF CalculateBezierPointForCubic(float t, PointF p0, PointF p1, PointF p2, PointF p3) {
        PointF point = new PointF();
        float temp = 1 - t;
        point.x = p0.x * temp * temp * temp + 3 * p1.x * t * temp * temp + 3 * p2.x * t * t * temp + p3.x * t * t * t;
        point.y = p0.y * temp * temp * temp + 3 * p1.y * t * temp * temp + 3 * p2.y * t * t * temp + p3.y * t * t * t;
        return point;
    }
}

初始化相应变量，绘制Bezier曲线，绘制曲线上的移动点：

    private int mStartPointX, mStartPointY, mEndPointX, mEndPointY;
    private int mFlagPointX, mFlagPointY;
    private int mMovePaintX, mMovePaintY;
    private Path mPath;
    private Paint mPaintPath;
    private Paint mPaintCircle;
    public PathBezierView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

        mPath = new Path();
        mPaintPath = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintPath.setStyle(Paint.Style.STROKE);
        mPaintPath.setStrokeWidth(8);

        mPaintCircle = new Paint(Paint.ANTI_ALIAS_FLAG);

        mStartPointX = 100;
        mStartPointY = 100;
        mEndPointX = 600;
        mEndPointY = 600;
        mFlagPointX = 500;
        mFlagPointY = 0;
        mMovePaintX = mStartPointX;
        mMovePaintY = mStartPointY;
        setOnClickListener(this);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(mStartPointX, mStartPointY, 20, mPaintCircle);
        canvas.drawCircle(mEndPointX, mEndPointY, 20, mPaintCircle);
        canvas.drawCircle(mMovePaintX, mMovePaintY, 20, mPaintCircle);
        mPath.reset();
        mPath.moveTo(mStartPointX, mStartPointY);
        mPath.quadTo(mFlagPointX, mFlagPointY, mEndPointX, mEndPointY);
        canvas.drawPath(mPath, mPaintPath);
    }

创建估值器：

public class BezierEvaluator implements TypeEvaluator<PointF> {
    private PointF mFlagPoint;
    public BezierEvaluator(PointF flagPoint) {
        // 传入控制点的坐标
        mFlagPoint = flagPoint;
    }

    @Override
    public PointF evaluate(float v, PointF pointF, PointF t1) {
        // 参数v代表动画运行的比例，其正好对应CalculateBezierPointForQuadratic曲线长度比例的参数
        // return的值就是当前运动的坐标点对象
        return BezierUtil.CalculateBezierPointForQuadratic(v, pointF, mFlagPoint, t1);
    }
}

创建属性动画：

    @Override
    public void onClick(View view) {
        BezierEvaluator evaluator = new BezierEvaluator(new PointF(mFlagPointX, mFlagPointY));
        ValueAnimator animator = ValueAnimator.ofObject(evaluator, new PointF(mStartPointX, mStartPointY), new PointF(mEndPointX, mEndPointY));
        animator.setDuration(600);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                // 获取我们定义的BezierEvaluator 所计算的值
                PointF pointF = (PointF) valueAnimator.getAnimatedValue();
                mMovePaintX = (int) pointF.x;
                mMovePaintY = (int) pointF.y;
                invalidate();
            }
        });
        // 加速减速插值器
        animator.setInterpolator(new AccelerateDecelerateInterpolator());
        animator.start();
    }
  • 总结
    模拟运动轨迹动画的一般步骤：构建Bezier曲线，自定义估值器，在属性动画上获取曲线上运动的每个点坐标，将这些坐标设置给运动的点。
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,378评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,356评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,702评论 0赞 342
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,259评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,263评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,036评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,349评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,979评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,469评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,938评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,059评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,703评论 4赞 323
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,257评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,262评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,501评论 2赞 354
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,792评论 2赞 345

推荐阅读更多精彩内容

  • Bezier曲线在Android动画中的应用
    Android动画的开发中，为了达到更加酷炫的效果，常常需要自定义运动轨迹，或者绘制花式复杂的曲线，这正是Bezi...
    登高且赋阅读 11,297评论 5赞 26
  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,506评论 25赞 707
  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,024评论 4赞 62
  • 到底什么叫左派右派
    看新闻时，整天能听到诸如日本右翼份子又要篡改历史了、美国左派人士又看床破不顺眼了…… 这类新闻中“左右”这种方位词...
    d0fdb328d08b阅读 2,491评论 7赞 15
  • 你心疼钱，我心疼你
    昨天一个人开车7小时，从山东临沂到河南郑州，跨两省行驶700余公里。由于父亲身体出了点状况，身边需要人照顾，刚参加...
    就是来劲阅读 341评论 0赞 0