[求助]wp中如何使用路径动画，让一个控件沿着曲线或正弦曲线运动

Posted 2023-05-17

没有听说过路径动画你是说Path
element的动画？还是说Point
Animation？PointAnimation只能对Point做动画。你要做的是对TextBox的TranslateTransform做动画，改变其X/Y值，所以你能选的还是DoubleAnimation。wpf中有DoubleAnimationUsingPath，但是windows
phone中不能用。。。所以你只能用DoubleAnimationUsingKeyFrames来实现 参考技术A 你是说Path
element的动画？还是说Point
Animation？还真就是问PathAnimation？PointAnimation只能对Point做动画。你要做的是对TextBox的TranslateTransform做动画，改变其X/Y值，所以你能选的还是DoubleAnimation。wpf中有DoubleAnimationUsingPath，但是windows
phone中不能用。。。所以你只能用DoubleAnimationUsingKeyFrames来实现

在颤动中沿着弯曲的路径移动

【中文标题】在颤动中沿着弯曲的路径移动

【英文标题】：Moving along a curved path in flutter

【发布时间】：2020-05-28 21:45:34

【问题描述】：

我想知道如何在 Flutter 中沿如下图所示的路径为小部件设置动画：

假设我有一条简单的曲线：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: SamplePath(),
    );
  


class SamplePath extends StatefulWidget 
  @override
  State<StatefulWidget> createState() => _SamplePathState();


class _SamplePathState extends State<SamplePath> 

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Container(
        child: CustomPaint( //
          size: Size(MediaQuery.of(context).size.width, 300),
          painter: MyPainter(),
        ),
      ),
    );
  



class MyPainter extends CustomPainter 
  @override
  void paint(Canvas canvas, Size size) 
    Paint paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke
      ..strokeWidth = 8.0;

    Path path = Path();
    path.moveTo(0, size.height / 2);
    path.quadraticBezierTo(size.width / 2, size.height, size.width, size.height / 2);
    canvas.drawPath(path, paint);
  

  @override
  bool shouldRepaint(CustomPainter old) 
    return false;
  

以上代码生成如下结果：

我想为Container 或CustomePaint 从头到尾制作动画。我该怎么做？

提前致谢

【问题讨论】：

检查PathMetric类

那么你的“弯曲路径”是否由 std Flutter Path 对象表示？

是的，我更新了我的问题。天哪，至少对我来说，理解 Flutter 的文档太难了。

现在你有Path path 然后使用PathMetric

【参考方案1】：

这是我的问题的答案。感谢pskink 提及PathMetric

import 'dart:ui';
import 'package:flutter/material.dart';

class SampleAnimation extends StatefulWidget

  SampleAnimation();

  @override
  State<StatefulWidget> createState() 
    return SampleAnimationState();
  


class SampleAnimationState extends State<SampleAnimation> with SingleTickerProviderStateMixin 

  AnimationController _controller;
  Animation _animation;
  Path _path;

  @override
  void initState() 
    _controller = AnimationController(vsync: this,duration: Duration(milliseconds: 5000));
    super.initState();
    _animation = Tween(begin: 0.0,end: 1.0).animate(_controller)
      ..addListener(()
        setState(() 
        );
      );
    _controller.forward();
    _path  = drawPath();
  



  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Stack(
        children: <Widget>[

          Positioned(
            top: 0,
            child: CustomPaint(
              painter: PathPainter(_path),
            ),
          ),
          Positioned(
            top: calculate(_animation.value).dy,
            left: calculate(_animation.value).dx,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.blueAccent,
                borderRadius: BorderRadius.circular(10)
              ),
              width: 10,
                height: 10,
            ),
          ),
        ],
      ),
    );
  

  @override
  void dispose() 
    _controller.dispose();
    super.dispose();
  

  Path drawPath()
    Size size = Size(300,300);
    Path path = Path();
    path.moveTo(0, size.height / 2);
    path.quadraticBezierTo(size.width / 2, size.height, size.width, size.height / 2);
    return path;
  


  Offset calculate(value) 
    PathMetrics pathMetrics = _path.computeMetrics();
    PathMetric pathMetric = pathMetrics.elementAt(0);
    value = pathMetric.length * value;
    Tangent pos = pathMetric.getTangentForOffset(value);
    return pos.position;
  




class PathPainter extends CustomPainter 

  Path path;

  PathPainter(this.path);

  @override
  void paint(Canvas canvas, Size size) 
    Paint paint = Paint()
      ..color = Colors.redAccent.withOpacity(0.3)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 3.0;

    canvas.drawPath(this.path, paint);
  

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;

玩得开心！

是时候学习如何绘制路径了！

【讨论】：

不要使用 Tween(begin: 0.0,end: 500.0) - 只需将 [0..1] 值 (_controller.value) 传递给 calculate() 并乘以 PathMetric.length

但球似乎在所有点上都没有沿着路径移动