Animate labels for 20 seconds - xamarin

Question

I have 3 labels binded like following
<StackLayout>
<Label Padding="1" Text="VRN" FontSize="25" TextColor="Black" VerticalOptions="Center" HorizontalTextAlignment="Center"/>
<Label Padding="1" Text="{Binding VRN}" TextColor="#ba000d" FontSize="100" FontAttributes="Bold" VerticalOptions="Center" HorizontalTextAlignment="Center"/>
<Label Padding="1" Text="Make" FontSize="25" TextColor="Black" VerticalOptions="Center" HorizontalTextAlignment="Center"/>
<Label Text="{Binding Make}" TextColor="#ba000d" FontSize="100" FontAttributes="Bold" VerticalOptions="Center" HorizontalTextAlignment="Center"/>
<Label Text="{Binding Model}" TextColor="#ba000d" FontSize="30" FontAttributes="Bold" VerticalOptions="Center" HorizontalTextAlignment="Center"/>
</StackLayout>
Binding is done in ItemModel like following
string _vrn = "";
public string VRN
{
protected set
{
if (_vrn != value)
{
_vrn = value;
OnPropertyChanged("VRN");
}
}
get { return _vrn ; }
}
string _make= "";
public string Make
{
protected set
{
if (_make!= value)
{
_make= value;
OnPropertyChanged("Make");
}
}
get { return _make; }
}
string _model = "";
public string Model
{
protected set
{
if (_model != value)
{
_model = value;
OnPropertyChanged("Model");
}
}
get { return _model ; }
}
hubConnection.On<string>("NewItem", (item) =>
{
MainThread.BeginInvokeOnMainThread(async () =>
{
Item newItem = JsonConvert.DeserializeObject<Item>(item);
VRN= newItem.VRN;
Make= newItem.Make;
Model= newItem.Model;
}
}
Above code will set the labels with value of last item inserted. Up to here done.
I want to animate(Blink) the 3 labels for 20 seconds whenever new item is added to Item ObservableCollection(I am using SignalR to insert data)
I already have a class which i am using it with CollectionView for another scenario.Is there any way i can use the following class to animate Labels or is there any other easy way?
public class BlinkTriggerAction : TriggerAction<VisualElement>
{
protected async override void Invoke(VisualElement sender)
{
var parentAnimation = new Animation();
var fadeOutAnimation = new Animation(d => sender.Opacity = d, 1, 0, Easing.Linear);
var fadeInAnimation = new Animation(d => sender.Opacity = d, 0, 1, Easing.Linear);
parentAnimation.Add(0, 0.5, fadeOutAnimation);
parentAnimation.Add(0.5, 1, fadeInAnimation);
parentAnimation.Add(0, 0.5, fadeOutAnimation);
parentAnimation.Add(0.5, 1, fadeInAnimation);
parentAnimation.Add(0, 0.5, fadeOutAnimation);
parentAnimation.Add(0.5, 1, fadeInAnimation);
parentAnimation.Add(0, 0.5, fadeOutAnimation);
parentAnimation.Add(0.5, 1, fadeInAnimation);
parentAnimation.Commit(sender, "BlinkingVisualElement", 16, 800, repeat: () => true);
await Task.Delay(20000);
parentAnimation.Add(0, 0.5, fadeOutAnimation);
parentAnimation.Add(0.5, 1, fadeInAnimation);
sender.AbortAnimation("BlinkingVisualElement");
}
}

Answer 1

If you are looking for reusability I would suggest using behaviours instead of Triggers, as it lets you add it under the styles which Triggers don't.
Your BlinkTriggerBehavior would be something like this:
Note: I am using VisualElement here, you can use anything in future e.g Button, Label, Entry etc.
public class BlinkTriggerBehavior: Behavior<VisualElement>
{
protected override void OnAttachedTo(VisualElement bindable)
{
base.OnAttachedTo(bindable);
bindable.PropertyChanged += Animate; // binding property changed event
}
private async void Animate(object obj, PropertyChangedEventArgs e)
{
// your animation code gets fired everytime any of your Label
// property changes or any VisualElement which uses this behavior.
// If you wish you can use whatever property name you wish here or keep your
// animation code as is.
if (e.PropertyName == "Text")
{
//Your animation code
}
}
protected override void OnDetachingFrom(VisualElement bindable)
{
base.OnDetachingFrom(bindable);
bindable.PropertyChanged -= Animate;
}
}
In your MainPage.xaml, contentpage resource you can add the following:
<Style TargetType="Label">
<Style.Behaviors>
<views:BlinkTriggerBehavior />
</Style.Behaviors>
</Style>
... any other Target type Like you mentioned CollectionView ViewCell

Answer 2

If you want to make the animation for the label, you could download the source file from the link below:
https://learn.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/userinterface-animation-basic/
Change the xaml in RotateAnimationPage like below.
<StackLayout Margin="0,20,0,0">
<!--<Image x:Name="image" Source="monkey.png" VerticalOptions="CenterAndExpand" />-->
<Label
x:Name="image"
BackgroundColor="Accent"
HorizontalOptions="Center"
Text="Hello"
VerticalOptions="CenterAndExpand" />
<Button
x:Name="startButton"
Clicked="OnStartAnimationButtonClicked"
Text="Start Animation"
VerticalOptions="EndAndExpand" />
<Button
x:Name="cancelButton"
Clicked="OnCancelAnimationButtonClicked"
IsEnabled="false"
Text="Cancel Animation"
VerticalOptions="EndAndExpand" />
</StackLayout>
Screenshot:
And if you want to animate labels for 20 seconds, you could set the RotateTo length which to animate the transition to 20000. The screenshot set with 2000.
await image.RotateTo(360, 20000);