lottie-flutter
lottie-flutter copied to clipboard
Repeating causes the animation to stutter
When animating, every time the animation ends there is a 0.1s lag before repeating it. This makes the animation a lot less fluent.
Code used:
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'package:logging/logging.dart';
import 'package:lottie_flutter/lottie_flutter.dart';
final Logger logger = Logger('LottieAnimation');
class LottieAnimation extends StatefulWidget {
const LottieAnimation(this.assetPath);
final String assetPath;
@override
LottieAnimationState createState() => LottieAnimationState(assetPath);
}
class LottieAnimationState extends State<LottieAnimation>
with SingleTickerProviderStateMixin {
LottieAnimationState(this.assetPath);
final String assetPath;
bool _isAnimationReady = false;
LottieComposition _composition;
AnimationController _controller;
@override
initState() {
super.initState();
/// Load and prepare our animations after this widget has been added
_loadAnimation();
}
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return _isAnimationReady
? Lottie(
composition: _composition,
size: Size(size.width, size.height + 50),
controller: _controller)
: Container();
}
void _loadAnimation() async {
_controller = new AnimationController(
duration: const Duration(seconds: 5),
vsync: this,
);
logger.fine("Loading Lottie animation from '$assetPath'");
rootBundle
.loadString(assetPath)
.then<Map<String, dynamic>>((String data) => json.decode(data))
.then((Map<String, dynamic> map) => LottieComposition.fromMap(map))
.then((LottieComposition composition) {
setState(() {
_composition = composition;
_isAnimationReady = true;
_controller.repeat();
logger.fine(
"Loaded $assetPath succesfully; start playing Lottie animation");
});
});
}
}