Animierter Hintergrund

Moderne App mit Power Apps erstellen

Ich zeige dir, wie du einen animierten Hintergrund und eine moderne Eingabemaske in Power Apps erstellen kannst. Dazu kombinierest du eine animierte SVG Grafik mit einem HTML Steuerelement, um ein ansprechendes und funktionales Design zu entwickeln.

Schritt 1: Animierte SVG Grafik

Um eine animierte SVG Grafik zu erstellen, kannst du Tools wie SVGWave verwenden. Diese Plattform ermöglicht es dir, Wellenformen zu generieren und direkt als SVG Code zu exportieren. Einen Beispielcode findest du am Ende dieses Beitrags.

Schritt 2: SVG Code in Power Apps einfügen

Den SVG Code kannst du jetzt im Hintergrund deiner App hinzufügen. Nutze dazu am besten die BackgroundImage Eigenschaft des Bildschirms. Um die SVG Animation korrekt anzuzeigen, musst du den Code noch anpassen und erweitern.

• " Ersetzen durch ' im SVG Code
  Klicke dazu am besten Strg+H im Code um das Menü für Suchen & Ersetzen zu öffnen und trage die gewünschte Änderung ein.
• Erweitere den Code:

Screen
BackgroundImage = "data:image/svg+xml;uft8," & EncodeUrl("
SVG Code
")

Schritt 3: Farben anpassen

Du kannst die Hintergrundfarbe des Bildschirms sowie bei Bedarf die Farben der animierten Grafik festlegen. Suche dazu im Code die stop-color Eigenschaften und ändere diese auf den gewünschten HexCode.

In meine Fall möchte ich Farbe 1 mit #942D89 und Farbe 2 mit #F3E0EC festlegen.

Schritt 4: Eingabemaske mit modernem Design

Füge einen Container hinzu, den du mittig zentrierst.

Container
X = (Parent.Width -Self.Width) / 2
Y= (Parent.Height -Self.Height) / 2

Erweitere den Container mit einem Vertikalen Container, in dem du alle notwendigen Steuerelemente für die Eingabemaske hinzufügst. Über den Vertikalen Katalog kannst du die Steuerelemente anpassen und verteilen.

Schritt 5: Glaseeffekt mit HTML Steuerelement

Ein Glaseffekt lässt den Hintergrund leicht verschwommen aussehen und kann helfen, den Fokus auf die Eingabemaske zu lenken und das Design noch weiter zu modernisieren.

Füge dazu ein HTML Steuerelement im Hintergrund des Containers ein. Dieses Steuerelement kannst du jetzt mit einem Blur Effekt belegen.

HtmlText Steuerelement
HtmlText =
"<div style='
    width:" & Parent.Width - 11 & "px;
    height:" & Parent.Height - 11 & "px;
    background:rgba(0,0,0,0.6);
    border-radios:30px;
    backdrop-filter:blur(20px)
    '></div>"

Ich hoffe dieses Tutorial hilft dir dabei, deine Apps besser zu designen und Nutzerfreundlicher zu gestalten.

Melde dich gerne für meinen Newsletter an, in dem ich dir Tipps und Tricks rund um Power Apps & Power Automate zusende.

 Hier gehts zum Detailvideo:


Beispielcode für eine animierte SVG Grafik:

<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 690" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150"><style>
          .path-0{
            animation:pathAnim-0 4s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
          }
          @keyframes pathAnim-0{
            0%{
              d: path("M 0,700 L 0,175 C 48.89041566472004,184.5602885606321 97.78083132944008,194.12057712126418 172,178 C 246.21916867055992,161.87942287873582 345.7670903469598,120.0779800755754 426,135 C 506.2329096530402,149.9220199244246 567.1508072827207,221.5675025764342 632,241 C 696.8491927172793,260.4324974235658 765.6296805221573,227.65200961868774 839,232 C 912.3703194778427,236.34799038131226 990.3304706286501,277.8244589488148 1049,249 C 1107.6695293713499,220.17554105118515 1147.0484369632427,121.0501545860529 1209,97 C 1270.9515630367573,72.9498454139471 1355.4757815183787,123.97492270697356 1440,175 L 1440,700 L 0,700 Z");
            }
            25%{
              d: path("M 0,700 L 0,175 C 71.59876331157676,129.25833047062866 143.19752662315352,83.5166609412573 204,110 C 264.8024733768465,136.4833390587427 314.8086568189626,235.19168670559944 390,237 C 465.1913431810374,238.80831329440056 565.5678461009962,143.7165922363449 639,120 C 712.4321538990038,96.2834077636551 758.9199587770524,143.94194434902093 819,146 C 879.0800412229476,148.05805565097907 952.7523187907934,104.5156303675713 1027,90 C 1101.2476812092066,75.4843696324287 1176.0707660597734,89.99553418069391 1245,109 C 1313.9292339402266,128.0044658193061 1376.9646169701132,151.50223290965306 1440,175 L 1440,700 L 0,700 Z");
            }
            50%{
              d: path("M 0,700 L 0,175 C 90.09824802473378,197.8560632085194 180.19649604946756,220.71212641703883 240,208 C 299.80350395053244,195.28787358296117 329.31226382686356,147.00755754036413 384,138 C 438.68773617313644,128.99244245963587 518.554448643078,159.25764342150464 592,192 C 665.445551356922,224.74235657849536 732.4699416008244,259.9618687736173 803,237 C 873.5300583991756,214.0381312263827 947.5657849536242,132.8948814840261 1024,96 C 1100.4342150463758,59.1051185159739 1179.2669185846787,66.45860529027826 1249,87 C 1318.7330814153213,107.54139470972174 1379.3665407076605,141.27069735486089 1440,175 L 1440,700 L 0,700 Z");
            }
            75%{
              d: path("M 0,700 L 0,175 C 63.4057025077293,176.3555479216764 126.8114050154586,177.71109584335278 192,175 C 257.1885949845414,172.28890415664722 324.16008244589483,165.5111645482652 389,175 C 453.83991755410517,184.4888354517348 516.5482652009617,210.2442459635864 596,219 C 675.4517347990383,227.7557540364136 771.6468567502577,219.5118515973892 851,193 C 930.3531432497423,166.4881484026108 992.8643077980075,121.70834764685674 1047,99 C 1101.1356922019925,76.29165235314326 1146.895912057712,75.6547578151838 1211,92 C 1275.104087942288,108.3452421848162 1357.552043971144,141.6726210924081 1440,175 L 1440,700 L 0,700 Z");
            }
            100%{
              d: path("M 0,700 L 0,175 C 48.89041566472004,184.5602885606321 97.78083132944008,194.12057712126418 172,178 C 246.21916867055992,161.87942287873582 345.7670903469598,120.0779800755754 426,135 C 506.2329096530402,149.9220199244246 567.1508072827207,221.5675025764342 632,241 C 696.8491927172793,260.4324974235658 765.6296805221573,227.65200961868774 839,232 C 912.3703194778427,236.34799038131226 990.3304706286501,277.8244589488148 1049,249 C 1107.6695293713499,220.17554105118515 1147.0484369632427,121.0501545860529 1209,97 C 1270.9515630367573,72.9498454139471 1355.4757815183787,123.97492270697356 1440,175 L 1440,700 L 0,700 Z");
            }
          }</style><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#942d89"></stop><stop offset="95%" stop-color="#f3e0ec"></stop></linearGradient></defs><path d="M 0,700 L 0,175 C 48.89041566472004,184.5602885606321 97.78083132944008,194.12057712126418 172,178 C 246.21916867055992,161.87942287873582 345.7670903469598,120.0779800755754 426,135 C 506.2329096530402,149.9220199244246 567.1508072827207,221.5675025764342 632,241 C 696.8491927172793,260.4324974235658 765.6296805221573,227.65200961868774 839,232 C 912.3703194778427,236.34799038131226 990.3304706286501,277.8244589488148 1049,249 C 1107.6695293713499,220.17554105118515 1147.0484369632427,121.0501545860529 1209,97 C 1270.9515630367573,72.9498454139471 1355.4757815183787,123.97492270697356 1440,175 L 1440,700 L 0,700 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.53" class="transition-all duration-300 ease-in-out delay-150 path-0"></path><style>
          .path-1{
            animation:pathAnim-1 4s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
          }
          @keyframes pathAnim-1{
            0%{
              d: path("M 0,700 L 0,408 C 73.6496049467537,392.4074201305393 147.2992098935074,376.81484026107864 220,397 C 292.7007901064926,417.18515973892136 364.4527653727241,473.14805908622475 441,465 C 517.5472346272759,456.85194091377525 598.8897286155959,384.59292339402265 649,369 C 699.1102713844041,353.40707660597735 717.9883201648918,394.48024733768466 791,395 C 864.0116798351082,395.51975266231534 991.1569907248368,355.4860872552388 1065,343 C 1138.8430092751632,330.5139127447612 1159.383716935761,345.5754036413603 1213,361 C 1266.616283064239,376.4245963586397 1353.3081415321194,392.2122981793199 1440,408 L 1440,700 L 0,700 Z");
            }
            25%{
              d: path("M 0,700 L 0,408 C 68.69598076262452,405.09721745104775 137.39196152524903,402.1944349020955 213,431 C 288.60803847475097,459.8055650979045 371.12813466162834,520.3194778426657 443,493 C 514.8718653383717,465.68052215733434 576.0954998282377,350.5276537272415 629,348 C 681.9045001717623,345.4723462727585 726.4898660254208,455.5699072483683 791,478 C 855.5101339745792,500.4300927516317 939.9450360700791,435.19271727928543 1020,424 C 1100.0549639299209,412.80728272071457 1175.7299896942632,455.6592236344898 1245,462 C 1314.2700103057368,468.3407763655102 1377.1350051528684,438.1703881827551 1440,408 L 1440,700 L 0,700 Z");
            }
            50%{
              d: path("M 0,700 L 0,408 C 61.81793198213673,370.06046032291306 123.63586396427345,332.1209206458262 188,330 C 252.36413603572655,327.8790793541738 319.27447612504295,361.5767777396084 390,384 C 460.72552387495705,406.4232222603916 535.2662315355549,417.57196839574027 609,434 C 682.7337684644451,450.42803160425973 755.6605977327379,472.1353486774305 831,448 C 906.3394022672621,423.8646513225695 984.0913775334936,353.8866368945379 1055,331 C 1125.9086224665064,308.1133631054621 1189.9738921332873,332.3181037444177 1253,353 C 1316.0261078667127,373.6818962555823 1378.0130539333563,390.84094812779114 1440,408 L 1440,700 L 0,700 Z");
            }
            75%{
              d: path("M 0,700 L 0,408 C 56.500858811405024,377.78220542768804 113.00171762281005,347.56441085537614 179,341 C 244.99828237718995,334.43558914462386 320.4939883201649,351.52456200618343 387,380 C 453.5060116798351,408.47543799381657 511.02232909653037,448.33734111989014 583,451 C 654.9776709034696,453.66265888010986 741.4166952937134,419.12607351425623 808,410 C 874.5833047062866,400.87392648574377 921.3108897286156,417.15836482308487 995,421 C 1068.6891102713844,424.84163517691513 1169.3397457918243,416.24046719340436 1248,412 C 1326.6602542081757,407.75953280659564 1383.3301271040878,407.8797664032978 1440,408 L 1440,700 L 0,700 Z");
            }
            100%{
              d: path("M 0,700 L 0,408 C 73.6496049467537,392.4074201305393 147.2992098935074,376.81484026107864 220,397 C 292.7007901064926,417.18515973892136 364.4527653727241,473.14805908622475 441,465 C 517.5472346272759,456.85194091377525 598.8897286155959,384.59292339402265 649,369 C 699.1102713844041,353.40707660597735 717.9883201648918,394.48024733768466 791,395 C 864.0116798351082,395.51975266231534 991.1569907248368,355.4860872552388 1065,343 C 1138.8430092751632,330.5139127447612 1159.383716935761,345.5754036413603 1213,361 C 1266.616283064239,376.4245963586397 1353.3081415321194,392.2122981793199 1440,408 L 1440,700 L 0,700 Z");
            }
          }</style><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#942d89"></stop><stop offset="95%" stop-color="#f3e0ec"></stop></linearGradient></defs><path d="M 0,700 L 0,408 C 73.6496049467537,392.4074201305393 147.2992098935074,376.81484026107864 220,397 C 292.7007901064926,417.18515973892136 364.4527653727241,473.14805908622475 441,465 C 517.5472346272759,456.85194091377525 598.8897286155959,384.59292339402265 649,369 C 699.1102713844041,353.40707660597735 717.9883201648918,394.48024733768466 791,395 C 864.0116798351082,395.51975266231534 991.1569907248368,355.4860872552388 1065,343 C 1138.8430092751632,330.5139127447612 1159.383716935761,345.5754036413603 1213,361 C 1266.616283064239,376.4245963586397 1353.3081415321194,392.2122981793199 1440,408 L 1440,700 L 0,700 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-1"></path></svg>