首页 > 解决方案 > 动画标签 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 时,我想为 3 个标签设置动画(闪烁)20 秒(我正在使用 SignalR 插入数据)

我已经有一个类,我将它与 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");

    }
}

标签: xamarinxamarin.formsxamarin.android

解决方案


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

如下更改 xaml RotateAnimationPage

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

推荐阅读