我使用flare制作了以下动画。
我只想在特定时间段内逐帧移动并在特定时间后将其反转。
例如:
动画必须从早上 6 点开始,必须在晚上 6 点结束。框架必须每 30 分钟更换一次。
您可以创建一个自定义耀斑控制器并在 FlareActor 小部件中提供该控制器。
Controller _controller = Controller();
@override
Widget build(BuildContext context) {
EdgeInsets devicePadding = MediaQuery.of(context).padding;
return Scaffold(
backgroundColor: Color.fromRGBO(93, 142, 155, 1.0),
body: Container(
child: Stack(
children: <Widget>[
Positioned.fill(
child: SingleChildScrollView(
padding: EdgeInsets.only(
left: 20.0,
right: 20.0,
top: devicePadding.top + 50.0,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
height: 200,
padding: const EdgeInsets.only(left: 30.0, right: 30.0),
child: FlareActor(
"assets/Teddy.flr",
shouldClip: false,
alignment: Alignment.bottomCenter,
fit: BoxFit.contain,
controller: _controller,
),
),
现在是时候创建控制器了
// you have to override three methods of Flare Controller
@override
void initialize(FlutterActorArtboard artboard) {
_artboard = artboard;
_demoAnimation = FlareAnimationLayer()
..animation = _artboard.getAnimation("Demo Mode");
_skyAnimation = FlareAnimationLayer()
..animation = _artboard.getAnimation("Sun Rotate")
..mix = 1.0;
}
@override
bool advance(FlutterActorArtboard artboard, double elapsed) {
here you can change time for your animation
_skyAnimation.time =
(_skyAnimation.time + elapsed) % _skyAnimation.duration;
_skyAnimation.apply(artboard);
/// Iterate from the top b/c elements might be removed.
int len = _roomAnimations.length - 1;
for (int i = len; i >= 0; i--) {
FlareAnimationLayer layer = _roomAnimations[i];
layer.time += elapsed;
/// The mix quickly ramps up to 1, but interpolates for the first few frames.
layer.mix = min(1.0, layer.time / 0.07);
layer.apply(artboard);
/// When done, remove it.
if (layer.isDone) {
// print("layer is done");
_roomAnimations.removeAt(i);
}
}
return true;
}
@override
void setViewTransform(Mat2D viewTransform) {}
}