Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.
The side dishes were trimmed a little a year agoLottie ๅจ AndroidApplication, nowFlutterThere are also related plug-ins to help us quickly and easily apply complex scenariosLottieAnimation;
After checking the official website, I found that there are two open source Lottie plug-ins recommended by the official website. Try to learn;
Xiaocai first downloaded two cool animation JSON in Lottiefiles, we can also choose the appropriate animation to edit and adjust; Like original, can follow the design, of course, this task or to the visual design of the little sister is better;
Integrated way
The integration method is a unified three steps; Before that, you can add the downloaded JSON file to your local images resource folder;
1. Add the dependency library to pubspec.yaml
Dependencies: fluttie: ^ 0.3.2Copy the code2. Add the reference library to the file
import 'package:fluttie/fluttie.dart';
Copy the code3. Call according to API
- Load local JSON resources asynchronously using loadAnimationFromAsset or load JSON content directly using loadAnimationFromJson.
void prepareLottie() async {
var instance = Fluttie();
var whaleLottie = await instance.loadAnimationFromAsset('images/animation_demo01.json');
}
Copy the code- Set FluttieAnimationController controller, binding animation resources, basic properties and set the animation;
A. The fixed parameters of prepareAnimation are animation resources, which are indispensable;
B. RepeatCount Can set the frequency of animation repetition; Repeatcount.ntimes (n) repeat n+1 times; Repeatcount.infinite (); Repeatcount.dontrepeat () only once, stop after playing;
C. RepeatMode can set the animation playback mode, START_OVER plays from the beginning again after playing, REVERSE starts from nothing to nothing;
D. Duration Specifies the animation playing duration. Infinite repetition does not take effect. The rest are divided evenly according to the repetition frequency;
E. PreferredSize Indicates the animation preloading size and does not directly control the Widget size.
whaleController = await instance.prepareAnimation(
whaleLottie,
repeatCount: const RepeatCount.infinite()
);
Copy the code- Start animation to prepare the basic elements of animation;
setState(() { whaleController.start(); });
Copy the code- Drawing the animation in the Widget is a preliminary success;
@override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column(mainAxisSize: MainAxisSize. Min, children: <Widget>[Container(width: 280.0, height: 200.0, child: FluttieAnimation(whaleController)) ) ]))); }Copy the code- We can also dynamically listen for animation state and process it;
A. start() start animation from the beginning;
B. pause() pauses the animation;
C. Unpause () continues the animation from the pause;
D. stopAndReset() stops the animation, rewind is true and ends the animation to the first frame when the animation starts; False is the technical animation and goes to the last frame of the animation;
Row(children: <Widget>[
Expanded( flex: 1,
child: FlatButton(
onPressed: () { starController.start(); },
child: Text('start'))),
Expanded( flex: 1,
child: FlatButton(
onPressed: () { starController.pause(); },
child: Text('pause'))),
Expanded( flex: 1,
child: FlatButton(
onPressed: () { starController.unpause(); },
child: Text('resume'))),
Expanded( flex: 1,
child: FlatButton(
onPressed: () { starController.stopAndReset(rewind: true); },
child: Text('stop')))
])
Copy the code
Matters needing attention
1. dispose()animation
Animation consumes a large amount of application memory. You are advised to destroy the animation when the page is destroyed or closed.
@override void dispose() { super.dispose(); whaleController? .dispose(); starController? .dispose(); }Copy the codeDispose () is different from stopAndReset()
StopAndReset () method used to control the animation stop state, resources are still in memory, can continue to operate the animation state;
Dispose () method is used to stop animation and release resources, after which animation state can no longer be manipulated;
class _LottieStatePage extends State<LottieStatePage> {
FluttieAnimationController whaleController, starController;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
Container(
width: 280.0,
height: 200.0,
child: FluttieAnimation(whaleController)),
Container(child: FluttieAnimation(starController)),
Row(children: <Widget>[
Expanded(
flex: 1,
child: FlatButton(
onPressed: () {
starController.start();
},
child: Text('start'))),
Expanded(
flex: 1,
child: FlatButton(
onPressed: () {
starController.pause();
},
child: Text('pause'))),
Expanded(
flex: 1,
child: FlatButton(
onPressed: () {
starController.unpause();
},
child: Text('resume'))),
Expanded(
flex: 1,
child: FlatButton(
onPressed: () {
starController.stopAndReset(rewind: false);
},
child: Text('stop')))
])
])));
}
@override
void dispose() {
super.dispose();
whaleController?.dispose();
starController?.dispose();
}
@override
void initState() {
super.initState();
prepareLottie();
}
void prepareLottie() async {
var instance = Fluttie();
var whaleLottie =
await instance.loadAnimationFromAsset('images/animation_demo01.json');
whaleController = await instance.prepareAnimation(
whaleLottie,
repeatCount: const RepeatCount.nTimes(2));
var starLottie = await instance.loadAnimationFromAsset('images/star.json');
starController = await instance.prepareAnimation(starLottie,
repeatCount: const RepeatCount.infinite(),
repeatMode: RepeatMode.START_OVER);
setState(() {
whaleController.start();
starController.start();
});
}
}
Copy the codeLottie animation has greatly reduced our development costs and is in good memory condition, but it is not a substitute for native animation, but it has enriched the diversity of animation development. If there are mistakes, please guide!
Source: Little Monk A Ce