Каков наилучший способ создать вращающуюся кнопку

#flutter #flutter-animation

#flutter #flutter-анимация

Вопрос:

Я хотел бы сделать что-то вроде этого:https://youtu.be/W3O0077GMlo И я хотел бы, чтобы вращающийся круг (луна в этом видео) действовал как кнопка.

Каков наилучший способ сделать это с точки зрения производительности?

1. Добро пожаловать в SO! Что вы уже пробовали? У вас уже есть существующий код? Также взгляните на Transform.rotate и на RotationTransition . Если это ваша первая анимация во Flutter, взгляните на Введение в анимацию во Flutter .

2. Привет, Никлас, спасибо тебе! Я новичок в flutter. Я прочитал все и попытался повернуть контейнер с помощью transform, но он заикался. У меня нет кода, я его удалил. Прямо сейчас я пытаюсь сделать это с помощью spriteWidged. Я хочу, чтобы вращение выглядело плавным.

3. Ваша анимация заикалась в эмуляторе в релизной версии на вашем мобильном телефоне? Я напишу ответ с коротким примером.

4. Он заикается на моем телефоне, note 9. Все обновлено, проблем с flutter нет. Спасибо!

Ответ №1:

Вы можете использовать RotationTransition внутри Stack виджета для создания анимации вращения. Внутри Stack установите alignment значение center и оберните вращающийся виджет внутри Align . Установите для атрибута выравнивания Align виджета значение Alignment.topCenter или любое внешнее выравнивание.

Не забудьте выполнить развертывание при выпуске на вашем телефоне, чтобы убедиться, что анимация выполняется плавно.

Краткий пример автономного кода:

 import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox(width: 300.0, height: 300.0, child: OrbitingButton()),
        ),
      ),
    );
  }
}

class OrbitingButton extends StatefulWidget {
  @override
  _OrbitingButtonState createState() => _OrbitingButtonState();
}

class _OrbitingButtonState extends State<OrbitingButton>
    with SingleTickerProviderStateMixin {
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(vsync: this);

    controller.repeat(min: 0.0, max: 1.0, period: Duration(seconds: 1));
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        RotationTransition(
          turns: controller,
          child: Align(
            alignment: Alignment.topCenter,
            child: Container(
              color: Colors.green,
              height: 30.0,
              width: 30.0,
            ),
          ),
        ),
        RaisedButton(
          child: Text('Button'),
        )
      ],
    );
  }
}