GraphX: lungs animation demo

lungs_demo.dart

/// roipeker 2020
///
import 'package:flutter/material.dart';
import 'package:graphx/graphx.dart';

import 'scene.dart';

class LungsMain extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: false,
        title: Text('lungs'),
        elevation: 0,
      ),
      body: Center(
        child: SceneBuilderWidget(
          builder: () => SceneController(front: LungsScene()),
        ),
      ),
    );
  }
}

lungs_scene.dart

import 'package:exampleGraphx/utils/svg_utils.dart';
import 'package:flutter/material.dart';
import 'package:graphx/graphx.dart';

class LungsScene extends GSprite {
  @override
  Future<void> addedToStage() async {
    final l1 = await SvgUtils.svgDataFromString(kLungLeftSvg);
    final l2 = await SvgUtils.svgDataFromString(kLungRightSvg);
    final lc = await SvgUtils.svgDataFromString(kTraqueaSvg);

    var lung1 = GSvgShape(l1);
    var lung2 = GSvgShape(l2);
    var traquea = GSvgShape(lc);

    var lung = GSprite();
    addChild(lung);

    lung.addChild(traquea);
    lung.addChild(lung1);
    lung.addChild(lung2);

    lung1.pivotX = 135;
    lung1.pivotY = 139;

    lung2.pivotX = 0;
    lung2.pivotY = 142;

    lung1.x = lung1.pivotX;
    lung1.y = 10 + lung1.pivotY;

    lung2.x = 200 + lung2.pivotX;
    lung2.y = 10 + lung2.pivotY;

    traquea.pivotY = 145;
    traquea.pivotX = 30;
    traquea.x = 139 + traquea.pivotX;
    traquea.y = traquea.pivotY;

    double totalDuration = 2;
    var baseY = stage.stageHeight / 2;
    bool isExpanded = false;

    void _twnTrackea() {
      var targetY = isExpanded ? traquea.pivotY : traquea.pivotY + 8;
      var targetScaleY = isExpanded ? 1 : .89;
      var targetScaleX = isExpanded ? 1 : 1.2;
      traquea.tween(
        duration: totalDuration,
        y: targetY,
        colorize: isExpanded ? Colors.black : Colors.blue.withOpacity(.4),
        scaleY: targetScaleY,
        scaleX: targetScaleX,
        ease: GEase.easeInOutCirc,
      );
    }

    void _twnLung(GSvgShape l, int dir) {
      var targetScaleX = isExpanded ? .9 : 1.23;
      var targetScaleY = isExpanded ? targetScaleX * .9 : 1;
      var targetSkew = isExpanded ? .033 : 0;
      targetSkew *= dir;
      l.tween(
        duration: totalDuration * .8,
        scaleY: targetScaleY,
        skewX: targetSkew,
        colorize: isExpanded
            ? Colors.black.withOpacity(0)
            : Colors.blue.withOpacity(.4),
      );
      l.tween(
        duration: totalDuration,
        scaleX: targetScaleX,
        overwrite: 0,
      );
    }

    void _twnAll() {
      isExpanded = !isExpanded;
      lung.tween(
        duration: totalDuration,
        y: isExpanded ? baseY - 10 : baseY,
        // scaleX: isExpanded ? 1.2 : 1,
        // scaleY: isExpanded ? .96 : 1,
        ease: GEase.easeOutBack,
      );
      _twnLung(lung1, 1);
      _twnLung(lung2, -1);
      _twnTrackea();
      GTween.delayedCall(totalDuration, _twnAll);
    }

    _twnAll();

    lung.alignPivot();
    lung.setPosition(
      stage.stageWidth / 2,
      stage.stageHeight / 2,
    );
  }
}

const kLungLeftSvg = '''
<svg width="149" height="297" viewBox="0 0 149 297" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M47.5692 288.963C13.9692 291.363 6.90252 271.963 7.56918 261.963C6.7276 231.161 5.41061 192.05 15.4139 143.572C25.2213 96.0441 41.3989 48.2108 69.9139 22.072C98.429 -4.06682 127.414 6.57202 134.569 50.9626C143.234 104.721 141.569 157.963 141.569 186.963C141.569 215.963 136.569 246.963 108.569 248.963C101.839 249.443 97.2462 251.831 93.5692 255.222C81.9492 265.94 79.4736 286.684 47.5692 288.963Z" fill="#F79090"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M112.974 3.61985C127.932 9.93423 137.739 26.6399 141.48 49.8487C149.145 97.3993 148.829 144.555 148.626 174.877C148.596 179.277 148.569 183.322 148.569 186.963C148.569 201.644 147.339 217.79 142.049 230.735C139.368 237.298 135.525 243.338 129.997 247.906C124.394 252.535 117.423 255.348 109.068 255.945C103.993 256.307 100.88 258.002 98.3151 260.368C96.0749 262.434 94.1428 265.109 91.7598 268.624C91.5254 268.969 91.2865 269.323 91.0426 269.685C88.9342 272.81 86.4593 276.478 83.4055 279.91C76.1552 288.059 65.8735 294.673 48.0679 295.945C29.8891 297.243 17.5164 292.7 9.80488 285.098C2.37595 277.774 0.214533 268.517 0.56354 261.852C0.547765 261.276 0.531825 260.697 0.515799 260.114C-0.323982 229.588 -1.40141 190.424 8.55836 142.157C18.3795 94.5624 34.8761 44.6941 65.1839 16.9119C80.4737 2.8962 97.7108 -2.82333 112.974 3.61985ZM107.529 16.5177C99.3821 13.0785 87.8692 15.109 74.644 27.2321C47.9216 51.7276 32.063 97.5258 22.2695 144.987C12.6404 191.651 13.679 229.458 14.5162 259.933C14.5331 260.549 14.5499 261.162 14.5666 261.771L14.5755 262.1L14.5537 262.428C14.3328 265.741 15.4287 270.982 19.6335 275.128C23.6886 279.125 31.6493 283.082 47.0705 281.98C61.1693 280.973 68.0776 276.076 72.9461 270.604C75.3415 267.912 77.2906 265.029 79.4639 261.814C79.6972 261.469 79.933 261.12 80.1723 260.767C82.5187 257.306 85.2535 253.369 88.8233 250.077C93.612 245.66 99.6842 242.579 108.07 241.98C113.716 241.577 117.869 239.765 121.079 237.113C124.363 234.4 127.021 230.502 129.089 225.44C133.3 215.136 134.569 201.281 134.569 186.963C134.569 183.229 134.596 179.116 134.625 174.672C134.822 144.278 135.121 98.3728 127.658 52.0766C124.244 30.8948 115.981 20.0857 107.529 16.5177Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.3444 196.913C31.5711 170.659 22.7448 142.449 18.0483 123.663L26.7796 121.481C31.2386 139.317 39.5321 165.921 50.5417 190.946C62.8333 192.406 80.8172 191.863 97.4155 185.83C114.987 179.444 130.76 167.037 137.079 144.364L145.749 146.78C138.468 172.907 120.086 187.167 100.49 194.289C84.6182 200.057 67.7914 201.229 54.8623 200.376C60.6572 212.508 67.0427 223.838 73.8668 233.155C82.0843 244.374 90.5815 252.18 99.0042 255.362L95.8236 263.782C84.9712 259.682 75.1965 250.201 66.606 238.473C57.9464 226.65 50.1253 212.035 43.3444 196.913Z" fill="black"/>
</svg>
''';

const kLungRightSvg = '''
<svg width="149" height="297" viewBox="0 0 149 297" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M101.129 288.963C134.729 291.363 141.796 271.963 141.129 261.963C141.971 231.161 143.288 192.05 133.284 143.572C123.477 96.0441 107.3 48.2108 78.7844 22.072C50.2693 -4.06682 21.2844 6.57202 14.1292 50.9626C5.464 104.721 7.12921 157.963 7.12921 186.963C7.12921 215.963 12.1292 246.963 40.1292 248.963C46.8596 249.443 51.4522 251.831 55.1292 255.222C66.7492 265.94 69.2248 286.684 101.129 288.963Z" fill="#F79090"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.7245 3.61985C20.7665 9.93423 10.9594 26.6399 7.21837 49.8487C-0.446259 97.3993 -0.130432 144.555 0.0726471 174.877C0.102112 179.277 0.129211 183.322 0.129211 186.963C0.129211 201.644 1.35966 217.79 6.64925 230.735C9.33078 237.298 13.1732 243.338 18.7018 247.906C24.3045 252.535 31.2758 255.348 39.6304 255.945C44.705 256.307 47.818 258.002 50.3833 260.368C52.6234 262.434 54.5556 265.109 56.9385 268.624C57.1729 268.969 57.4119 269.323 57.6558 269.685C59.7642 272.81 62.2391 276.478 65.2928 279.91C72.5432 288.059 82.8249 294.673 100.63 295.945C118.809 297.243 131.182 292.7 138.893 285.098C146.322 277.774 148.484 268.517 148.135 261.852C148.151 261.276 148.167 260.697 148.183 260.114C149.022 229.588 150.1 190.424 140.14 142.157C130.319 94.5624 113.822 44.6941 83.5145 16.9119C68.2246 2.8962 50.9876 -2.82333 35.7245 3.61985ZM41.1692 16.5177C49.3162 13.0785 60.8292 15.109 74.0544 27.2321C100.777 51.7276 116.635 97.5258 126.429 144.987C136.058 191.651 135.019 229.458 134.182 259.933C134.165 260.549 134.148 261.162 134.132 261.771L134.123 262.1L134.145 262.428C134.366 265.741 133.27 270.982 129.065 275.128C125.01 279.125 117.049 283.082 101.628 281.98C87.5291 280.973 80.6208 276.076 75.7523 270.604C73.3568 267.912 71.4078 265.029 69.2345 261.814C69.0012 261.469 68.7653 261.12 68.5261 260.767C66.1797 257.306 63.4449 253.369 59.8751 250.077C55.0864 245.66 49.0142 242.579 40.6279 241.98C34.9825 241.577 30.8289 239.765 27.6191 237.113C24.3351 234.4 21.6776 230.502 19.6091 225.44C15.3987 215.136 14.1292 201.281 14.1292 186.963C14.1292 183.229 14.1025 179.116 14.0736 174.672C13.876 144.278 13.5776 98.3728 21.04 52.0766C24.4542 30.8948 32.7171 20.0857 41.1692 16.5177Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M60.9418 192.577C42.1066 212.274 24.2017 217.398 12.6581 214.91L14.3436 207.09C22.1333 208.769 37.3784 205.643 55.1599 187.048C72.8647 168.533 92.6597 135.034 109.155 77.3994L116.846 79.6006C100.142 137.966 79.8536 172.8 60.9418 192.577Z" fill="black"/>
</svg>
''';

const kTraqueaSvg = '''
<svg width="74" height="167" viewBox="0 0 74 167" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.0008 0C41.5237 0 46.0008 4.47715 46.0008 10V130.342C47.1835 134.058 48.413 136.343 49.4856 137.801C50.7026 139.455 51.9815 140.413 53.621 141.224C55.2509 142.03 56.9216 142.572 59.4688 143.399C60.0862 143.6 60.755 143.817 61.4872 144.059C64.9422 145.199 69.2081 146.731 73.6906 149.452L63.311 166.548C60.7935 165.019 58.2469 164.051 55.2176 163.051C54.7775 162.905 54.3027 162.753 53.8005 162.591C51.186 161.75 47.828 160.671 44.7556 159.151C41.756 157.668 38.8158 155.699 36.1137 152.903C33.6679 155.577 30.9259 157.388 27.9721 158.642C25.4634 159.707 22.4027 160.443 20.3597 160.935C19.8241 161.064 19.3585 161.176 18.9911 161.272C16.7057 161.874 14.5786 162.598 12.1906 164.048C7.46975 166.914 4.67729 165.993 1.81105 161.272C7.50085 157 -2.90982 149.818 1.81104 146.952C6.42303 144.152 10.5459 142.814 13.9012 141.931C15.3318 141.554 16.3683 141.305 17.1771 141.111C18.5571 140.779 19.2743 140.607 20.1546 140.233C20.7261 139.99 21.2154 139.733 21.9716 138.606C22.8845 137.246 24.1303 134.654 25.5035 129.676C25.5343 128.712 25.7052 127.769 26.0008 126.874V10C26.0008 4.47715 30.478 0 36.0008 0Z" fill="black"/>
</svg>
''';