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

码脑

发布于 2019-05-25 09:06:21

1.1K0

发布于 2019-05-25 09:06:21

文章被收录于专栏：大前端

动画相关主要对象
缩放动画
非线性缩放动画
淡入淡出
非线性淡入淡出
平移动画
非线性平移动画

动画相关主要对象

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",
                  ),
                ),

              ],
            ),
          )
      ),
    );
  }

}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019.05.24 ，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度

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

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

动画相关主要对象

缩放动画

非线性缩放动画

淡入淡出

非线性淡入淡出

平移动画

非线性平移动画

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐