dart - 用画布理解动画

Question

我是 Dart 和 Flutter 的初学者

我正在尝试制作一款可以帮助我理解这两种语言的许多功能的游戏。

我有一个屏幕，我画了一个圆圈，我想把它从屏幕的左边翻译到右边

class _GamePagePageState extends State<GamePage> with TickerProviderStateMixin {
    @override
    void initState() {
        super.initState();
        leftToRightTranslation(100);
    }
    void leftToRightTranslation(int speed) {
        new Timer.periodic(new Duration(milliseconds: speed), (timer) {
            bulle.xPos++;
        });
     }
}

class MyPainter extends CustomPainter{
    Color lineColor;
    double width;
    double xPos = 50, yPos = 50;
    MyPainter({this.lineColor,this.width});
    @override
    void paint(Canvas canvas, Size size) {
        Paint line = new Paint()
        ..color = lineColor
        ..strokeCap = StrokeCap.round
        ..style = PaintingStyle.stroke
        ..strokeWidth = width;
        Offset offset = new Offset(xPos, yPos);
        double radius  = 1;
        canvas.drawCircle(
            offset,
            radius,
            line
         );
     }
     @override
     bool shouldRepaint(MyPainter oldDelegate) {
         return oldDelegate.xPos != xPos;
     }
}

结果如下：

从左到右的翻译不会发生

我认为该shouldRepaint方法必须在变化时更新公牛位置。

当我执行热重载时，公牛消失了，这意味着 x 位置实际上已经改变并且大于屏幕宽度

如何从屏幕左到右进行翻译？

任何其他方式将不胜感激。

谢谢

标签： dartflutter