в этом простом пользовательском интерфейсе ниже у меня Container
справа от экрана, и я хочу свернуть и развернуть его с помощью elastic
анимации, например, при расширении elasticIn
анимации и для свертывания elasticOut
.
Свернуть и развернуть виджет Flutter с эластичной анимацией
Ответы (1)
Это то, что тебе надо?
import 'package:flutter/material.dart';
import 'package:flutter/physics.dart';
import 'dart:math';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Spring Box",
theme: ThemeData(),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
Animation animationIn, animationOut;
AnimationController _animationController;
@override
void initState() {
_animationController = AnimationController(
vsync: this,
value: 1.0,
duration: Duration(milliseconds: 500),
);
animationIn = CurvedAnimation(parent: _animationController, curve: Curves.elasticIn);
animationOut = CurvedAnimation(parent: _animationController, curve: Curves.elasticIn);
}
_toggleExpanded() {
if (_animationController.status == AnimationStatus.completed) {
_animationController.reverse();
} else {
_animationController.forward();
}
}
@override
Widget build(BuildContext context) {
var isExpanded = _animationController.status != AnimationStatus.completed;
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: _toggleExpanded,
child: Icon(Icons.add),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
CollapsAnimation(
animation: isExpanded ? animationOut : animationIn,
child: Container(
color: Color(0xFF404bc4),
),
),
],
),
backgroundColor: Color(0xFFe8e8e8),
);
}
}
class CollapsAnimation extends AnimatedWidget {
CollapsAnimation({key, animation, this.child})
: super(
key: key,
listenable: animation,
);
final Widget child;
final Tween tween = Tween<double>(begin: 0, end: 80);
@override
Widget build(BuildContext context) {
Animation<double> animation = listenable;
var animationValue = tween.evaluate(animation);
double width = animationValue >= 0.0 ? animationValue : 0.0;
return Container(
width: width,
child: child,
);
}
}
person
Kherel
schedule
29.08.2019
есть немного другое, что я хочу иметь, это
elasticOut
, когда контейнер свернут, это означает три анимации, третья анимация - это когда container
свернут
- person DolDurma; 29.08.2019
хм .. вот так?
- person Kherel; 29.08.2019
@Kherek большое спасибо, я принял твой ответ. все ваши ответы верны, но есть немного другое, если у вас есть свободное время, есть три анимации: -: начало расширения (без какой-либо анимации), первое: когда контейнер расширен, второй, когда контейнер хочет свернуть и Третья анимация - когда контейнер рухнул, как я могу получить ваше предыдущее сообщение, на которое вы ответили?
- person DolDurma; 30.08.2019
Спасибо, это первая версия: gist.github.com/kherel/1048888bf4da291b4d79596c2828d131
- person Kherel; 30.08.2019