flutter - 如何用颤振创建动画表情雨?
问题描述
我需要这样的动画 ,它是由 Flutter 创建的。谢谢
解决方案
看一下这个:
import 'dart:math';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Homer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: View(
numberOfItems: 100,
),
);
}
}
class Item {
static final random = Random();
double _size;
Color _color;
Alignment _alignment;
Item() {
_color = Color.fromARGB(random.nextInt(255), random.nextInt(255),
random.nextInt(255), random.nextInt(255));
_alignment =
Alignment(random.nextDouble() * 2 - 1, random.nextDouble() * 2 - 1);
_size = random.nextDouble() * 40 + 1;
}
}
class View extends StatefulWidget {
final int numberOfItems;
const View({Key key, this.numberOfItems}) : super(key: key);
@override
_ViewState createState() => _ViewState();
}
class _ViewState extends State<View> with SingleTickerProviderStateMixin {
var items = <Item>[];
var started = false;
AnimationController animationController;
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Stack(
children: <Widget>[
Scaffold(
appBar: AppBar(
title: Text("Emoji Example Rain"),
),
body: Center(
child: RaisedButton(
child: Text("Start Dropping"),
onPressed: makeItems,
),
),
),
...buildItems()
],
),
),
);
}
List<Widget> buildItems() {
return items.map((item) {
var tween = Tween<Offset>(
begin: Offset(0, Random().nextDouble() * -1 - 1),
end: Offset(Random().nextDouble() * 0.5, 2))
.chain(CurveTween(curve: Curves.linear));
return SlideTransition(
position: animationController.drive(tween),
child: AnimatedAlign(
alignment: item._alignment,
duration: Duration(seconds: 10),
child: AnimatedContainer(
duration: Duration(seconds: 10),
width: item._size,
height: item._size,
decoration:
BoxDecoration(color: item._color, shape: BoxShape.circle),
),
),
);
}).toList();
}
@override
void initState() {
super.initState();
animationController =
AnimationController(vsync: this, duration: Duration(seconds: 10));
}
void makeItems() {
setState(() {
items.clear();
for (int i = 0; i < widget.numberOfItems; i++) {
items.add(Item());
}
});
animationController.reset();
animationController.forward();
}
}
推荐阅读
- python-2.7 - 加载 yaml 文件时编码错误
- javascript - 在特定时间段内对 div 执行操作(jQuery)
- mysql - 将聚合函数中的列与普通列进行比较 - MYSQL
- sql - 创建一个唯一约束/索引,考虑第二个表
- android - Android Fragments导航,回到backstack中的特定fragments
- javascript - 如何使用nodejs在电子邮件的html模板中嵌入图像?
- javascript - 如何通过按下按钮获得数组的平均值?
- jboss - Bundle 正在等待命名空间处理程序
- angular - 使用角度的对话流聊天机器人中的用户身份验证
- iteration - 如何解决 Ocaml 循环中的语法错误?