首页 > 解决方案 > 如何在特定点停止动画?

问题描述

我已经创建了这个动画来显示一个配置文件,我想在配置文件图片动画完成并且在下面的文本的不透明度开始改变之前停止动画。现在,我知道头像动画从 0.3 变为 0.6,所以我想在 0.6 处停止动画。这是代码。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class profile extends StatefulWidget {
@override
_profileState createState() => _profileState();
}

class _profileState extends State<profile> with SingleTickerProviderStateMixin{

AnimationController _animationController;

Animation<double> barHeight;
Animation<double> avatarSize;
Animation<double> textOpacity;


@override
void initState() {
// TODO: implement initState
super.initState();
_animationController = AnimationController(vsync: this,duration: Duration(seconds: 5));
_animationController.forward();

barHeight = Tween(begin: 0.0,end: 250.0).animate(CurvedAnimation(parent:_animationController,curve: 
Interval(0.1,0.3,curve:Curves.easeInOutQuint)));
avatarSize = Tween(begin: 0.0,end: 1.0).animate(CurvedAnimation(parent:_animationController,curve: 
Interval(0.3,0.6,curve:Curves.easeInOutCirc)));
textOpacity = Tween(begin: 0.0,end: 1.0).animate(CurvedAnimation(parent:_animationController,curve: 
Interval(0.6,1,curve:Curves.easeInOutCirc)));



}


Widget _buildanimation(BuildContext context,Widget child, Size size){
return Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('assets/bgi1.png'),
      fit: BoxFit.fill
    )
  ),
  child: Column(
    children: <Widget>[
      SizedBox(height: 250,
        child: Stack(
          overflow: Overflow.visible,
          children: <Widget>[
            Opacity(
              opacity: 0.9,
              child: Container(
                height: barHeight.value,
                width: double.infinity,
                decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/books.jpg'),
                  fit: BoxFit.fitWidth
                )
                ),
              ),
            ),
            Positioned(
              top: 200,
              left: size.width/2-70,
              child: Transform(
                alignment: Alignment.center,
                transform: Matrix4.diagonal3Values(avatarSize.value, avatarSize.value, 1.0),
                child: Container(
                  width: 120,
                  height: 120,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(100),
                  ),
                  child: CircleAvatar(
                    backgroundImage: AssetImage('assets/profile.jpg'),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),

          Padding(
            padding: const EdgeInsets.all(12),
            child: Column(
              children: <Widget>[
                SizedBox(height: 60,),
                Opacity(opacity:textOpacity.value,
                    child: Text(
                        "Gillian Flynn",
                      style: GoogleFonts.lobster(fontSize: 50,color: Colors.blue[900]),
                    )),
                SizedBox(height: 40,),
                Opacity(opacity:textOpacity.value,child: Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Text(
                      "Gillian Flynn was born in Kansas City, Missouri to two community-college 
professors—her mother taught reading; her father, film. Thus she spent an inordinate amount of her 
youth nosing through books and watching movies. She has happy memories of having A Wrinkle in Time 
pried from her hands at the dinner table, and also of seeing Alien, Psycho and Bonnie and Clyde at a 
questionable age (like, seven). It was a good childhood.",
                    style: GoogleFonts.kanit(fontSize: 15),

                  ),
                ))
              ],
            )
        ),
    ],
  ),
);
}

@override
void dispose() {
// TODO: implement dispose
super.dispose();
_animationController.dispose();
}



@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Scaffold(
  body: AnimatedBuilder(
    animation: _animationController,
    builder: (context,child)=> _buildanimation(context,child,size),
  )
);
}
}

我问这个是因为我想知道我是否可以使用一个动画控制器本身单独执行特定的动画间隔。

标签: flutterdartflutter-animationanimationcontroller

解决方案


推荐阅读