Flutter26.Animation5

最新推荐文章于 2024-06-06 22:02:38 发布

原创最新推荐文章于 2024-06-06 22:02:38 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

Flutter 专栏收录该内容

56 篇文章

订阅专栏

本文通过一个具体的Flutter应用实例，展示了如何使用动画控制器和曲线动画来创建复杂的动画效果。具体包括动画控制器的初始化、Tween动画的使用、CurvedAnimation的配置以及动画的重复播放。

ex:

import 'dart:math';

import 'package:flutter/material.dart';

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

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

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  Tween<double> _tween;
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController =
    AnimationController(vsync: this, duration: Duration(seconds: 5))
      ..repeat();
    _tween = Tween<double>(begin: 0.0, end: 1.0);
  }

  Animation get animOne => _tween.animate(
    CurvedAnimation(
      parent: _animationController,
      curve: Interval(
        0.0,
        0.125,
        curve: Curves.linear,
      ),
    ),
  );

  Animation get animTwo => _tween.animate(
    CurvedAnimation(
      parent: _animationController,
      curve: Interval(
        0.125,
        0.25,
        curve: Curves.linear,
      ),
    ),
  );

  Animation get animThree => _tween.animate(
    CurvedAnimation(
      parent: _animationController,
      curve: Interval(
        0.25,
        0.375,
        curve: Curves.linear,
      ),
    ),
  );

  Animation get animFour => _tween.animate(
    CurvedAnimation(
      parent: _animationController,
      curve: Interval(
        0.375,
        0.5,
        curve: Curves.linear,
      ),
    ),
  );

  Animation get animFive => _tween.animate(
    CurvedAnimation(
      parent: _animationController,
      curve: Interval(
        0.5,
        0.625,
        curve: Curves.linear,
      ),
    ),
  );

  Animation get animSix => _tween.animate(
    CurvedAnimation(
      parent: _animationController,
      curve: Interval(
        0.625,
        0.75,
        curve: Curves.linear,
      ),
    ),
  );

  Animation get animSeven => _tween.animate(
    CurvedAnimation(
      parent: _animationController,
      curve: Interval(
        0.75,
        0.875,
        curve: Curves.linear,
      ),
    ),
  );

  Animation get animEight => _tween.animate(
    CurvedAnimation(
      parent: _animationController,
      curve: Interval(
        0.875,
        1.0,
        curve: Curves.linear,
      ),
    ),
  );

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

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new AnimatedBrick(
              animations: [animOne, animTwo],
              controller: _animationController,
              marginLeft: 0.0,
              alignment: Alignment.centerLeft,
              isClockWise: true,
            ),
            new AnimatedBrick(
              animations: [animThree, animEight],
              controller: _animationController,
              marginLeft: 0.0,
              isClockWise: false,
            ),
            new AnimatedBrick(
              animations: [animFour, animSeven],
              controller: _animationController,
              marginLeft: 30.0,
              isClockWise: true,
            ),
            new AnimatedBrick(
              animations: [animFive, animSix],
              controller: _animationController,
              marginLeft: 30.0,
              isClockWise: false,
            ),
          ],
        ),
      ),
    );
  }
}

class AnimatedBrick extends AnimatedWidget {
  final AnimationController controller;
  final List<Animation> animations;
  final double marginLeft;
  final Alignment alignment;
  final bool isClockWise;

  AnimatedBrick({
    Key key,
    this.controller,
    this.animations,
    this.marginLeft,
    this.alignment = Alignment.centerRight,
    this.isClockWise,
  }) : super(key: key, listenable: controller);

  Matrix4 clockWise(animation) =>
      Matrix4.rotationZ(animation.value * pi * 2.0 * 0.5);

  Matrix4 antiClockWise(animation) =>
      Matrix4.rotationZ(-(animation.value * pi * 2.0 * 0.5));

  @override
  Widget build(BuildContext context) {
    var firstTransformation =
    isClockWise ? clockWise(animations[0]) : antiClockWise(animations[0]);
    var secondTransformation =
    isClockWise ? clockWise(animations[1]) : antiClockWise(animations[1]);

    return Transform(
        alignment: alignment,
        transform: firstTransformation,
        child: Transform(
            alignment: alignment,
            transform: secondTransformation,
            child: BrickWidget(marginLeft: marginLeft)));
  }
}

class BrickWidget extends StatelessWidget {
  final double marginLeft;

  const BrickWidget({
    Key key,
    this.marginLeft = 15.0,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(left: marginLeft),
      width: 40.0,
      height: 10.0,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(15.0),
        color: Color(0xffff0000),
      ),
    );
  }
}

输出：