In previous posts (Visual States in Xamarin.Forms using BuildIt.Forms and Xamarin.Forms Visual States with View Models) I demonstrated how the BuildIt.Forms library (https://www.nuget.org/packages/BuildIt.Forms) could be used to declare visual states for pages, and controls, within Xamarin Forms. Today we just added some basic support for animations so that as you transition between visual states you can animate elements of the screen:
The following visual states define animations for rotating a green square:
<Grid HeightRequest=”100″ WidthRequest=”100″ x_Name=”AnimateGrid” HorizontalOptions=”Start” BackgroundColor=”Green” />
The Hide visual state defines three animations that run in parallel, with the rotation being a sequence of animations. The Show visual state has the reverse animations to return the green square to the original starting position. Unlike the setters, there’s no built in support for returning the element to its unchanged state.
<vsm:VisualStateManager.VisualStateGroups>
<x:Array Type=”{x:Type vsm:VisualStateGroup}”>
<vsm:VisualStateGroup Name=”SampleStates”>
<vsm:VisualState Name=”Show”>
<vsm:VisualState.Animations>
<vsm:TranslateAnimation TranslationX=”0″ Duration=”500″ Target=”AnimateGrid”/>
<vsm:FadeAnimation Opacity=”1″ Duration=”500″ Target=”AnimateGrid”/>
<vsm:RotateAnimation Rotation=”0″ Duration=”500″ Target=”AnimateGrid”/>
</vsm:VisualState.Animations>
</vsm:VisualState>
<vsm:VisualState Name=”Hide”>
<vsm:VisualState.Setters>
<vsm:Setter Value=”false”
Target=”WelcomeText.IsVisible” />
</vsm:VisualState.Setters>
<vsm:VisualState.Animations>
<vsm:ParallelAnimation>
<vsm:TranslateAnimation TranslationX=”200″ Duration=”3000″ Target=”AnimateGrid”/>
<vsm:FadeAnimation Opacity=”0.2″ Duration=”3000″ Target=”AnimateGrid”/>
<vsm:SequenceAnimation>
<vsm:RotateAnimation Rotation=”135″ Duration=”750″ Target=”AnimateGrid”/>
<vsm:RotateAnimation Rotation=”0″ Duration=”750″ Target=”AnimateGrid”/>
<vsm:RotateAnimation Rotation=”135″ Duration=”750″ Target=”AnimateGrid”/>
<vsm:RotateAnimation Rotation=”0″ Duration=”750″ Target=”AnimateGrid”/>
</vsm:SequenceAnimation>
</vsm:ParallelAnimation>
</vsm:VisualState.Animations>
</vsm:VisualState>
</vsm:VisualStateGroup>
</x:Array>
</vsm:VisualStateManager.VisualStateGroups>
This is how these animations play out:
