home
products
contribute
download
documentation
forum
Home
Forums
New posts
Search forums
What's new
New posts
All posts
Latest activity
Members
Registered members
Current visitors
Donate
Log in
Register
What's new
Search
Search
Search titles only
By:
New posts
Search forums
Search titles only
By:
Menu
Log in
Register
Navigation
Install the app
Install
More options
Contact us
Close Menu
Forums
MediaPortal 2
Skins and Design
New Community Theme: Retro
Contact us
RSS
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="morpheus_xx" data-source="post: 1100885" data-attributes="member: 48495"><p>Great look!</p><p></p><p></p><p>This can be done by animations. For example, inside Reflexion skin we have a StoryBoard that slides in the player controls from bottom when entering the screen.</p><p></p><p>For your goal you should add the animation for "home.xaml": A "DoubleAnimation"(UsingKeyFrames) is able to "animate" double values (like Opacity) from given start to given end value in steps you define (MSDN: <a href="http://msdn.microsoft.com/de-de/library/system.windows.media.animation.doubleanimation%28v=vs.110%29.aspx" target="_blank">http://msdn.microsoft.com/de-de/library/system.windows.media.animation.doubleanimation(v=vs.110).aspx</a>)</p><p></p><p>One implementation example for buttons (<a href="https://github.com/MediaPortal/MediaPortal-2/blob/93361b1a55857b8722bf62dfcb02ca8b4fb5aba7/MediaPortal/Incubator/Reflexion/Skin/Reflexion/themes/default/styles/Buttons.xaml#L37-L41" target="_blank">https://github.com/MediaPortal/MediaPortal-2/blob/93361b1a55857b8722bf62dfcb02ca8b4fb5aba7/MediaPortal/Incubator/Reflexion/Skin/Reflexion/themes/default/styles/Buttons.xaml#L37-L41</a>)</p><p>[CODE=XML] <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" AutoReverse="true" BeginTime="00:00:00" Storyboard.TargetName="ButtonControlRectangle" Storyboard.TargetProperty="Fill.RelativeTransform.Children[0].ScaleX"></p><p><SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.26"/></p><p><SplineDoubleKeyFrame KeyTime="00:00:02" Value="0.8"/></p><p><SplineDoubleKeyFrame KeyTime="00:00:04" Value="1.335"/></p><p></DoubleAnimationUsingKeyFrames>[/CODE]</p><p>The "TargetProperty" would be "Opacity", the time and values you define in the SplineDoubleKeyFrames.</p><p></p><p>The animation and storyboard should be defined inside ThemeResources. </p><p></p><p>Into screen you have to add "Triggers" that will start/stop animation on Show/Hide (<a href="https://github.com/MediaPortal/MediaPortal-2/blob/93361b1a55857b8722bf62dfcb02ca8b4fb5aba7/MediaPortal/Incubator/Titanium/Skin/Titanium/screens/master_dialog_bare.xaml#L37-L48" target="_blank">https://github.com/MediaPortal/MediaPortal-2/blob/93361b1a55857b8722bf62dfcb02ca8b4fb5aba7/MediaPortal/Incubator/Titanium/Skin/Titanium/screens/master_dialog_bare.xaml#L37-L48</a>)</p><p>[CODE=XML] <Screen.Triggers></p><p><EventTrigger RoutedEvent="Screen.Show"></p><p><EventTrigger.Actions></p><p><BeginStoryboard Storyboard="{ThemeResource ShowDialogStoryboard}"/></p><p></EventTrigger.Actions></p><p></EventTrigger></p><p><EventTrigger RoutedEvent="Screen.Hide"></p><p><EventTrigger.Actions></p><p><BeginStoryboard Storyboard="{ThemeResource HideDialogStoryboard}"/></p><p></EventTrigger.Actions></p><p></EventTrigger></p><p></Screen.Triggers>[/CODE]</p></blockquote><p></p>
[QUOTE="morpheus_xx, post: 1100885, member: 48495"] Great look! This can be done by animations. For example, inside Reflexion skin we have a StoryBoard that slides in the player controls from bottom when entering the screen. For your goal you should add the animation for "home.xaml": A "DoubleAnimation"(UsingKeyFrames) is able to "animate" double values (like Opacity) from given start to given end value in steps you define (MSDN: [url]http://msdn.microsoft.com/de-de/library/system.windows.media.animation.doubleanimation%28v=vs.110%29.aspx[/url]) One implementation example for buttons ([url]https://github.com/MediaPortal/MediaPortal-2/blob/93361b1a55857b8722bf62dfcb02ca8b4fb5aba7/MediaPortal/Incubator/Reflexion/Skin/Reflexion/themes/default/styles/Buttons.xaml#L37-L41[/url]) [CODE=XML] <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" AutoReverse="true" BeginTime="00:00:00" Storyboard.TargetName="ButtonControlRectangle" Storyboard.TargetProperty="Fill.RelativeTransform.Children[0].ScaleX"> <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.26"/> <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0.8"/> <SplineDoubleKeyFrame KeyTime="00:00:04" Value="1.335"/> </DoubleAnimationUsingKeyFrames>[/CODE] The "TargetProperty" would be "Opacity", the time and values you define in the SplineDoubleKeyFrames. The animation and storyboard should be defined inside ThemeResources. Into screen you have to add "Triggers" that will start/stop animation on Show/Hide ([url]https://github.com/MediaPortal/MediaPortal-2/blob/93361b1a55857b8722bf62dfcb02ca8b4fb5aba7/MediaPortal/Incubator/Titanium/Skin/Titanium/screens/master_dialog_bare.xaml#L37-L48[/url]) [CODE=XML] <Screen.Triggers> <EventTrigger RoutedEvent="Screen.Show"> <EventTrigger.Actions> <BeginStoryboard Storyboard="{ThemeResource ShowDialogStoryboard}"/> </EventTrigger.Actions> </EventTrigger> <EventTrigger RoutedEvent="Screen.Hide"> <EventTrigger.Actions> <BeginStoryboard Storyboard="{ThemeResource HideDialogStoryboard}"/> </EventTrigger.Actions> </EventTrigger> </Screen.Triggers>[/CODE] [/QUOTE]
Insert quotes…
Verification
Post reply
Forums
MediaPortal 2
Skins and Design
New Community Theme: Retro
Contact us
RSS
Top
Bottom