时间戳

首页 > 解决方案 > 动画按钮旋转

flutter - 动画按钮旋转

问题描述

我试图在每次按下时将自定义按钮内的图标旋转动画为 180 度。我对颤振文档感到有些困惑。我知道我应该使用RotationTransition，但我就是不知道怎么用.. 这是我的按钮

     SizedBox.fromSize(
        size: Size(50, 50),
        child: ClipOval(
          child: Material(
            color: Colors.blue,
            child: InkWell(
              onTap: () {},
              splashColor: Colors.black12,
              child: RotationTransition(. //<== that is where I get
                child: Icon(
                  Icons.filter_list, //rotate this icon
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ),

标签： flutterdart

解决方案

基本上，您需要一个带有 AnimationController 的 Stateful 小部件来创建控制动画。在方法上创建该控制器并在initState()方法上处理它dispose()以防止可能的错误非常重要。

拥有控制器后，您可以使用 bool 来存储旋转方向，并使用由 Animation 控制器控制的 Animation 来旋转小部件。首先，它从 0 变为 0.5，然后从 0.5 变为 1。

代码可以是这样的。您还可以查看我为示例创建的这个codepen。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatefulWidget{
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> 
  with SingleTickerProviderStateMixin{
  AnimationController _controller;
  Animation<double> _animation;
  
  bool dir = true;
  
  @override
  void initState(){
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 1));
    super.initState();
  }
  
  @override
  void dispose(){
    _controller.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    _animation = Tween<double>(
      begin: dir ? 0:0.5, 
      end: dir ? 0.5:1
    ).animate(_controller);
    
    return Scaffold(
      body: Center(
        child: RotationTransition(
          turns: _animation,
          child: RaisedButton(
            child: Text("Rotate"),
              onPressed: (){
                _controller.forward(
                  from: 0
                );
                setState(() {dir = !dir;});
              
              }
            )
          )
      ),
    );
  }
}

推荐阅读