动画标签 20 秒

Question

我绑定了 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 一起用于另一个场景。有什么方法可以使用下面的类为标签设置动画还是有其他简单的方法？

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

如果您正在寻找可重用性，我建议您使用行为而不是触发器，因为它可以让您将其添加到触发器没有的样式下。

您的 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, contentpage 资源中您可以添加以下内容：

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

Answer 2

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

如下更改RotateAnimationPage 中的xaml。

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

截图：

如果您想为标签设置动画效果 20 秒，您可以设置 RotateTo 长度，以将过渡动画设置为 20000。截图设置为2000。

  await image.RotateTo(360, 20000);