美文网首页FlutterFlutter
Flutter跨平台移动端开发丨Animation、Animat

Flutter跨平台移动端开发丨Animation、Animat

作者: MobMsg | 来源:发表于2019-05-24 22:14 被阅读8次

    目录

    1. 动画相关主要对象
    2. 缩放动画
    3. 非线性缩放动画
    4. 淡入淡出
    5. 非线性淡入淡出
    6. 平移动画
    7. 非线性平移动画

    动画相关主要对象

    • Animation：可分为线性动画、非线性动画、步进函数动画或其它动画。通过 addListener 方法可以添加监听器，每当动画帧发生改变时均会调用，一般会配合 setState 方法用作UI重建。通过 addStatusListener 方法可添加状态改变监听器，如：动画开始、动画结束等
    • AnimationController：动画控制器，动画的开始、结束、停止、反向均由它控制，方法对应为：forward、stop、reverse
    • Curve：可使用此对象将动画设置为为匀速、加速或先加速后减速等。Curve 可以为线性或非线性

    缩放动画

    import 'package:flutter/material.dart';

/**
 * @des Animation Zoom
 * @author liyongli 20190516
 * */
class AnimationZoom extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {
    return new _AnimationZoomState();
  }

}

/**
 * @des Animation Zoom State
 * @author liyongli 20190516
 * */
class _AnimationZoomState extends State<AnimationZoom> with TickerProviderStateMixin{

  // 放大动画
  Animation<double> animationEnlarge;
  // 放大动画控制器
  AnimationController enlargeAnimationController;
  // 缩小动画
  Animation<double> animationNarrow;
  // 缩小动画控制器
  AnimationController narrowAnimationController;
  
  @override
  void initState() {
    super.initState();
    
    // 定义动画持续时长
    enlargeAnimationController = new AnimationController(vsync: this,duration:Duration(seconds: 3) );
    narrowAnimationController = new AnimationController(vsync: this, duration: Duration(seconds: 3));

    // 定义缩放动画范围
    animationEnlarge = new Tween(begin: 10.0, end: 150.0).animate(enlargeAnimationController)
      ..addListener((){
        setState(() {});
      })
      ..addStatusListener((status){
        if(status == AnimationStatus.completed){
          narrowAnimationController.forward();
        }
      });

    animationNarrow = new Tween(begin: 150.0, end: 10.0).animate(narrowAnimationController)
      ..addListener((){
        setState(() {});
      });

    // 开启动画
    enlargeAnimationController.forward();

  }

  @override
  void dispose() {
    // 释放资源
    enlargeAnimationController.dispose();
    narrowAnimationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(

        appBar: AppBar(
          title: Text("AnimationEnlarge"),
        ),

        body: Container(
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[

              // 放大动画
              Padding(
                padding: EdgeInsets.all(10.0),
                child: Image.asset("images/image_widget_test.jpg",
                  width: animationEnlarge.value,
                  height: animationEnlarge.value,
                ),
              ),

              // 缩小动画
              Padding(
                padding: EdgeInsets.all(10.0),
                child: Image.asset("images/image_widget_test.jpg",
                  width: animationNarrow.value,
                  height: animationNarrow.value,
                ),
              ),

            ],
          ),
        )
      ),
    );
  }

}

    非线性缩放动画

    import 'package:flutter/material.dart';

/**
 * @des Animation Curved
 * @author liyongli 20190516
 * */
class AnimationCurved extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {
    return new _AnimationCurvedState();
  }

}

/**
 * @des Animation Curved State
 * @author liyongli 20190516
 * */
class _AnimationCurvedState extends State<AnimationCurved> with TickerProviderStateMixin{

  // 放大动画
  Animation<double> animationCurved;
  // 放大动画控制器
  AnimationController animationCurvedController;

  @override
  void initState() {
    super.initState();

    // 定义动画持续时长
    animationCurvedController = new AnimationController(vsync: this,duration:Duration(seconds: 3) );

    // 定义具体曲线
    CurvedAnimation curve = new CurvedAnimation(parent: animationCurvedController, curve: Curves.elasticOut);
    
    // 定义缩放动画范围
    animationCurved = new Tween(begin: 100.0, end: 350.0).animate(curve)
      ..addListener((){
        setState(() {});
      });

    // 开启动画
    animationCurvedController.forward();

  }

  @override
  void dispose() {
    // 释放资源
    animationCurvedController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(

        appBar: AppBar(
          title: Text("AnimationEnlarge"),
        ),

        body: Container(
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.all(10.0),
                child: Image.asset("images/image_widget_test.jpg",
                  width: animationCurved.value,
                  height: animationCurved.value,
                ),
              ),
            ],
          ),
        )
      ),
    );
  }

}

    淡入淡出

    import 'package:flutter/material.dart';

/**
 * @des Animation Fade
 * @author liyongli 20190517
 * */
class AnimationFade extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {
    return new _AnimationFadeState();
  }

}

/**
 * @des Animation Fade State
 * @author liyongli 20190517
 * */
class _AnimationFadeState extends State<AnimationFade> with TickerProviderStateMixin{

  // 初始 animationType 为 1.0 为可见状态，为 0.0 时不可见
  double animationType = 1.0;
  // 动画持续时长
  int animationSeconds = 2;
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(

        appBar: AppBar(
          title: Text("AnimationFade"),
        ),

        body: Container(
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[

              new AnimatedOpacity(
                  opacity: animationType,
                  duration: new Duration(seconds: animationSeconds),
                  child:new Container(
                    child:new Text("轻轻地来轻轻地走轻轻地来轻轻地走轻轻地来轻轻地走轻轻地来轻轻地走轻轻地来轻轻地走轻轻地来轻轻地走轻轻地来轻轻地走轻轻地来轻轻地走轻轻地来轻轻地走轻轻地来轻轻地走") ,)
              ),

              new RaisedButton(
                child:new Container(
                  child: new Text("淡入 and 淡出"),
                ) ,
                onPressed: _changeAnimationType,//添加点击事件
              ),
            ],
          ),
        )
      ),
    );
  }

  // 修改文字显示状态（赋值倒置）
  _changeAnimationType() {
    setState(
       () => animationType = animationType == 0 ? 1.0 : 0.0
    );
  }

}

    非线性淡入淡出

    import 'package:flutter/material.dart';

/**
 * @des Animation Fade
 * @author liyongli 20190517
 * */
class AnimationFade extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {
    return new _AnimationFadeState();
  }

}

/**
 * @des Animation Fade State
 * @author liyongli 20190517
 * */
class _AnimationFadeState extends State<AnimationFade> with TickerProviderStateMixin{

  // 初始animationType为1.0为可见状态，为0.0时不可见
  double animationType = 1.0;
  // 动画持续时长
  int animationSeconds = 2;
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(

        appBar: AppBar(
          title: Text("AnimationFade"),
        ),

        body: Container(
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[

              new AnimatedOpacity(
                  opacity: animationType,
                  curve: Curves.elasticInOut, // 这里是设置非线性动画的关键
                  duration: new Duration(seconds: animationSeconds),
                  child:new Container(
                    child:new Text("轻轻地来轻轻地走轻轻地来轻轻地走轻轻地来轻轻地走轻轻地来轻轻地走轻轻地来轻轻地走轻轻地来轻轻地走轻轻地来轻轻地走轻轻地来轻轻地走轻轻地来轻轻地走轻轻地来轻轻地走") ,)
              ),
              new RaisedButton(
                child:new Container(
                  child: new Text("淡入 and 淡出"),
                ) ,
                onPressed: _changeAnimationType,//添加点击事件
              ),
            ],
          ),
        )
      ),
    );
  }

  // 修改文字显示状态
  _changeAnimationType() {
    setState(
       () => animationType = animationType == 0 ? 1.0 : 0.0
    );
  }

}

    平移动画

    import 'package:flutter/material.dart';

/**
 * @des Animation XY
 * @author liyongli 20190517
 * */
class AnimationXY extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {
    return new _AnimationXYState();
  }

}

/**
 * @des Animation XY State
 * @author liyongli 20190517
 * */
class _AnimationXYState extends State<AnimationXY> with TickerProviderStateMixin{

  // 左右移动动画
  Animation<EdgeInsets> animationX;
  // 左右移动动画控制器
  AnimationController xAnimationController;
  // 上下移动动画
  Animation<EdgeInsets> animationY;
  // 上下移动动画控制器
  AnimationController yAnimationController;

  @override
  void initState() {
    super.initState();

    // 定义动画持续时长
    xAnimationController = new AnimationController(vsync: this,duration:Duration(seconds: 3) );
    yAnimationController = new AnimationController(vsync: this, duration: Duration(seconds: 3));

    // 定义平移动画范围
    animationX = new EdgeInsetsTween(begin: EdgeInsets.only(left: 0.0), end: EdgeInsets.only(left: 100.0)).animate(xAnimationController)
      ..addListener((){
        setState(() {});
      });

    animationY = new EdgeInsetsTween(begin: EdgeInsets.only(top: 0.0), end: EdgeInsets.only(top: 100.0)).animate(yAnimationController)
      ..addListener((){
        setState(() {});
      });

    // 开启动画
    xAnimationController.forward();
    yAnimationController.forward();

  }

  @override
  void dispose() {
    // 释放资源
    xAnimationController.dispose();
    yAnimationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(

          appBar: AppBar(
            title: Text("animationX"),
          ),

          body: Container(
            alignment: Alignment.center,
            child: Column(
              children: <Widget>[

                // 左右移动
                Padding(
                  padding: animationX.value,
                  child: Image.asset("images/image_widget_test.jpg",
                  ),
                ),

                // 上下移动
                Padding(
                  padding: animationY.value,
                  child: Image.asset("images/image_widget_test.jpg",
                  ),
                ),

              ],
            ),
          )
      ),
    );
  }

}

    非线性平移动画

    import 'package:flutter/material.dart';

/**
 * @des Animation XY
 * @author liyongli 20190517
 * */
class AnimationXY extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {
    return new _AnimationXYState();
  }

}

/**
 * @des Animation XY State
 * @author liyongli 20190517
 * */
class _AnimationXYState extends State<AnimationXY> with TickerProviderStateMixin{

  // 左右移动动画
  Animation<EdgeInsets> animationX;
  // 左右移动动画控制器
  AnimationController xAnimationController;
  // 上下移动动画
  Animation<EdgeInsets> animationY;
  // 上下移动动画控制器
  AnimationController yAnimationController;

  @override
  void initState() {
    super.initState();

    // 定义动画持续时长（使用 CurvedAnimation 设置非线性动画）
    xAnimationController = new AnimationController(vsync: this,duration:Duration(seconds: 3) );
    yAnimationController = new AnimationController(vsync: this, duration: Duration(seconds: 3));

    // 定义平移动画范围
    animationX = new EdgeInsetsTween(begin: EdgeInsets.only(left: 0.0), end: EdgeInsets.only(left: 100.0)).animate(CurvedAnimation(parent: xAnimationController, curve: Interval(0.1, 0.6)))
      ..addListener((){
        setState(() {});
      });

    animationY = new EdgeInsetsTween(begin: EdgeInsets.only(top: 0.0), end: EdgeInsets.only(top: 100.0)).animate(CurvedAnimation(parent: yAnimationController, curve: Interval(0.1, 0.6)))
      ..addListener((){
        setState(() {});
      });

    // 开启动画
    xAnimationController.forward();
    yAnimationController.forward();

  }

  @override
  void dispose() {
    // 释放资源
    xAnimationController.dispose();
    yAnimationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(

          appBar: AppBar(
            title: Text("animationX"),
          ),

          body: Container(
            alignment: Alignment.center,
            child: Column(
              children: <Widget>[

                // 左右移动
                Padding(
                  padding: animationX.value,
                  child: Image.asset("images/image_widget_test.jpg",
                  ),
                ),

                // 上下移动
                Padding(
                  padding: animationY.value,
                  child: Image.asset("images/image_widget_test.jpg",
                  ),
                ),

              ],
            ),
          )
      ),
    );
  }

}

    本篇到此完结，更多 Flutter 跨平台移动端开发 原创内容持续更新中~

    期待您 关注 / 点赞 / 收藏 向着 大前端工程师 晋级！

    相关文章

      网友评论

        本文标题：Flutter跨平台移动端开发丨Animation、Animat

        本文链接：https://www.haomeiwen.com/subject/ymjbaqtx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        Flutter

        Flutter

        关于我们|服务条款|联系我们|Flutter跨平台移动端开发丨Animation、Animat|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！