CSS3 转换，深入理解Flutter动画原理，前端基础图形

/* 定义一个简单的动画 */
@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}
 
/* 应用动画到一个元素上 */
div {
  width: 100px;
  height: 100px;
  animation-name: example; /* 指定使用的动画名称 */
  animation-duration: 4s; /* 指定动画完成一个周期所需的时间 */
  animation-timing-function: linear; /* 动画的速度曲线 */
  animation-iteration-count: infinite; /* 动画无限次数播放 */
  animation-direction: alternate; /* 动画在每次迭代中反向播放 */
}

在Flutter中，我们可以使用AnimationController和Tween来实现类似的动画效果。以下是一个简单的示例：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<Color> animation;
 
  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: const Duration(seconds: 4),
      vsync: this,
    )..repeat(reverse: true);
 
    animation = ColorTween(begin: Colors.red, end: Colors.yellow).animate(controller);
  }
 
  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedBuilder(
        animation: controller,
        builder: (context, child) {
          return Container(
            width: 100,
            height: 100,
            color: animation.value,
          );
        },
      ),
    );
  }
}

在这个示例中，我们创建了一个AnimationController，设置了动画的时长和重复方式。然后，我们使用ColorTween来创建一个颜色的变化动画，并将其应用到一个Container上。AnimatedBuilder则负责在动画每次更新时重新构建widget，以反映当前动画的状态。这个例子展示了如何在Flutter中实现和CSS3转换类似的动画效果。