Rank: Advanced Member
Groups: Registered
Joined: 5/20/2015(UTC) Posts: 493   Location: Copenhagen, Denmark Thanks: 389 times
Was thanked: 100 time(s) in 79 post(s)
|
Hi Duff, I've tried to make a prototype with a title which animate in the same manner as the example you gave.
Preview: Code:Try save this code in a .xaml file, and insert a new title input in vMix from this file. (Press SHOW SPOILER to view code)
Code:<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:mtl="clr-namespace:vMixTitleLibrary;assembly=vMixTitleLibrary"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="WpfApplication3.MainWindow"
Width="1920"
Height="1080"
>
<UserControl.Resources>
<FontFamily x:Key="MainFont">Open Sans, Trebuchet MS, Verdana, Tahoma, Arial, Consolas</FontFamily>
<Storyboard x:Key="Storyboard1">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="Background"
Storyboard.TargetProperty="Background.(GradientBrush.GradientStops)[1].(GradientStop.Offset)">
<SplineDoubleKeyFrame KeyTime="0:0:0" Value="0.2" />
<SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="1" KeySpline="0.5,0.92,0.78,1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="ImageSource"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
<SplineDoubleKeyFrame KeyTime="0:0:0" Value="-500" />
<SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="-500" />
<SplineDoubleKeyFrame KeyTime="0:0:1.2" Value="50" KeySpline="0.5,0.92,0.78,1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TextWrapper"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="0" />
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0" />
<SplineDoubleKeyFrame KeyTime="0:0:0.8" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TextWrapper"
Storyboard.TargetProperty="(Grid.Width)">
<SplineDoubleKeyFrame KeyTime="0:0:0" Value="0" />
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0" />
<SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="1500" KeySpline="0.5,0.92,0.78,1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<sys:Double x:Key="BackgroundWidth">1920</sys:Double>
<sys:Double x:Key="BackgroundHeight">220</sys:Double>
<sys:Double x:Key="ImageWidth">300</sys:Double>
<sys:Double x:Key="ImageHeight">200</sys:Double>
<sys:Double x:Key="TextblockHeight">150</sys:Double>
<sys:Double x:Key="TextFontSize">100</sys:Double>
<SolidColorBrush x:Key="TextColor" Color="#DDDDDD" />
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
</EventTrigger>
</UserControl.Triggers>
<Grid>
<Grid
Name="Background"
Margin="0,860,0,0"
Width="{StaticResource BackgroundWidth}"
Height="{StaticResource BackgroundHeight}"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
>
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#AA00FF00" Offset="0" />
<GradientStop Color="#0000FF00" Offset="0.5" />
</LinearGradientBrush>
</Grid.Background>
<Grid
Name="TextWrapper"
Width="0"
Height="{StaticResource TextblockHeight}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Panel.ZIndex="2"
Margin="400,0,0,0"
>
<Grid.RenderTransform>
<TranslateTransform />
</Grid.RenderTransform>
<TextBlock
Name="Textfield"
FontFamily="{StaticResource MainFont}"
FontSize="{StaticResource TextFontSize}"
Text="Your text here - your text here"
Foreground="{StaticResource TextColor}"
Height="{StaticResource TextblockHeight}"
Margin="5,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
>
<TextBlock.Effect>
<DropShadowEffect
ShadowDepth="5"
Direction="330"
Color="Black"
Opacity="0.7"
BlurRadius="10" />
</TextBlock.Effect>
</TextBlock>
</Grid>
<Image
Source="Your/Image/Source.png"
Name="ImageSource"
Width="{StaticResource ImageWidth}"
Height="{StaticResource ImageHeight}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Stretch="Uniform"
Opacity="1"
>
<Image.RenderTransform>
<TranslateTransform />
</Image.RenderTransform>
</Image>
</Grid>
</Grid>
</UserControl>
stigaard attached the following image(s):  vMix Capture 30 november 2016 14-28-56.png (1,916kb) downloaded 207 time(s).You cannot view/download attachments. Try to login or register.
|
