Android怎么利用贝塞尔曲线绘制动画

本篇内容主要讲解"Android怎么利用贝塞尔曲线绘制动画"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"Android怎么利用贝塞尔曲线绘制动画"吧!

彩虹系列

通过动画控制绘制的结束点，就可以让贝塞尔曲线动起来。例如下面的动图展示的效果，看起来像搭了一个滑滑梯一样。实际上就是用7条贝塞尔曲线实现的，我们使用了 Animation 对象的值来控制绘制的结束点，从而实现了对应的动画效果。

具体源码如下，其中控制绘制结束点就是在动画过程中修改循环的次数，即t <= (100 * animationValue).toInt()；这句代码，其中 animationValue 是动画控制器当前值，范围时从0-1。

class AnimationBezierPainter extends CustomPainter {  AnimationBezierPainter({required this.animationValue});  final double animationValue;  @override  void paint(Canvas canvas, Size size) {    final lineWidth = 6.0;    paint.strokeWidth = lineWidth;    paint.style = PaintingStyle.stroke;    final colors = [      Color(0xFFE05100),      Color(0xFFF0A060),      Color(0xFFE0E000),      Color(0xFF10F020),      Color(0xFF2080F5),      Color(0xFF104FF0),      Color(0xFFA040E5),    ];    final lineNumber = 7;    for (var i = 0; i < lineNumber; ++i) {      paint.color = colors[i % colors.length];      _drawAnimatedLines(canvas, paint, size, size.height / 4 + i * lineWidth);    }  }  @override  bool shouldRepaint(covariant CustomPainter oldDelegate) {    return true;  }  _drawRainbowLines(Canvas canvas, Paint paint, Size size, yPos) {    var yGap = 60.0;    var p0 = Offset(0, yPos - yGap / 2);    var p1 = Offset(size.width * 2 / 3, yPos - yGap);    var p2 = Offset(size.width / 3, yPos + yGap);    var p3 = Offset(size.width, yPos + yGap * 1.5);    var path = Path();    path.moveTo(p0.dx, p0.dy);    for (var t = 1; t <= (100 * animationValue).toInt(); t += 1) {      var curvePoint =          BezierUtil.get3OrderBezierPoint(p0, p1, p2, p3, t / 100.0);      path.lineTo(curvePoint.dx, curvePoint.dy);    }    canvas.drawPath(path, paint);  }}

我们修改曲线的控制点还可以实现下面的效果，大家有兴趣可以自己尝试一下。

弹簧动画

用多个贝塞尔曲线首尾相接，在垂直方向叠起来就能画出一条弹簧了，然后我们更改弹簧的间距和高度（曲线的数量）就能做出弹簧压下去和弹起来的动画效果了。

这部分的代码如下所示：

@overridevoid paint(Canvas canvas, Size size) {  var paint = Paint()..color = Colors.black54;  final lineWidth = 2.0;  paint.strokeWidth = lineWidth;  paint.style = PaintingStyle.stroke;  final lineNumber = 20;  // 弹簧效果  final yGap = 2.0 + 16.0 * animationValue;  for (var i = 0; i < (lineNumber * animationValue).toInt(); ++i) {    _drawSpiralLines(        canvas, paint, size, size.width / 2, size.height - i * yGap, yGap);  }}_drawSpiralLines(Canvas canvas, Paint paint, Size size, double xPos,    double yPos, double yGap) {  final xWidth = 160.0;  var p0 = Offset(xPos, yPos);  var p1 = Offset(xPos + xWidth / 2 + xWidth / 4, yPos - yGap);  var p2 = Offset(xPos + xWidth / 2 - xWidth / 4, yPos - 3 * yGap);  var p3 = Offset(xPos, yPos - yGap);  var path = Path();  path.moveTo(p0.dx, p0.dy);  for (var t = 1; t <= 100; t += 1) {    var curvePoint =        BezierUtil.get3OrderBezierPoint(p0, p1, p2, p3, t / 100.0);    path.lineTo(curvePoint.dx, curvePoint.dy);  }  canvas.drawPath(path, paint);}

到此，相信大家对"Android怎么利用贝塞尔曲线绘制动画"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！