Как отложить анимацию до начала анимации и в середине анимации?

Я пытаюсь вставить время задержки в начале и между моей анимацией, чтобы после окончания времени задержки анимация продолжала работать нормально.

Вот часть, которую я сделал, это анимация с вращением и масштабированием. Итак, если быть точным, то, что я хочу, это то, что до того, как анимация начнет вращаться и масштабироваться, она будет задержана/приостановлена ​​на 0,3 секунды. После этого, когда анимация повернется на 180 градусов и увеличится, она снова будет задержана/приостановлена ​​на 0,3 секунды. Затем он завершит последние 180 градусов и уменьшит масштаб. Затем процесс повторяется.

анимация.дротик

import 'package:flutter/material.dart';
import 'dart:math';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _rotateAnimation;
  Animation<double> _scaleAnimation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 3000));
    _rotateAnimation = TweenSequence([
      TweenSequenceItem(tween: Tween(begin: 2*pi, end: pi), weight: 1),
      TweenSequenceItem(tween: Tween(begin: pi, end: 0.0), weight: 1)
    ]).animate(CurvedAnimation(parent: _animationController, curve: Curves.linear));
    _scaleAnimation = TweenSequence([
      TweenSequenceItem(tween: Tween(begin: 0.5, end: 1.0), weight: 1),
      TweenSequenceItem(tween: Tween(begin: 1.0, end: 0.5), weight: 1),
    ]).animate(CurvedAnimation(parent: _animationController, curve: Curves.linear));
    _animationController.repeat();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          height: 100,
          width: 100,
          child: AnimatedBuilder(
            animation: _animationController,
            builder: (_, child) {
              return Transform(
                alignment: Alignment.center,
                transform: Matrix4.identity()
                ..scale(_scaleAnimation.value)
                ..rotateZ(_rotateAnimation.value),
                child: Container(
                  color: Colors.red
                )
              );
            }
          )
        ),
      ),
    );
  }
}

Любая помощь или предложение очень ценятся. Спасибо.

ладно, я не обратил внимание на ConstantTween. Я понял, спасибо за помощь

Dung Ngo 22.12.2020 10:40

Еще один вопрос, как указать продолжительность для ConstantTween?

Dung Ngo 22.12.2020 10:41
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
2
2 566
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы получить желаемую анимацию, вам нужно:

  • Chain() и ConstantTween для TweenSequenceItem
  • Интервал в CurvedAnimation при анимации

Что-то вроде этого:

@override
  void initState() {
    super.initState();
    _animationController = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 3000));
    _rotateAnimation = TweenSequence([
      TweenSequenceItem(
          tween: Tween(begin: 2 * pi, end: pi)
              .chain(CurveTween(curve: Curves.linear)),
          weight: 1),
      TweenSequenceItem<double>(tween: ConstantTween<double>(pi), weight: 1),
      TweenSequenceItem(
          tween: Tween(begin: pi, end: 0.0)
              .chain(CurveTween(curve: Curves.linear)),
          weight: 1)
    ]).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Interval(
          0.3,
          1,
          curve: Curves.linear,
        ),
      ),
    );
    _scaleAnimation = TweenSequence([
      TweenSequenceItem(
          tween: Tween(begin: 0.5, end: 1.0)
              .chain(CurveTween(curve: Curves.linear)),
          weight: 1),
      TweenSequenceItem<double>(
        tween: ConstantTween<double>(1.0),
        weight: 1,
      ),
      TweenSequenceItem(
          tween: Tween(begin: 1.0, end: 0.5)
              .chain(CurveTween(curve: Curves.linear)),
          weight: 1),
    ]).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Interval(
          0.3,
          1,
          curve: Curves.linear,
        ),
      ),
    );
    _animationController.repeat();
  }

Анимация будет:

Другие вопросы по теме