xvrh / lottie-flutter

Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player.
https://pub.dev/packages/lottie
MIT License
1.16k stars 196 forks source link

device heat up or how to implement lottie player with multiple lottie files #74

Open sultanmyrza opened 4 years ago

sultanmyrza commented 4 years ago

How lottie player works under the hood if I have 12 lottie files and switch them on button press using setState will it create new lottie player or reuse existing lottie player?

I'm not sure if question is correct or not. Seems like iOS device heat up after using for 10 mins or more.

By the way if you implement a "slider" for lottie players like swiping images how would you implement?

Here is how I did, copied starter code from you examples P.S: if you past and run from examples it will work because I forked and run inside example folders with your asset lottie animations.

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

/// This example show how to play the Lottie animation in various way:
/// - Start and stop the animation on event callback
/// - Play the animation forward and backward
/// - Loop between two specific frames
///
/// This works by creating an AnimationController instance and passing it
/// to the Lottie widget.
/// The AnimationController class has a rich API to run the animation in various ways.
void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  AnimationController _controller;

  List<String> assets = [
    'assets/14595-thumbs-up.json',
    'assets/17297-fireworks.json',
    'assets/AndroidWave.json',
    'assets/bluetoothscanning.json',
    'assets/DynamicGradient.json',
    'assets/HamburgerArrow.json',
  ];

  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(vsync: this)
      ..value = 0.5
      ..addListener(() {
        setState(() {
          // Rebuild the widget at each frame to update the "progress" label.
        });
      });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animation control'),
        ),
        body: Column(
          children: <Widget>[
            const SizedBox(height: 20),
            Lottie.asset(
              assets[_currentIndex],
              controller: _controller,
              height: 300,
              onLoaded: (composition) {
                setState(() {
                  _controller.duration = composition.duration;
                });
              },
            ),
            Text('${_controller.value.toStringAsFixed(2)}'),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // Play backward
                IconButton(
                  icon: Icon(Icons.arrow_left),
                  onPressed: () {
                    _controller.reverse();
                  },
                ),
                // Pause
                IconButton(
                  icon: Icon(Icons.pause),
                  onPressed: () {
                    _controller.stop();
                  },
                ),
                // Play forward
                IconButton(
                  icon: Icon(Icons.arrow_right),
                  onPressed: () {
                    _controller.forward();
                  },
                ),
              ],
            ),
            const SizedBox(height: 30),
            RaisedButton(
              child: Text('Loop between frames'),
              onPressed: () {
                // Loop between 2 specifics frames

                var start = 0.1;
                var stop = 0.5;
                _controller.repeat(
                  min: start,
                  max: stop,
                  reverse: true,
                  period: _controller.duration * (stop - start),
                );
              },
            ),
            RaisedButton(
              child: Text('Play from beginning'),
              onPressed: () {
                _controller.forward(from: 0.0);
              },
            ),
            RaisedButton(
              child: Text('Next lottie'),
              onPressed: () {
                setState(() {
                  _currentIndex = (_currentIndex + 1) % assets.length;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}
sultanmyrza commented 4 years ago

Hello @xvrh, Hope you are doing fine. When I try to make LottiePlayer slider it is lagging in android version but working fine in iOS version. Can you tell me is it my code implementation above is okay or there is a better way to play multiple lottie animations at once?