Flutter 动画使用

作者 : 开心源码 本文共1898个字,预计阅读时间需要5分钟 发布时间: 2022-05-12 共177人阅读

旋转动画

这里写图片形容

透明度变换动画

这里写图片形容

在Android中,可以通过View.animate()对视图进行动画解决,那在Flutter中怎么才能对Widget进行解决
在Flutter中,可以通过动画库给widget增加动画。

在Android中,您可以通过XML创立动画或者在视图上调用.animate()。在Flutter中,您可以将widget包装到Animation中。

与Android类似,在Flutter中,您有一个AnimationController和一个Interpolator, 它是Animation类的扩展,例如CurvedAnimation。您将控制器和动画传递到AnimationWidget中,并告诉控制器启动动画。

import 'package:flutter/material.dart';void main() {  runApp(new FadeAppTest());}class FadeAppTest extends StatelessWidget {  @override  Widget build(BuildContext context) {    return new MaterialApp(      title: 'Fade Demo',      theme: new ThemeData(        primarySwatch: Colors.green,      ),      home: new MyFadeTest(title: 'Fade Demo'),    );  }}class MyFadeTest extends StatefulWidget {  MyFadeTest({Key key, this.title}) : super(key: key);  final String title;  @override  State createState() => new _MyFadeTest();}class _MyFadeTest extends State<MyFadeTest> with TickerProviderStateMixin {  AnimationController controller;//动画控制器  CurvedAnimation curved;//曲线动画,动画插值,  bool forward = true;  @override  void initState() {//初始化,当当前widget被插入到树中时调用    super.initState();    controller = new AnimationController(        vsync: this, duration: const Duration(seconds: 3));    curved = new CurvedAnimation(parent: controller, curve: Curves.bounceOut);//模仿小球自由落体运动轨迹//    controller.forward();//放在这里开启动画 ,打开页面就播放动画  }  @override  Widget build(BuildContext context) {    return new Scaffold(      appBar: new AppBar(        title: new Text('FadeTest'),      ),      body: new Center(//        child: new FadeTransition(//透明度动画//          opacity: curved,//将动画传入不同的动画widget//          child: new FlutterLogo(//创立一个小部件,用于绘制Flutter徽标//            size: 200.0,//          ),//        ),        child: new RotationTransition(//旋转动画          turns: curved,          child: new FlutterLogo(            size: 200.0,          ),        ),      ),      floatingActionButton: new FloatingActionButton(        onPressed: () {          if (forward)            controller.forward();//向前播放动画          else            controller.reverse();//向后播放动画          forward = !forward;        },        tooltip: 'fade',        child: new Icon(Icons.track_changes),      ),    );  }}

flutter录播.png

欢迎加入Android圈子,圈内会不定时免费升级源码及面试资料,包括前沿技术flutter等专题资料,圈友也积极交流划水~大家共同进步学习点击链接加入群聊【Android技术交流】:https://jq.qq.com/?_wv=1027&k=5udvbvD 群号:432457261

flutter专题.png

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Flutter 动画使用

发表回复