谷歌不收录网站,自己做的网站如何加视频,河北网站建设电话,网上商城取名package#xff1a;simple_animations
导入包到项目中去 可以实现简单的动画#xff0c; 快速实现#xff0c;不需要自己过多的设置 有多种样式可以实现[ ] 功能#xff1a;
简单的用例#xff1a;具体需要详细可以去 pub 链接地址
1. PlayAnimationBuilder
PlayAnima…
packagesimple_animations
导入包到项目中去 可以实现简单的动画 快速实现不需要自己过多的设置 有多种样式可以实现[ ] 功能
简单的用例具体需要详细可以去 pub 链接地址
1. PlayAnimationBuilder
PlayAnimationBuilderdouble(tween: Tween(begin: 100.0, end: 200.0), //数值是100 到00duration: const Duration(seconds: 1), // 动画的时间是1s 完成动画builder: (context, value, _) {return Container(width: value, // 使用tween 的数值height: value,color: Colors.blue,);},onCompleted: () {// 结束的时候做什么操作},onStarted: (){//在开始的时候运行什么做什么操作},)新增child 参数静态的child ,减少资源的浪费其他的build 同样可以这样使用
PlayAnimationBuilderdouble(tween: Tween(begin: 50.0, end: 200.0),duration: const Duration(seconds: 5),child: const Center(child: Text(Hello!)), // pass in static childbuilder: (context, value, child) {return Container(width: value,height: value,color: Colors.green,child: child, // use child inside the animation);},)2.LoopAnimationBuilder 循环动画
该用例是一个正方形旋转360度并且持续的转动
Center(child: LoopAnimationBuilderdouble(tween: Tween(begin: 0.0, end: 2 * pi), // 0° to 360° (2π)duration: const Duration(seconds: 2), // for 2 seconds per iterationbuilder: (context, value, _) {return Transform.rotate(angle: value, // use valuechild: Container(color: Colors.blue, width: 100, height: 100),);},),)3.MirrorAnimationBuilder 镜像动画 MirrorAnimationBuilderdouble(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-coordinatechild: child,);},child: Container(width: 100,height: 100,color: Colors.green,),)4.CustomAnimationBuilder 自定义动画可以在stl 无状态里面使用 CustomAnimationBuilderdouble(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))),)带控制器 CustomAnimationBuilderdouble(duration: const Duration(seconds: 1),control: control, // bind state variable to parametertween: Tween(begin: -100.0, end: 100.0),builder: (context, value, child) {return Transform.translate(// animation that moves childs from left to rightoffset: Offset(value, 0),child: child,);},child: MaterialButton(// there is a buttoncolor: Colors.yellow,onPressed: () {setState(() {control (control Control.play)? Control.playReverse: Control.play;});}, // clicking button changes animation directionchild: 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));PlayAnimationBuilderMovie(tween: tween, // Pass in tweenduration: tween.duration, // Obtain durationbuilder: (context, value, child) {return Container(width: value.get(width), // Get animated valuesheight: 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));LoopAnimationBuilderMovie(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);overrideStateMyPage createState() _MyPageState();
}class _MyPageState extends StateMyPage {Control control Control.play; // state variablevoid toggleDirection() {// toggle between control instructionssetState(() {control (control Control.play) ? Control.playReverse : Control.play;});}overrideWidget 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: [LoopAnimationBuilderMovie(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,),PlayAnimationBuilderMovie(tween: tween, // Pass in tweenduration: tween.duration, // Obtain durationbuilder: (context, value, child) {return Container(width: value.get(width), // Get animated valuesheight: value.get(height),color: value.get(color),);},),PlayAnimationBuilderdouble(tween: Tween(begin: 100.0, end: 200.0), //数值是100 到00duration: const Duration(seconds: 1), // 动画的时间是1s 完成动画builder: (context, value, _) {return Container(width: value, // 使用tween 的数值height: value,color: Colors.blue,);},onCompleted: () {// 结束的时候做什么操作},onStarted: () {//在开始的时候运行什么做什么操作},),MirrorAnimationBuilderColor?(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,);},),//实现一个绿色箱子从左到右从右到走MirrorAnimationBuilderdouble(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-coordinatechild: child,);},child: Container(width: 100,height: 100,color: Colors.green,),),CustomAnimationBuilderdouble(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))),),CustomAnimationBuilderdouble(duration: const Duration(seconds: 1),control: control, // bind state variable to parametertween: Tween(begin: -100.0, end: 100.0),builder: (context, value, child) {return Transform.translate(// animation that moves childs from left to rightoffset: Offset(value, 0),child: child,);},child: MaterialButton(// there is a buttoncolor: Colors.yellow,onPressed: () {setState(() {control (control Control.play)? Control.playReverse: Control.play;});}, // clicking button changes animation directionchild: 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);overrideStateMyPage createState() _MyPageState();
}class _MyPageState extends StateMyPage {Control control Control.play; // state variableoverrideWidget build(BuildContext context) {final x MovieTweenPropertydouble();final y MovieTweenPropertydouble();final color MovieTweenPropertyColor();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: LoopAnimationBuilderMovie(tween: tween, // Pass in tweenduration: tween.duration, // Obtain durationbuilder: (context, value, child) {return Transform.translate(// Get animated offsetoffset: 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);overrideStateMyPage createState() _MyPageState();
}class _MyPageState extends StateMyPage with AnimationMixin {//同原生的混合使用// Control control Control.play; // state variablelate Animationdouble size;overridevoid initState() {super.initState();// controller 不需要重新定义AnimationMixin 里面已经自动定义了个size Tween(begin: 0.0, end: 200.0).animate(controller);controller.play(); //运行}overrideWidget 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);overrideStateMyPage createState() _MyPageState();
}class _MyPageState extends StateMyPage with AnimationMixin {//同原生的混合使用late AnimationController widthcontrol; //宽度控制late AnimationController heigthcontrol; //高度控制器late AnimationController colorcontrol; //颜色控制器late Animationdouble width; //宽度控制late Animationdouble heigth; //高度控制late AnimationColor? color; //颜色控制overridevoid 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();}overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(backgroundColor: Colors.white,body: Center(child: Container(width: width.value,height: heigth.value,color: color.value,),),),);}
}
