Flutter – 铰链动画

动画是Flutter应用程序的重要组成部分。它使应用程序赏心悦目，同样用户友好。在本文中，我们将详细讨论铰链动画。在Flutter，有两种处理动画的方法，即：

一个pub包
动画生成器小部件

在本文中，我们将使用 Animated Builder 小部件。铰链动画是一种动画，其中元素可以随着突然移动而翻转。要实现相同的操作，请执行以下步骤：

在项目的 lib 文件夹中创建一个dart文件(例如， hinge_animation )。
添加一个FloatingActionButton来播放动画和一个文本来实现在铰链动画中的动画。dart文件。
现在使用_rotationAnimation属性创建一个带有CurvedAnimation的补间。
现在使用动画控制器来处理和创建动画实例。

让我们详细探讨这些步骤。

铰链动画。dart文件：

添加文本、 FloatingActionButton 、 AnimationController和曲线动画后，文件看起来像下面这样：

Dart

import 'dart:math';
  
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
  
  
//create a stateful widget
class HingeAnimation extends StatefulWidget {
  @override
  _HingeAnimationState createState() => _HingeAnimationState();
  
}
  
class _HingeAnimationState extends State with SingleTickerProviderStateMixin{
  // animation setup
  AnimationController _controller;
  Animation _rotationAnimation;
  Animation _slideAnimation;
  Animation _opacityAnimation;
  
  
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 2000),
    );
  
    _rotationAnimation = Tween(end: 0.15, begin: 0.0)
        .animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(
            0.0,
            0.5,
            curve: Curves.bounceInOut
        ),
      ),
    );
     // setrtup the Tween for creating curve
    _slideAnimation = Tween(begin: 100.0, end: 600.0).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(
            0.5,
            1.0,
            curve: Curves.fastOutSlowIn)
        ,
      ),
    );
      // setup opacticty as per need
    _opacityAnimation = Tween(begin: 1.0, end: 0.0).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(
            0.5,
            1.0,
            curve: Curves.fastOutSlowIn),
      ),
    );
  
  }
  
  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }
  
  // the animation widget
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green[300],
          automaticallyImplyLeading: false,
          title: Text("GeeksForGeeks"),
          centerTitle: true,
        ),
  
        body: AnimatedBuilder(
          animation: _slideAnimation,
          builder: (BuildContext context, Widget child) => Container(
            width: 200,
            height: 150,
            padding: EdgeInsets.all(0),
            margin: EdgeInsets.only(
              left: 100,
              top: _slideAnimation.value,
            ),
            child: RotationTransition(
              turns: _rotationAnimation,
              child: Center(
                child:
                Text('GeeksForGeeks', style: TextStyle(
                    fontSize: 25,
                    fontWeight: FontWeight.bold,
                    color: Color.fromRGBO(
                        300,
                        150,
                        500,
                        _opacityAnimation.value)
                ),),
              ),
            ),
          ),
        ),
        // the button
        floatingActionButtonLocation:
        FloatingActionButtonLocation.miniCenterFloat,
  
        floatingActionButton:
        FloatingActionButton(
          child: Icon(Icons.play_arrow),
          backgroundColor: Colors.green[300],
          onPressed: (){
            _controller.forward();
          },
        ),
    );
  }
}

Dart

import 'package:flutter/material.dart';
import 'package:flutter_hinge_animation.dart';
  
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      //theme: ThemeData.dark(),
      home: Splash(),
    );
  }
}

主要的。dart文件：

这是所有flutter应用程序的主要结构。经过上面的hinge_animation。 dart文件完成后，我们只需要在dart文件中导入相同的文件即可。 dart文件如下图所示：

Dart

import 'package:flutter/material.dart';
import 'package:flutter_hinge_animation.dart';
  
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      //theme: ThemeData.dark(),
      home: Splash(),
    );
  }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?