当前位置: 首页 > news >正文

Flutter 旋转动画 线性变化的旋转动画

直接上代码

图片自己添加一张就好了

import 'dart:math';import 'package:flutter/material.dart';import 'package:flutter/animation.dart';void main() => runApp(MyApp());
//旋转动画
class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(color: Colors.blue,home: MyAnimatedWidget(),);}
}class MyAnimatedWidget extends StatefulWidget {_MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}class _MyAnimatedWidgetState extends State<MyAnimatedWidget>with SingleTickerProviderStateMixin {late final AnimationController _repeatController;late final Animation<double> _animation;void initState() {super.initState();_repeatController = AnimationController(duration: const Duration(seconds: 3),vsync: this,)..repeat(); // 设置动画重复播放// 创建一个从0到1的补间动画   end: 1 * pi   转速_animation = Tween<double>(begin: 0, end: 1).animate(_repeatController);}Widget build(BuildContext context) {// 你的UI构建代码,使用_animation来控制动画// ...// 示例按钮来停止和继续动画return Column(mainAxisAlignment: MainAxisAlignment.center,children: [Center(child: AnimatedSwitcher(duration: const Duration(milliseconds: 500),transitionBuilder: (child, animation) {return RotationTransition(turns: _animation!,child: child,);},child: Image.asset('assets/shenji2.png',),),),Text('Animation Example'),SizedBox(height: 20,),ElevatedButton(onPressed: () {stopAnimation(); // 停止动画},child: Text('Stop Animation'),),SizedBox(height: 20,),ElevatedButton(onPressed: () {resumeAnimation(); // 继续动画},child: Text('Resume Animation'),),SizedBox(height: 20,),ElevatedButton(onPressed: () {resumeAnimationZY(); // 继续动画},child: Text('Resume Animation2'),),],);}void stopAnimation() {_repeatController.stop();}void resumeAnimation() {_repeatController.repeat(reverse: false);}void resumeAnimationZY() {///左右转动_repeatController.repeat(reverse: true);}void dispose() {_repeatController.dispose(); // 不要忘记在dispose中释放资源super.dispose();}
}

创建一个动画组件给其他界面调用自己回收内存
不规则图片的中心旋转动画

import 'dart:math';import 'package:flutter/material.dart';class AnimatedBox extends StatefulWidget {// final Color color;// final Duration duration;const AnimatedBox({Key? key,}) : super(key: key);_AnimatedBoxState createState() => _AnimatedBoxState();
}class _AnimatedBoxState extends State<AnimatedBox>with SingleTickerProviderStateMixin {late final AnimationController _repeatController;late final Animation<double> _animation;void initState() {super.initState();//启动动画_repeatController = AnimationController(duration: const Duration(seconds: 3),vsync: this,)..repeat(); // 设置动画重复播放// 创建一个从0到1的补间动画_animation =Tween<double>(begin: 0, end: 1 * pi).animate(_repeatController);}Widget build(BuildContext context) {return AnimatedBuilder(animation: _repeatController,builder: (BuildContext context, Widget? child) {return Center(child: Stack(children: [Positioned(top: 0,bottom: 0,left: 0,right: 0,child: Center(child: Image.asset('assets/ic_oxygen_pump_c_10.png', // 你想要居中的组件),),),Positioned(top: 0,bottom: 1.5,left: 0,right: 6,child: Center(child: AnimatedSwitcher(duration: const Duration(milliseconds: 500),transitionBuilder: (child, animation) {return RotationTransition(turns: _animation,child: child,);},child: Image.asset('assets/ic_oxygen_pump_c_polat.png', // 你想要居中的组件),),),),],),);///放大动画/*return Transform.scale(scale: _animation.value,child: Container(width: 100,height: 100,color: widget.color,),);*/},);}void dispose() {///回收动画_repeatController.dispose();super.dispose();}
}

图片是白色的

在这里插入图片描述
在这里插入图片描述

http://www.lryc.cn/news/325749.html

相关文章:

  • 【Web应用技术基础】HTML(5)——案例1:展示简历信息
  • ethers.js:wallet(创建钱包,导入助记词,导入私钥)
  • 面试笔记——Java集合篇
  • 在 IntelliJ IDEA 中使用 Terminal 执行 git log 命令后的退出方法
  • 架构整洁之道-读书总结
  • 蓝桥杯学习笔记(贪心)
  • 【无标题】如何使用 MuLogin 设置代理
  • 芒果YOLOv8改进135:主干篇GCNet,统一为全局上下文建模global context结构,即插即用,助力小目标检测,轻量化的同时精度性能涨点
  • 全面:vue.config.js 的完整配置
  • 海量数据处理项目-账号微服务注册Nacos+配置文件增加
  • DNS 服务 Unbound 部署最佳实践
  • 力扣HOT100 - 42. 接雨水
  • 攻防世界-baby_web
  • 数据可视化基础与应用-04-seaborn库从入门到精通01-02
  • 学习 zustand
  • 竞赛 opencv python 深度学习垃圾图像分类系统
  • vsto worksheet中查找关键字【关键字】获取对应的整列 union成一个range
  • flask_restful规范返回值之参数设置
  • 基于java+springboot+vue实现的超市管理系统(文末源码+Lw+ppt)23-354
  • AI大模型学习:开启智能时代的新篇章
  • 【字符串】字符串哈希
  • MacOS快速安装FFmpeg、ffprobe、ffplay
  • 数据结构 之 树习题 力扣oj(附加思路版)
  • 闭包学习,闭包和高阶函数
  • Linux实战笔记(五) shell
  • TCP Wrappers 的使用
  • 数据结构——lesson11排序之快速排序
  • Nacos部署(二)Linux部署Nacos2.3.x集群环境
  • RuoYi 自定义字典列表页面编码翻译
  • GAMES101 学习4