Saya memiliki widget berikut yang diberikan.

enter image description here

Piala di tengah adalah animasi lottie yang dapat ditemukan di sini. Saya menggunakan paket berikut untuk menampilkan animasi lottie (Sepertinya yang standar) pub dev

Dalam kode saya, file lottie saya dimuat sebagai berikut.

Lottie.asset("assets/animations/water.json",
                      height: 120, repeat: false),

Apa yang ingin saya capai adalah ketika tombol plus diklik, file lottie akan diputar untuk satu iterasi. Ketika tombol minus diklik itu akan memutar satu iterasi secara terbalik. (Saya tahu ada properti terbalik sehingga yang ini dapat saya capai jika saya dapat mengetahui cara membuatnya bekerja dalam satu arah) Saya mencoba membuat pengontrol animasi, tetapi saya memiliki sedikit atau tidak ada pengalaman bekerja dengannya, dan berikut ini tidak melakukan apapun.

RawMaterialButton(
     onPressed: () {
         _controller.forward();
         _changeWaterIntake(-1);
          },
     elevation: 2.0,
     child: Image.asset(
     "assets/images/subtract.png",
     height: 55,
     ),
shape: CircleBorder(),
                      ),

Bantuan atau bantuan apa pun akan dihargai!

-1
Terblanche Daniel 11 Mei 2021, 15:58

1 menjawab

Jawaban Terbaik

Jadi, berikut adalah beberapa langkah yang dapat Anda lakukan untuk mengontrol animasi lottie Anda:

Langkah 1 : Gunakan TickerProviderStateMixin di Negara Anda untuk pengontrol animasi Anda. cukup menggunakan dengan :

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin

Langkah 2 : Deklarasikan dan inisialisasi pengontrol animasi Anda:

 AnimationController _animationController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
  }

Anda dapat mengubah durasi, menambahkan kurva sesuai kebutuhan Anda di sini di atas.

Langkah 3 : Tugas Utama : Ikat pengontrol Animasi Anda dengan animasi lottie dan ubah pengulangan sebagai salah.

Container(
              height: 100.0,
              child: Lottie.asset(
                'assets/watermation.json',
                controller: _animationController,
                height: 180,
                repeat: false,
              ),
            ),

Langkah 4: Bagian yang menyenangkan cukup gunakan _animationController untuk memainkan animasi Anda:

  GestureDetector(
              onTap: () {
                _animationController.forward();
              },
              child: Text('add'),
            ),
            SizedBox(
              height: 100.0,
            ),
            GestureDetector(
              onTap: () {
                _animationController.reverse();
              },
              child: Text('minus'),
            ),

Kode Negara Bagian Lengkap:

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Container(
              height: 100.0,
              child: Lottie.asset(
                'assets/watermation.json',
                controller: _animationController,
                height: 180,
                repeat: false,
              ),
            ),
            SizedBox(
              height: 100.0,
            ),
            GestureDetector(
              onTap: () {
                _animationController.forward();
              },
              child: Text('add'),
            ),
            SizedBox(
              height: 100.0,
            ),
            GestureDetector(
              onTap: () {
                _animationController.reverse();
              },
              child: Text('minus'),
            ),
          ],
        ),
      ),
      // This trailing comma makes auto-formatting nicer for build methods.
    );
  }}

Jadi Anda dapat menggali dokumentasi dan belajar tentang animasi. Anda juga dapat memanipulasi file Lottie dan menambahkan animasi luar biasa dengannya.

Semoga ini yang ingin Anda capai

1
Krish Bhanushali 11 Mei 2021, 14:35