动画、增大和减小尺寸

Question

我对动画有疑问，我希望心脏从小到大，然后逐渐变小，如下面的 gif 所示。

想要的动画

但目前的行为是心脏开始时很大，然后减慢。

有人知道修复动画需要什么吗？

这是颤振代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage();

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  Animation<double> _heartAnimation;
  AnimationController _heartController;

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

  void _animate() {
    _heartController
      ..reset()
      ..forward(from: 0.0)
      ..reverse(from: 1.0);
  }

  @override
  void initState() {
    super.initState();
    final quick = const Duration(milliseconds: 500);
    final scaleTween = Tween(begin: 0.0, end: 1.0);
    _heartController = AnimationController(duration: quick, vsync: this);
    _heartAnimation = scaleTween.animate(
      CurvedAnimation(
        parent: _heartController,
        curve: Curves.elasticOut,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ScaleTransition(
          scale: _heartAnimation,
          child: Icon(Icons.favorite, size: 160.0, color: Colors.red),
        )
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _animate();
        },
        child: Icon(Icons.favorite_rounded),
      ),
    );
  }
}

Answer 1

尝试这个代码，它非常适合我。如果您有任何疑问，请告知。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage();

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  Animation<double> animation;
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    final quick = const Duration(milliseconds: 500);
    final scaleTween = Tween(begin: 0.0, end: 1.0);
    controller = AnimationController(duration: quick, vsync: this);
    animation = scaleTween.animate(
      CurvedAnimation(
        parent: controller,
        curve: Curves.fastLinearToSlowEaseIn,
      ),
    )..addListener(() {
      setState(() => scale = animation.value);
    });
      
  }

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

  void _animate() {
    animation
    ..addStatusListener((AnimationStatus status) {
      if (scale == 1.0) {
        controller.reverse();
      } 
    });
    controller.forward();
  }

  double scale = 0.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Transform.scale(
          scale: scale,
          child: Icon(
            Icons.favorite,
            size: 160.0,
            color: Colors.red
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _animate();
        },
        child: Icon(Icons.favorite_rounded),
      )
    );
  }
}

Answer 2

可以使用放大效果来实现想要的动画，我们可以通过flutter doc来学习，或者参考下面的代码。 https://api.flutter.dev/flutter/widgets/ScaleTransition-class.html

class _ManageScale 使用 TickerProviderStateMixin 扩展 State{

最终的AnimationController控制器=AnimationController( uration: const Duration(seconds:2), //你可以输入任意秒数来显示放大或缩小效果 垂直同步：这个， )..repeat(reverse:true) ;//将repeatreverse设置为true就是让你的容器按相同的顺序变大和变小

最终动画_animation = CurvedAnimation( 父级：_controller， 曲线：Curve.fastOutSlowIn，
);

//有关上述有状态小部件的正确实现，请参阅文档

现在使用上面的动画作为小部件中的属性，即_animation

小部件构建（BuildContext上下文）{ 返回脚手架（ 身体：中心（ 子级：ScaleTransition( 规模：_动画， 孩子：常量填充（ 填充：EdgeInsets.all(8.0), 儿童：（尺寸：150.0）， ), ), ), ）； }