Delen via

Storyboard-animaties

Animaties met verhaalbord zijn niet alleen animaties in visuele zin. Een storyboard-animatie is een manier om de waarde van een afhankelijkheidseigenschap te wijzigen als een functie van tijd. Een van de belangrijkste redenen waarom u mogelijk een storyboard-animatie nodig hebt die niet afkomstig is van de animatiebibliotheek, is het definiëren van de visuele status voor een besturingselement, als onderdeel van een besturingselementsjabloon of paginadefinitie.

Animaties met verhaalbord definiëren

Een storyboard-animatie is een manier om de waarde van een afhankelijkheidseigenschap te wijzigen als een functie van tijd. De eigenschap die u aan het animeren bent, is niet altijd een eigenschap die rechtstreeks van invloed is op de gebruikersinterface van uw app. Maar omdat XAML over het definiëren van de gebruikersinterface voor een app gaat, is het meestal een eigenschap die betrekking heeft op de gebruikersinterface die u aan het aanwerken bent. U kunt bijvoorbeeld animatie toepassen op de hoek van een RotateTransform of de kleurwaarde van de achtergrond van een knop.

Een van de belangrijkste redenen waarom u een storyboard-animatie definieert, is als u een controleontwikkelaar bent of een controle opnieuw sjabloneert en u visuele toestanden definieert. Zie Storyboarded animaties voor visuele statenvoor meer informatie.

Of u nu visuele statussen of een aangepaste animatie voor een app definieert, de concepten en API's voor storyboarded animaties die in dit onderwerp worden beschreven, zijn meestal van toepassing op beide.

Als u een animatie wilt maken, moet de eigenschap die u richt met een storyboard-animatie een afhankelijkheidseigenschap zijn. Een afhankelijkheidseigenschap is een belangrijke functie van de Windows Runtime XAML-implementatie. De schrijfbare eigenschappen van de meest voorkomende UI-elementen worden doorgaans geïmplementeerd als afhankelijkheidseigenschappen, zodat u deze kunt animeren, gegevensgebonden waarden kunt toepassen of een stijl kunt toepassen en de eigenschap kunt richten op een setter. Zie het overzicht van afhankelijkheidseigenschappen voor meer informatie over de werking van afhankelijkheidseigenschappen.

Meestal definieert u een storyboard-animatie door XAML te schrijven. Als u een hulpprogramma zoals Microsoft Visual Studio gebruikt, wordt de XAML voor u geproduceerd. Het is ook mogelijk om een storyboard-animatie te definiëren met behulp van code, maar dat is minder gebruikelijk.

Laten we eens kijken naar een eenvoudig voorbeeld. In dit XAML-voorbeeld wordt de eigenschap Dekking geanimeerd op een bepaald rechthoekobject .

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>

  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

Het object identificeren dat moet worden geanimeerd

In het vorige voorbeeld was het storyboard een animatie voor de eigenschap Ondoorzichtigheid van een rechthoek. U declareert de animaties op het object zelf niet. In plaats daarvan doet u dit in de animatiedefinitie van een storyboard. Storyboards worden meestal gedefinieerd in XAML die zich niet in de directe nabijheid van de XAML UI-definitie van het object dat geanimeerd moet worden bevindt. In plaats daarvan worden ze meestal ingesteld als een XAML-resource.

Als u een animatie wilt verbinden met een doel, verwijst u naar het doel door de naam van het programmeerprogramma. U moet altijd het kenmerk x:Name toepassen in de definitie van de XAML-gebruikersinterface om het object te noemen dat u wilt animeren. Vervolgens richt u het object op animatie door Storyboard.TargetName in te stellen binnen de animatiedefinitie. Voor de waarde van Storyboard.TargetName gebruikt u de naamtekenreeks van het doelobject. Dit is wat u eerder en elders hebt ingesteld met het kenmerk x:Name.

De afhankelijkheidseigenschap instellen op animatie

U stelt een waarde in voor Storyboard.TargetProperty in de animatie. Hiermee bepaalt u welke specifieke eigenschap van het doelobject is geanimeerd.

Soms moet u zich richten op een eigenschap die geen onmiddellijke eigenschap van het doelobject is, maar die dieper is genest in een objecteigenschapsrelatie. U moet dit vaak doen om in te zoomen op een set bijdragende object- en eigenschapswaarden totdat u kunt verwijzen naar een eigenschapstype dat kan worden geanimeerd (Double, Point, Color). Dit concept wordt indirecte targeting genoemd en de syntaxis voor het richten van een eigenschap op deze manier wordt een eigenschapspad genoemd.

Dit is een voorbeeld. Een veelvoorkomend scenario voor een storyboard-animatie is het wijzigen van de kleur van een deel van een app-ui of besturingselement om aan te geven dat het besturingselement een bepaalde status heeft. Stel dat u de voorgrond van een TextBlock wilt animeren, zodat deze van rood naar groen wordt. U zou verwachten dat een ColorAnimation betrokken is en dat klopt. Geen van de eigenschappen van ui-elementen die van invloed zijn op de kleur van het object, zijn echter van het type Kleur. In plaats daarvan zijn ze van het type Brush. Wat u eigenlijk moet richten voor animatie is de eigenschap Color van de klasse SolidColorBrush, een type dat is afgeleid van Brush en dat doorgaans wordt gebruikt voor deze kleurgerelateerde gebruikersinterface-eigenschappen. Hier ziet u hoe dat eruitziet met betrekking tot het creëren van een eigenschapspad voor het richten van de eigenschap van uw animatie:

<Storyboard x:Name="myStoryboard">
  <ColorAnimation
    Storyboard.TargetName="tb1"
    Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
    From="Red" To="Green"/>
</Storyboard>

U kunt deze syntaxis als volgt beschouwen in termen van de onderdelen:

  • Elke set () haakjes omsluit een eigenschapsnaam.
  • Binnen de naam van de eigenschap bevindt zich een punt en die punt scheidt een typenaam en een eigenschapsnaam, zodat de eigenschap die u identificeert ondubbelzinnig is.
  • De punt in het midden, de punt die zich niet tussen haakjes bevindt, is een stap. Dit wordt door de syntaxis geïnterpreteerd als dat je de waarde van de eerste eigenschap neemt (een object), het objectmodel doorloopt en een specifieke subeigenschap van de waarde van die eerste eigenschap selecteert.

Hier is een lijst met scenario's voor animaties waarin u waarschijnlijk indirect eigenschapsdoelwit zult gebruiken, en enkele eigenschapspad-tekenreeksen die de syntaxis benadert die u zult gebruiken.

U ziet dat in sommige voorbeelden vierkante haken rond getallen worden gebruikt. Dit is een indexeerfunctie. Hiermee wordt aangegeven dat de naam van de eigenschap die voorafgaat een verzameling als waarde heeft en dat u een item (zoals aangegeven door een index op basis van nul) in die verzameling wilt hebben.

U kunt ook animatie toevoegen aan gekoppelde eigenschappen van XAML. Plaats altijd de volledige naam van de gekoppelde eigenschap tussen haakjes, bijvoorbeeld (Canvas.Left). Zie Animating XAML attached properties voor meer informatie.

Zie De syntaxis van het eigenschapspad voor indirecte targeting van de eigenschap voor animaties voor meer informatie over het gebruik van een eigenschapspad.

Animatietypen

Het Windows Runtime-animatiesysteem heeft drie specifieke typen waarop storyboard-animaties kunnen worden toegepast:

Er is ook een gegeneraliseerde objectanimatietype voor objectverwijzingswaarden, die we later gaan bespreken.

De geanimeerde waarden opgeven

Tot nu toe hebben we u laten zien hoe u het object en de eigenschap kunt richten op animatie, maar nog niet hebt beschreven wat de animatie met de eigenschapswaarde doet wanneer deze wordt uitgevoerd.

De animatietypen die we hebben beschreven, worden soms From/To/By animaties genoemd. Dit betekent dat de animatie de waarde van een eigenschap in de loop van de tijd wijzigt met behulp van een of meer van deze invoerwaarden die afkomstig zijn van de animatiedefinitie:

  • De waarde begint bij de waarde Van . Als u geen Van-waarde opgeeft, is de beginwaarde dezelfde als de waarde die de geanimeerde eigenschap heeft voordat de animatie begint. Dit kan een standaardwaarde zijn, een waarde uit een stijl of sjabloon, of een waarde die specifiek wordt toegepast door een XAML UI-definitie of app-code.
  • Aan het einde van de animatie is de waarde de To waarde.
  • Als u een eindwaarde ten opzichte van de beginwaarde wilt opgeven, stelt u de eigenschap By in. u stelt dit in plaats van de To-eigenschap in.
  • Als u geen Tot waarde of een Per waarde opgeeft, is de eindwaarde de waarde die de geanimeerde eigenschap heeft op het moment voordat de animatie wordt uitgevoerd. In dit geval zou u beter een Van-waarde hebben, omdat anders de animatie de waarde helemaal niet wijzigt; de begin- en eindwaarden zijn beide hetzelfde.
  • Een animatie heeft meestal ten minste één van Van, Door of Aan , maar nooit alle drie.

We gaan terug naar het eerdere XAML-voorbeeld en kijken opnieuw naar de waarden Van en Naar en de Duur. Het voorbeeld is het animeren van de Dekking-eigenschap, en het eigenschapstype van Dekking is Double. De animatie die hier moet worden gebruikt, is DoubleAnimation.

From="1.0" To="0.0" geeft aan dat wanneer de animatie wordt uitgevoerd, de eigenschap Dekking begint bij een waarde van 1 en animeert naar 0. Met andere woorden, in termen van wat deze Double waarden betekenen voor de eigenschap Ondoorzichtigheid, zal deze animatie ervoor zorgen dat het object begint als ondoorzichtig en vervolgens vervaagt naar doorzichtig.

...
<Storyboard x:Name="myStoryboard">
  <DoubleAnimation
    Storyboard.TargetName="MyAnimatedRectangle"
    Storyboard.TargetProperty="Opacity"
    From="1.0" To="0.0" Duration="0:0:1"/>
</Storyboard>
...

Duration="0:0:1" geeft aan hoe lang de animatie duurt, dat wil gezegd, hoe snel de rechthoek vervaagt. Een eigenschap Duur wordt opgegeven in de vorm van uren:minuten:seconden. De tijdsduur in dit voorbeeld is één seconde.

Zie Duur voor meer informatie over duurwaarden en de XAML-syntaxis.

Opmerking

Als u bijvoorbeeld zeker weet dat de beginstatus van het object dat wordt geanimeerd altijd Opacity gelijk is aan 1, hetzij via de standaardinstelling of een expliciete set, kunt u de Vanaf waarde weglaten. De animatie zou de impliciete beginwaarde gebruiken, en het resultaat zou hetzelfde zijn.

Van/Naar/Door kunnen nul zijn

We hebben eerder gezegd dat u van, naar of door kunt weglaten en dus huidige niet-geanimeerde waarden kunt gebruiken als vervanging voor een ontbrekende waarde. Van, Naar of Door eigenschappen van een animatie zijn niet van het type dat u zou verwachten. Het type van de eigenschap DoubleAnimation.To is bijvoorbeeld niet Double. In plaats daarvan is het een Nullable voor Double. En de standaardwaarde is null, niet 0. Deze null-waarde is hoe het animatiesysteem onderscheidt dat u niet specifiek een waarde hebt ingesteld voor een eigenschap Van, Aan of Op .

Andere eigenschappen van een animatie

De volgende eigenschappen die in deze sectie worden beschreven, zijn allemaal optioneel omdat ze standaardwaarden hebben die geschikt zijn voor de meeste animaties.

AutoReverse

Als u AutoReverse of RepeatBehavior niet opgeeft voor een animatie, wordt die animatie eenmaal uitgevoerd en voor de tijdsduur die is opgegeven als Duration.

De eigenschap AutoReverse geeft aan of een tijdlijn omgekeerd wordt afgespeeld nadat deze het einde van de duur heeft bereikt. Als u deze instelt op true, wordt de animatie omgekeerd nadat deze het einde van de gedeclareerde duur heeft bereikt, waardoor de waarde wordt gewijzigd van de eindwaarde (Naar) naar de beginwaarde (Van). Dit betekent dat de animatie effectief loopt voor het dubbele van de Duur.

RepeatBehavior

De eigenschap RepeatBehavior geeft aan hoe vaak een tijdlijn wordt afgespeeld, of een grotere duur waarin de tijdlijn moet worden herhaald. Standaard heeft een tijdlijn een iteratieaantal '1x', wat betekent dat deze één keer wordt afgespeeld voor de duur en niet wordt herhaald.

U kunt ervoor zorgen dat de animatie meerdere iteraties uitvoert. Een waarde van '3x' zorgt er bijvoorbeeld voor dat de animatie drie keer wordt uitgevoerd. U kunt ook een andere duur opgeven voor RepeatBehavior. Deze duur moet langer zijn dan de duur van de animatie zelf om effectief te zijn. Als u bijvoorbeeld een RepeatBehavior van '0:0:10' opgeeft voor een animatie met een duur van 0:0:2, wordt die animatie vijf keer herhaald. Als deze niet gelijkmatig worden verdeeld, wordt de animatie afgekapt op het moment dat de RepeatBehavior-tijd is bereikt, wat halverwege kan zijn. Ten slotte kunt u de speciale waarde 'Forever' opgeven, waardoor de animatie oneindig wordt uitgevoerd totdat deze opzettelijk wordt gestopt.

Zie RepeatBehavior voor meer informatie over RepeatBehavior-waarden en de XAML-syntaxis.

FillBehavior="Stop"

Standaard laat wanneer een animatie eindigt, de animatie de eigenschapswaarde als de uiteindelijke tot of met-gewijzigde waarde staan, zelfs nadat de duur ervan is overschreden. Als u echter de waarde van de eigenschap FillBehavior instelt op FillBehavior.Stop, wordt de waarde van de geanimeerde waarde teruggezet op wat de waarde was voordat de animatie werd toegepast, of nauwkeuriger op de huidige effectieve waarde zoals bepaald door het afhankelijkheidseigenschapssysteem (zie het overzicht van afhankelijkheidseigenschappen voor meer informatie over dit onderscheid).

BeginTime

De BeginTime van een animatie is standaard '0:0:0', dus begint deze zodra de bijbehorende Storyboard loopt. U kunt dit wijzigen als het Storyboard meer dan één animatie bevat en u de begintijden van de anderen wilt strekken versus een initiële animatie, of als u een opzettelijke korte vertraging wilt maken.

SpeedRatio

Als u meer dan één animatie in een Storyboard hebt, kunt u de tijdsfrequentie van een of meer animaties ten opzichte van het Storyboard wijzigen. Het is het bovenliggende Storyboard dat uiteindelijk bepaalt hoe de duurtijd is verstreken terwijl de animaties worden uitgevoerd. Deze eigenschap wordt niet vaak gebruikt. Zie SpeedRatio voor meer informatie.

Meer dan één animatie definiëren in een Storyboard

De inhoud van een Storyboard kan meer dan één animatiedefinitie zijn. Mogelijk hebt u meer dan één animatie als u gerelateerde animaties toepast op twee eigenschappen van hetzelfde doelobject. U kunt bijvoorbeeld zowel de eigenschappen TranslateX als TranslateY wijzigen van een TranslateTransform die wordt gebruikt als de RenderTransform van een UI-element; Dit zorgt ervoor dat het element diagonaal wordt omgezet. U hebt twee verschillende animaties nodig om dat te bereiken, maar misschien wilt u dat de animaties deel uitmaken van hetzelfde Storyboard , omdat u altijd wilt dat deze twee animaties samen worden uitgevoerd.

De animaties hoeven niet hetzelfde type te zijn of hetzelfde object te richten. Ze kunnen verschillende duur hebben en hoeven geen eigenschapswaarden te delen.

Wanneer het bovenliggende Storyboard wordt uitgevoerd, worden ook alle animaties uitgevoerd.

De Storyboard-klasse heeft eigenlijk veel dezelfde animatie-eigenschappen als de animatietypen, omdat beide de tijdlijnbasisklasse delen. Een Storyboard kan dus een RepeatBehavior of een BeginTime hebben. U stelt deze echter meestal niet in op een Storyboard , tenzij u wilt dat alle ingesloten animaties dat gedrag hebben. Als algemene regel is elke tijdlijneigenschap die is ingesteld op een Storyboard van toepassing op alle onderliggende animaties. Als u dit ongedaan wilt maken, heeft het Storyboard een impliciete duur die wordt berekend op basis van de langste duurwaarde van de opgenomen animaties. Een expliciet ingestelde duur op een Storyboard die korter is dan een van de onderliggende animaties, zorgt ervoor dat die animatie wordt afgebroken, wat meestal niet wenselijk is.

Een storyboard kan geen twee animaties bevatten die dezelfde eigenschap op hetzelfde object proberen te targeten en animeren. Als u dit probeert, krijgt u een runtimefout wanneer het storyboard probeert uit te voeren. Deze beperking geldt zelfs als de animaties niet overlappen in de tijd vanwege opzettelijk verschillende BeginTime-waarden en -duur. Als u een complexere animatietijdlijn wilt toepassen op dezelfde eigenschap in één storyboard, kunt u dit doen door een sleutelframeanimatie te gebruiken. Zie animaties voor keyframe- en easing-functies.

Het animatiesysteem kan meer dan één animatie toepassen op de waarde van een eigenschap, als deze invoer afkomstig is van meerdere storyboards. Het gebruik van dit gedrag is opzettelijk voor gelijktijdig uitvoeren van storyboards niet gebruikelijk. Het is echter mogelijk dat een door de app gedefinieerde animatie die u toepast op een besturingselementeigenschap, de HoldEnd-waarde wijzigt van een animatie die eerder werd uitgevoerd als onderdeel van het visualstatusmodel van het besturingselement.

Een storyboard definiëren als een resource

Een Storyboard is de container waarin u animatieobjecten plaatst. Doorgaans definieert u het Storyboard als een resource die beschikbaar is voor het object dat u wilt animeren, in resources op paginaniveau of Application.Resources.

In dit volgende voorbeeld ziet u hoe het vorige voorbeeld storyboard wordt opgenomen in een definitie van resources op paginaniveau, waarbij het Storyboard een belangrijke resource van de hoofdpagina is. Let op het kenmerk x:Name. Dit kenmerk is hoe u een variabelenaam definieert voor het Storyboard, zodat andere elementen in XAML en code later naar het Storyboard kunnen verwijzen.

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>
  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

Het definiëren van resources in de XAML-hoofdmap van een XAML-bestand, zoals page.xaml of app.xaml, is een veelgebruikte procedure voor het organiseren van belangrijke resources in uw XAML. U kunt bronnen ook opsplitsen in afzonderlijke bestanden en ze samenvoegen tot apps of pagina's. Zie ResourceDictionary- en XAML-resourceverwijzingen voor meer informatie.

Opmerking

Windows Runtime XAML ondersteunt het identificeren van resources met behulp van het kenmerk x:Key of het kenmerk x:Name. Het gebruik van het kenmerk x:Name is gebruikelijker voor een Storyboard, omdat u er uiteindelijk naar wilt verwijzen op variabele naam, zodat u de Begin-methode kunt aanroepen en de animaties kunt uitvoeren. Als u het kenmerk x:Key gebruikt, moet u ResourceDictionary-methoden zoals de indexeerfunctie voor items gebruiken om het op te halen als een sleutelresource en het opgehaalde object vervolgens naar Storyboard casten om de Storyboard-methoden te gebruiken.

Storyboards voor visuele statussen

U plaatst uw animaties ook in een Storyboard-eenheid wanneer u de visuele statusanimaties declareren voor het uiterlijk van een besturingselement. In dat geval gaan de Storyboard-elementen die u definieert naar een VisualState-container die dieper is genest in een stijl (dit is de stijl die de sleutelresource is). In dit geval hebt u geen sleutel of naam nodig voor uw Storyboard , omdat dit de VisualState is met een doelnaam die de VisualStateManager kan aanroepen. De stijlen voor besturingselementen worden vaak ondergebracht in afzonderlijke XAML ResourceDictionary-bestanden in plaats van in een pagina- of app-resourcecollectie. Zie Storyboarded animaties voor visuele statenvoor meer informatie.

Afhankelijke en onafhankelijke animaties

Op dit punt moeten we enkele belangrijke punten introduceren over de werking van het animatiesysteem. In het bijzonder communiceert animatie fundamenteel met de manier waarop een Windows Runtime-app op het scherm wordt weergegeven en hoe die rendering gebruikmaakt van verwerkingsthreads. Een Windows Runtime-app heeft altijd een hoofd-UI-thread en deze thread is verantwoordelijk voor het bijwerken van het scherm met de huidige informatie. Bovendien heeft een Windows Runtime-app een samenstellingsthread, die wordt gebruikt voor het vooraf berekenen van indelingen direct voordat ze worden weergegeven. Wanneer u de gebruikersinterface animeert, kan dat veel werk opleveren voor de gebruikersinterface-thread. Het systeem moet grote gebieden van het scherm opnieuw tekenen met vrij korte tijdsintervallen tussen elke vernieuwing. Dit is nodig voor het vastleggen van de meest recente waarde van de geanimeerde eigenschap. Als u niet voorzichtig bent, bestaat het risico dat een animatie de gebruikersinterface minder responsief kan maken, of dat dit van invloed is op de prestaties van andere app-functies die zich ook op dezelfde UI-thread bevinden.

De animatiesoort die als een risico wordt beschouwd om de UI-thread te vertragen, wordt een afhankelijke animatie genoemd. Een animatie die niet onder dit risico valt, is een onafhankelijke animatie. Het onderscheid tussen afhankelijke en onafhankelijke animaties wordt niet alleen bepaald door animatietypen (DoubleAnimation , enzovoort) zoals we eerder hebben beschreven. In plaats daarvan wordt bepaald door welke specifieke eigenschappen u een animatie wilt geven en andere factoren, zoals overname en samenstelling van besturingselementen. Er zijn omstandigheden waarin zelfs als een animatie de gebruikersinterface wijzigt, de animatie minimale impact kan hebben op de UI-thread en in plaats daarvan kan worden verwerkt door de samenstellingsthread als een onafhankelijke animatie.

Een animatie is onafhankelijk als deze kenmerken heeft:

Waarschuwing

Als u wilt dat uw animatie als onafhankelijk wordt behandeld, moet u expliciet instellen Duration="0". Als u bijvoorbeeld uit deze XAML verwijdert Duration="0" , wordt de animatie behandeld als afhankelijk, ook al is de KeyTime van het frame '0:0:0'.

<Storyboard>
  <DoubleAnimationUsingKeyFrames
    Duration="0"
    Storyboard.TargetName="Button2"
    Storyboard.TargetProperty="Width">
    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="200"/>
  </DoubleAnimationUsingKeyFrames>
</Storyboard>

Als uw animatie niet aan deze criteria voldoet, is dit waarschijnlijk een afhankelijke animatie. Standaard wordt in het animatiesysteem geen afhankelijke animatie uitgevoerd. Dus tijdens het ontwikkelen en testen ziet u mogelijk niet eens dat uw animatie wordt uitgevoerd. U kunt deze animatie nog steeds gebruiken, maar u moet deze afhankelijke animatie specifiek inschakelen. Als u de animatie wilt inschakelen, stelt u de eigenschap EnableDependentAnimation van het animatieobject in op true. (Elke subklasse tijdlijn die een animatie vertegenwoordigt, heeft een andere implementatie van de eigenschap, maar ze hebben allemaal de naam EnableDependentAnimation.)

De vereiste voor het inschakelen van afhankelijke animaties die op de app-ontwikkelaar vallen, is een bewust ontwerpaspect van het animatiesysteem en de ontwikkelervaring. We willen dat ontwikkelaars zich ervan bewust zijn dat animaties wel prestatiekosten hebben voor de reactiesnelheid van uw gebruikersinterface. Slecht presterende animaties zijn moeilijk te isoleren en fouten op te sporen in een app op volledige schaal. Het is dus beter om alleen de afhankelijke animaties in te schakelen die u echt nodig hebt voor de gebruikersinterface van uw app. We wilden niet dat de prestaties van uw app eenvoudig aangetast konden worden door decoratieve animaties die veel verwerkingskracht gebruiken. Zie Animaties en media optimaliseren voor meer informatie over prestatietips voor animatie.

Als app-ontwikkelaar kunt u er ook voor kiezen om een instelling voor de hele app toe te passen die afhankelijke animaties altijd uitschakelt, zelfs wanneer EnableDependentAnimationwaar is. Zie Timeline.AllowDependentAnimations.

Aanbeveling

Als u het animatiedeelvenster in Blend voor Visual Studio 2019 gebruikt, worden waarschuwingen weergegeven in de ontwerpfunctie wanneer u probeert een afhankelijke animatie toe te passen op een eigenschap van de visuele status. Waarschuwingen worden niet weergegeven in de build-uitvoer of foutlijst. Als u XAML handmatig bewerkt, wordt er geen waarschuwing weergegeven in de ontwerpfunctie. Tijdens runtime bij foutopsporing wordt in de uitvoer van het uitvoervenster Foutopsporing een waarschuwing weergegeven dat de animatie niet onafhankelijk is en wordt overgeslagen.

Een animatie starten en beheren

Alles wat we tot nu toe hebben laten zien, zorgt er niet voor dat een animatie wordt uitgevoerd of toegepast. Totdat de animatie is gestart en wordt uitgevoerd, blijven de waardeaanpassingen die door een animatie in XAML worden gedeclareerd latent en zullen ze nog niet plaatsvinden. U moet expliciet een animatie starten op een bepaalde manier die betrekking heeft op de levensduur van de app of de gebruikerservaring. Op het eenvoudigste niveau start u een animatie door de methode Begin aan te roepen op het Storyboard dat het bovenliggende element voor die animatie is. U kunt methoden van XAML niet rechtstreeks aanroepen, dus wat u ook doet om uw animaties in te schakelen, doet u dit vanuit code. Dit is de achterliggende code voor de pagina's of onderdelen van uw app, of eventueel de logica van uw besturingselement als u een aangepaste besturingselementklasse definieert.

Normaal gesproken roept u Begin aan en laat de animatie gewoon worden uitgevoerd totdat de duur is voltooid. U kunt echter ook de methoden Onderbreken, Hervatten en Stoppen gebruiken om het Storyboard tijdens runtime te beheren, evenals andere API's die worden gebruikt voor geavanceerdere scenario's voor animatiebeheer.

Wanneer u Begin aanroept op een storyboard dat een animatie bevat die oneindigRepeatBehavior="Forever" () wordt herhaald, wordt die animatie uitgevoerd totdat de pagina met de animatie wordt verwijderd, of u roept specifiek Onderbreken of Stoppen aan.

Een animatie starten vanuit app-code

U kunt animaties automatisch starten of reageren op gebruikersacties. Voor het automatische geval gebruikt u doorgaans een gebeurtenis voor de levensduur van objecten, zoals Geladen om te fungeren als de animatietrigger. De gebeurtenis Geladen is een goede gebeurtenis om hiervoor te gebruiken, omdat de gebruikersinterface op dat moment gereed is voor interactie en de animatie niet aan het begin wordt afgekapt omdat er nog een deel van de gebruikersinterface werd geladen.

In dit voorbeeld wordt de gebeurtenis PointerPressed gekoppeld aan de rechthoek, zodat de animatie wordt gestart wanneer de gebruiker op de rechthoek klikt.

<Rectangle PointerPressed="Rectangle_Tapped"
  x:Name="MyAnimatedRectangle"
  Width="300" Height="200" Fill="Blue"/>

De gebeurtenis-handler start het Storyboard (de animatie) met behulp van de methode Begin van het Storyboard.

myStoryboard.Begin();

myStoryboard().Begin();

U kunt de voltooide gebeurtenis afhandelen als u andere logica wilt uitvoeren nadat de animatie is voltooid met het toepassen van waarden. Voor het oplossen van problemen met eigenschappensysteem-/animatie-interacties kan de methode GetAnimationBaseValue ook nuttig zijn.

Aanbeveling

Wanneer u codeert voor een app-scenario waarin u een animatie vanuit app-code start, wilt u mogelijk opnieuw controleren of er al een animatie of overgang bestaat in de animatiebibliotheek voor uw ui-scenario. De bibliotheekanimaties maken een consistentere gebruikersinterface mogelijk voor alle Windows Runtime-apps en zijn eenvoudiger te gebruiken.

Animaties voor visuele statussen

Het uitvoeringsgedrag voor een Storyboard dat wordt gebruikt om de visuele status van een besturingselement te definiëren, verschilt van de manier waarop een app rechtstreeks een storyboard kan uitvoeren. Zoals toegepast op een definitie van de visuele status in XAML, is het Storyboard een element van een visualState en wordt de status als geheel beheerd met behulp van de VisualStateManager-API . Alle animaties binnenin worden uitgevoerd op basis van hun animatiewaarden en tijdlijneigenschappen wanneer de VisualState door een besturingselement wordt gebruikt. Voor meer informatie, zie Storyboards voor visuele toestanden. Voor visuele toestanden is de schijnbare FillBehavior anders. Als een visuele status wordt gewijzigd in een andere status, worden alle eigenschapswijzigingen die worden toegepast door de vorige visuele status en de animaties ervan geannuleerd, zelfs als de nieuwe visuele status niet specifiek een nieuwe animatie toepast op een eigenschap.

Storyboard en EventTrigger

Er is een manier om een animatie te starten die volledig kan worden gedeclareerd in XAML. Deze techniek wordt echter niet veel meer gebruikt. Het is een verouderde syntaxis van WPF en vroege versies van Silverlight vóór visualStateManager-ondersteuning . Deze Syntaxis van EventTrigger werkt nog steeds in Windows Runtime XAML om import-/compatibiliteitsredenen, maar werkt alleen voor een triggergedrag op basis van de gebeurtenis FrameworkElement.Loaded ; als u andere gebeurtenissen probeert te activeren, worden uitzonderingen gegenereerd of mislukt het compileren. Zie EventTrigger of BeginStoryboard voor meer informatie.

XAML-gekoppelde eigenschappen animeren

Dit is geen veelvoorkomend scenario, maar u kunt een geanimeerde waarde toepassen op een gekoppelde XAML-eigenschap. Zie het overzicht van bijgevoegde eigenschappen voor meer informatie over wat gekoppelde eigenschappen zijn en hoe deze werken. Voor een gekoppelde eigenschap is een eigenschapspad-syntaxis vereist die de naam van de eigenschap tussen ronde haakjes plaatst. U kunt animatie toepassen op de ingebouwde gekoppelde eigenschappen, zoals Canvas.ZIndex , met behulp van een ObjectAnimationUsingKeyFrames waarmee discrete gehele getallen worden toegepast. Een bestaande beperking van de Windows Runtime XAML-implementatie is echter dat u geen aangepaste gekoppelde eigenschap kunt animeren.

Meer animatietypen en volgende stappen voor meer informatie over het aanpassen van de gebruikersinterface

Tot nu toe hebben we laten zien hoe de aangepaste animaties verlopen tussen twee waarden en vervolgens de waarden lineair interpoleren terwijl de animatie wordt uitgevoerd. Deze worden Van-Tot//Bij animaties genoemd. Er is echter een ander animatietype waarmee u tussenliggende waarden kunt declareren die tussen het begin en einde vallen. Deze worden sleutelframeanimaties genoemd. Er is ook een manier om de interpolatielogica te wijzigen op een From/To/By-animatie of een sleutelframeanimatie. Dit omvat het toepassen van een easing-functie. Zie keyframe- en easing-functieanimaties voor meer informatie over deze concepten.

Verschillen met WPF

Als u bekend bent met Windows Presentation Foundation (WPF), leest u deze sectie; anders kunt u het overslaan.

Over het algemeen is het maken van storyboard-animaties in een Windows Runtime-app net als WPF. Maar er zijn een aantal belangrijke verschillen:

  • Storyboard-animaties zijn niet de enige manier om een gebruikersinterface visueel te animeren, en ze zijn ook niet per se de eenvoudigste manier voor app-ontwikkelaars om dit te doen. In plaats van storyboard-animaties te gebruiken, is het vaak een betere ontwerppraktijk om themaanimaties en overgangsanimaties te gebruiken. Hiermee kunt u snel aanbevolen gebruikersinterface-animaties maken zonder u te hoeven verdiepen in de complexiteit van het richten van animatie-eigenschappen. Zie Animaties in XAML voor meer informatie.
  • In Windows Runtime bevatten veel XAML-besturingselementen themaanimaties en overgangsanimaties als onderdeel van hun ingebouwde gedrag. Voor het grootste deel hebben WPF-besturingselementen geen standaardgedrag voor animaties.
  • Niet alle aangepaste animaties die u maakt, kunnen standaard worden uitgevoerd in een Windows Runtime-app als het animatiesysteem bepaalt dat de animatie slechte prestaties in uw gebruikersinterface kan veroorzaken. Animaties waarbij het systeem bepaalt dat er een invloed op de prestaties kan zijn, worden afhankelijke animaties genoemd. Het is afhankelijk omdat de timing van uw animatie direct in conflict staat met de UI-thread, waar ook actieve gebruikersinvoer en andere updates de runtime-aanpassingen op de gebruikersinterface proberen door te voeren. Een afhankelijke animatie die uitgebreide systeemresources op de UI-thread verbruikt, kan ervoor zorgen dat de app niet meer reageert in bepaalde situaties. Als uw animatie een indelingswijziging veroorzaakt of anderszins invloed heeft op de prestaties van de UI-thread, moet u de animatie vaak expliciet inschakelen om deze uit te voeren. Hiervoor is de eigenschap EnableDependentAnimation voor specifieke animatieklassen bedoeld. Zie Afhankelijke en onafhankelijke animaties voor meer informatie.
  • Aangepaste easing-functies worden momenteel niet ondersteund in Windows Runtime.
  • Last updated on