tsai
/
Avalonia
mirror of https://github.com/AvaloniaUI/Avalonia.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

* Fixed interpolation point selection when theres three or more keyframes. 

*Added new examples in RenderTest/AnimationsPage
pull/1461/head
Jumar Macato 9 years ago
parent
dd657e203d
commit
431afdebb1
2 changed files with 79 additions and 58 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 132
      samples/RenderTest/Pages/AnimationsPage.xaml
  2. 5
      src/Avalonia.Animation/Keyframes/DoubleKeyFrames.cs

132
samples/RenderTest/Pages/AnimationsPage.xaml
View File

@ -1,72 +1,94 @@
<UserControl xmlns="https://github.com/avaloniaui">
<Grid>
<Grid.Styles>
<Styles>
<Style Selector="Rectangle.Test">
<Setter Property="Fill" Value="Red"/>
<Setter Property="Margin" Value="15"/>
<Setter Property="Width" Value="100"/>
<Setter Property="Height" Value="100"/>
</Style>
<Style Selector="Rectangle.Rect1:pointerover">
<Style.Animations>
<Animation Duration="0:0:2.5" Easing="BounceEaseInOut">
<TransformKeyFrames Property="RotateTransform.Angle">
<KeyFrame Cue="0%" Value="0"/>
<KeyFrame Cue="100%" Value="360"/>
</TransformKeyFrames>
</Animation>
</Style.Animations>
</Style>
<Grid>
<Grid.Styles>
<Styles>
<Style Selector="Rectangle.Test">
<Setter Property="Margin" Value="15"/>
<Setter Property="Width" Value="100"/>
<Setter Property="Height" Value="100"/>
</Style>
<Style Selector="Rectangle.Rect2:pointerover">
<Style.Animations>
<Animation Duration="0:0:0.5" Easing="SineEaseInOut">
<TransformKeyFrames Property="ScaleTransform.ScaleX">
<KeyFrame Cue="0%" Value="0.8"/>
<KeyFrame Cue="100%" Value="1"/>
</TransformKeyFrames>
<TransformKeyFrames Property="ScaleTransform.ScaleY">
<KeyFrame Cue="0%" Value="0.8"/>
<KeyFrame Cue="100%" Value="1"/>
</TransformKeyFrames>
</Animation>
</Style.Animations>
</Style>
<Style Selector="Rectangle.Rect1:pointerover">
<Style.Animations>
<Animation Duration="0:0:2.5" Easing="BounceEaseInOut">
<TransformKeyFrames Property="RotateTransform.Angle">
<KeyFrame Cue="0%" Value="0"/>
<KeyFrame Cue="100%" Value="360"/>
</TransformKeyFrames>
</Animation>
</Style.Animations>
</Style>
<Style Selector="Rectangle.Rect3:pointerover">
<Style.Animations>
<Animation Duration="0:0:3" Easing="BounceEaseInOut">
<TransformKeyFrames Property="TranslateTransform.Y">
<KeyFrame Cue="0%" Value="0"/>
<KeyFrame Cue="50%" Value="-100"/>
<KeyFrame Cue="100%" Value="0"/>
</TransformKeyFrames>
</Animation>
</Style.Animations>
</Style>
</Styles>
</Grid.Styles>
<StackPanel VerticalAlignment="Center"
HorizontalAlignment="Center"
Orientation="Horizontal"
ClipToBounds="False">
<Rectangle Classes="Test Rect1">
<Style Selector="Rectangle.Rect2:pointerover">
<Style.Animations>
<Animation Duration="0:0:0.5" Easing="SineEaseInOut">
<TransformKeyFrames Property="ScaleTransform.ScaleX">
<KeyFrame Cue="0%" Value="0.8"/>
<KeyFrame Cue="100%" Value="1"/>
</TransformKeyFrames>
<TransformKeyFrames Property="ScaleTransform.ScaleY">
<KeyFrame Cue="0%" Value="0.8"/>
<KeyFrame Cue="100%" Value="1"/>
</TransformKeyFrames>
</Animation>
</Style.Animations>
</Style>
<Style Selector="Rectangle.Rect3:pointerover">
<Style.Animations>
<Animation Duration="0:0:3" Easing="CircularEaseInOut">
<TransformKeyFrames Property="TranslateTransform.Y">
<KeyFrame Cue="0%" Value="0"/>
<KeyFrame Cue="50%" Value="-100"/>
<KeyFrame Cue="100%" Value="0"/>
</TransformKeyFrames>
</Animation>
</Style.Animations>
</Style>
<Style Selector="Rectangle.Rect4:pointerover">
<Style.Animations>
<Animation Duration="0:0:3" Easing="BounceEaseInOut">
<TransformKeyFrames Property="SkewTransform.AngleX">
<KeyFrame Cue="0%" Value="0"/>
<KeyFrame Cue="25%" Value="-20"/>
<KeyFrame Cue="75%" Value="20"/>
<KeyFrame Cue="100%" Value="0"/>
</TransformKeyFrames>
</Animation>
</Style.Animations>
</Style>
</Styles>
</Grid.Styles>
<StackPanel VerticalAlignment="Center"
HorizontalAlignment="Center">
<TextBlock HorizontalAlignment="Center">Hover to activate Transform Keyframe Animations.</TextBlock>
<StackPanel Orientation="Horizontal"
ClipToBounds="False">
<Rectangle Classes="Test Rect1" Fill="DarkRed">
<Rectangle.RenderTransform>
<RotateTransform/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Classes="Test Rect2">
<Rectangle Classes="Test Rect2" Fill="DarkMagenta">
<Rectangle.RenderTransform>
<ScaleTransform ScaleX="0.8" ScaleY="0.8"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Classes="Test Rect3">
<Rectangle Classes="Test Rect3" Fill="Navy">
<Rectangle.RenderTransform>
<TranslateTransform/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Classes="Test Rect4" Fill="SeaGreen">
<Rectangle.RenderTransform>
<SkewTransform/>
</Rectangle.RenderTransform>
</Rectangle>
</StackPanel>
</Grid>
</StackPanel>
</Grid>
</UserControl>

5
src/Avalonia.Animation/Keyframes/DoubleKeyFrames.cs
View File

@ -40,10 +40,9 @@ namespace Avalonia.Animation.Keyframes
bool isWithinRange_End = DoubleUtils.AboutEqual(x, 1.0) || x < 1.0;
if (isWithinRange_Start && isWithinRange_End)
{
{
firstCue = sortedkeyValues.Where(j => j.Key <= x).Last();
lastCue = sortedkeyValues.Where(j=> j.Key >= firstCue.Key).First();
lastCue = sortedkeyValues.Where(j => j.Key >= x).First();
}
else if (!isWithinRange_Start)
{

Write Preview
Loading…
Cancel
Save