Notitie
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen u aan te melden of de directory te wijzigen.
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen de mappen te wijzigen.
De animatieklassen van de .NET Multi-platform App UI (.NET MAUI) richten zich op verschillende eigenschappen van visuele elementen, waarbij een typische basisanimatie een eigenschap geleidelijk van de ene waarde naar de andere verandert gedurende een bepaalde periode.
Basisanimaties kunnen worden gemaakt met extensiemethoden die worden geleverd door de ViewExtensions-klasse, die op VisualElement objecten werken:
- CancelAnimations annuleert animaties.
- FadeTo animates the Opacity property of a VisualElement.
- RelScaleTo applies an animated incremental increase or decrease to the Scale property of a VisualElement.
- RotateTo animates the Rotation property of a VisualElement.
- RelRotateTo applies an animated incremental increase or decrease to the Rotation property of a VisualElement.
- RotateXTo animates the RotationX property of a VisualElement.
- RotateYTo animates the RotationY property of a VisualElement.
- ScaleTo animates the Scale property of a VisualElement.
- ScaleXTo animates the ScaleX property of a VisualElement.
- ScaleYTo animates the ScaleY property of a VisualElement.
- TranslateTo animeert de eigenschappen TranslationX en TranslationY van een VisualElement.
Elke animatie duurt standaard 250 milliseconden. Een duur voor elke animatie kan echter worden opgegeven bij het maken van de animatie.
Notitie
De ViewExtensions klasse biedt ook een LayoutTo extensiemethode. Deze methode is echter bedoeld om te worden gebruikt door indelingen om overgangen tussen indelingsstatussen te animeren die wijzigingen in grootte en positie bevatten.
De animatie-extensiemethoden in de klasse ViewExtensions zijn allemaal asynchroon en retourneren een Task<bool>
-object. De retourwaarde wordt false
als de animatie is voltooid en true
als de animatie is geannuleerd. Wanneer animatiebewerkingen worden gecombineerd met de operator await
, is het daarom mogelijk om sequentiële animaties te maken met volgende animatiemethoden die worden uitgevoerd nadat de vorige methode is voltooid. Zie Samengestelde animatiesvoor meer informatie.
Als er een vereiste is om een animatie op de achtergrond te laten voltooien, kan de operator await
worden weggelaten. In dit scenario worden de animatie-uitbreidingsmethoden snel geretourneerd nadat de animatie is gestart, waarbij de animatie op de achtergrond plaatsvindt. Deze bewerking kan worden gebruikt bij het maken van samengestelde animaties. Zie Samengestelde animatiesvoor meer informatie.
In Android respecteren animaties de instellingen voor systeemanimatie:
- Als de animaties van het systeem zijn uitgeschakeld (door toegankelijkheidsfuncties of ontwikkelaarsfuncties), springen nieuwe animaties onmiddellijk naar de voltooide status.
- Als de energiebesparingsmodus van het apparaat wordt geactiveerd terwijl animaties worden uitgevoerd, springen de animaties onmiddellijk naar de voltooide status.
- Als de animatieduur van het apparaat is ingesteld op nul (uitgeschakeld) terwijl animaties worden uitgevoerd en de API-versie 33 of hoger is, springen de animaties onmiddellijk naar de voltooide status.
Eén animatie
Elke extensiemethode in de klasse ViewExtensions implementeert één animatie-bewerking die geleidelijk een eigenschap wijzigt van de ene waarde in een andere waarde gedurende een bepaalde periode.
Rotatie
Rotatie wordt uitgevoerd met de RotateTo methode, waardoor de eigenschap Rotation van een element geleidelijk wordt gewijzigd:
await image.RotateTo(360, 2000);
image.Rotation = 0;
In dit voorbeeld wordt een Image exemplaar gedraaid tot 360 graden over 2 seconden (2000 milliseconden). De methode RotateTo haalt de huidige Rotation eigenschapswaarde van het element voor het begin van de animatie op en draait vervolgens van die waarde naar het eerste argument (360). Zodra de animatie is voltooid, wordt de eigenschap Rotation van de afbeelding opnieuw ingesteld op 0. Dit zorgt ervoor dat de eigenschap Rotation niet op 360 blijft nadat de animatie is afgesloten, waardoor extra rotaties worden voorkomen.
Notitie
Naast de methode RotateTo zijn er ook RotateXTo- en RotateYTo methoden waarmee respectievelijk de eigenschappen van de RotationX
en RotationY
worden geanimeerd.
Relatieve rotatie
Relatieve rotatie wordt uitgevoerd met de methode RelRotateTo, waardoor de eigenschap Rotation van een element geleidelijk wordt gewijzigd:
await image.RelRotateTo(360, 2000);
In this example, an Image instance is rotated 360 degrees from its starting position over 2 seconds (2000 milliseconds). De RelRotateTo methode verkrijgt de huidige Rotation eigenschapswaarde van het element voor het begin van de animatie en draait vervolgens van die waarde naar de waarde plus het eerste argument (360). Dit zorgt ervoor dat elke animatie altijd een draaiing van 360 graden vanaf de beginpositie zal zijn. Als er dus een nieuwe animatie wordt aangeroepen terwijl er al een animatie wordt uitgevoerd, begint deze vanaf de huidige positie en eindigt deze op een positie die geen verhoging van 360 graden is.
Scaling
Scaling is performed with the ScaleTo method, which progressively changes the Scale
property of an element:
await image.ScaleTo(2, 2000);
In dit voorbeeld wordt een Image exemplaar omhoog geschaald tot twee keer de grootte in meer dan 2 seconden (2000 milliseconden). De methode ScaleTo verkrijgt de huidige Scale eigenschapswaarde van het element voor het begin van de animatie en schaalt vervolgens van die waarde naar het eerste argument. Dit heeft het effect van het uitbreiden van de grootte van de afbeelding tot twee keer de grootte.
Notitie
Naast de methode ScaleTo zijn er ook ScaleXTo- en ScaleYTo methoden waarmee respectievelijk de eigenschappen van de ScaleX
en ScaleY
worden geanimeerd.
Relatieve schaalaanpassing
Relatieve schaalaanpassing wordt uitgevoerd met de methode RelScaleTo, waardoor de eigenschap Scale van een element geleidelijk wordt gewijzigd:
await image.RelScaleTo(2, 2000);
In dit voorbeeld wordt een Image exemplaar omhoog geschaald tot twee keer de grootte in meer dan 2 seconden (2000 milliseconden). De methode RelScaleTo verkrijgt de huidige Scale eigenschapswaarde van het element voor het begin van de animatie en schaalt vervolgens van die waarde naar de waarde plus het eerste argument. Dit zorgt ervoor dat elke animatie altijd een schaal van 2 vanaf de beginpositie is.
Scaling and rotation with anchors
De eigenschappen AnchorX
en AnchorY
van een visueel element stellen het midden van schalen of draaien voor de eigenschappen Rotation en Scale in. Daarom zijn hun waarden ook van invloed op de methoden RotateTo en ScaleTo.
Gezien een Image die in het midden van een indeling is geplaatst, laat het volgende codevoorbeeld zien hoe u de afbeelding rond het midden van de indeling draait door de eigenschap AnchorY
in te stellen:
double radius = Math.Min(absoluteLayout.Width, absoluteLayout.Height) / 2;
image.AnchorY = radius / image.Height;
await image.RotateTo(360, 2000);
Als u het Image exemplaar rond het midden van de indeling wilt draaien, moeten de eigenschappen AnchorX en AnchorY worden ingesteld op waarden die ten opzichte van de breedte en hoogte van de Imagezijn. In dit voorbeeld wordt het midden van de Image gedefinieerd op het midden van de indeling, zodat de standaardwaarde AnchorX van 0,5 niet hoeft te worden gewijzigd. De eigenschap AnchorY wordt echter opnieuw gedefinieerd als een waarde van boven aan de Image naar het middelpunt van de indeling. Dit zorgt ervoor dat de Image een volledige draaiing van 360 graden rond het middelpunt van de indeling maakt.
Translation
Vertaling wordt uitgevoerd met de methode TranslateTo, waarmee de TranslationX en TranslationY eigenschappen van een element geleidelijk worden gewijzigd:
await image.TranslateTo(-100, -100, 1000);
In dit voorbeeld wordt het Image exemplaar horizontaal en verticaal verplaatst binnen 1 seconde (1000 milliseconden). De TranslateTo-methode verplaatst de afbeelding 100 apparaatonafhankelijke eenheden naar links en 100 eenheden omhoog. Dit komt doordat de eerste en tweede argumenten beide negatieve getallen zijn. Als u positieve getallen opgeeft, wordt de afbeelding naar rechts en omlaag verplaatst.
Belangrijk
Als een element aanvankelijk buiten het scherm is geplaatst en vervolgens naar het scherm wordt verplaatst, blijft de invoerindeling van het element buiten het scherm en kan de gebruiker er niet mee interageren. Therefore, it's recommended that a view should be laid out in its final position, and then any required translations performed.
Vervagen
Vervagen wordt uitgevoerd met de methode FadeTo, waardoor de eigenschap Opacity van een element geleidelijk wordt gewijzigd:
image.Opacity = 0;
await image.FadeTo(1, 4000);
In dit voorbeeld vervaagt het Image exemplaar in meer dan 4 seconden (4000 milliseconden). De methode FadeTo verkrijgt de huidige Opacity eigenschapswaarde van het element voor het begin van de animatie en vervaagt vervolgens van die waarde naar het eerste argument.
Samengestelde animaties
Een samengestelde animatie is een opeenvolgende combinatie van animaties en kan worden gemaakt met de operator await
:
await image.TranslateTo(-100, 0, 1000); // Move image left
await image.TranslateTo(-100, -100, 1000); // Move image diagonally up and left
await image.TranslateTo(100, 100, 2000); // Move image diagonally down and right
await image.TranslateTo(0, 100, 1000); // Move image left
await image.TranslateTo(0, 0, 1000); // Move image up
In dit voorbeeld wordt de Image-instantie in 6 seconden (6000 milliseconden) vertaald. De vertaling van de Image maakt gebruik van vijf animaties, waarbij de operator await
aangeeft dat elke animatie opeenvolgend wordt uitgevoerd. Daarom worden volgende animatiemethoden uitgevoerd nadat de vorige methode is voltooid.
Samengestelde animaties
Een samengestelde animatie is een combinatie van animaties waarbij twee of meer animaties tegelijk worden uitgevoerd. Samengestelde animaties kunnen worden gemaakt door verwachte en niet-verwachte animaties te combineren.
image.RotateTo(360, 4000);
await image.ScaleTo(2, 2000);
await image.ScaleTo(1, 2000);
In this example, the Image instance is scaled and simultaneously rotated over 4 seconds (4000 milliseconds). Bij het schalen van de Image worden twee opeenvolgende animaties gebruikt die zich op hetzelfde moment als de draaiing voordoen. De methode RotateTo wordt uitgevoerd zonder een operator voor await
en retourneert onmiddellijk, waarbij de eerste ScaleTo animatie vervolgens begint. De operator await
op de eerste ScaleTo methode vertraagt de tweede ScaleTo methode totdat de eerste ScaleTo-methode is voltooid. Op dit moment is de RotateTo animatie half voltooid en wordt de Image 180 graden gedraaid. Tijdens de laatste 2 seconden (2000 milliseconden) is de tweede ScaleTo animatie en de RotateTo animatie beide voltooid.
Meerdere animaties gelijktijdig uitvoeren
De methoden Task.WhenAny
en Task.WhenAll
kunnen worden gebruikt om gelijktijdig meerdere asynchrone methoden uit te voeren en kunnen daarom samengestelde animaties maken. Beide methoden retourneren een Task
-object en accepteren een verzameling methoden die elk een Task
-object retourneren. De Task.WhenAny
-methode wordt voltooid wanneer een methode in de verzameling de uitvoering voltooit, zoals wordt weergegeven in het volgende codevoorbeeld:
await Task.WhenAny<bool>
(
image.RotateTo(360, 4000),
image.ScaleTo(2, 2000)
);
await image.ScaleTo(1, 2000);
In dit voorbeeld bevat de methode Task.WhenAny
twee taken. The first task rotates an Image instance over 4 seconds (4000 milliseconds), and the second task scales the image over 2 seconds (2000 milliseconds). When the second task completes, the Task.WhenAny
method call completes. Hoewel de methode RotateTo nog steeds wordt uitgevoerd, kan de tweede ScaleTo methode beginnen.
De Task.WhenAll
-methode wordt voltooid wanneer alle methoden in de verzameling zijn voltooid, zoals wordt weergegeven in het volgende codevoorbeeld:
// 10 minute animation
uint duration = 10 * 60 * 1000;
await Task.WhenAll
(
image.RotateTo(307 * 360, duration),
image.RotateXTo(251 * 360, duration),
image.RotateYTo(199 * 360, duration)
);
In dit voorbeeld bevat de methode Task.WhenAll
drie taken, die elk meer dan 10 minuten worden uitgevoerd. Elke Task
maakt een ander aantal 360 graden draaiingen : 307 draaiingen voor RotateTo, 251 draaiingen voor RotateXToen 199 draaiingen voor RotateYTo. Deze waarden zijn priemgetallen, waardoor de rotaties niet worden gesynchroniseerd en daarom geen terugkerende patronen opleveren.
De animatieklassen van de .NET Multi-platform App UI (.NET MAUI) richten zich op verschillende eigenschappen van visuele elementen, waarbij een typische basisanimatie een eigenschap geleidelijk van de ene waarde naar de andere verandert gedurende een bepaalde periode.
Basisanimaties kunnen worden gemaakt met extensiemethoden die worden geleverd door de ViewExtensions-klasse, die op VisualElement objecten werken:
- CancelAnimations annuleert animaties.
- FadeTo animates the Opacity property of a VisualElement.
- RelScaleToAsync applies an animated incremental increase or decrease to the Scale property of a VisualElement.
- RotateToAsync animates the Rotation property of a VisualElement.
- RelRotateToAsync applies an animated incremental increase or decrease to the Rotation property of a VisualElement.
- RotateXToAsync animates the RotationX property of a VisualElement.
- RotateYToAsync animates the RotationY property of a VisualElement.
- ScaleToAsync animates the Scale property of a VisualElement.
- ScaleXToAsync animates the ScaleX property of a VisualElement.
- ScaleYToAsync animates the ScaleY property of a VisualElement.
- TranslateToAsync animeert de eigenschappen TranslationX en TranslationY van een VisualElement.
Elke animatie duurt standaard 250 milliseconden. Een duur voor elke animatie kan echter worden opgegeven bij het maken van de animatie.
Notitie
De ViewExtensions klasse biedt ook een LayoutToAsync extensiemethode. Deze methode is echter bedoeld om te worden gebruikt door indelingen om overgangen tussen indelingsstatussen te animeren die wijzigingen in grootte en positie bevatten.
De animatie-extensiemethoden in de klasse ViewExtensions zijn allemaal asynchroon en retourneren een Task<bool>
-object. De retourwaarde wordt false
als de animatie is voltooid en true
als de animatie is geannuleerd. Wanneer animatiebewerkingen worden gecombineerd met de operator await
, is het daarom mogelijk om sequentiële animaties te maken met volgende animatiemethoden die worden uitgevoerd nadat de vorige methode is voltooid. Zie Samengestelde animatiesvoor meer informatie.
Als er een vereiste is om een animatie op de achtergrond te laten voltooien, kan de operator await
worden weggelaten. In dit scenario worden de animatie-uitbreidingsmethoden snel geretourneerd nadat de animatie is gestart, waarbij de animatie op de achtergrond plaatsvindt. Deze bewerking kan worden gebruikt bij het maken van samengestelde animaties. Zie Samengestelde animatiesvoor meer informatie.
In Android respecteren animaties de instellingen voor systeemanimatie:
- Als de animaties van het systeem zijn uitgeschakeld (door toegankelijkheidsfuncties of ontwikkelaarsfuncties), springen nieuwe animaties onmiddellijk naar de voltooide status.
- Als de energiebesparingsmodus van het apparaat wordt geactiveerd terwijl animaties worden uitgevoerd, springen de animaties onmiddellijk naar de voltooide status.
- Als de animatieduur van het apparaat is ingesteld op nul (uitgeschakeld) terwijl animaties worden uitgevoerd en de API-versie 33 of hoger is, springen de animaties onmiddellijk naar de voltooide status.
Eén animatie
Elke extensiemethode in de klasse ViewExtensions implementeert één animatie-bewerking die geleidelijk een eigenschap wijzigt van de ene waarde in een andere waarde gedurende een bepaalde periode.
Rotatie
Rotatie wordt uitgevoerd met de RotateToAsync methode, waardoor de eigenschap Rotation van een element geleidelijk wordt gewijzigd:
await image.RotateToAsync(360, 2000);
image.Rotation = 0;
In dit voorbeeld wordt een Image exemplaar gedraaid tot 360 graden over 2 seconden (2000 milliseconden). De methode RotateToAsync haalt de huidige Rotation eigenschapswaarde van het element voor het begin van de animatie op en draait vervolgens van die waarde naar het eerste argument (360). Zodra de animatie is voltooid, wordt de eigenschap Rotation van de afbeelding opnieuw ingesteld op 0. Dit zorgt ervoor dat de eigenschap Rotation niet op 360 blijft nadat de animatie is afgesloten, waardoor extra rotaties worden voorkomen.
Notitie
Naast de methode RotateToAsync zijn er ook RotateXToAsync- en RotateYToAsync methoden waarmee respectievelijk de eigenschappen van de RotationX
en RotationY
worden geanimeerd.
Relatieve rotatie
Relatieve rotatie wordt uitgevoerd met de methode RelRotateToAsync, waardoor de eigenschap Rotation van een element geleidelijk wordt gewijzigd:
await image.RelRotateToAsync(360, 2000);
In this example, an Image instance is rotated 360 degrees from its starting position over 2 seconds (2000 milliseconds). De RelRotateToAsync methode verkrijgt de huidige Rotation eigenschapswaarde van het element voor het begin van de animatie en draait vervolgens van die waarde naar de waarde plus het eerste argument (360). Dit zorgt ervoor dat elke animatie altijd een draaiing van 360 graden vanaf de beginpositie zal zijn. Als er dus een nieuwe animatie wordt aangeroepen terwijl er al een animatie wordt uitgevoerd, begint deze vanaf de huidige positie en eindigt deze op een positie die geen verhoging van 360 graden is.
Scaling
Scaling is performed with the ScaleToAsync method, which progressively changes the Scale
property of an element:
await image.ScaleToAsync(2, 2000);
In dit voorbeeld wordt een Image exemplaar omhoog geschaald tot twee keer de grootte in meer dan 2 seconden (2000 milliseconden). De methode ScaleToAsync verkrijgt de huidige Scale eigenschapswaarde van het element voor het begin van de animatie en schaalt vervolgens van die waarde naar het eerste argument. Dit heeft het effect van het uitbreiden van de grootte van de afbeelding tot twee keer de grootte.
Notitie
Naast de methode ScaleToAsync zijn er ook ScaleXToAsync- en ScaleYToAsync methoden waarmee respectievelijk de eigenschappen van de ScaleX
en ScaleY
worden geanimeerd.
Relatieve schaalaanpassing
Relatieve schaalaanpassing wordt uitgevoerd met de methode RelScaleToAsync, waardoor de eigenschap Scale van een element geleidelijk wordt gewijzigd:
await image.RelScaleToAsync(2, 2000);
In dit voorbeeld wordt een Image exemplaar omhoog geschaald tot twee keer de grootte in meer dan 2 seconden (2000 milliseconden). De methode RelScaleTo verkrijgt de huidige Scale eigenschapswaarde van het element voor het begin van de animatie en schaalt vervolgens van die waarde naar de waarde plus het eerste argument. Dit zorgt ervoor dat elke animatie altijd een schaal van 2 vanaf de beginpositie is.
Scaling and rotation with anchors
De eigenschappen AnchorX
en AnchorY
van een visueel element stellen het midden van schalen of draaien voor de eigenschappen Rotation en Scale in. Daarom zijn hun waarden ook van invloed op de methoden RotateToAsync en ScaleToAsync.
Gezien een Image die in het midden van een indeling is geplaatst, laat het volgende codevoorbeeld zien hoe u de afbeelding rond het midden van de indeling draait door de eigenschap AnchorY
in te stellen:
double radius = Math.Min(absoluteLayout.Width, absoluteLayout.Height) / 2;
image.AnchorY = radius / image.Height;
await image.RotateToAsync(360, 2000);
Als u het Image exemplaar rond het midden van de indeling wilt draaien, moeten de eigenschappen AnchorX en AnchorY worden ingesteld op waarden die ten opzichte van de breedte en hoogte van de Imagezijn. In dit voorbeeld wordt het midden van de Image gedefinieerd op het midden van de indeling, zodat de standaardwaarde AnchorX van 0,5 niet hoeft te worden gewijzigd. De eigenschap AnchorY wordt echter opnieuw gedefinieerd als een waarde van boven aan de Image naar het middelpunt van de indeling. Dit zorgt ervoor dat de Image een volledige draaiing van 360 graden rond het middelpunt van de indeling maakt.
Translation
Vertaling wordt uitgevoerd met de methode TranslateToAsync, waarmee de TranslationX en TranslationY eigenschappen van een element geleidelijk worden gewijzigd:
await image.TranslateToAsync(-100, -100, 1000);
In dit voorbeeld wordt het Image exemplaar horizontaal en verticaal verplaatst binnen 1 seconde (1000 milliseconden). De TranslateToAsync-methode verplaatst de afbeelding 100 apparaatonafhankelijke eenheden naar links en 100 eenheden omhoog. Dit komt doordat de eerste en tweede argumenten beide negatieve getallen zijn. Als u positieve getallen opgeeft, wordt de afbeelding naar rechts en omlaag verplaatst.
Belangrijk
Als een element aanvankelijk buiten het scherm is geplaatst en vervolgens naar het scherm wordt verplaatst, blijft de invoerindeling van het element buiten het scherm en kan de gebruiker er niet mee interageren. Therefore, it's recommended that a view should be laid out in its final position, and then any required translations performed.
Vervagen
Vervagen wordt uitgevoerd met de methode FadeToAsync, waardoor de eigenschap Opacity van een element geleidelijk wordt gewijzigd:
image.Opacity = 0;
await image.FadeToAsync(1, 4000);
In dit voorbeeld vervaagt het Image exemplaar in meer dan 4 seconden (4000 milliseconden). De methode FadeToAsync verkrijgt de huidige Opacity eigenschapswaarde van het element voor het begin van de animatie en vervaagt vervolgens van die waarde naar het eerste argument.
Samengestelde animaties
Een samengestelde animatie is een opeenvolgende combinatie van animaties en kan worden gemaakt met de operator await
:
await image.TranslateToAsync(-100, 0, 1000); // Move image left
await image.TranslateToAsync(-100, -100, 1000); // Move image diagonally up and left
await image.TranslateToAsync(100, 100, 2000); // Move image diagonally down and right
await image.TranslateToAsync(0, 100, 1000); // Move image left
await image.TranslateToAsync(0, 0, 1000); // Move image up
In dit voorbeeld wordt de Image-instantie in 6 seconden (6000 milliseconden) vertaald. De vertaling van de Image maakt gebruik van vijf animaties, waarbij de operator await
aangeeft dat elke animatie opeenvolgend wordt uitgevoerd. Daarom worden volgende animatiemethoden uitgevoerd nadat de vorige methode is voltooid.
Samengestelde animaties
Een samengestelde animatie is een combinatie van animaties waarbij twee of meer animaties tegelijk worden uitgevoerd. Samengestelde animaties kunnen worden gemaakt door verwachte en niet-verwachte animaties te combineren.
image.RotateToAsync(360, 4000);
await image.ScaleToAsync(2, 2000);
await image.ScaleToAsync(1, 2000);
In this example, the Image instance is scaled and simultaneously rotated over 4 seconds (4000 milliseconds). Bij het schalen van de Image worden twee opeenvolgende animaties gebruikt die zich op hetzelfde moment als de draaiing voordoen. De methode RotateToAsync wordt uitgevoerd zonder een operator voor await
en retourneert onmiddellijk, waarbij de eerste ScaleToAsync animatie vervolgens begint. De operator await
op de eerste ScaleToAsync methode vertraagt de tweede ScaleToAsync methode totdat de eerste ScaleToAsync-methode is voltooid. Op dit moment is de RotateToAsync animatie half voltooid en wordt de Image 180 graden gedraaid. Tijdens de laatste 2 seconden (2000 milliseconden) is de tweede ScaleToAsync animatie en de RotateToAsync animatie beide voltooid.
Meerdere animaties gelijktijdig uitvoeren
De methoden Task.WhenAny
en Task.WhenAll
kunnen worden gebruikt om gelijktijdig meerdere asynchrone methoden uit te voeren en kunnen daarom samengestelde animaties maken. Beide methoden retourneren een Task
-object en accepteren een verzameling methoden die elk een Task
-object retourneren. De Task.WhenAny
-methode wordt voltooid wanneer een methode in de verzameling de uitvoering voltooit, zoals wordt weergegeven in het volgende codevoorbeeld:
await Task.WhenAny<bool>
(
image.RotateToAsync(360, 4000),
image.ScaleToAsync(2, 2000)
);
await image.ScaleToAsync(1, 2000);
In dit voorbeeld bevat de methode Task.WhenAny
twee taken. The first task rotates an Image instance over 4 seconds (4000 milliseconds), and the second task scales the image over 2 seconds (2000 milliseconds). When the second task completes, the Task.WhenAny
method call completes. Hoewel de methode RotateToAsync nog steeds wordt uitgevoerd, kan de tweede ScaleToAsync methode beginnen.
De Task.WhenAll
-methode wordt voltooid wanneer alle methoden in de verzameling zijn voltooid, zoals wordt weergegeven in het volgende codevoorbeeld:
// 10 minute animation
uint duration = 10 * 60 * 1000;
await Task.WhenAll
(
image.RotateToAsync(307 * 360, duration),
image.RotateXToAsync(251 * 360, duration),
image.RotateYToAsync(199 * 360, duration)
);
In dit voorbeeld bevat de methode Task.WhenAll
drie taken, die elk meer dan 10 minuten worden uitgevoerd. Elke Task
maakt een ander aantal 360 graden draaiingen : 307 draaiingen voor RotateToAsync, 251 draaiingen voor RotateXToAsyncen 199 draaiingen voor RotateYToAsync. Deze waarden zijn priemgetallen, waardoor de rotaties niet worden gesynchroniseerd en daarom geen terugkerende patronen opleveren.
Animaties annuleren
De CancelAnimations extensiemethode wordt gebruikt om animaties te annuleren, zoals draaien, schalen, vertalen en vervagen, die worden uitgevoerd op een specifieke VisualElement.
image.CancelAnimations();
In dit voorbeeld worden alle animaties die worden uitgevoerd op het Image exemplaar onmiddellijk geannuleerd.