Mobiludvikling med Flutter · Lektion

Indlejring af Rive-assets og controllere

Indlæs .riv-filer, og styr afspilningen gennem Rive-artboards og animationscontrollere.

Lektion 1 af 413 trin

Indlejring af Rive-assets og controllere er en gratis Mobiludvikling med Flutter-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Mobiludvikling med Flutter, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Mobiludvikling med Flutter-kurset indeholder 4 lektioner i alt.

Hvad Rive tilfører Flutter

Rive er et interaktivt designværktøj i realtid. Dets runtime eksporterer en kompakt binær fil med filendelsen .riv, som indeholder vektorgrafik, knogler, tidslinjer og tilstandsmaskiner.

Dart-pakken rive gengiver disse filer direkte på GPU'en, så animationerne forbliver skarpe ved enhver opløsning.
I modsætning til Lottie kan Rive køre tilstandsmaskiner, der styres af inputværdier under kørsel, så animationerne bliver interaktive i stedet for kun at kunne afspilles.

I denne lektion indlæser du et .riv-asset, vælger en tegneflade og styrer afspilningen med en animationsstyreenhed.

Tilføjelse af afhængighed og asset

Angiv først pakken i pubspec.yaml, og registrér den binære fil under assets, så Flutter pakker den med.

Versionsbegrænsningen er målrettet Rive 0.13.x, som stiller widgetten RiveAnimation og de styreenheds-API'er, der bruges nedenfor, til rådighed.
Asset-stien er relativ til projektroden; alle filer i en registreret mappe inkluderes.

dependencies:
  flutter:
    sdk: flutter
  rive: ^0.13.1

flutter:
  assets:
    - assets/rive/vehicles.riv

Den enkleste indlejring

Den hurtigste måde at gengive en .riv-fil på er konstruktøren RiveAnimation.asset. Den indlæser, afkoder og afspiller automatisk filens standardanimation.

fit styrer, hvordan tegnefladen skaleres inden for widgettens grænser, ligesom BoxFit gør det for billeder.
Denne bekvemme widget er velegnet til grafik, der bare skal afspilles, men den giver dig ingen reference til at styre afspilningen.

import 'package:flutter/material.dart';
import 'package:rive/rive.dart';

class SplashLogo extends StatelessWidget {
  const SplashLogo({super.key});

  @override
  Widget build(BuildContext context) {
    return const RiveAnimation.asset(
      'assets/rive/vehicles.riv',
      fit: BoxFit.contain,
    );
  }
}

Tegneflader: tegningsområdet

En enkelt .riv-fil kan indeholde flere tegneflader — uafhængige lærreder, hver med sin egen grafik og sine egne animationer. Tænk på dem som separate scener samlet i én fil.

Hvis du udelader navnet, bruger Rive filens standardtegneflade.
Giv artboard: videre til RiveAnimation.asset for at vælge en bestemt tegneflade ved navn.

Det er vigtigt at vælge den rigtige tegneflade, når en designer leverer en delt biblioteksfil med mange komponenter.

RiveAnimation.asset(
  'assets/rive/vehicles.riv',
  artboard: 'Truck',
  fit: BoxFit.cover,
)

Hvorfor du har brug for en styreenhed

Hvis du vil starte, stoppe eller skifte animationer under kørsel, skal du tilknytte en styreenhed. Rive tilbyder to hovedtyper:

SimpleAnimation — afspiller én navngiven tidslinje; skift dens isActive-flag for at sætte den på pause eller genoptage den.
StateMachineController — styrer en tilstandsmaskine via typede inputværdier (booleske værdier, tal og udløsere).

Du opretter styreenheden i initState, giver den til widgetten via listen controllers: og frigiver den, når widgetten fjernes.

Styring af en SimpleAnimation

En SimpleAnimation målretter én tidslinje efter navn. Når du sætter isActive = false, sættes den på pause; når du sætter den tilbage til true, fortsætter den fra det sted, hvor den stoppede.

Gem altid styreenheden i et felt, så du kan ændre den senere.
Giv den videre i listen controllers; widgetten kobler den automatisk til den indlæste tegneflade.

class DrivingCar extends StatefulWidget {
  const DrivingCar({super.key});
  @override
  State<DrivingCar> createState() => _DrivingCarState();
}

class _DrivingCarState extends State<DrivingCar> {
  late final SimpleAnimation _controller =
      SimpleAnimation('idle', autoplay: true);

  void _toggle() => _controller.isActive = !_controller.isActive;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _toggle,
      child: RiveAnimation.asset(
        'assets/rive/vehicles.riv',
        controllers: [_controller],
      ),
    );
  }
}

Tilstandsmaskiner og inputværdier

Det er med tilstandsmaskiner, at Rive virkelig skinner. En StateMachineController stiller navngivne inputværdier til rådighed, som du læser fra styreenheden, efter at du har tilknyttet den:

findInput<bool>('Hover') returnerer en SMIBool, som du skifter med .value.
findInput<double>('Speed') returnerer en SMINumber.
findSMI('Tap') som SMITrigger udløser en overgang én gang via .fire().

Fabriksmetoden StateMachineController.fromArtboard kobler sig til en navngiven tilstandsmaskine i tegnefladen.

StateMachineController? _machine;
SMIBool? _pressed;

void _onRiveInit(Artboard artboard) {
  final controller = StateMachineController.fromArtboard(
    artboard,
    'ButtonMachine',
  );
  if (controller != null) {
    artboard.addController(controller);
    _machine = controller;
    _pressed = controller.findSMI('Pressed') as SMIBool?;
  }
}

Tilslutning af onInit-callbacken

Når du har brug for adgang til instansen Artboard — for eksempel for at tilknytte en tilstandsmaskine — skal du bruge callbacken onInit fra RiveAnimation.asset.

onInit kaldes én gang, efter at filen er afkodet, og tegnefladen er klar.
Det er det rigtige sted at oprette en StateMachineController, eftersom tegnefladen ikke findes, før indlæsningen er fuldført.

RiveAnimation.asset(
  'assets/rive/vehicles.riv',
  artboard: 'Button',
  stateMachines: const ['ButtonMachine'],
  onInit: _onRiveInit,
)

Manuel indlæsning af filen

Hvis du har brug for fuld kontrol — caching, forudindlæsning eller gengivelse med en tilpasset Rive-widget — skal du selv afkode filen med RiveFile.asset og hente tegnefladen fra mainArtboard.

RiveFile.initialize() skal køres én gang før manuel afkodning (widgetkonstruktørerne håndterer dette for dig).
artboard.instance() giver dig en isoleret kopi, så to widgets kan animere uafhængigt af hinanden.

Future<Artboard> loadTruck() async {
  await RiveFile.initialize();
  final file = await RiveFile.asset('assets/rive/vehicles.riv');
  final artboard = file.mainArtboard.instance();
  final controller = SimpleAnimation('drive');
  artboard.addController(controller);
  return artboard;
}

Frigiv altid styreenheder

Styreenheder holder referencer til tegnefladen og får animationsuret til fortsat at gå. Hvis du lader dem lække, spilder du billedrammer og hukommelse.

Frigiv alle styreenheder, du har oprettet, i State.dispose().
For tilstandsmaskiner skal du også rydde referencer til inputværdier, så de kan blive indsamlet af skraldeopsamlingen.

Rive-widgetten fjerner automatisk de styreenheder, den selv ejer, men styreenheder, du tilknytter manuelt med addController, er dit ansvar.

@override
void dispose() {
  _controller.dispose();
  _machine?.dispose();
  super.dispose();
}

En ren Dart-model for afspilning

Flutter-widgets kræver en GPU og en værtsapp, så de kan ikke køre i en almindelig konsol. Logikken i en simpel animationsstyreenhed er dog kun Dart og er nem at modellere og teste isoleret.

Nedenfor er en lille selvstændig simulering af, hvordan flaget isActive i en SimpleAnimation styrer fremrykningen af tiden — den kan køres på enhver Dart-dommer.

class FakeSimpleAnimation {
  FakeSimpleAnimation(this.name, {this.isActive = true});
  final String name;
  bool isActive;
  double _time = 0;

  void advance(double dt) {
    if (isActive) _time += dt;
  }

  double get time => _time;
}

void main() {
  final anim = FakeSimpleAnimation('idle');
  anim.advance(0.5);
  anim.isActive = false;
  anim.advance(0.5); // ignored while paused
  anim.isActive = true;
  anim.advance(0.25);
  print('Elapsed: ${anim.time}s');
}

Hurtigt tjek

Du skal skifte en boolesk inputværdi i en Rive-tilstandsmaskine, når brugeren trykker på en knap. Hvilken tilgang er korrekt?

Besvar den i den interaktive lektion

Opsummering

Du kan nu integrere og styre Rive i Flutter:

Føj rive til pubspec.yaml, og registrér .riv-assetet.
RiveAnimation.asset gengiver hurtigt; vælg et lærred med artboard:.
Tilknyt en styreenhed for at styre afspilningen: SimpleAnimation til en enkelt tidslinje og StateMachineController til interaktive inputværdier (SMIBool, SMINumber og SMITrigger).
Brug onInit for at få adgang til Artboard, eller indlæs manuelt med RiveFile.asset for fuld kontrol.
Frigiv altid de styreenheder, du opretter, for at undgå lækager.

Gratis at komme i gang

Lær Dart med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 22
Lektioner: 88

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Indlejring af Rive-assets og controllere” gratis?

Ja — alle 3 lektioner i læringssporet Mobiludvikling med Flutter, inklusive “Indlejring af Rive-assets og controllere”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Mobiludvikling med Flutter-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Indlejring af Rive-assets og controllere”?

Indlæs .riv-filer, og styr afspilningen gennem Rive-artboards og animationscontrollere. Du øver dig i Mobiludvikling med Flutter med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Mobiludvikling med Flutter?

Der kræves ingen tidligere erfaring. Mobiludvikling med Flutter på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Indlejring af Rive-assets og controllere”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Mobiludvikling med Flutter-lektion?

Ja. Alle Mobiludvikling med Flutter-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Indlejring af Rive-assets og controllere
State machines og inputstyret bevægelse
Hero-overgange og bevægelse af delte elementer
Forskudte og koreograferede AnimationControllers

← Tilbage til Mobiludvikling med Flutter