xamarin - 动画标签 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");
}
}
解决方案
如果要为标签制作动画,可以从以下链接下载源文件: 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);
推荐阅读
- reactjs - 反应钩子将 useState 元素记录为 null 时它不是
- php - RewriteRule 123456.js 为 js.php?arg=123456
- google-apps-script - 使用 Google Apps 脚本对行进行分组
- python - 检查python dict中的值
- gitlab - 仅上传更改的文件而不是 gitlab 中的所有文件
- cassandra - Cassandra 没有使用 CPU 和 RAM
- pandas - 如何删除熊猫数据框中的特定行
- firebase - Firebase 实时数据库规则模拟失败
- reactjs - 如何在 React js 中使用 redux 进行登录
- google-apps-script - 如何访问将访问权限设置为仅使用公司帐户部署的 Web 应用程序?