如何为正方形内容添加边框动画。
paint
来回答。我正在使用 Rive
进行操作。
这个 Rive 文件 包含了两种状态:
0-100
StateMachineController
。class RiveBorder extends StatefulWidget {
const RiveBorder({Key? key}) : super(key: key);
@override
_RiveBorderState createState() => _RiveBorderState();
}
class _RiveBorderState extends State<RiveBorder> {
StateMachineController? controller;
//progress value
SMIInput<double>? valueController;
// infinite loop
SMIInput<bool>? loopController;
Artboard? _riveArtboard;
_initRive() {
rootBundle.load("assets/new_file.riv").then((value) async {
final file = RiveFile.import(value);
final artboard = file.mainArtboard;
controller =
StateMachineController.fromArtboard(artboard, "State Machine 1");
if (controller != null) {
debugPrint("got state");
setState(() {
artboard.addController(controller!);
valueController = controller!.findInput('value');
loopController = controller!.findInput('loop');
// ignore: avoid_function_literals_in_foreach_calls
controller!.inputs.forEach((element) {
debugPrint(element.name);
});
});
}
_riveArtboard = artboard;
});
}
@override
void initState() {
_initRive();
super.initState();
}
@override
void dispose() {
controller?.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
const Text("loop"),
const SizedBox(
width: 10,
),
Switch(
value: loopController == null ? false : loopController!.value,
onChanged: (value) {
setState(() {
if (loopController != null) loopController!.value = value;
});
},
),
],
),
Slider(
value: valueController == null ? 0 : valueController!.value,
min: 0,
max: 100,
onChanged: (value) {
setState(() {
valueController != null ? valueController!.value = value : 0;
});
},
),
SizedBox(
height: 100,
width: 100,
child: Stack(
alignment: Alignment.center,
children: [
_riveArtboard == null
? const CircularProgressIndicator()
: Rive(
artboard: _riveArtboard!,
),
const Icon(
Icons.umbrella,
size: 77,
)
],
),
)
],
),
),
);
}
}