gpt4 book ai didi

flutter - 在 flutter 中沿着弯曲的路径移动

转载 作者:行者123 更新时间:2023-12-03 13:29:39 26 4
gpt4 key购买 nike

我想知道如何为Flutter中的小部件制作动画,如下图所示:

enter image description here

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

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;
}
}


上面的代码生成以下结果:

enter image description here

我想从头到尾制作一个 ContainerCustomePaint的动画。我该怎么办?

提前致谢

最佳答案

这是我的问题的答案。感谢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;
}

enter image description here

玩得开心!

enter image description here

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

关于flutter - 在 flutter 中沿着弯曲的路径移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60203515/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com