动画

动画

精美的动画效果会使得 UI 更加直观，可以提升整体视觉效果，使应用显得更加精致，从而提升用户体验。Flutter 的动画框架使得开发者能够更方便地实现简单和复杂的动画。Flutter SDK 含有很多 Material Design widget。其中已经包括了标准的动画效果，你可以很方便地自定义这些效果。

在 React Native 中，动画 API 用于创建动画。

在 Flutter 中，使用 Animation 类和 AnimationController 类实现动画。Animation 是抽象类，内含其当前的值和它的状态（已完成或者已取消）。AnimationController 类可以正向或者反向播放动画或者停止动画以及为动画设置特定值来自定义动画。

如何添加一个简单的淡入动画效果？

在下面的 React Native 示例中，有一个动画组件，也就是 FadeInView，它是使用 Animated API 创建的。定义了初始的不透明状态，最终状态和动画切换之间的时间间隔。在 Animated 中添加了动画组件，不透明状态 fadeAnim 映射到我们想要添加动画效果的文本组件上，然后在开始动画的时候调用 start()。

// React Native
class FadeInView extends React.Component {
  state = {
    fadeAnim: new Animated.Value(0) // Initial value for opacity: 0
  };
  componentDidMount() {
    Animated.timing(this.state.fadeAnim, {
      toValue: 1,
      duration: 10000
    }).start();
  }
  render() {
    return (
      <Animated.View style={{...this.props.style, opacity: this.state.fadeAnim }} >
        {this.props.children}
      </Animated.View>
    );
  }
}
    ...
<FadeInView>
  <Text> Fading in </Text>
</FadeInView>
    ...

要在 Flutter 中实现相同的动画效果，创建一个 AnimationController 对象，叫它 controller，并且指定时间间隔。在默认配置下， AnimationController 会在给定时间间隔线性的生成从 0.0 到 1.0 的数值。当你的程序可以显示新一帧画面的时候，AnimationController 会生成一个新的值。通常，这个频率在每秒 60 个值。

当定义 AnimationController 的时候，你必须传入一个 vsync 对象。vsync 会防止屏幕显示区域之外的动画消耗不必要的资源。你可以通过添加 TickerProviderStateMixin 到类定义中来使用有状态的对象。AnimationController 需要传入一个 TickerProvider，它是通过构造函数里的 vsync 参数进行配置的。

Tween 定义了起始和结束值之间或者输入段到输出段之间的过渡。如果要在动画中使用 Tween 对象，调用 Tween 对象的 animate 方法，然后把它赋给你要修改的 Animation 对象。

在这个例子中，用到了 FadeTransition widget，它的 opacity 属性映射到了 animation 对象上。

要开始动画，使用 controller.forward()。其它的操作也可以使用控制器里的方法，比如 fling() 或者 repeat()。这个例子里，FlutterLogo widget 被用于 FadeTransition widget 中。

// Flutter
import 'package:flutter/material.dart';

void main() {
  runApp(Center(child: LogoFade()));
}

class LogoFade extends StatefulWidget {
  _LogoFadeState createState() => _LogoFadeState();
}

class _LogoFadeState extends State<LogoFade> with TickerProviderStateMixin {
  Animation animation;
  AnimationController controller;

  initState() {
    super.initState();
    controller = AnimationController(
        duration: const Duration(milliseconds: 3000), vsync: this);
    final CurvedAnimation curve =
    CurvedAnimation(parent: controller, curve: Curves.easeIn);
    animation = Tween(begin: 0.0, end: 1.0).animate(curve);
    controller.forward();
  }

 widget build(BuildContext context) {
    return FadeTransition(
      opacity: animation,
      child: Container(
        height: 300.0,
        width: 300.0,
        child: FlutterLogo(),
      ),
    );
  }

  dispose() {
    controller.dispose();
    super.dispose();
  }
}

Android

iOS

如何为卡片添加滑动动画呢？

在 React Native 中，无论 PanResponder 或者第三方库都可被用于滑动动画。

在 Flutter 中，要添加滑动动画，使用 Dismissible widget 封装其它子 widget 即可。

child: Dismissible(
  key: key,
  onDismissed: (DismissDirection dir) {
    cards.removeLast();
  },
  child: Container(
    ...
  ),
),

Android

iOS