я хочу выкатить этот контейнер за пределы экрана, чтобы он анимировался вверх, и гас в течение 2-3 секунд. я использую эту страницу в качестве заставки. мой код для контейнера, который обернут виджетом выравнивания, выглядит следующим образом:
Scaffold(
// backgroundColor: Colors.black,
body: Align(
alignment: Alignment.topCenter,
child: Transform.scale(
scale: 1.5,
child: Container(
height: 400,
decoration: BoxDecoration(
color: Colors.deepOrange, borderRadius: BorderRadius.circular(200)),
),
),
),
);
Вы можете использовать виджет SlideTransition
для анимации положения Контейнера:
Animation<Offset> animation;
AnimationController animationController;
@override
void initState() {
super.initState();
animationController = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
);
animation = Tween<Offset>(begin: Offset.zero, end: Offset(0, -1.5)) //negative to go upwards
.animate(animationController);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Align(
alignment: Alignment.topCenter,
child: SlideTransition(
position: animation,
child: Transform.scale(
scale: 1.5,
child: Container(
height: 400,
decoration: BoxDecoration(
color: Colors.deepOrange,
borderRadius: BorderRadius.circular(200),
),
),
),
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: RaisedButton(
child: Text('Animate'),
onPressed: () { //the button that trigger the animation
if (animation.status == AnimationStatus.completed) {
animationController.reverse();
} else if (animation.status == AnimationStatus.dismissed) {
animationController.forward();
}
},
),
),
],
),
);
}
В примере я показал кнопку, запускающую анимацию, но вы можете сделать это в initState
.
И вам нужно добавить миксин SingleTickerProviderStateMixin
для одной анимации или TickerProviderStateMixin
для 2 и более:
class _YourScreenState extends State<YourScreen> with TickerProviderStateMixin {
Вы можете сделать это с помощью популярного пакета Spring.
Пример:
import 'package:flutter/material.dart';
import 'package:spring/spring.dart';
class SpringExample extends StatelessWidget {
// For the rotation animation to loop.
final SpringController springController =
SpringController(initialAnim: Motion.loop);
@override
Widget build(BuildContext context) {
return Spring.scale(
start: 1,
end: 1.5,
animDuration: const Duration(seconds: 3),
child: Spring.slide(
slideType: SlideType.slide_out_top,
animDuration: const Duration(seconds: 3),
child: Spring.rotate(
springController: springController,
child: Container(
height: 400,
decoration: BoxDecoration(
color: Colors.deepOrange,
borderRadius: BorderRadius.circular(200)),
),
),
));
}
}
спасибо, это сработало. одно дополнение, которое я хотел бы сделать в вашем коде, это то, что нам нужно добавить миксины, как с TickerProviderStateMixin, чтобы распознать vsync. :) Спасибо еще раз.