Android 贝塞尔曲线实战之网易云音乐鲸云特效

简介: 作者:哈哈将 -个推 Android 高级开发工程师 前言 APP开发市场已经告别“野蛮生长”时代,人们不再满足于APP外形创新,而将目光转向全方面的用户体验上。在这过程中,动效化作为移动互联网产品的新趋势,如何实现酷炫丝滑的动画效果已然成为开发者们的新课题。

作者:哈哈将 -个推 Android 高级开发工程师

前言

APP开发市场已经告别“野蛮生长”时代,人们不再满足于APP外形创新,而将目光转向全方面的用户体验上。在这过程中,动效化作为移动互联网产品的新趋势,如何实现酷炫丝滑的动画效果已然成为开发者们的新课题。实现方式其实很简单。本文将为你剖析理论基础以及具体应用。咱们日常使用的 APP 的时候,出现的很多酷炫动画k可能都是有着贝塞尔曲线的身影。看完这篇文章,你的App也可以达到酷炫吊炸天的动画效果。

先看两个例子:

  1. 手机 QQ 未读消息红点拖拽效果。

  1. 小说阅读 APP 的翻页效果。

简介

在开始实战之前,我们还是先了解下理论基础。动画的终极武器就是贝塞尔曲线了。它是一条光滑的曲线,依据四个位置任意的点坐标绘制而成。1962年,法国工程师皮埃尔·贝塞尔(Pierre Bézier)率先研究出这种矢量绘制曲线的方法并给出了详细的计算公式,应用于汽车的主体设计。因此,人们将按照此种公式绘制的曲线命名为贝塞尔曲线。

核心思想

贝塞尔曲线是计算机图形学中运用得最多的参数曲线之一。它通过控制曲线上的四个点(起始点、终止点以及两个相互分离的中间点)来创造、编辑图形。其中起重要作用的是位于曲线中央的控制线。这条线是虚拟的,中间与贝塞尔曲线交叉,两端是控制端点。移动两端的端点时贝塞尔曲线可以改变曲线的曲率(弯曲的程度);移动中间点(也就是移动虚拟的控制线)时,贝塞尔曲线在起始点和终止点锁定的情况下做均匀移动。注意:贝塞尔曲线上的所有控制点、节点均可编辑。

原理

这里面有个通用公式,这个公式已经有前辈帮我们总结好了。

其中 P0 为起点,Pn 为中点,Pi 为控制点。

一阶贝塞尔曲线

一阶这个比较简单,因为没有在网上找到可以直接输入数学公式的工具,就手工推导了下。

最后的公式为 B(t)=(1-t)Po+tP1,t->[0,1]

二阶贝塞尔曲线

先看动画效果。

关注红线部分,这条线就是我们单位时间内运行的贝塞尔曲线效果图。这条红线实际上是由无数个点组成,随着 t 的不断变化,红线的转换过程非常的顺滑。


最后得到的公式如下:

贝塞尔曲线的绘制,无论多少阶(一阶除外),均需要逐级降阶,最终降至一阶。在 “二阶贝塞尔曲线解析” 这段文字中,从 第一步 到 第二步 的过程就是在降阶。贝塞尔曲线最终的路径是由 一阶基线 上游走的红色小点形成的。

三阶贝塞尔曲线

有了二阶的推导过程,三阶的推导就容易多啦。由于篇幅限制,推导过程这里不再展开,大家有兴趣的话可以自行推导下。


最后的红色曲线是由蓝色一阶曲线获得的,而蓝色一阶曲线又是由绿色一阶曲线获得,最后的绿色一阶曲线则是最外的 P0,P1,P2,P3构成的。动画效果为:

四阶贝塞尔曲线

五阶贝塞尔曲线

结论 我们发现原来贝塞尔曲线上的点与高数中二项式展开一样,对于每个线段上的点经过控制点进行切面操作,而连续的两点之间是无限接近的,所以在绘制的过程中会出现非常丝滑地过度。

贝塞尔曲线在 Android 上的使用

在Android 中使用贝塞尔曲线比较简单,Android 已经内置了贝塞尔曲线的 API,开发者可以直接予以调用。主要有两个 API 。

quadTo

Path path = new Path(); path.moveTo(startX, startY);
path.quadTo(eventX, eventY, endX, endY);
canvas.drawPath(path, paint);

其中 (startX,startY) 为起点,(endX,endY)为终点,而 (eventX,eventY)即为控制点了。

cubicTo

Path path = new Path();
path.moveTo(startX, startY);
path.cubicTo(leftX, leftY, rightX, rightY, endX, endY);
canvas.drawPath(path, paint);

调用此方法即可画出一条三阶贝塞尔曲线。(startX,startY)为起点,(endX,endY)为终点,而(leftX,leftY)与(rightX,rightY) 为两个控制点了。

多阶贝塞尔曲线: Android 系统最高只能画出三阶的贝塞尔曲线,那么想画出更高阶的怎么办呢?其实也很简单。如果真的需要使用高阶的曲线,可以进行人工降阶,降阶到 3 级即可。

实战

终于到实战环节了,该环节共有两个demo。一个是贝塞尔曲线拟圆效果,另一个是仿网易云音乐里面的鲸云效果。

效果实现1:以贝塞尔曲线画圆为例

前文总结了贝塞尔曲线的通用公式。在网上浏览资料的过程中我们发现有这么一个公式:(4/3)tan(π/(2n)),其意义是由n段三阶贝塞尔曲线拟合圆形时,曲线端点到该端点最近的控制点的最佳距离是(4/3)tan(π/(2n))。大家感兴趣的话可以自行推导。推导过程并不复杂,因为贝塞尔曲线有个重要的性质,即曲线方程中t=0.5时的点一定落在圆弧上。只需要把坐标系带入到三阶方程式即可。


最后得知当 t=0.5,根据圆形方程式 X^2+Y^2=R^2 ,得到h=(4/3)(sqrt(2)-1) ≈ 0.552284749831 。有了上述的理论基础,再去画圆就非常的轻松,我们先在草稿纸中得到这么一个模型。

根据上图,这个圆是由 4 段三阶贝塞尔曲线构成的,分别是 P0->P3,P3->P6,P6->P9,P9->P11。三阶贝塞尔曲线的构图是 Android 内置的,我们直接调用API 即可,核心代码如下:

public HeartView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

    super(context, attrs, defStyleAttr);
    init(context)
}

@Override
protected void init(Context context) {
    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setColor(Color.RED);
    mPaint.setStyle(Paint.Style.FILL);

    mPath = new Path();
  //绘制 12 个点。
    mCurPointList = new ArrayList<>();
    mCurPointList.add(new PointF(0, dpToPx(-89)));
    mCurPointList.add(new PointF(dpToPx(50), dpToPx(-89)));
    mCurPointList.add(new PointF(dpToPx(90), dpToPx(-49)));
    mCurPointList.add(new PointF(dpToPx(90), 0));
    mCurPointList.add(new PointF(dpToPx(90), dpToPx(50)));
    mCurPointList.add(new PointF(dpToPx(50), dpToPx(90)));
    mCurPointList.add(new PointF(0, dpToPx(90)));
    mCurPointList.add(new PointF(dpToPx(-49), dpToPx(90)));
    mCurPointList.add(new PointF(dpToPx(-89), dpToPx(50)));
    mCurPointList.add(new PointF(dpToPx(-89), 0));
    mCurPointList.add(new PointF(dpToPx(-89), dpToPx(-49)));
    mCurPointList.add(new PointF(dpToPx(-49), dpToPx(-89)));
}

@Override
protected void onDraw(Canvas canvas) {
    drawCoordinate(canvas);

    canvas.translate(mWidth / 2, mHeight / 2);

    mPath.reset();
    for (int i = 0; i < 4; i++) {
        if (i == 0) {
            mPath.moveTo(mCurPointList.get(i * 3).x, mCurPointList.get(i * 3).y);
        } else {
            mPath.lineTo(mCurPointList.get(i * 3).x, mCurPointList.get(i * 3).y);
        }

        int endPointIndex;
        if (i == 3) {
            endPointIndex = 0;
        } else {
            endPointIndex = i * 3 + 3;
        }

        mPath.cubicTo(mCurPointList.get(i * 3 + 1).x, mCurPointList.get(i * 3 + 1).y,
                mCurPointList.get(i * 3 + 2).x, mCurPointList.get(i * 3 + 2).y,
                mCurPointList.get(endPointIndex).x, mCurPointList.get(endPointIndex).y);
    }

    canvas.drawPath(mPath, mPaint);

}

}

成果展示

效果实现2:以网易云音乐鲸云效果为例

转换成 GIF,图片可能会有点失真,但并不妨碍具体实现思路。根据这个 GIF,我们发现有三点功能需要去完成:

1.背景色与歌曲图片相搭配,随图片的变化而变化;

2.歌曲中间图片是一张圆形图片并且可以自动旋转;

3.图形外圈有动感 3D环绕效果。

第一点实现比较简单。

第二点也不难。我们可以把一张图片裁剪成圆形,也可以使用 GitHub 上现有的开源库,再加上一个属性动画代码。

public void handleRotate(){
    ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(ivShowPic, "rotation", 0f, 360f);
    objectAnimator.setDuration(20 * 1000);        
    objectAnimator.setRepeatMode(ValueAnimator.RESTART);        
    objectAnimator.setInterpolator(new LinearInterpolator());        
    objectAnimator.setRepeatCount(-1);        
    objectAnimator.start();
}

看下动感3D环绕效果即转圈圈。

第三点 如何做跳动旋律特效?!!先不考虑前面两点需求,我们逐步分析下跳动旋律特效。动态图在文章开始部分已经看到了,我们建议先从静态图着手。

我们猜测可能的实现思路(不代表官方实现思路):该动效外层一圈有 4 条线段在不规则地跳动,每条线的背后是一个圆,每个圆由 4 条贝塞尔曲线组成。

第一步 先画个圆。我们只需要把画笔的属性设置成如下属性,即可画出一个空心圆。

mPaint.setStyle(Paint.Style.STROKE);

为达到更顺滑的环绕效果,我们需要不断调试各条贝塞尔曲线的对应的两个控制点。具体参数可根据业务场景来定。文中demo仅作参考。

第二步 上文我们分析过这个圆其实是由贝塞尔曲线组成的拟圆。在Android系统中是以每秒60帧为满帧的,那么只要将1秒÷60帧,就能得出16毫秒(ms)/帧是满帧的界限,即每帧快于16ms则为流畅。所以我们这边的刷新频率设定为每 80 毫秒刷新一次:

public void onPlay(View view){

    scheduledExecutorService = Executors.newScheduledThreadPool(1);
    scheduledExecutorService.scheduleAtFixedRate(new Runnable() {
        @Override
        public void run() {
            diyBezierView.post(new Runnable() {
                @Override
                public void run() {
                    diyBezierView.play();
                }
            });
        }
    },0,80, TimeUnit.MILLISECONDS);

得到的效果如下:


第三步 雏形已经完成,后续我们的做法是再往上添加 2 个圆,看下 3 个圆是怎么样的效果。


第四步 最后一步当然是把前面两点合在一起啦,合一起后就可以看下最终效果了:

实际效果与预期效果会存在一定的差异,主要原因在于函数坐标以及画笔的一些属性问题。以上就是具体的实现思路,供大家参考。

总结

酷炫动画的实现过程并没有我们想象的那么复杂。其实,很多复杂特效都是由不同的动画组合而成的,而丝滑般的动态效果则离不开贝塞尔曲线的应用。希望这篇文章可以帮助到想要做出酷炫丝滑的动态效果的你。

如何获取实战 Demo

https://github.com/LiuLei0571/jingyun_breizer
或者也可以关注【个推技术学院】微信公众号

目录
相关文章
|
2月前
|
安全 Android开发 Kotlin
Android经典实战之SurfaceView原理和实践
本文介绍了 `SurfaceView` 这一强大的 UI 组件,尤其适合高性能绘制任务,如视频播放和游戏。文章详细讲解了 `SurfaceView` 的原理、与 `Surface` 类的关系及其实现示例,并强调了使用时需注意的线程安全、生命周期管理和性能优化等问题。
144 8
|
16天前
|
缓存 前端开发 Android开发
Android实战之如何截取Activity或者Fragment的内容?
本文首发于公众号“AntDream”,介绍了如何在Android中截取Activity或Fragment的屏幕内容并保存为图片。包括截取整个Activity、特定控件或区域的方法,以及处理包含RecyclerView的复杂情况。
15 3
|
2月前
|
Android开发 开发者 索引
Android实战经验之如何使用DiffUtil提升RecyclerView的刷新性能
本文介绍如何使用 `DiffUtil` 实现 `RecyclerView` 数据集的高效更新,避免不必要的全局刷新,尤其适用于处理大量数据场景。通过定义 `DiffUtil.Callback`、计算差异并应用到适配器,可以显著提升性能。同时,文章还列举了常见错误及原因,帮助开发者避免陷阱。
132 9
|
25天前
|
Android开发
Android实战之如何快速实现自动轮播图
本文介绍了在 Android 中使用 `ViewPager2` 和自定义适配器实现轮播图的方法,包括添加依赖、布局配置、创建适配器及实现自动轮播等步骤。
19 0
|
2月前
|
开发工具 Android开发 git
Android实战之组件化中如何进行版本控制和依赖管理
本文介绍了 Git Submodules 的功能及其在组件化开发中的应用。Submodules 允许将一个 Git 仓库作为另一个仓库的子目录,有助于保持模块独立、代码重用和版本控制。虽然存在一些缺点,如增加复杂性和初始化时间,但通过最佳实践可以有效利用其优势。
31 3
|
26天前
|
Android开发
Android开发显示头部Bar的需求解决方案--Android应用实战
Android开发显示头部Bar的需求解决方案--Android应用实战
18 0
|
2月前
|
Java Android开发 UED
🧠Android多线程与异步编程实战!告别卡顿,让应用响应如丝般顺滑!🧵
在Android开发中,为应对复杂应用场景和繁重计算任务,多线程与异步编程成为保证UI流畅性的关键。本文将介绍Android中的多线程基础,包括Thread、Handler、Looper、AsyncTask及ExecutorService等,并通过示例代码展示其实用性。AsyncTask适用于简单后台操作,而ExecutorService则能更好地管理复杂并发任务。合理运用这些技术,可显著提升应用性能和用户体验,避免内存泄漏和线程安全问题,确保UI更新顺畅。
80 5
|
2月前
|
Java Android开发 C++
🚀Android NDK开发实战!Java与C++混合编程,打造极致性能体验!📊
在Android应用开发中,追求卓越性能是不变的主题。本文介绍如何利用Android NDK(Native Development Kit)结合Java与C++进行混合编程,提升应用性能。从环境搭建到JNI接口设计,再到实战示例,全面展示NDK的优势与应用技巧,助你打造高性能应用。通过具体案例,如计算斐波那契数列,详细讲解Java与C++的协作流程,帮助开发者掌握NDK开发精髓,实现高效计算与硬件交互。
108 1
|
2月前
|
编解码 前端开发 Android开发
Android经典实战之TextureView原理和高级用法
本文介绍了 `TextureView` 的原理和特点,包括其硬件加速渲染的优势及与其他视图叠加使用的灵活性,并提供了视频播放和自定义绘制的示例代码。通过合理管理生命周期和资源,`TextureView` 可实现高效流畅的图形和视频渲染。
197 12
|
2月前
|
Android开发 容器
Android经典实战之如何获取View和ViewGroup的中心点
本文介绍了在Android中如何获取`View`和`ViewGroup`的中心点坐标,包括计算相对坐标和屏幕上的绝对坐标,并提供了示例代码。特别注意在视图未完成测量时可能出现的宽高为0的问题及解决方案。
44 7