【Flutter】【packages】simple_animations 简单的实现动画

news2024/9/25 23:11:39

在这里插入图片描述

package:simple_animations

导入包到项目中去

  • 可以实现简单的动画,
  • 快速实现,不需要自己过多的设置
  • 有多种样式可以实现
  • [ ]

功能:

简单的用例:具体需要详细可以去 pub 链接地址

1. PlayAnimationBuilder

PlayAnimationBuilder<double>(

      tween: Tween(begin: 100.0, end: 200.0), //数值是100 到00
      duration: const Duration(seconds: 1), // 动画的时间,是1s 完成动画
      builder: (context, value, _) {
        return Container(
          width: value, // 使用tween 的数值
          height: value,
          color: Colors.blue,
        );
      },
      onCompleted: () {
        // 结束的时候做什么操作
      },
      onStarted: (){
        //在开始的时候运行什么,做什么操作
      },
    )

新增child 参数,静态的child ,减少资源的浪费,其他的build 同样可以这样使用

PlayAnimationBuilder<double>(
      tween: Tween(begin: 50.0, end: 200.0),
      duration: const Duration(seconds: 5),
      child: const Center(child: Text('Hello!')), // pass in static child
      builder: (context, value, child) {
        return Container(
          width: value,
          height: value,
          color: Colors.green,
          child: child, // use child inside the animation
        );
      },
    )

2.LoopAnimationBuilder 循环动画

该用例,是一个正方形旋转360度,并且持续的转动

Center(
      child: LoopAnimationBuilder<double>(
        tween: Tween(begin: 0.0, end: 2 * pi), // 0° to 360° (2π)
        duration: const Duration(seconds: 2), // for 2 seconds per iteration
        builder: (context, value, _) {
          return Transform.rotate(
            angle: value, // use value
            child: Container(color: Colors.blue, width: 100, height: 100),
          );
        },
      ),
    )

3.MirrorAnimationBuilder 镜像动画

        MirrorAnimationBuilder<double>(
          tween:
              Tween(begin: -100.0, end: 100.0), // x 轴的数值
          duration: const Duration(seconds: 2),//动画时间
          curve: Curves.easeInOutSine, // 动画曲线
          builder: (context, value, child) {
            return Transform.translate(
              offset: Offset(value, 0), // use animated value for x-coordinate
              child: child,
            );
          },
          child: Container(
            width: 100,
            height: 100,
            color: Colors.green,
          ),
        )

4.CustomAnimationBuilder 自定义动画,可以在stl 无状态里面使用

        CustomAnimationBuilder<double>(
          control: Control.mirror,
          tween: Tween(begin: 100.0, end: 200.0),
          duration: const Duration(seconds: 2),
          delay: const Duration(seconds: 1),//延迟1s才开始动画
          curve: Curves.easeInOut,
          startPosition: 0.5,
          animationStatusListener: (status) {
          //状态的监听,可以在这边做一些操作
            debugPrint('status updated: $status');
          },
          builder: (context, value, child) {
            return Container(
              width: value,
              height: value,
              color: Colors.blue,
              child: child,
            );
          },
          child: const Center(
              child: Text('Hello!',
                  style: TextStyle(color: Colors.white, fontSize: 24))),
        )

带控制器

        CustomAnimationBuilder<double>(
          duration: const Duration(seconds: 1),
          control: control, // bind state variable to parameter
          tween: Tween(begin: -100.0, end: 100.0),
          builder: (context, value, child) {
            return Transform.translate(
              // animation that moves childs from left to right
              offset: Offset(value, 0),
              child: child,
            );
          },
          child: MaterialButton(
            // there is a button
            color: Colors.yellow,
            onPressed: () {
              setState(() {
                control = (control == Control.play)
                    ? Control.playReverse
                    : Control.play;
              });
            }, // clicking button changes animation direction
            child: const Text('Swap'),
          ),
        )

5.MovieTween 补间动画,可并行的动画

可以一个widget 多个动画同时或者不同时的运行

final MovieTween tween = MovieTween()
  ..scene(
          begin: const Duration(milliseconds: 0),
          end: const Duration(milliseconds: 1000))
      .tween('width', Tween(begin: 0.0, end: 100.0)) //0-1秒的的 width 的数值
  ..scene(
          begin: const Duration(milliseconds: 1000),
          end: const Duration(milliseconds: 1500))
      .tween('width', Tween(begin: 100.0, end: 200.0)) //1-1。5秒的的 width 的数值
  ..scene(
          begin: const Duration(milliseconds: 0),
          duration: const Duration(milliseconds: 2500))
      .tween('height', Tween(begin: 0.0, end: 200.0)) //0-2.5秒的的 height 的数值
  ..scene(
          begin: const Duration(milliseconds: 0),
          duration: const Duration(milliseconds: 3000)) //0-3 秒的的 颜色 的数值
      .tween('color', ColorTween(begin: Colors.red, end: Colors.blue));




 PlayAnimationBuilder<Movie>(
   tween: tween, // Pass in tween
   duration: tween.duration, // Obtain duration
   builder: (context, value, child) {
     return Container(
       width: value.get('width'), // Get animated values
       height: value.get('height'),
       color: value.get('color'),
     );
   },
 ),

6.MovieTween 串行的动画补间

简单的意思就是,按照设计的动画一个一个执行,按照顺序来执行,可以设置不同的数值或者是参数来获取,然后改变动画

final signaltween = MovieTween()
  ..tween('x', Tween(begin: -100.0, end: 100.0),
          duration: const Duration(seconds: 1))
      .thenTween('y', Tween(begin: -100.0, end: 100.0),
          duration: const Duration(seconds: 1))
      .thenTween('x', Tween(begin: 100.0, end: -100.0),
          duration: const Duration(seconds: 1))
      .thenTween('y', Tween(begin: 100.0, end: -100.0),
          duration: const Duration(seconds: 1));


LoopAnimationBuilder<Movie>(
  tween: signaltween,
  builder: (ctx, value, chid) {
    return Transform.translate(
        offset: Offset(value.get('x'), value.get('y')),
        child: Container(
          width: 100,
          height: 100,
          color: Colors.green,
        ));
  },
  duration: signaltween.duration,
),

总的代码:

import 'dart:math';

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

void main() {
  runApp(const MaterialApp(home: Scaffold(body: MyPage())));
}

class MyPage extends StatefulWidget {
  const MyPage({Key? key}) : super(key: key);

  
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  Control control = Control.play; // state variable

  void toggleDirection() {
    // toggle between control instructions
    setState(() {
      control = (control == Control.play) ? Control.playReverse : Control.play;
    });
  }

  
  Widget build(BuildContext context) {
//电影样式的动画
    final MovieTween tween = MovieTween()
      ..scene(
              begin: const Duration(milliseconds: 0),
              end: const Duration(milliseconds: 1000))
          .tween('width', Tween(begin: 0.0, end: 100.0)) //0-1秒的的 width 的数值
      ..scene(
              begin: const Duration(milliseconds: 1000),
              end: const Duration(milliseconds: 1500))
          .tween('width', Tween(begin: 100.0, end: 200.0)) //1-1。5秒的的 width 的数值
      ..scene(
              begin: const Duration(milliseconds: 0),
              duration: const Duration(milliseconds: 2500))
          .tween('height', Tween(begin: 0.0, end: 200.0)) //0-2.5秒的的 height 的数值
      ..scene(
              begin: const Duration(milliseconds: 0),
              duration: const Duration(milliseconds: 3000)) //0-3 秒的的 颜色 的数值
          .tween('color', ColorTween(begin: Colors.red, end: Colors.blue));

    final signaltween = MovieTween()
      ..tween('x', Tween(begin: -100.0, end: 100.0),
              duration: const Duration(seconds: 1))
          .thenTween('y', Tween(begin: -100.0, end: 100.0),
              duration: const Duration(seconds: 1))
          .thenTween('x', Tween(begin: 100.0, end: -100.0),
              duration: const Duration(seconds: 1))
          .thenTween('y', Tween(begin: 100.0, end: -100.0),
              duration: const Duration(seconds: 1));

    return SingleChildScrollView(
      child: Column(
        children: [
          LoopAnimationBuilder<Movie>(
            tween: signaltween,
            builder: (ctx, value, chid) {
              return Transform.translate(
                  offset: Offset(value.get('x'), value.get('y')),
                  child: Container(
                    width: 100,
                    height: 100,
                    color: Colors.green,
                  ));
            },
            duration: signaltween.duration,
          ),

          PlayAnimationBuilder<Movie>(
            tween: tween, // Pass in tween
            duration: tween.duration, // Obtain duration
            builder: (context, value, child) {
              return Container(
                width: value.get('width'), // Get animated values
                height: value.get('height'),
                color: value.get('color'),
              );
            },
          ),
          PlayAnimationBuilder<double>(
            tween: Tween(begin: 100.0, end: 200.0), //数值是100 到00
            duration: const Duration(seconds: 1), // 动画的时间,是1s 完成动画
            builder: (context, value, _) {
              return Container(
                width: value, // 使用tween 的数值
                height: value,
                color: Colors.blue,
              );
            },
            onCompleted: () {
              // 结束的时候做什么操作
            },
            onStarted: () {
              //在开始的时候运行什么,做什么操作
            },
          ),
          MirrorAnimationBuilder<Color?>(
            tween:
                ColorTween(begin: Colors.red, end: Colors.blue), // 颜色的渐变 红色到蓝色
            duration: const Duration(seconds: 5), // 动画时长5秒
            builder: (context, value, _) {
              return Container(
                color: value, // 使用该数值
                width: 100,
                height: 100,
              );
            },
          ),

          //实现一个绿色箱子从左到右,从右到走
          MirrorAnimationBuilder<double>(
            tween: Tween(begin: -100.0, end: 100.0), // x 轴的数值
            duration: const Duration(seconds: 2), //动画时间
            curve: Curves.easeInOutSine, // 动画曲线
            builder: (context, value, child) {
              return Transform.translate(
                offset: Offset(value, 0), // use animated value for x-coordinate
                child: child,
              );
            },
            child: Container(
              width: 100,
              height: 100,
              color: Colors.green,
            ),
          ),
          CustomAnimationBuilder<double>(
            control: Control.mirror,
            tween: Tween(begin: 100.0, end: 200.0),
            duration: const Duration(seconds: 2),
            delay: const Duration(seconds: 1),
            curve: Curves.easeInOut,
            startPosition: 0.5,
            animationStatusListener: (status) {
              debugPrint('status updated: $status');
            },
            builder: (context, value, child) {
              return Container(
                width: value,
                height: value,
                color: Colors.blue,
                child: child,
              );
            },
            child: const Center(
                child: Text('Hello!',
                    style: TextStyle(color: Colors.white, fontSize: 24))),
          ),

          CustomAnimationBuilder<double>(
            duration: const Duration(seconds: 1),
            control: control, // bind state variable to parameter
            tween: Tween(begin: -100.0, end: 100.0),
            builder: (context, value, child) {
              return Transform.translate(
                // animation that moves childs from left to right
                offset: Offset(value, 0),
                child: child,
              );
            },
            child: MaterialButton(
              // there is a button
              color: Colors.yellow,
              onPressed: () {
                setState(() {
                  control = (control == Control.play)
                      ? Control.playReverse
                      : Control.play;
                });
              }, // clicking button changes animation direction
              child: const Text('Swap'),
            ),
          )
        ],
      ),
    );
  }
}

混合多种动画

import 'dart:math';

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

void main() {
  runApp(const MaterialApp(home: Scaffold(body: MyPage())));
}

class MyPage extends StatefulWidget {
  const MyPage({Key? key}) : super(key: key);

  
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  Control control = Control.play; // state variable

  
  Widget build(BuildContext context) {
    final x = MovieTweenProperty<double>();
    final y = MovieTweenProperty<double>();
    final color = MovieTweenProperty<Color>();
    final tween = MovieTween()
      ..scene(
              begin: const Duration(seconds: 0),
              duration: const Duration(seconds: 1))
          .tween(x, Tween(begin: -100.0, end: 100.0),
              curve: Curves.easeInOutSine)
          .tween(color, ColorTween(begin: Colors.red, end: Colors.yellow))
      ..scene(
              begin: const Duration(seconds: 1),
              duration: const Duration(seconds: 1))
          .tween(y, Tween(begin: -100.0, end: 100.0),
              curve: Curves.easeInOutSine)
      ..scene(
              begin: const Duration(seconds: 2),
              duration: const Duration(seconds: 1))
          .tween(x, Tween(begin: 100.0, end: -100.0),
              curve: Curves.easeInOutSine)
      ..scene(
              begin: const Duration(seconds: 1),
              end: const Duration(seconds: 3))
          .tween(color, ColorTween(begin: Colors.yellow, end: Colors.blue))
      ..scene(
              begin: const Duration(seconds: 3),
              duration: const Duration(seconds: 1))
          .tween(y, Tween(begin: 100.0, end: -100.0),
              curve: Curves.easeInOutSine)
          .tween(color, ColorTween(begin: Colors.blue, end: Colors.red));

    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: LoopAnimationBuilder<Movie>(
            tween: tween, // Pass in tween
            duration: tween.duration, // Obtain duration
            builder: (context, value, child) {
              return Transform.translate(
                // Get animated offset
                offset: Offset(x.from(value), y.from(value)),
                child: Container(
                  width: 100,
                  height: 100,
                  color: color.from(value), // Get animated color
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

边运动便改变颜色

同原生的动画混合开发

以下代码实现,一个container 的宽高的尺寸变化

class MyPage extends StatefulWidget {
  const MyPage({Key? key}) : super(key: key);

  
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> with AnimationMixin {
  //同原生的混合使用
  // Control control = Control.play; // state variable
  late Animation<double> size;

  
  void initState() {
    super.initState();
    // controller 不需要重新定义,AnimationMixin 里面已经自动定义了个
    size = Tween(begin: 0.0, end: 200.0).animate(controller);
    controller.play(); //运行
  }

  
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: Container(
            width: size.value,
            height: size.value,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

实现图

多个控制器控制一个widget的实现多维度的动画实现

import 'dart:math';

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

void main() {
  runApp(const MaterialApp(home: Scaffold(body: MyPage())));
}

class MyPage extends StatefulWidget {
  const MyPage({Key? key}) : super(key: key);

  
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> with AnimationMixin {
  //同原生的混合使用

  late AnimationController widthcontrol; //宽度控制
  late AnimationController heigthcontrol; //高度控制器
  late AnimationController colorcontrol; //颜色控制器

  late Animation<double> width; //宽度控制
  late Animation<double> heigth; //高度控制
  late Animation<Color?> color; //颜色控制

  
  void initState() {
// mirror 镜像
    widthcontrol = createController()
      ..mirror(duration: const Duration(seconds: 5));
    heigthcontrol = createController()
      ..mirror(duration: const Duration(seconds: 3));
    colorcontrol = createController()
      ..mirror(duration: const Duration(milliseconds: 1500));

    width = Tween(begin: 100.0, end: 200.0).animate(widthcontrol);
    heigth = Tween(begin: 100.0, end: 200.0).animate(heigthcontrol);
    color = ColorTween(begin: Colors.green, end: Colors.black)
        .animate(colorcontrol);

    super.initState();
  }

  
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: Container(
            width: width.value,
            height: heigth.value,
            color: color.value,
          ),
        ),
      ),
    );
  }
}

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/854018.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

winform控件 datagridview分页功能

主要实现页面跳转、动态改变每页显示行数、返回首末页、上下页功能&#xff0c;效果图如下&#xff1a; 主代码如下&#xff1a; namespace Paging {public partial class Form1 : Form{public Form1(){InitializeComponent();}private int currentPageCount;//记录当前页行数…

ApplicationContext在Spring Boot中是如何创建的?

一、ApplicationContext在Spring Boot中是如何创建的&#xff1f; 1. SpringApplication ApplicationContextFactory有三个实现类&#xff0c;分别是AnnotationConfigReactiveWebServerApplicationContext.Factory、AnnotationConfigServletWebServerApplicationContext.Facto…

nginx动态加载配置文件的方法

1. main函数调用ngx_get_options函数 2. ngx_get_options(int argc, char *const *argv)中会解析用户输入命令。 case ‘s’: if (*p) { ngx_signal (char *) p; } else if (argv[i]) {ngx_signal argv[i];} else {ngx_log_stderr(0, "option \"-s\" requi…

将数组按照某个对象分类,结果值的json的值按照value递增排序

const arr [ { value: 532, lable: 1, type: “a” }, { value: 132, lable: 24, type: “b” }, { value: 432, lable: 13, type: “b” }, { value: 1812, lable: 5, type: “b” }, { value: 1932, lable: 8, type: “c” }, { value: 132, lable: 4, type: “a” }, { val…

CNN经典网络模型之GoogleNet论文解读

目录 1. GoogleNet 1.1 Inception模块 1.1.1 1x1卷积 1.2 辅助分类器结构 1.3 GoogleNet网络结构图 1. GoogleNet GoogleNet&#xff0c;也被称为Inception-v1&#xff0c;是由Google团队在2014年提出的一种深度卷积神经网络架构&#xff0c;专门用于图像分类和特征提取任…

一个竖杠在python中代表什么,python中一竖代表什么

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;一个竖杠在python中代表什么&#xff0c;python中一竖代表什么&#xff0c;今天让我们一起来看看吧&#xff01; 维基百科页面是错误的&#xff0c;我已经更正了。|和&不是布尔运算符&#xff0c;即使它们是急切运算…

Intune 应用程序管理

由于云服务提供了增强的安全性、稳定性和灵活性&#xff0c;越来越多的组织正在采用基于云的解决方案来满足他们的需求。这正是提出Microsoft Endpoint Manager等解决方案的原因&#xff0c;它结合了SCCM和Microsoft Intune&#xff0c;以满足本地和基于云的端点管理。 与 Int…

uni——月份选择(横向滑动tab,横向滚动选择日期)

案例展示 案例代码 已封装成组件使用 <template><view><view class"tabBox"><scroll-view scroll-x"true" :scroll-left"scrollLeft" :scroll-with-animation"true"><view class"box"><…

AtcoderABC313场

A - To Be SaikyoA - To Be Saikyo 题目大意 有N个人&#xff0c;编号从1到N。每个人有一个整数分数&#xff0c;称为编程能力&#xff1b;第i个人的编程能力是Pi分。人1需要多少分才能成为最强者&#xff1f;换句话说&#xff0c;最小非负整数x是多少&#xff0c;使得对于所有…

10万SUV大魔王?市场再添新成员,北汽新魔方正式上市,鸿蒙加持

根据报道&#xff0c;北京汽车宣布新一款名为新魔方的车型已经在位于北京汽车株洲基地的超级工厂开始大规模生产。这款车型是继北京新EU5 PLUS之后的又一重要产品&#xff0c;被认为将对10万级SUV市场带来颠覆性影响。 据报道&#xff0c;北汽魔方是首款搭载鸿蒙HarmonyOS智能操…

【UE4 RTS】05-Fixing Camera Movement

前言 本篇实现了两个功能&#xff1a;一是解决CameraPawn旋转后&#xff0c;前进方向没变的问题&#xff1b;二是玩家可选择提高CameraPawn的移动速度 效果 一、解决CameraPawn旋转后&#xff0c;前进方向没变的问题 二、玩家可提高CameraPawn移动速度 步骤 一、解决Camera…

IDEA离线安装插件

一、背景 有时&#xff0c;在ideal中我们无法获取到插件&#xff0c;可能是因为内网或者无法访问插件库等原因&#xff0c;此时我们需要离线安装插件 IDEA离线仓库&#xff1a;https://plugins.jetbrains.com/ 二、步骤 2.1 下载插件&#xff1a;https://plugins.jetbrains.…

20230809在WIN10下使用python3处理Google翻译获取的SRT格式字幕(DOCX)

20230809在WIN10下使用python3处理Google翻译获取的SRT格式字幕&#xff08;DOCX&#xff09; 2023/8/9 19:02 由于喜欢看纪录片等外文视频&#xff0c;通过剪映/PR2023/AUTOSUB识别字幕之后&#xff0c;可以通过google翻译识别为简体中文的DOCX文档。 DOCX文档转换为TXT文档之…

收藏!新增6省!2023年度杰青、优青名单汇总(附下载)

2023省级自然科学基金项目名单 杰青、优青项目是国家及各省市为促进青年科学和技术人才的成长&#xff0c;加速培养造就一批进入世界科技前沿的优秀学术带头人而特别设立的科学基金&#xff0c;是各个科研单位竞相争夺的青年科技人才。 按照惯例&#xff0c;2023年国家自然基…

百度资深PMO阚洁受邀为第十二届中国PMO大会演讲嘉宾

百度在线网络技术&#xff08;北京&#xff09;有限公司资深PMO阚洁女士受邀为由PMO评论主办的2023第十二届中国PMO大会演讲嘉宾&#xff0c;演讲议题&#xff1a;运筹于股掌之间&#xff0c;决胜于千里之外 —— 360斡旋项目干系人。大会将于8月12-13日在北京举办&#xff0c;…

Java基础(八)二维数组

数组 二、二维数组 1. 二维数组使用步骤 定义二维数组 格式&#xff1a;数据类型 数组名[][]; 或 数据类型[][] 数组名; int scores[][]; int[][] scores;为二维数组元素分配内存 格式&#xff1a;数据类型 数组名[][]; 或 数据类型[][] 数组名; int scores[][]; scores …

MinGW-w64的安装详细步骤(c/c++的编译器gcc、g++的windows版,win10、win11真实可用)

文章目录 1、MinGW的定义2、MinGW的主要组件3、MinGW-w64下载与安装3.1、下载解压安装地址3.2、MinGW-w64环境变量的设置 4、验证MinGW是否安装成功5、编写一段简单的代码验证下6、总结 1、MinGW的定义 MinGW&#xff08;Minimalist GNU for Windows&#xff09; 是一个用于 W…

无菌车间ar实景巡检为企业带来了诸多好处

随着科技的不断发展&#xff0c;AR增强现实技术逐渐渗透到各个行业&#xff0c;为生产制造带来了前所未有的便捷。特别是在制造业中&#xff0c;AR增强现实技术的应用正逐步改变着传统的生产模式&#xff0c;为企业带来了诸多优势。 传统的巡视方式往往需要人工实地查看设备&am…

多进程利用TCP进行信息群发功能

/服务器的代码 #include <sys/types.h> #include <sys/socket.h> #include <netinet/in.h> #include <arpa/inet.h> #include <unistd.h> #include <string.h> #include <stdio.h> #include <stdlib.h> #define SEVER_IP &quo…

抖音商品上架有攻略:详细介绍步骤与注意事项

抖音是一款非常流行的短视频分享平台&#xff0c;也是一个非常适合进行商品销售的平台。上架商品是在抖音上进行电商销售的重要一环&#xff0c;下面不若与众将介绍抖音商品的上架流程和注意事项。 1. 注册账号和认证&#xff1a;首先&#xff0c;你需要在抖音平台上注册一个账…