lottie-flutter icon indicating copy to clipboard operation
lottie-flutter copied to clipboard

Repeating causes the animation to stutter

Open japborst opened this issue 5 years ago • 0 comments

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

japborst avatar Mar 28 '19 21:03 japborst