动画标签20秒钟

如何解决动画标签20秒钟

我有3个标签，如下所示

<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>

绑定是在ItemModel中完成的，如下所示

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;
                 }
               }

以上代码将使用插入的最后一项的值来设置标签。到此为止。

每当将新项目添加到Item ObservableCollection（我正在使用SignalR插入数据）时，我都希望对3个标签进行动画处理（闪烁）20秒。

我已经有一个可以在其他场景中与CollectionView一起使用的类。是否可以使用以下类为Label设置动画，或者是否有其他简单方法？

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,Easing.Linear);
            var fadeInAnimation = new Animation(d => sender.Opacity = d,Easing.Linear);
            parentAnimation.Add(0,0.5,fadeOutAnimation);
            parentAnimation.Add(0.5,fadeInAnimation);
            parentAnimation.Add(0,fadeInAnimation);
            parentAnimation.Commit(sender,"BlinkingVisualElement",16,800,repeat: () => true);
            await Task.Delay(20000);
            parentAnimation.Add(0,fadeInAnimation);
            sender.AbortAnimation("BlinkingVisualElement");

    }
}

解决方法

如果要制作标签的动画，可以从下面的链接下载源文件： https://docs.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/userinterface-animation-basic/

如下所示更改RotateAnimationPage中的xaml。

 <StackLayout Margin="0,20,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>

屏幕截图：

如果要为标签设置动画强度 20秒，则可以设置RotateTo长度，以为过渡到20000的动画效果。屏幕截图设置为2000。

  await image.RotateTo(360,20000);

,

如果您正在寻找可重用性，我建议您使用行为代替触发器，因为它使您可以将其添加为触发器不具备的样式。

您的BlinkTriggerBehavior将如下所示： 注意：我在这里使用VisualElement，以后可以使用任何东西，例如Button，Label，Entry等。

  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;
    }
  }

在MainPage.xaml的内容页面资源中，您可以添加以下内容：

         <Style TargetType="Label">
            <Style.Behaviors>
                <views:BlinkTriggerBehavior />
            </Style.Behaviors>
        </Style>
        ... any other Target type Like you mentioned CollectionView ViewCell