Create Animation.xml
This commit is contained in:
Wiesław Šoltés
Родитель
e8d13267fa
Коммит
9f157aef69
|
|
@ -0,0 +1,350 @@
|
|||
<UserControl
|
||||
xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:i="clr-namespace:Avalonia.Xaml.Interactivity;assembly=Avalonia.Xaml.Interactivity"
|
||||
xmlns:ia="clr-namespace:Avalonia.Xaml.Interactions.Core;assembly=Avalonia.Xaml.Interactions"
|
||||
MaxWidth="600">
|
||||
<UserControl.Styles>
|
||||
<Styles>
|
||||
<Styles.Resources>
|
||||
<Template x:Key="Acorn">
|
||||
<Path Fill="White" Stretch="Uniform"
|
||||
Data="F1 M 16.6309,18.6563C 17.1309,
|
||||
8.15625 29.8809,14.1563 29.8809,
|
||||
14.1563C 30.8809,11.1563 34.1308,
|
||||
11.4063 34.1308,11.4063C 33.5,12
|
||||
34.6309,13.1563 34.6309,13.1563C
|
||||
32.1309,13.1562 31.1309,14.9062
|
||||
31.1309,14.9062C 41.1309,23.9062
|
||||
32.6309,27.9063 32.6309,27.9062C
|
||||
24.6309,24.9063 21.1309,22.1562
|
||||
16.6309,18.6563 Z M 16.6309,19.9063C
|
||||
21.6309,24.1563 25.1309,26.1562
|
||||
31.6309,28.6562C 31.6309,28.6562
|
||||
26.3809,39.1562 18.3809,36.1563C
|
||||
18.3809,36.1563 18,38 16.3809,36.9063C
|
||||
15,36 16.3809,34.9063 16.3809,34.9063C
|
||||
16.3809,34.9063 10.1309,30.9062 16.6309,19.9063 Z"/>
|
||||
</Template>
|
||||
<Template x:Key="Heart">
|
||||
<Path Fill="Red" Stretch="Uniform" Data="
|
||||
M 272.70141,238.71731
|
||||
C 206.46141,238.71731 152.70146,292.4773 152.70146,358.71731
|
||||
C 152.70146,493.47282 288.63461,528.80461 381.26391,662.02535
|
||||
C 468.83815,529.62199 609.82641,489.17075 609.82641,358.71731
|
||||
C 609.82641,292.47731 556.06651,238.7173 489.82641,238.71731
|
||||
C 441.77851,238.71731 400.42481,267.08774 381.26391,307.90481
|
||||
C 362.10311,267.08773 320.74941,238.7173 272.70141,238.71731 z "/>
|
||||
</Template>
|
||||
</Styles.Resources>
|
||||
<Style Selector="Border.Test">
|
||||
<Setter Property="Margin" Value="15"/>
|
||||
<Setter Property="Width" Value="100"/>
|
||||
<Setter Property="Height" Value="100"/>
|
||||
<Setter Property="Child" Value="{StaticResource Acorn}"/>
|
||||
</Style>
|
||||
<Style Selector="Border.Rect1:pointerover">
|
||||
<Style.Animations>
|
||||
<Animation Duration="0:0:2.5"
|
||||
IterationCount="4"
|
||||
FillMode="None"
|
||||
PlaybackDirection="AlternateReverse"
|
||||
Easing="SineEaseInOut">
|
||||
<KeyFrame Cue="20%">
|
||||
<Setter Property="RotateTransform.Angle" Value="45"/>
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="50%">
|
||||
<Setter Property="ScaleTransform.ScaleX" Value="1.5"/>
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="80%">
|
||||
<Setter Property="RotateTransform.Angle" Value="120"/>
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
<Style Selector="Border.Rect2:pointerover">
|
||||
<Style.Animations>
|
||||
<Animation Duration="0:0:0.5" Easing="SineEaseInOut">
|
||||
<KeyFrame Cue="50%">
|
||||
<Setter Property="ScaleTransform.ScaleX" Value="0.8"/>
|
||||
<Setter Property="ScaleTransform.ScaleY" Value="0.8"/>
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
<Style Selector="Border.Rect3">
|
||||
<Style.Animations>
|
||||
<Animation Duration="0:0:0.5"
|
||||
Easing="QuadraticEaseInOut"
|
||||
IterationCount="Infinite">
|
||||
<KeyFrame Cue="50%">
|
||||
<Setter Property="ScaleTransform.ScaleX" Value="0.8"/>
|
||||
<Setter Property="ScaleTransform.ScaleY" Value="0.8"/>
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
<Setter Property="Child" Value="{StaticResource Heart}"/>
|
||||
</Style>
|
||||
<Style Selector="Border.Rect4:pointerover">
|
||||
<Style.Animations>
|
||||
<Animation Duration="0:0:3" Easing="BounceEaseInOut">
|
||||
<KeyFrame Cue="48%">
|
||||
<Setter Property="TranslateTransform.Y" Value="-100"/>
|
||||
<Setter Property="Background" Value="Magenta"/>
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
<Style Selector="Border.Rect5:pointerover">
|
||||
<Style.Animations>
|
||||
<Animation Duration="0:0:3" Easing="CircularEaseInOut">
|
||||
<KeyFrame Cue="25%">
|
||||
<Setter Property="SkewTransform.AngleX" Value="-20"/>
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="75%">
|
||||
<Setter Property="SkewTransform.AngleX" Value="20"/>
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
<Style Selector="Border.Rect6">
|
||||
<Style.Animations>
|
||||
<Animation Duration="0:0:3"
|
||||
IterationCount="Infinite"
|
||||
PlaybackDirection="Alternate">
|
||||
<KeyFrame Cue="0%">
|
||||
<Setter Property="Background" Value="Red"/>
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="15%">
|
||||
<Setter Property="Background" Value="Yellow"/>
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="30%">
|
||||
<Setter Property="Background" Value="Green"/>
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="45%">
|
||||
<Setter Property="Background" Value="Cyan"/>
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="60%">
|
||||
<Setter Property="Background" Value="Blue"/>
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="75%">
|
||||
<Setter Property="Background" Value="Indigo"/>
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="90%">
|
||||
<Setter Property="Background" Value="Violet"/>
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
<Style Selector="Border.Shadow">
|
||||
<Setter Property="BorderBrush" Value="Black"/>
|
||||
<Setter Property="BorderThickness" Value="1"/>
|
||||
<Style.Animations>
|
||||
<Animation Duration="0:0:3"
|
||||
IterationCount="Infinite"
|
||||
PlaybackDirection="Alternate">
|
||||
<KeyFrame Cue="0%">
|
||||
<Setter Property="BoxShadow" Value="inset 0 0 0 2 Red, -15 -15 Green"/>
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="35%">
|
||||
<Setter Property="BoxShadow" Value="inset 0 0 20 2 Blue, -15 20 0 0 Blue"/>
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="70%">
|
||||
<Setter Property="BoxShadow" Value="inset 0 0 20 30 Green, 20 20 20 0 Red"/>
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="85%">
|
||||
<Setter Property="BoxShadow" Value="inset 30 0 20 30 Green, 20 20 20 10 Red"/>
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="100%">
|
||||
<Setter Property="BoxShadow" Value="inset 30 30 20 30 Green, 20 40 20 10 Red"/>
|
||||
</KeyFrame>
|
||||
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
|
||||
<Style Selector="Border.Rect7">
|
||||
<Style.Animations>
|
||||
<Animation Duration="0:0:3"
|
||||
IterationCount="Infinite"
|
||||
PlaybackDirection="Alternate">
|
||||
<KeyFrame Cue="0%">
|
||||
<Setter Property="Background" Value="Red" />
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="30%">
|
||||
<Setter Property="Background">
|
||||
<LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
|
||||
<GradientStop Offset="0" Color="Red"/>
|
||||
<GradientStop Offset="1" Color="Blue"/>
|
||||
</LinearGradientBrush>
|
||||
</Setter>
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="60%">
|
||||
<Setter Property="Background" Value="Blue" />
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="100%">
|
||||
<Setter Property="Background">
|
||||
<LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
|
||||
<GradientStop Offset="0" Color="Green"/>
|
||||
<GradientStop Offset="1" Color="Yellow"/>
|
||||
</LinearGradientBrush>
|
||||
</Setter>
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
|
||||
<Style Selector="Border.Rect8">
|
||||
<Style.Animations>
|
||||
<Animation Duration="0:0:3"
|
||||
IterationCount="Infinite"
|
||||
PlaybackDirection="Alternate">
|
||||
<KeyFrame Cue="0%">
|
||||
<Setter Property="Background">
|
||||
<LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
|
||||
<GradientStop Offset="0" Color="Red"/>
|
||||
<GradientStop Offset="1" Color="Blue"/>
|
||||
</LinearGradientBrush>
|
||||
</Setter>
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="50%">
|
||||
<Setter Property="Background">
|
||||
<LinearGradientBrush StartPoint="100%,0%" EndPoint="0%,100%">
|
||||
<GradientStop Offset="0" Color="Red"/>
|
||||
<GradientStop Offset="0.25" Color="Blue"/>
|
||||
<GradientStop Offset="0.5" Color="Blue"/>
|
||||
<GradientStop Offset="0.75" Color="Green"/>
|
||||
<GradientStop Offset="1" Color="Yellow"/>
|
||||
</LinearGradientBrush>
|
||||
</Setter>
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="100%">
|
||||
<Setter Property="Background">
|
||||
<LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
|
||||
<GradientStop Offset="0" Color="Red"/>
|
||||
<GradientStop Offset="1" Color="Blue"/>
|
||||
</LinearGradientBrush>
|
||||
</Setter>
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
|
||||
<Style Selector="Border.Rect9">
|
||||
<Style.Animations>
|
||||
<Animation Duration="0:0:3"
|
||||
IterationCount="Infinite"
|
||||
PlaybackDirection="Alternate">
|
||||
<KeyFrame Cue="0%">
|
||||
<Setter Property="Background">
|
||||
<ConicGradientBrush Center="50%,50%" Angle="0">
|
||||
<GradientStop Offset="0" Color="Blue"/>
|
||||
<GradientStop Offset="0.5" Color="Red"/>
|
||||
<GradientStop Offset="1" Color="Blue"/>
|
||||
</ConicGradientBrush>
|
||||
</Setter>
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="100%">
|
||||
<Setter Property="Background">
|
||||
<ConicGradientBrush Center="50%,70%" Angle="90">
|
||||
<GradientStop Offset="0" Color="Green"/>
|
||||
<GradientStop Offset="0.25" Color="Yellow"/>
|
||||
<GradientStop Offset="0.5" Color="Red"/>
|
||||
<GradientStop Offset="0.75" Color="Blue"/>
|
||||
<GradientStop Offset="1" Color="Green"/>
|
||||
</ConicGradientBrush>
|
||||
</Setter>
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
|
||||
<Style Selector="Border.Rect10">
|
||||
<Style.Animations>
|
||||
<Animation Duration="0:0:3"
|
||||
IterationCount="Infinite"
|
||||
PlaybackDirection="Normal">
|
||||
<KeyFrame Cue="0%">
|
||||
<Setter Property="Background">
|
||||
<RadialGradientBrush Center="0%,100%" Radius="0.8">
|
||||
<GradientStop Offset="0" Color="Red"/>
|
||||
<GradientStop Offset="1" Color="Blue"/>
|
||||
</RadialGradientBrush>
|
||||
</Setter>
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="25%">
|
||||
<Setter Property="Background">
|
||||
<RadialGradientBrush Center="0%,0%" Radius="1">
|
||||
<GradientStop Offset="0" Color="Red"/>
|
||||
<GradientStop Offset="1" Color="Blue"/>
|
||||
</RadialGradientBrush>
|
||||
</Setter>
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="50%">
|
||||
<Setter Property="Background">
|
||||
<RadialGradientBrush Center="100%,0%" Radius="0.8">
|
||||
<GradientStop Offset="0" Color="Red"/>
|
||||
<GradientStop Offset="1" Color="Blue"/>
|
||||
</RadialGradientBrush>
|
||||
</Setter>
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="75%">
|
||||
<Setter Property="Background">
|
||||
<RadialGradientBrush Center="100%,100%" Radius="1">
|
||||
<GradientStop Offset="0" Color="Red"/>
|
||||
<GradientStop Offset="1" Color="Blue"/>
|
||||
</RadialGradientBrush>
|
||||
</Setter>
|
||||
</KeyFrame>
|
||||
<KeyFrame Cue="100%">
|
||||
<Setter Property="Background">
|
||||
<RadialGradientBrush Center="0%,100%" Radius="0.8">
|
||||
<GradientStop Offset="0" Color="Red"/>
|
||||
<GradientStop Offset="1" Color="Blue"/>
|
||||
</RadialGradientBrush>
|
||||
</Setter>
|
||||
</KeyFrame>
|
||||
</Animation>
|
||||
</Style.Animations>
|
||||
</Style>
|
||||
</Styles>
|
||||
</UserControl.Styles>
|
||||
<Grid>
|
||||
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" ClipToBounds="False">
|
||||
<StackPanel.Clock>
|
||||
<Clock />
|
||||
</StackPanel.Clock>
|
||||
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" Spacing="20">
|
||||
<TextBlock VerticalAlignment="Center">Hover to activate Keyframe Animations.</TextBlock>
|
||||
<Button Name="Pause" Content="Pause">
|
||||
<i:Interaction.Behaviors>
|
||||
<ia:EventTriggerBehavior EventName="Click" SourceObject="{Binding #Pause}">
|
||||
<ia:ChangePropertyAction TargetObject="{Binding #Pause.Clock}" PropertyName="PlayState" Value="{x:Static PlayState.Pause}" />
|
||||
</ia:EventTriggerBehavior>
|
||||
</i:Interaction.Behaviors>
|
||||
</Button>
|
||||
<Button Name="Run" Content="Run">
|
||||
<i:Interaction.Behaviors>
|
||||
<ia:EventTriggerBehavior EventName="Click" SourceObject="{Binding #Run}">
|
||||
<ia:ChangePropertyAction TargetObject="{Binding #Run.Clock}" PropertyName="PlayState" Value="{x:Static PlayState.Run}" />
|
||||
</ia:EventTriggerBehavior>
|
||||
</i:Interaction.Behaviors>
|
||||
</Button>
|
||||
</StackPanel>
|
||||
<WrapPanel ClipToBounds="False">
|
||||
<Border Classes="Test Rect1" Background="DarkRed"/>
|
||||
<Border Classes="Test Rect2" Background="Magenta"/>
|
||||
<Border Classes="Test Rect3"/>
|
||||
<Border Classes="Test Rect4" Background="Navy"/>
|
||||
<Border Classes="Test Rect5" Background="SeaGreen"/>
|
||||
<Border Classes="Test Rect6" Background="Red"/>
|
||||
<Border Classes="Test Shadow" CornerRadius="10" Child="{x:Null}" />
|
||||
<Border Classes="Test Shadow" CornerRadius="0 30 60 0" Child="{x:Null}" />
|
||||
<Border Classes="Test Rect7" Child="{x:Null}" />
|
||||
<Border Classes="Test Rect8" Child="{x:Null}" />
|
||||
<Border Classes="Test Rect9" Child="{x:Null}" />
|
||||
<Border Classes="Test Rect10" Child="{x:Null}" />
|
||||
</WrapPanel>
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</UserControl>
|
||||
Загрузка…
Ссылка в новой задаче