flutter 点击旋转动画_Flutter Animation Demo（简单翻转卡片示例）

最终效果

flip-card.gif

难点

翻页效果。

通过 Matrix4.identity()..setEntry(3, 2, 0.002) 设置翻页效果。

identity()初始化 4x4 矩阵。

setEntry(3, 2, 0.002) 将矩阵的第3行第2列设置为0.002。作用是类似设置物体到摄像机的距离，越远物体看起来越小，越近看起来物体越大。

卡片切割效果

ClipRect

布局规划

位置

层叠

用户视角状态

角度

上

第 1 层

显示

-

上

第 2 层

隐藏

-

下

第 1 层

显示

-

下

第 2 层

隐藏

垂直于屏幕

下 2 层的动画需要，转换角度，使其层面垂直于屏幕，达到隐藏效果，用以承接上层动画。

动画实现逻辑

布局分为 2 层堆栈，每层分上下 2 个卡片。

当数值变化时，只需要变更显示层和隐藏层的数值即可。

动画默认执行一次，需要使用 reset 和 forward 达到重启效果。

代码

import 'dart:math';

import 'package:flutter/material.dart';

class CurvePage extends StatefulWidget {

CurvePage({Key key}) : super(key: key);

@override

_CurvePageState createState() => _CurvePageState();

}

class _CurvePageState extends State {

@override

Widget build(BuildContext context) {

return Scaffold(