Skip to content

Commit 8184891

Browse files
ButchersBoyButchersBoy
committed
moar! transition stuff
1 parent 670fe5e commit 8184891

File tree

8 files changed

+88
-64
lines changed

8 files changed

+88
-64
lines changed

‎MainDemo.Wpf/TransitionsDemo/Slide5_TransitioningContent.xaml

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040

4141
<materialDesign:TransitioningContent>
4242
<materialDesign:TransitioningContent.OpeningEffects>
43-
<materialDesign:TransitionEffect Kind="ExpandIn" BeginTime="0:0:0.05" />
43+
<materialDesign:TransitionEffect Kind="ExpandIn" OffsetTime="0:0:0.05" />
4444
</materialDesign:TransitioningContent.OpeningEffects>
4545
<materialDesign:ColorZone>
4646
<materialDesign:PackIcon Kind="Phone" VerticalAlignment="Center" HorizontalAlignment="Center" />
@@ -49,7 +49,7 @@
4949

5050
<materialDesign:TransitioningContent>
5151
<materialDesign:TransitioningContent.OpeningEffects>
52-
<materialDesign:TransitionEffect Kind="ExpandIn" BeginTime="0:0:0.1" />
52+
<materialDesign:TransitionEffect Kind="ExpandIn" OffsetTime="0:0:0.1" />
5353
</materialDesign:TransitioningContent.OpeningEffects>
5454
<materialDesign:ColorZone>
5555
<materialDesign:PackIcon Kind="Phone" VerticalAlignment="Center" HorizontalAlignment="Center" />
@@ -58,7 +58,7 @@
5858

5959
<materialDesign:TransitioningContent>
6060
<materialDesign:TransitioningContent.OpeningEffects>
61-
<materialDesign:TransitionEffect Kind="ExpandIn" BeginTime="0:0:0.15" />
61+
<materialDesign:TransitionEffect Kind="ExpandIn" OffsetTime="0:0:0.15" />
6262
</materialDesign:TransitioningContent.OpeningEffects>
6363
<materialDesign:ColorZone>
6464
<materialDesign:PackIcon Kind="Phone" VerticalAlignment="Center" HorizontalAlignment="Center" />
@@ -67,7 +67,7 @@
6767

6868
<materialDesign:TransitioningContent>
6969
<materialDesign:TransitioningContent.OpeningEffects>
70-
<materialDesign:TransitionEffect Kind="ExpandIn" BeginTime="0:0:0.2" />
70+
<materialDesign:TransitionEffect Kind="ExpandIn" OffsetTime="0:0:0.2" />
7171
</materialDesign:TransitioningContent.OpeningEffects>
7272
<materialDesign:ColorZone>
7373
<materialDesign:PackIcon Kind="Phone" VerticalAlignment="Center" HorizontalAlignment="Center" />
@@ -76,7 +76,7 @@
7676

7777
<materialDesign:TransitioningContent>
7878
<materialDesign:TransitioningContent.OpeningEffects>
79-
<materialDesign:TransitionEffect Kind="ExpandIn" BeginTime="0:0:0.25" />
79+
<materialDesign:TransitionEffect Kind="ExpandIn" OffsetTime="0:0:0.25" />
8080
</materialDesign:TransitioningContent.OpeningEffects>
8181
<materialDesign:ColorZone>
8282
<materialDesign:PackIcon Kind="Phone" VerticalAlignment="Center" HorizontalAlignment="Center" />
@@ -85,7 +85,7 @@
8585

8686
<materialDesign:TransitioningContent>
8787
<materialDesign:TransitioningContent.OpeningEffects>
88-
<materialDesign:TransitionEffect Kind="ExpandIn" BeginTime="0:0:0.3" />
88+
<materialDesign:TransitionEffect Kind="ExpandIn" OffsetTime="0:0:0.3" />
8989
</materialDesign:TransitioningContent.OpeningEffects>
9090
<materialDesign:ColorZone>
9191
<materialDesign:PackIcon Kind="Phone" VerticalAlignment="Center" HorizontalAlignment="Center" />
@@ -94,7 +94,7 @@
9494

9595
<materialDesign:TransitioningContent>
9696
<materialDesign:TransitioningContent.OpeningEffects>
97-
<materialDesign:TransitionEffect Kind="ExpandIn" BeginTime="0:0:0.35" />
97+
<materialDesign:TransitionEffect Kind="ExpandIn" OffsetTime="0:0:0.35" />
9898
</materialDesign:TransitioningContent.OpeningEffects>
9999
<materialDesign:ColorZone>
100100
<materialDesign:PackIcon Kind="Phone" VerticalAlignment="Center" HorizontalAlignment="Center" />

‎MainDemo.Wpf/TransitionsDemo/Slide6_MVVM.xaml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,25 @@
1313
<RowDefinition Height="Auto" />
1414
<RowDefinition Height="Auto" />
1515
</Grid.RowDefinitions>
16+
<TextBlock Style="{DynamicResource MaterialDesignHeadlineTextBlock}" TextWrapping="Wrap" TextAlignment="Center">That's the end of the demo for now; a full MVVM demo coming soon!</TextBlock>
17+
<!--
1618
<TextBlock Style="{DynamicResource MaterialDesignHeadlineTextBlock}" TextWrapping="Wrap" TextAlignment="Center">Finally, we will put it all together to create full master &amp; details pages, controlled via MVVM.</TextBlock>
19+
-->
1720
<StackPanel Orientation="Horizontal" Grid.Row="1" HorizontalAlignment="Center">
1821
<Button Style="{DynamicResource MaterialDesignFloatingActionMiniButton}"
1922
Command="{x:Static materialDesign:Transitioner.MovePreviousCommand}"
2023
VerticalAlignment="Center" HorizontalAlignment="Left"
2124
Margin="16">
2225
<materialDesign:PackIcon Kind="StepBackward" />
2326
</Button>
27+
<!--
2428
<Button Style="{DynamicResource MaterialDesignFloatingActionAccentButton}"
2529
Command="{x:Static materialDesign:Transitioner.MoveNextCommand}"
2630
VerticalAlignment="Top"
2731
Margin="16">
2832
<materialDesign:PackIcon Kind="StepForward" />
2933
</Button>
34+
-->
3035
</StackPanel>
3136
</Grid>
3237
</materialDesign:ColorZone>

‎MainDemo.Wpf/TransitionsDemo/TransitionsDemoHome.xaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
ClipToBounds="True">
4040
<materialDesign:TransitionerSlide.OpeningEffects>
4141
<materialDesign:TransitionEffect Kind="SlideInFromLeft" Duration="0:0:0.8" />
42-
<materialDesign:TransitionEffect Kind="SlideInFromBottom" Duration="0:0:0.8" BeginTime="0:0:0.15" />
42+
<materialDesign:TransitionEffect Kind="SlideInFromBottom" Duration="0:0:0.8" OffsetTime="0:0:0.15" />
4343
</materialDesign:TransitionerSlide.OpeningEffects>
4444
<local:Slide4_CombineTransitions />
4545
</materialDesign:TransitionerSlide>

‎MaterialDesignThemes.Wpf/MaterialDesignThemes.Wpf.csproj

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -293,6 +293,7 @@
293293
<Compile Include="RippleAssist.cs" />
294294
<Compile Include="Ripple.cs" />
295295
<Compile Include="Transitions\IZIndexController.cs" />
296+
<Compile Include="Transitions\SlideOutWipe.cs" />
296297
<Compile Include="Transitions\TransitionAssist.cs" />
297298
<Compile Include="Transitions\TransitionEffect.cs" />
298299
<Compile Include="Transitions\TransitionEffectBase.cs" />

‎MaterialDesignThemes.Wpf/Transitions/CircleWipe.cs

Lines changed: 0 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -46,44 +46,4 @@ public void Wipe(TransitionerSlide fromSlide, TransitionerSlide toSlide, Point o
4646
scaleTransform.BeginAnimation(ScaleTransform.ScaleYProperty, scaleAnimation);
4747
}
4848
}
49-
50-
public class SlideOutWipe : ITransitionWipe
51-
{
52-
private readonly SineEase _sineEase = new SineEase();
53-
54-
public void Wipe(TransitionerSlide fromSlide, TransitionerSlide toSlide, Point origin, IZIndexController zIndexController)
55-
{
56-
if (fromSlide == null) throw new ArgumentNullException(nameof(fromSlide));
57-
if (toSlide == null) throw new ArgumentNullException(nameof(toSlide));
58-
if (zIndexController == null) throw new ArgumentNullException(nameof(zIndexController));
59-
60-
var zeroKeyTime = KeyTime.FromTimeSpan(TimeSpan.Zero);
61-
var endKeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300));
62-
63-
//back out old slide setup
64-
var scaleTransform = new ScaleTransform(1, 1);
65-
fromSlide.RenderTransform = scaleTransform;
66-
var scaleAnimation = new DoubleAnimationUsingKeyFrames();
67-
scaleAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(1, zeroKeyTime));
68-
scaleAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(.8, endKeyTime));
69-
scaleAnimation.Completed += (sender, args) =>
70-
{
71-
fromSlide.RenderTransform = null;
72-
};
73-
74-
//slide in new slide setup
75-
var translateTransform = new TranslateTransform(0, toSlide.ActualHeight);
76-
toSlide.RenderTransform = translateTransform;
77-
var slideAnimation = new DoubleAnimationUsingKeyFrames();
78-
slideAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(toSlide.ActualHeight, zeroKeyTime) { EasingFunction = _sineEase});
79-
slideAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(0, endKeyTime) { EasingFunction = _sineEase });
80-
81-
//kick off!
82-
translateTransform.BeginAnimation(TranslateTransform.YProperty, slideAnimation);
83-
scaleTransform.BeginAnimation(ScaleTransform.ScaleXProperty, scaleAnimation);
84-
scaleTransform.BeginAnimation(ScaleTransform.ScaleYProperty, scaleAnimation);
85-
86-
zIndexController.Stack(toSlide, fromSlide);
87-
}
88-
}
8949
}

‎MaterialDesignThemes.Wpf/Transitions/SlideOutWipe.cs

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
using System;
2+
using System.Windows;
3+
using System.Windows.Media;
4+
using System.Windows.Media.Animation;
5+
6+
namespace MaterialDesignThemes.Wpf.Transitions
7+
{
8+
public class SlideOutWipe : ITransitionWipe
9+
{
10+
private readonly SineEase _sineEase = new SineEase();
11+
12+
public void Wipe(TransitionerSlide fromSlide, TransitionerSlide toSlide, Point origin, IZIndexController zIndexController)
13+
{
14+
if (fromSlide == null) throw new ArgumentNullException(nameof(fromSlide));
15+
if (toSlide == null) throw new ArgumentNullException(nameof(toSlide));
16+
if (zIndexController == null) throw new ArgumentNullException(nameof(zIndexController));
17+
18+
var zeroKeyTime = KeyTime.FromTimeSpan(TimeSpan.Zero);
19+
var midishKeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(100));
20+
var endKeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300));
21+
22+
//back out old slide setup
23+
var scaleTransform = new ScaleTransform(1, 1);
24+
fromSlide.RenderTransform = scaleTransform;
25+
var scaleAnimation = new DoubleAnimationUsingKeyFrames();
26+
scaleAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(1, zeroKeyTime));
27+
scaleAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(.8, endKeyTime));
28+
scaleAnimation.Completed += (sender, args) =>
29+
{
30+
fromSlide.RenderTransform = null;
31+
};
32+
33+
//slide in new slide setup
34+
var translateTransform = new TranslateTransform(0, toSlide.ActualHeight);
35+
toSlide.RenderTransform = translateTransform;
36+
var slideAnimation = new DoubleAnimationUsingKeyFrames();
37+
slideAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(toSlide.ActualHeight, zeroKeyTime));
38+
slideAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(toSlide.ActualHeight, midishKeyTime) { EasingFunction = _sineEase});
39+
slideAnimation.KeyFrames.Add(new EasingDoubleKeyFrame(0, endKeyTime) { EasingFunction = _sineEase });
40+
41+
//kick off!
42+
translateTransform.BeginAnimation(TranslateTransform.YProperty, slideAnimation);
43+
scaleTransform.BeginAnimation(ScaleTransform.ScaleXProperty, scaleAnimation);
44+
scaleTransform.BeginAnimation(ScaleTransform.ScaleYProperty, scaleAnimation);
45+
46+
zIndexController.Stack(toSlide, fromSlide);
47+
}
48+
}
49+
}

‎MaterialDesignThemes.Wpf/Transitions/TransitionEffect.cs

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ public TransitionEffect(TransitionEffectKind kind, TimeSpan duration)
2424

2525
public TransitionEffectKind Kind { get; set; }
2626

27-
public TimeSpan BeginTime { get; set; } = TimeSpan.Zero;
27+
public TimeSpan OffsetTime { get; set; } = TimeSpan.Zero;
2828

2929
public TimeSpan Duration { get; set; } = TimeSpan.FromMilliseconds(400);
3030

@@ -44,36 +44,35 @@ public override Timeline Build<TSubject>(TSubject effectSubject)
4444
case TransitionEffectKind.ExpandIn:
4545
return CreateExpandIn(effectSubject);
4646
case TransitionEffectKind.SlideInFromLeft:
47-
timeline = new DoubleAnimation { EasingFunction = new SineEase(), From = -300, To = 0 };
47+
timeline = CreateSlide(-300, 0);
4848
property = TranslateTransform.XProperty;
4949
targetName = effectSubject.TranslateTransformName;
5050
break;
5151
case TransitionEffectKind.SlideInFromTop:
52-
timeline = new DoubleAnimation { EasingFunction = new SineEase(), From = -300, To = 0 };
52+
timeline = CreateSlide(-300, 0);
5353
property = TranslateTransform.YProperty;
5454
targetName = effectSubject.TranslateTransformName;
5555
break;
5656
case TransitionEffectKind.SlideInFromRight:
57-
timeline = new DoubleAnimation { EasingFunction = new SineEase(), From = 300, To = 0 };
57+
timeline = CreateSlide(300, 0);
5858
property = TranslateTransform.XProperty;
5959
targetName = effectSubject.TranslateTransformName;
6060
break;
6161
case TransitionEffectKind.SlideInFromBottom:
62-
timeline = new DoubleAnimation { EasingFunction = new SineEase(), From = 300, To = 0, };
62+
timeline = CreateSlide(300, 0);
6363
property = TranslateTransform.YProperty;
6464
targetName = effectSubject.TranslateTransformName;
6565
break;
6666
case TransitionEffectKind.FadeIn:
6767
timeline = new DoubleAnimation { EasingFunction = new SineEase(), From = 0, To = 1};
68-
property = UIElement.OpacityProperty;
68+
property = OpacityProperty;
6969
target = effectSubject;
7070
break;
7171
default:
7272
throw new ArgumentOutOfRangeException();
7373
}
7474

75-
if (timeline == null || (target == null && targetName == null)) return null;
76-
timeline.BeginTime = BeginTime;
75+
if (timeline == null || (target == null && targetName == null)) return null;
7776
timeline.Duration = Duration;
7877
if (target != null)
7978
Storyboard.SetTarget(timeline, target);
@@ -85,12 +84,25 @@ public override Timeline Build<TSubject>(TSubject effectSubject)
8584
return timeline;
8685
}
8786

87+
private Timeline CreateSlide(double from, double to)
88+
{
89+
var zeroFrame = new DiscreteDoubleKeyFrame(from);
90+
var startFrame = new DiscreteDoubleKeyFrame(from, OffsetTime);
91+
var endFrame = new EasingDoubleKeyFrame(to, OffsetTime + Duration) { EasingFunction = new SineEase() };
92+
var slideAnimation = new DoubleAnimationUsingKeyFrames();
93+
slideAnimation.KeyFrames.Add(zeroFrame);
94+
slideAnimation.KeyFrames.Add(startFrame);
95+
slideAnimation.KeyFrames.Add(endFrame);
96+
97+
return slideAnimation;
98+
}
99+
88100
private Timeline CreateExpandIn(ITransitionEffectSubject effectSubject)
89101
{
90102
var scaleXAnimation = new DoubleAnimationUsingKeyFrames();
91103
var zeroFrame = new DiscreteDoubleKeyFrame(0.0);
92-
var startFrame = new DiscreteDoubleKeyFrame(.5, BeginTime);
93-
var endFrame = new EasingDoubleKeyFrame(1, BeginTime + Duration);
104+
var startFrame = new DiscreteDoubleKeyFrame(.5, OffsetTime);
105+
var endFrame = new EasingDoubleKeyFrame(1, OffsetTime + Duration) { EasingFunction = new SineEase() };
94106
scaleXAnimation.KeyFrames.Add(zeroFrame);
95107
scaleXAnimation.KeyFrames.Add(startFrame);
96108
scaleXAnimation.KeyFrames.Add(endFrame);

‎MaterialDesignThemes.Wpf/Transitions/Transitioner.cs

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -150,12 +150,12 @@ private void ActivateFrame(int selectedIndex, int unselectedIndex)
150150
if (index == selectedIndex)
151151
{
152152
newSlide = slide;
153-
// slide.SetCurrentValue(TransitionerSlide.StateProperty, TransitionerSlideState.Current);
153+
slide.SetCurrentValue(TransitionerSlide.StateProperty, TransitionerSlideState.Current);
154154
}
155155
else if (index == unselectedIndex)
156156
{
157157
oldSlide = slide;
158-
//slide.SetCurrentValue(TransitionerSlide.StateProperty, TransitionerSlideState.Previous);
158+
slide.SetCurrentValue(TransitionerSlide.StateProperty, TransitionerSlideState.Previous);
159159
}
160160
else
161161
{
@@ -175,10 +175,7 @@ private void ActivateFrame(int selectedIndex, int unselectedIndex)
175175
else if (oldSlide != null || newSlide != null)
176176
{
177177
DoStack(oldSlide ?? newSlide);
178-
}
179-
180-
newSlide?.SetCurrentValue(TransitionerSlide.StateProperty, TransitionerSlideState.Current);
181-
oldSlide?.SetCurrentValue(TransitionerSlide.StateProperty, TransitionerSlideState.Previous);
178+
}
182179

183180
_nextTransitionOrigin = null;
184181
}

0 commit comments

Comments
 (0)