将CSS动画转移到flutter项目中的更好方法

Question

我最近与其他设计师合作。他们曾经从codepen提供了一些需要应用于当前项目的CSS动画示例。动画可以简单也可以复杂。例如：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: black;
}

.music {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 300px;
  height: 200px;
}

.music .bar {
  width: 12px;
  height: 2px;
  border-radius: 10px;
  background-color: white;
  animation: up_down 1.5s ease-in-out infinite;
}

@keyframes up_down {
  0%,
  100% {
    height: 2px;
  }
  50% {
    height: 80px;
  }
}

.music .bar:nth-child(1) {
  background-color: purple;
  animation-delay: 1s;
}

.music .bar:nth-child(2) {
  background-color: crimson;
  animation-delay: 0.8s;
}

.music .bar:nth-child(3) {
  background-color: deeppink;
  animation-delay: 0.6s;
}

.music .bar:nth-child(4) {
  background-color: orange;
  animation-delay: 0.4s;
}

.music .bar:nth-child(5) {
  background-color: gold;
  animation-delay: 0.2s;
}

.music .bar:nth-child(6) {
  background-color: gold;
  animation-delay: 0.2s;
}

.music .bar:nth-child(7) {
  background-color: orange;
  animation-delay: 0.4s;
}

.music .bar:nth-child(8) {
  background-color: deeppink;
  animation-delay: 0.6s;
}

.music .bar:nth-child(9) {
  background-color: crimson;
  animation-delay: 0.8s;
}

.music .bar:nth-child(10) {
  background-color: purple;
  animation-delay: 1s;
}

<div class='music'>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
</div>

我曾经用Flutter Canvas制作过动画，但也想知道是否有更好的方法将CSS动画应用到Flutter项目中（以前应用到网站时非常容易）

Answer 1

首先： 将此代码写入 asset 文件夹内的 .html 文件中

<div class='music'>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
</div>


<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: black;
  }

  .music {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 300px;
    height: 200px;
  }

  .music .bar {
    width: 12px;
    height: 2px;
    border-radius: 10px;
    background-color: white;
    animation: up_down 1.5s ease-in-out infinite;
  }

  @keyframes up_down {

    0%,
    100% {
      height: 2px;
    }

    50% {
      height: 80px;
    }
  }

  .music .bar:nth-child(1) {
    background-color: purple;
    animation-delay: 1s;
  }

  .music .bar:nth-child(2) {
    background-color: crimson;
    animation-delay: 0.8s;
  }

  .music .bar:nth-child(3) {
    background-color: deeppink;
    animation-delay: 0.6s;
  }

  .music .bar:nth-child(4) {
    background-color: orange;
    animation-delay: 0.4s;
  }

  .music .bar:nth-child(5) {
    background-color: gold;
    animation-delay: 0.2s;
  }

  .music .bar:nth-child(6) {
    background-color: gold;
    animation-delay: 0.2s;
  }

  .music .bar:nth-child(7) {
    background-color: orange;
    animation-delay: 0.4s;
  }

  .music .bar:nth-child(8) {
    background-color: deeppink;
    animation-delay: 0.6s;
  }

  .music .bar:nth-child(9) {
    background-color: crimson;
    animation-delay: 0.8s;
  }

  .music .bar:nth-child(10) {
    background-color: purple;
    animation-delay: 1s;
  }
</style>

其次：安装webview_flutter包，然后写入以下内容：

import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';

class HtmlWidgetExample extends StatefulWidget {
  const HtmlWidgetExample({super.key});

  @override
  State<HtmlWidgetExample> createState() => _HtmlWidgetExampleState();
}

class _HtmlWidgetExampleState extends State<HtmlWidgetExample> {
  String? htmlContent;

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

  loadHtml() async {
    htmlContent = await rootBundle.loadString('assets/yourFile.html');
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    if (htmlContent == null) return const SizedBox();
    return WebView(
      initialUrl: Uri.dataFromString(
        htmlContent!,
        mimeType: 'text/html',
        encoding: Encoding.getByName('utf-8'),
      ).toString(),
      backgroundColor: Colors.transparent,
      javascriptMode: JavascriptMode.unrestricted,
      onPageFinished: (String url) {},
    );
  }
}