Flutter动画效果插件new_im_animations的使用

Flutter动画效果插件new_im_animations的使用

im_animations

关于

im_animations 是一个不断增长的动画小部件集合，这些小部件既酷炫又优雅，并且性能优化。

反馈

如果您有任何反馈，请在这里提交问题：[反馈链接]。请支持并喜欢此项目。

可用的动画

动画名称	描述	示例	版本
ColorSonar	显示其子组件周围的颜色声波图案		0.1.1
Sonar	显示其子组件周围的声波图案		0.1.0
HeartBeat	对其子组件应用心跳效果		0.1.0
Fade	淡入淡出其子组件		0.1.0
Rotate	顺时针或逆时针旋转其子组件		0.1.0

使用说明

1. 导入 package:im_animations/im_animations.dart 并使用任何动画。
2. ColorSonar 在外层颜色比内层颜色更浅时看起来更好。

示例代码

import 'package:flutter/material.dart';
import 'package:new_im_animations/im_animations.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'im_animations',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Homepage(),
    );
  }
}

class Homepage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 30),
                decoration: BoxDecoration(
                  color: Colors.black,
                  borderRadius: BorderRadius.circular(5.0),
                ),
                child: Text(
                  "Rotate",
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.all(5.0),
                child: Sonar(
                  radius: 100,
                  child: CircleAvatar(
                    backgroundImage: AssetImage('assets/avatars/man.png'),
                    radius: 100,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// ---------------------COLOR SONAR------------------------------//
class ColorSonarDemo extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ColorSonar(
          // wavesDisabled: true,
          // waveMotion: WaveMotion.synced,
          contentAreaRadius: 48.0,
          waveFall: 15.0,
          // waveMotionEffect: Curves.elasticIn,
          waveMotion: WaveMotion.synced,
          // duration: Duration(seconds: 5),
          child: CircleAvatar(
            radius: 48.0,
            backgroundImage: AssetImage('assets/avatars/man.png'),
          ),
        ),
      ),
    );
  }
}

完整示例

主页 (Homepage)

class Homepage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 30),
                decoration: BoxDecoration(
                  color: Colors.black,
                  borderRadius: BorderRadius.circular(5.0),
                ),
                child: Text(
                  "Rotate",
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.all(5.0),
                child: Sonar(
                  radius: 100,
                  child: CircleAvatar(
                    backgroundImage: AssetImage('assets/avatars/man.png'),
                    radius: 100,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

ColorSonar 动画示例 (ColorSonarDemo)

class ColorSonarDemo extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ColorSonar(
          // wavesDisabled: true,
          // waveMotion: WaveMotion.synced,
          contentAreaRadius: 48.0,
          waveFall: 15.0,
          // waveMotionEffect: Curves.elasticIn,
          waveMotion: WaveMotion.synced,
          // duration: Duration(seconds: 5),
          child: CircleAvatar(
            radius: 48.0,
            backgroundImage: AssetImage('assets/avatars/man.png'),
          ),
        ),
      ),
    );
  }
}