Android 动画之插值器PathInterpolator

Android 的View动画、属性动画都可以设置动画插值器，以此来实现不同的动画效果。

这篇文章 Android View动画整理 有介绍各种插值器的效果，这一篇专访 PathInterpolator 。

参考官网 添加曲线动作 ，

PathInterpolator 基于 贝塞尔曲线 或 Path 对象。此插值器在一个 1x1 的正方形内指定一个动作曲线，定位点位于 (0,0) 和 (1,1)，而控制点则使用构造函数参数指定。

简单来说就是，通过控制点来构造出 (0,0) 到 (1,1) 之间的任意曲线，让动画按照构造出的曲线来执行。

PathInterpolator 和其他动画插值器的使用是一样的，PathInterpolator 的优势是可以创建任意曲线来实现不同的动画效果，劣势是比较难绘制出满意的曲线，毕竟涉及了数学公式。

贝塞尔曲线

贝塞尔曲线的相关说明：
贝塞尔曲线_百度百科
从零开始学图形学：10分钟看懂贝塞尔曲线
曲线篇: 贝塞尔曲线

贝塞尔曲线在线测试网站：
Bezier Curve Demos
cubic-bezier
贝塞尔曲线在线绘制🚀

PathInterpolator 的构造函数，

  • PathInterpolator(Path path) ：利用 Path 对象创建插值器。
  • PathInterpolator(float controlX, float controlY) ：传入一个控制点坐标（controlX，controlY），构造二维贝塞尔曲线插值器。
  • PathInterpolator(float controlX1, float controlY1, float controlX2, float controlY2) ：传入两个控制点坐标 （controlX1，controlY1 ）、（controlX2, controlY2），构造三维贝塞尔曲线插值器。
  • PathInterpolator(Context context, AttributeSet attrs) ：通过 AttributeSet 加载插值器。

1. PathInterpolator(Path path)

先看通过 PathInterpolator(Path path) 构建。

1.1 Path

构造函数，直接 new Path 创建即可。

	/*** Create an empty path*/public Path() {mNativePath = nInit();sRegistry.registerNativeAllocation(this, mNativePath);}

1.2 Path.moveTo

移动到指定坐标

/*** Set the beginning of the next contour to the point (x,y).** @param x The x-coordinate of the start of a new contour* @param y The y-coordinate of the start of a new contour*/public void moveTo(float x, float y) {nMoveTo(mNativePath, x, y);}

1.3 Path.lineTo(float x, float y)

从上一个点绘制一条线到给定的点 （x,y），显而易见，给的坐标决定了动画效果。

	/*** Add a line from the last point to the specified point (x,y).* If no moveTo() call has been made for this contour, the first point is* automatically set to (0,0).** @param x The x-coordinate of the end of a line* @param y The y-coordinate of the end of a line*/public void lineTo(float x, float y) {isSimplePath = false;nLineTo(mNativePath, x, y);}

走直线

看如下代码，X 轴 、Y 轴 都移动一段距离，X 轴 、Y 轴 都用 LinearInterpolator ，

ObjectAnimator animationX = ObjectAnimator.ofFloat(imageViewIcon, "translationX",imageViewIcon.getWidth() * 5);
animationX.setInterpolator(new LinearInterpolator());ObjectAnimator animationY = ObjectAnimator.ofFloat(imageViewIcon, "translationY",imageViewIcon.getWidth() * 5);
animationY.setInterpolator(new LinearInterpolator());AnimatorSet set = new AnimatorSet();
set.playTogether(animationX, animationY);
set.setDuration(5000).start();

动画效果， imageViewIcon 按照对角线移动。
在这里插入图片描述
动画轨迹是起点、终点之间的直线，Path.lineTo 画线正合适， 用 PathInterpolator 来实现同样的效果， Go ~

		Path path = new Path();path.moveTo(0f,0f);path.lineTo(0.25f,0.25f);path.lineTo(0.5f,0.5f);path.lineTo(0.75f,0.75f);path.lineTo(1f,1f);PathInterpolator pathInterpolator = new PathInterpolator(path);ObjectAnimator animationX = ObjectAnimator.ofFloat(imageViewIcon, "translationX",imageViewIcon.getWidth() * 5);animationX.setInterpolator(pathInterpolator);ObjectAnimator animationY = ObjectAnimator.ofFloat(imageViewIcon, "translationY",imageViewIcon.getWidth() * 5);animationY.setInterpolator(new LinearInterpolator());AnimatorSet set = new AnimatorSet();set.playTogether(animationX,animationY);set.setDuration(5000).start();

使用也简单，三大步：

  • 创建 Path ，选取了 5 个点（可以更多）来绘制 (0f,0f) 到 (1f,1f) 的曲线（效果是直线，直线 ∈ 曲线）。
  • 通过 Path 创建 PathInterpolator 。
  • 动画指定用创建的 pathInterpolator 。控制变量法，X 轴用新创建的 pathInterpolator ， Y 轴继续用 LinearInterpolator 。

效果，
在这里插入图片描述
肉眼看不出和 LinearInterpolator 的差别。

走折线

走折线就是走多条直接嘛，
例，

		Path path = new Path();path.moveTo(0,0);path.lineTo(322,0);//path.lineTo(322,322);path.lineTo(-322,322);path.lineTo(-322,-322);path.lineTo(322,-322);path.lineTo(322,0);path.lineTo(0,0);ObjectAnimator animationX = ObjectAnimator.ofFloat(imageViewRed, "translationX","translationY", path);animationX.setDuration(8000).start();

图
在这里插入图片描述

1.4 Path.arcTo(float left, float top, float right, float bottom, float startAngle,float sweepAngle, boolean forceMoveTo)

画弧，

通过前4个参数确定矩形，从而得到椭圆圆心，

startAngle 是起始位置相对于圆心的角度，sweepAngle 是相对于圆心需要旋转的角度，两者可以确定起始角度，

有圆心，有角度，弧形不就出来了。

	/*** Append the specified arc to the path as a new contour. If the start of* the path is different from the path's current last point, then an* automatic lineTo() is added to connect the current contour to the* start of the arc. However, if the path is empty, then we call moveTo()* with the first point of the arc.** @param startAngle  Starting angle (in degrees) where the arc begins* @param sweepAngle  Sweep angle (in degrees) measured clockwise, treated*                    mod 360.* @param forceMoveTo If true, always begin a new contour with the arc*/public void arcTo(float left, float top, float right, float bottom, float startAngle,float sweepAngle, boolean forceMoveTo) {isSimplePath = false;nArcTo(mNativePath, left, top, right, bottom, startAngle, sweepAngle, forceMoveTo);}

如下代码，走个半圆的动画，
（icon 宽度和黑色线的位置是计算好距离的）

Path path = new Path();
path.arcTo(-imageViewGreen.getWidth()*4, 0, imageViewGreen.getWidth()*4, imageViewGreen.getWidth()*8, 270f, 180f, true);
ObjectAnimator animator = ObjectAnimator.ofFloat(imageViewIcon, View.X, View.Y, path); // 注释1
animator.setDuration(5000);
animator.start();

看注释1 处，用的是 View.X, View.Y 参数，这个例子下和用 “translationX”, “translationY” 是一样的效果。

运行效果，
在这里插入图片描述

附图说明，
在这里插入图片描述

图解，
解释下 path.arcTo(-imageViewGreen.getWidth()*4, 0, imageViewGreen.getWidth()*4, imageViewGreen.getWidth()*8, 270f, 180f, true); 代码参数，

  • 点 A ：图片原始位置，也是动画开始位置。（注意：动画开始位置可以不是图片原始位置）
  • 绿色箭头 j3 ：动画轨迹，本例是半圆。
  • 点 B ：动画结束位置。
  • 黄色框左上角 P1 ：点 P1 由 点A 来确定，以动画开始位置为（0,0） ，它的坐标是 （-imageViewGreen.getWidth()*4, 0）。
  • 黄色框右下角 P2 ：点 P2 由 点A 来确定，以动画开始位置为（0,0） ，
    它的坐标是 （imageViewGreen.getWidth()*4, imageViewGreen.getWidth()*8）。
  • 蓝色线交汇点 O ：黄色框左上角点 P1 和黄色框右下角点 P2 确定了矩形（本例是正方向，正方形 ∈ 矩形），得到了最大内切红色椭圆（本例是正圆，正圆 ∈ 椭圆），确定了圆心点 O 。这个圆心是弧形的圆心，也就是动画旋转的中心。
  • 动画坐标系 ：以点 O 为 圆心得到了动画坐标系，点O 的右方向是 0° ，下方向是 90° 。
    按照 j1 旋转为正角度，顺时针旋转为正角度，逆时针旋转为负角度。
    startAngle 是 A 点对于圆心O来说需要转 270° ，本例就是 270f 。
    sweepAngle 是需要旋转的角度，按照 j1 旋转为正角度，本例是 180f ，即顺时针旋转 180° 。
    在这里插入图片描述
    很绕，捋一捋。如果错误，也请指正。

1.5 Path.arcTo(RectF oval, float startAngle, float sweepAngle)

arcTo 方法的重载，通过 android.graphics.RectF 画弧 。

RectF 的构造函数如下，也是通过给定的四个点来确定矩形，然后画弧。

	/*** Create a new rectangle with the specified coordinates. Note: no range* checking is performed, so the caller must ensure that left <= right and* top <= bottom.** @param left   The X coordinate of the left side of the rectangle* @param top    The Y coordinate of the top of the rectangle* @param right  The X coordinate of the right side of the rectangle* @param bottom The Y coordinate of the bottom of the rectangle*/public RectF(float left, float top, float right, float bottom) {this.left = left;this.top = top;this.right = right;this.bottom = bottom;}

示例，

Path path = new Path();
path.arcTo(new RectF(-imageViewGreen.getWidth() * 3,0,imageViewGreen.getWidth() * 3,imageViewGreen.getWidth() * 6),270,-359);
ObjectAnimator animator = ObjectAnimator.ofFloat(imageViewGreen, "translationX", "translationY", path);//注释 2
animator.setDuration(5000);
animator.start();

看注释2 处，用的是 “translationX”, “translationY” 参数，这个例子下和用 View.X, View.Y 是不一样的效果。

效果，绿球绕着红球逆时针旋转 359° ，
在这里插入图片描述

相关参数说明和 1.4 章节的一样。

最后一个参数 sweepAngle 有限制，

  • 传 -360 无动画效果，传 -450 实际上是旋转 -90 的效果。
  • 传 360 无动画效果，传 450 实际上是旋转 90 的效果。

就想要无限循环怎么办？na~ ： animator.setRepeatCount(ValueAnimator.INFINITE);

1.5 Path.quadTo

Path.quadTo ，绘制二阶贝塞尔曲线。起点是 (0,0)， 终点是(x2,y2)，控制点是(x1,y1) ，

/*** Add a quadratic bezier from the last point, approaching control point* (x1,y1), and ending at (x2,y2). If no moveTo() call has been made for* this contour, the first point is automatically set to (0,0).** @param x1 The x-coordinate of the control point on a quadratic curve* @param y1 The y-coordinate of the control point on a quadratic curve* @param x2 The x-coordinate of the end point on a quadratic curve* @param y2 The y-coordinate of the end point on a quadratic curve*/public void quadTo(float x1, float y1, float x2, float y2) {isSimplePath = false;nQuadTo(mNativePath, x1, y1, x2, y2);}

例

		Path path = new Path();path.moveTo(0,0);//二阶贝塞尔曲线path.quadTo(400,1300,imageViewGreen.getWidth()*5,imageViewGreen.getWidth()*5);ObjectAnimator animator = ObjectAnimator.ofFloat(imageViewIcon, View.X, View.Y, path);animator.setDuration(5000);animator.start();

图
在这里插入图片描述

1.6 Path.cubicTo

Path.cubicTo，绘制三阶阶贝塞尔曲线，起点是 (0,0)， 终点是(x3,y3)，控制点是(x1,y1) 和 (x2,y2) 。

	/*** Add a cubic bezier from the last point, approaching control points* (x1,y1) and (x2,y2), and ending at (x3,y3). If no moveTo() call has been* made for this contour, the first point is automatically set to (0,0).** @param x1 The x-coordinate of the 1st control point on a cubic curve* @param y1 The y-coordinate of the 1st control point on a cubic curve* @param x2 The x-coordinate of the 2nd control point on a cubic curve* @param y2 The y-coordinate of the 2nd control point on a cubic curve* @param x3 The x-coordinate of the end point on a cubic curve* @param y3 The y-coordinate of the end point on a cubic curve*/public void cubicTo(float x1, float y1, float x2, float y2,float x3, float y3) {isSimplePath = false;nCubicTo(mNativePath, x1, y1, x2, y2, x3, y3);}

例

		Path path = new Path();path.moveTo(0,0);path.rCubicTo(1500,100,700,1300,imageViewGreen.getWidth()*5,imageViewGreen.getWidth()*5);ObjectAnimator animator = ObjectAnimator.ofFloat(imageViewIcon, View.X, View.Y, path);animator.setDuration(5000);animator.start();

图
在这里插入图片描述

2. PathInterpolator(float controlX, float controlY)

绘制二阶贝塞尔曲线。起点是 (0,0)， 终点是(1,1)，控制点是(controlX, controlY) ，

	/*** Create an interpolator for a quadratic Bezier curve. The end points* <code>(0, 0)</code> and <code>(1, 1)</code> are assumed.** @param controlX The x coordinate of the quadratic Bezier control point.* @param controlY The y coordinate of the quadratic Bezier control point.*/public PathInterpolator(float controlX, float controlY) {initQuad(controlX, controlY);}// ...private void initQuad(float controlX, float controlY) {Path path = new Path();path.moveTo(0, 0);path.quadTo(controlX, controlY, 1f, 1f);initPath(path);}

例，

		PathInterpolator interpolator = new PathInterpolator(0.1f,0.9f);ObjectAnimator animationX = ObjectAnimator.ofFloat(imageViewIcon, "translationX",imageViewIcon.getWidth() * 5);animationX.setInterpolator(interpolator);ObjectAnimator animationY = ObjectAnimator.ofFloat(imageViewIcon, "translationY",imageViewIcon.getWidth() * 5);animationY.setInterpolator(new LinearInterpolator());AnimatorSet set = new AnimatorSet();set.playTogether(animationX,animationY);set.setDuration(5000).start();

图
在这里插入图片描述

3. PathInterpolator(float controlX1, float controlY1, float controlX2, float controlY2)

绘制三阶阶贝塞尔曲线，起点是 (0,0)， 终点是(1, 1)，控制点是(controlX1,controlY1) 和 (controlX2,controlY2) 。

	/*** Create an interpolator for a cubic Bezier curve.  The end points* <code>(0, 0)</code> and <code>(1, 1)</code> are assumed.** @param controlX1 The x coordinate of the first control point of the cubic Bezier.* @param controlY1 The y coordinate of the first control point of the cubic Bezier.* @param controlX2 The x coordinate of the second control point of the cubic Bezier.* @param controlY2 The y coordinate of the second control point of the cubic Bezier.*/public PathInterpolator(float controlX1, float controlY1, float controlX2, float controlY2) {initCubic(controlX1, controlY1, controlX2, controlY2);}// ...private void initCubic(float x1, float y1, float x2, float y2) {Path path = new Path();path.moveTo(0, 0);path.cubicTo(x1, y1, x2, y2, 1f, 1f);initPath(path);}

例，

		PathInterpolator interpolator = new PathInterpolator(0, 1f ,1f,0);ObjectAnimator animationX = ObjectAnimator.ofFloat(imageViewIcon, "translationX",imageViewIcon.getWidth() * 5);animationX.setInterpolator(interpolator);ObjectAnimator animationY = ObjectAnimator.ofFloat(imageViewIcon, "translationY",imageViewIcon.getWidth() * 5);animationY.setInterpolator(new LinearInterpolator());AnimatorSet set = new AnimatorSet();set.playTogether(animationX,animationY);set.setDuration(5000).start();

图，
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/91832.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

百度文心一率先言向全社会开放 应用商店搜“文心一言”可直接下载

百度文心一率先言向全社会开放 应用商店搜“文心一言”可直接下载

8月31日&#xff0c;文心一言率先向全社会全面开放。广大用户可以在应用商店下载“文心一言APP”或登陆“文心一言官网”&#xff08;https://yiyan.baidu.com&#xff09; 体验。同时&#xff0c;企业用户可以直接登录百度智能云千帆大模型平台官网&#xff0c;调用文心一言能…
阅读更多...
ACL 访问控制 过滤数据 维护网络安全（第七课)

ACL 访问控制 过滤数据 维护网络安全（第七课)

一 ACL 简介 ACL是Access Control List&#xff08;访问控制列表&#xff09;的缩写&#xff0c;是一种用于控制文件、目录、网络设备等资源访问权限的方法。ACL可以对每个用户或用户组设置不同的访问权&#xff0c;即在访问控制清单中为每个用户或用户组指定允许或禁止访问该…
阅读更多...
2023年7月京东笔记本电脑行业品牌销售排行榜（京东数据平台）

2023年7月京东笔记本电脑行业品牌销售排行榜（京东数据平台）

随着智能手机、平板电脑等移动互联设备的普及&#xff0c;人们对于个人电脑的依赖减轻&#xff0c;加之电脑的更换率较低&#xff0c;因此当前PC端消费市场整体出现疲态&#xff0c;笔记本电脑的出货量不断下降&#xff0c;今年7月份也同样呈现这一趋势。 根据鲸参谋电商数据分…
阅读更多...
GraphQL渗透测试案例及防御办法

GraphQL渗透测试案例及防御办法

什么是GraphQL GraphQL 是一种 API 查询语言&#xff0c;旨在促进客户端和服务器之间的高效通信。它使用户能够准确指定他们在响应中所需的数据&#xff0c;从而有助于避免有时使用 REST API 看到的大型响应对象和多个调用。 GraphQL 服务定义了一个合约&#xff0c;客户端可…
阅读更多...
前端进阶之——模块化

前端进阶之——模块化

在做项目的时候越来越发现模块化的重要性&#xff0c;做好模块化开发不仅给后期的维护带来不少好处而且大大提升项目开发效率&#xff0c;接下来整理一下模块化相关知识吧。 模块化开发的优点 封装方法、提高代码的复用性、可维护性和可读性隔离作用域&#xff0c;避免污染全…
阅读更多...
一文解释python中的实例方法，类方法和静态方法作用和区别是啥？该如何使用

一文解释python中的实例方法，类方法和静态方法作用和区别是啥？该如何使用

我们都知道 &#xff0c;python类中有三种常见的方法 &#xff0c;分别是实例方法 &#xff0c;类方法和静态方法 。那么这几个方法到底有什么作用 &#xff1f; 它们之间有什么区别 &#xff1f;该如何使用 &#xff1f; 带着这些问题 &#xff0c;下面我们就来了解下这三种方…
阅读更多...
Java实现根据关键词搜索当当商品列表数据方法，当当API接口申请指南

Java实现根据关键词搜索当当商品列表数据方法，当当API接口申请指南

要通过当当网的API获取商品列表数据&#xff0c;您可以使用当当开放平台提供的接口来实现。以下是一种使用Java编程语言实现的示例&#xff0c;展示如何通过当当开放平台API获取商品列表&#xff1a; 首先&#xff0c;确保您已注册成为当当开放平台的开发者&#xff0c;并创建…
阅读更多...
Android之布局转圆角

Android之布局转圆角

Android之布局转圆角 文章目录 Android之布局转圆角说明一、效果图二、实现步骤1.自定义RoundRelativeLayout2.使用 总结 说明 很多需求比较无语&#xff0c;需要某个布局转圆角&#xff0c;像个显眼包一样&#xff0c;所以为了满足显眼包&#xff0c;必须整呐提示&#xff1a…
阅读更多...
uniapp 微信小程序webview 踩坑

uniapp 微信小程序webview 踩坑

uniapp 微信小程序的存在许多功能上的限制和约束&#xff0c;有些情况不得不去使用webview进行开发实现需求&#xff0c;比如 原生无法满足&#xff08;例如某团队维护SDK 只提供了WEB端jsSDK&#xff0c;且不维护小程序SDK&#xff09; H5可以同时适用多端&#xff08;适用范围…
阅读更多...
Java当中的object介绍以及相关方法介绍

Java当中的object介绍以及相关方法介绍

文章目录 前言 1. object介绍 1.1 简单介绍 1.2 object的相关方法 2. object相关方法的介绍 2.0 JAVA同步锁 synchronized(this)、synchronized(class)与synchronized(Object)的区别 2.1 Object之wait 2.1.1 另外两种wait方法 2.1.2 Object中notify&#xff0c;notify…
阅读更多...
python中的文件操作

python中的文件操作

我们平常对文件的基本操作&#xff0c;大概可以分为三个步骤&#xff08;简称文件操作三步走&#xff09;&#xff1a; ① 打开文件 ② 读写文件 ③ 关闭文件 【注意事项】 注意&#xff1a;可以只打开和关闭文件&#xff0c;不进行任何读写 文件打开 open函数&#xff…
阅读更多...
【Qt专栏】实现单例程序，禁止程序多开的几种方式

【Qt专栏】实现单例程序，禁止程序多开的几种方式

目录 一&#xff0c;简要介绍 二&#xff0c;实现示例&#xff08;Windows&#xff09; 1.使用系统级别的互斥机制 2.通过共享内存&#xff08;进程间通信-IPC&#xff09; 3.使用命名互斥锁&#xff08;不推荐&#xff09; 4.使用文件锁 5.通过网络端口检测 一&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023