概述

贝塞尔曲线于1962,由法国工程师皮埃尔·贝塞尔所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算法开发,以稳定数值的方法求出贝兹曲线。
在计算机图形学中贝赛尔曲线的运用也很广泛,Photoshop中的钢笔效果,Flash5的贝塞尔曲线工具,在软件GUI开发中一般也会提供对应的方法来实现贝赛尔曲线。

线性公式

给定点P0、P1,线性贝兹曲线只是一条两点之间的直线。这条线由下式给出:
B(t) = P0 + (P1 - P0) * t = (1 - t) * P0 + t * P1, t ∈ [0, 1]
且其等同于线性插值。

二次方公式

二次方贝兹曲线的路径由给定点P0、P1、P2的函数B(t)追踪:
B(t) = (1 - t)^2 * P0 + 2t * (1 - t) * P1 + t^2 * P2, t ∈ [0,1]
TrueType字型就运用了以贝兹样条组成的二次贝兹曲线。

百度百科 详细资料

Android上实现贝赛尔曲线

在Android实现贝赛尔曲线,要借助android.graphics.Path,其中绘制贝赛尔曲线的方法在Api v1就已经提供了,下面来认识一下吧。

初识Path类

1
2
3
4
5
Path.moveTo(float x, float y) // Path的初始点
Path.lineTo(float x, float y) // 线性公式的贝赛尔曲线, 其实就是直线
Path.quadTo(float x1, float y1, float x2, float y2) // 二次方公式的贝赛尔曲线
Path.cubicTo(float x1, float y1, float x2, float y2, float x3, float y3) // 三次方公式的贝赛尔曲线
...

这是上面是Java层调用的代码,最终调用的是Skia库的一系列方法,Skia是一个C++2D向量图形处理函数库,感兴趣的可以继续深入研究研究。

绘制贝赛尔曲线

BezierView

1
2
3
4
5
6
7
8
9
10
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas); mPath.moveTo(100, 100);
mPath.cubicTo(800, 100, 100, 800, 800, 800);
// 一共四个点,(100, 100)和(800, 800)分别为起点和终点,(800, 100)和(100, 800)为操作点 canvas.drawPath(mPath, mPaint);
}

实现一个BezierEvaluator

BezierEvaluator
实现一个三次方贝赛尔曲线Evaluator,已知公式为:
B(t) = P0 * (1-t)^3 + 3 * P1 * t * (1-t)^2 + 3 * P2 * t^2 * (1-t) + P3 * t^3 代码如下:

BezierEvaluator.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
public class BezierEvaluator implements TypeEvaluator<PointF> {

    private PointF points[];

    public BezierEvaluator(PointF... points) {
if (points.length != 4) {
throw new IllegalArgumentException("只演示三次方贝赛尔曲线");
}
this.points = points;
} @Override
public PointF evaluate(float fraction, PointF startValue, PointF endValue) {
// B(t) = P0 * (1-t)^3 + 3 * P1 * t * (1-t)^2 + 3 * P2 * t^2 * (1-t) + P3 * t^3 float t = fraction;
float one_t = 1.0f - t; PointF P0 = points[0];
PointF P1 = points[1];
PointF P2 = points[2];
PointF P3 = points[3]; float x = (float) (P0.x * Math.pow(one_t, 3) + 3 * P1.x * t * Math.pow(one_t, 2) + 3 * P2.x * Math.pow(t, 2) * one_t + P3.x * Math.pow(t, 3));
float y = (float) (P0.y * Math.pow(one_t, 3) + 3 * P1.y * t * Math.pow(one_t, 2) + 3 * P2.y * Math.pow(t, 2) * one_t + P3.y * Math.pow(t, 3)); PointF pointF = new PointF(x, y); return pointF;
} }

一种ViewPager指示器的实现

Morning Routine 中有个ViewPager的指示器效果,非常炫酷,类似于下图,是怎么实现的呢?其实也用到了贝塞尔曲线。

DropPagerIndicator

先绘制两个圆

1
2
canvas.drawCircle(leftCircleX, mHeight / 2, leftCircleRadius, mPaint);
canvas.drawCircle(rightCircleX, mHeight / 2, rightCircleRadius, mPaint);

再绘制两个圆中间的部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
private void drawModeBend(Canvas canvas) {
float middleOffset = (leftCircleX - rightCircleX) / (mPoints.get(1).x - mPoints.get(0).x) * (mHeight / 10); mPath.reset(); mPath.moveTo(rightCircleX, mHeight / 2); mPath.lineTo(rightCircleX, mHeight / 2 - rightCircleRadius); mPath.cubicTo(rightCircleX,
mHeight / 2 - rightCircleRadius, rightCircleX + (leftCircleX - rightCircleX) / 2.0F,
mHeight / 2 + middleOffset, leftCircleX,
mHeight / 2 - leftCircleRadius); mPath.lineTo(leftCircleX, mHeight / 2 + leftCircleRadius); mPath.cubicTo(leftCircleX,
mHeight / 2 + leftCircleRadius, rightCircleX + (leftCircleX - rightCircleX) / 2.0F,
mHeight / 2 - middleOffset, rightCircleX,
mHeight / 2 + rightCircleRadius); mPath.close();
canvas.drawPath(mPath, mPaint);
}

圆和中间颜色不同用来看看
换成一样的,看起来还不错

然后加上Property Animation即可,了解 Property Animation

博客Demo代码:https://github.com/gavinliu/BeautifulOfBezier

结语

贝赛尔曲线能非常方便的绘制光滑的曲线,加以运用可以实现很多复杂的效果,实现的时候多和设计师沟通,设计师使用的PS中的钢笔其实也就是贝赛尔曲线,了解下设计师是如何绘制的,自己用代码来实现思路就很明了。

Android - Animation 贝塞尔曲线之美的更多相关文章

  1. Android中贝塞尔曲线的绘制方法

    贝塞尔曲线,很多人可能不太了解,什么叫做贝塞尔曲线呢?这里先做一下简单介绍:贝塞尔曲线也可以叫做贝济埃曲线或者贝兹曲线,它由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋.一般的矢量图形软件常 ...

  2. OpenGL 实践之贝塞尔曲线绘制

    说到贝塞尔曲线,大家肯定都不陌生,网上有很多关于介绍和理解贝塞尔曲线的优秀文章和动态图. 以下两个是比较经典的动图了. 二阶贝塞尔曲线: 三阶贝塞尔曲线: 由于在工作中经常要和贝塞尔曲线打交道,所以简 ...

  3. Android 利用二次贝塞尔曲线模仿购物车加入物品抛物线动画

    Android 利用二次贝塞尔曲线模仿购物车加入物品抛物线动画 0.首先.先给出一张效果gif图. 1.贝塞尔曲线原理及相关公式參考:http://www.jianshu.com/p/c0d7ad79 ...

  4. Android仿苹果版QQ下拉刷新实现(二) ——贝塞尔曲线开发"鼻涕"下拉粘连效果

    前言 接着上一期Android仿苹果版QQ下拉刷新实现(一) ——打造简单平滑的通用下拉刷新控件 的博客开始,同样,在开始前我们先来看一下目标效果: 下面上一下本章需要实现的效果图: 大家看到这个效果 ...

  5. Android 贝塞尔曲线解析

    相信很多同学都知道"贝塞尔曲线"这个词,我们在很多地方都能经常看到.利用"贝塞尔曲线"可以做出很多好看的UI效果,本篇博客就让我们一起学习"贝塞尔曲线 ...

  6. 从Android动画到贝塞尔曲线

    基础知识: 动画通过连续播放一系列画面,给视觉造成连续变化的图画.很通俗的一种解释.也很好理解.那么我们先来一个案例看看. 动画案例:百度贴吧小熊奔跑 效果: topic.gif 代码: <?x ...

  7. android 利用Path.cubicTo 画 贝塞尔曲线

    Path.cubicTo void android.graphics.Path.cubicTo(float x1, float y1, float x2, float y2, float x3, fl ...

  8. Android 贝塞尔曲线 折线图

    1.贝塞尔曲线:http://baike.baidu.com/view/60154.htm,在这里理解什么是贝塞尔曲线 2.直接上图: 3.100多行代码就可以画出贝塞尔曲线,直接上代码 packag ...

  9. Android 自定义View高级特效,神奇的贝塞尔曲线

    效果图 效果图中我们实现了一个简单的随手指滑动的二阶贝塞尔曲线,还有一个复杂点的,穿越所有已知点的贝塞尔曲线.学会使用贝塞尔曲线后可以实现例如QQ红点滑动删除啦,360动态球啦,bulabulabul ...

随机推荐

  1. java学习之IO对象流

    //注意对象类要打标记实现Serializable接口 package com.gh; import java.io.FileInputStream; import java.io.FileNotFo ...

  2. 2014ACM/ICPC亚洲区鞍山赛区现场赛1009Osu!

    鞍山的签到题,求两点之间的距离除以时间的最大值.直接暴力过的. A - Osu! Time Limit:1000MS     Memory Limit:262144KB     64bit IO Fo ...

  3. 一组开源 HTML5 Apps

    一组用"画app吧"开发的 HTML5 Apps,默认使用FirefoxOS设备,其实它们都可以在像Android/IPhone/WindowsPhone8/BlackBerry/ ...

  4. 和S5933比较起来,开发PLX9054比较不幸,可能是第一次开发PCI的缘故吧。因为,很多PCI的例子都是对S5933,就连微软出版的《Programming the Microsoft Windows Driver Model》都提供了一个完整的S5933的例子。 在这篇有关DDK的开发论文里。

    和S5933比较起来,开发PLX9054比较不幸,可能是第一次开发PCI的缘故吧.因为,很多PCI的例子都是对S5933,就连微软出版的<Programming the Microsoft Wi ...

  5. (void)(&amp;x==&amp;y)

    #define max(x,y) ({ \ typeof(x) _x = (x);    \ typeof(y) _y = (y);    \ (void) (&_x == &_y); ...

  6. ZSTU OJ 3999 零基础学算法---邻接表

    题目:Click here 题意:我就喜欢中文题! 分析:这个题虽然是中文题,但是还是有一点费解的.其实就是给你一棵树,是用图的形式给你的,只知道a,b之间有一条边,并不知道谁是父,谁是子.思路就是先 ...

  7. c语言 ,回调函数[个人理解]

    回调函数:把需要调用的方法的指针pCallBackFuncX作为参数传递给一个函数UsrFunction,以便该UsrFunction函数在处理相似事件的时候可以灵活的使用不同的方法.   以在fla ...

  8. d3.js入门1:安装配置

    D3 是当前流行的数据可视化工具,通过本文能有对 D3 有一个初步认识. 1. D3 是什么 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名 ...

  9. USACO Healthy Holsteins DFS

    使用排列组合,遍历所有可能的情况C(1)+C(2)+C(3)……C(n)= 2^G种组合 数据规模不大,暴力过去最多也就是2^15 = 23768种情况 所以就暴力咯,不过还是Debug了一会 Sou ...

  10. qq邮箱是怎么做到同一个浏览器让多个不用用户同时打开的? --session的控制

    待解:..... 借鉴网址:http://www.zhihu.com/question/20235500 欢迎来讨论.....