1. 程式人生 > 實用技巧 >flutter中的動畫

flutter中的動畫

1、AnimatedOpacity

控制widget淡入或淡出效果

  

栗子是點選MaterialButton後,通過更新opacity變數,控制details的opacity;

import 'package:flutter/material.dart';

const owl_url =
    'https://raw.githubusercontent.com/flutter/website/master/src/images/owl.jpg';

class FadeInDemo extends StatefulWidget {
  _FadeInDemoState createState() 
=> _FadeInDemoState(); } class _FadeInDemoState extends State<FadeInDemo> { double opacity = 0.0; @override Widget build(BuildContext context) { return Column(children: <Widget>[ Image.network(owl_url), MaterialButton( child: Text( 'Show details', style: TextStyle(color: Colors.blueAccent), ), onPressed: ()
=> setState(() { opacity = opacity == 1 ? 0.0 : 1; }), ), AnimatedOpacity( opacity: opacity, duration: Duration(seconds: 2), child: Column( children: <Widget>[ Text('Type: Owl'), Text('Age: 39'), Text(
'Employment: None'), ], ), ) ]); } } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Center( child: FadeInDemo(), ), ), ); } } void main() { runApp( MyApp(), ); }
View Code

2、AnimatedContainer

控制widget的樣式屬性

栗子是通過點選changebutton使AnimatedContainer widget隨即獲取新的樣式

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

double randomBorderRadius() {
  return Random().nextDouble() * 64;
}

double randomMargin() {
  return Random().nextDouble() * 64;
}

Color randomColor() {
  return Color(0xFFFFFFFF & Random().nextInt(0xFFFFFFFF));
}

const  _duration = Duration(milliseconds: 1000);

class AnimatedContainerDemo extends StatefulWidget {
  _AnimatedContainerDemoState createState() => _AnimatedContainerDemoState();
}

class _AnimatedContainerDemoState extends State<AnimatedContainerDemo> {
  Color color;
  double borderRadius;
  double margin;

  @override
  initState() {
    super.initState();
    color = randomColor();
    borderRadius = randomBorderRadius();
    margin = randomMargin();
  }

  void change() {
    setState(() {
      color = randomColor();
      borderRadius = randomBorderRadius();
      margin = randomMargin();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: <Widget>[
            SizedBox(
              width: 128,
              height: 128,
              child: AnimatedContainer(
                margin: EdgeInsets.all(margin),
                duration: _duration,
                decoration: BoxDecoration(
                  color: color,
                  borderRadius: BorderRadius.circular(borderRadius),
                ),
              ),
            ),
            MaterialButton(
              color: Theme.of(context).primaryColor,
              child: Text(
                'change',
                style: TextStyle(color: Colors.white),
              ),
              onPressed: () => change(),
            ),
          ],
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: AnimatedContainerDemo(),
    );
  }
}

void main() async {
  runApp(
    MyApp(),
  );
}
View Code

3、FadeInImage

一般用於網路圖片未載入完的placeholder與載入後的圖片替換動畫

栗子很簡單,就是上面的描述

FadeInImage.assetNetwork(
              placeholder:'images/pic8.jpg',///本地圖片
              image:'http://pics.sc.chinaz.com/files/pic/pic9/201909/zzpic19910.jpg',
            )
View Code

3、FadeInImage