locked
[W8.1]Cannot show effect of PlaneProjection of Image

    Question

  • I want to 3D animation which shows the book flip effect.

    I create two Storyboard, "StoryboardTurnRight" for turning from left to right, and "StoryboardTurnLeft" for turning right from to left.

    The 3D animation, "StoryboardTurnRight", of turning from left to right which perform very well.

    But the 3D animation , "StoryboardTurnLeft", of turning right from to left which often can't see the animation process, but direct show final results.

    In Blend for Visual Studio 2013, I can play these two Storyboard and I can see the two 3D animation playback effects of them.

    Following is my Xaml Code:

    <Page
        x:Class="PlaneProjectionProblem.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:PlaneProjectionProblem"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    	<Page.Resources>
    		<Storyboard x:Name="StoryboardTurnRight">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="image">
                    <EasingDoubleKeyFrame KeyTime="0" Value="69"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="image">
                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationX)" Storyboard.TargetName="image" d:IsOptimized="True"/>
    			<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationY)" Storyboard.TargetName="image" d:IsOptimized="True"/>
    		</Storyboard>
    		<Storyboard x:Name="StoryboardTurnLeft">
    			<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationY)" Storyboard.TargetName="image" d:IsOptimized="True"/>
    			<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationX)" Storyboard.TargetName="image" d:IsOptimized="True"/>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="image">
                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="69"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="image">
                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
    	</Page.Resources>
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Viewbox 
                Width="384" Height="562"
                Margin="0,50,0,0"
                VerticalAlignment="Top" HorizontalAlignment="Center">
                <Image x:Name="image" 
                    Width="768" Height="1024"
                    VerticalAlignment="Top" HorizontalAlignment="Left"
                    Source="Assets/page_0.png" >
                	<Image.Projection>
                		<PlaneProjection
                             CenterOfRotationX="0" CenterOfRotationY="0"
                            RotationX="0" RotationY="0"/>
                	</Image.Projection>
                </Image>
            </Viewbox>
            <StackPanel Orientation="Horizontal"
                        Margin="0,0,0,50"
                        VerticalAlignment="Bottom" HorizontalAlignment="Center">
                <Button x:Name="btnTurnLeft" 
                        Content="Turn Left" Click="btnTurnLeft_Click" />
                <Button x:Name="btnTurnRight" 
                        Content="Turn Right" Click="btnTurnRight_Click" />
            </StackPanel>
        </Grid>
    </Page>

    This is my test app source codehttp://www.mediafire.com/download/er11nktqlc4orec/PlaneProjectionProblem.zip


    vulcan

    Saturday, May 09, 2015 5:12 PM

Answers

  • Hi Vulcan,

    I can reproduce this issue on my side, I've tried to use DoubleAnimation and CacheMode, but not working.

    It seems like an unknown issue I'm not aware.

    Finally, I've found that if it turns right first and then turns left, the animation will show correctly, so I found the following workaround:

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="image">
                    <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="69"/>
                </DoubleAnimationUsingKeyFrames>

    The completed Storyboard as below:

    <Storyboard x:Name="StoryboardTurnLeft">
       <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationY)" Storyboard.TargetName="image" d:IsOptimized="True"/>
       <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationX)" Storyboard.TargetName="image" d:IsOptimized="True"/>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="image">
                    <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="69"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="image">
                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • Marked as answer by Vulcan LeeMVP Monday, May 11, 2015 11:08 AM
    Monday, May 11, 2015 8:26 AM
    Moderator

All replies

  • Hi Vulcan,

    I can reproduce this issue on my side, I've tried to use DoubleAnimation and CacheMode, but not working.

    It seems like an unknown issue I'm not aware.

    Finally, I've found that if it turns right first and then turns left, the animation will show correctly, so I found the following workaround:

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="image">
                    <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="69"/>
                </DoubleAnimationUsingKeyFrames>

    The completed Storyboard as below:

    <Storyboard x:Name="StoryboardTurnLeft">
       <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationY)" Storyboard.TargetName="image" d:IsOptimized="True"/>
       <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationX)" Storyboard.TargetName="image" d:IsOptimized="True"/>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="image">
                    <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="69"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="image">
                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • Marked as answer by Vulcan LeeMVP Monday, May 11, 2015 11:08 AM
    Monday, May 11, 2015 8:26 AM
    Moderator
  • I have found another method that can turn left / right or right / left of Image.

    When I start animation of storyboard, I need call

    StoryboardTurnRight.Begin();
     or 
    StoryboardTurnLeft.Begin();

    But I have changed that start a DispatcherTimer to update and UIElement when need start animation of storyboard, it is seen that animation is working fine.

    I don't know why that animations will normal operations, is it a bug?

            DispatcherTimer timer = new DispatcherTimer();
            int cc = 0;
            public MainPage()
            {
                this.InitializeComponent();
                DispatcherTimer timer = new DispatcherTimer();
                timer.Interval = TimeSpan.FromMilliseconds(50);
            }
    
            private void btnTurnRight_Click(object sender, RoutedEventArgs e)
            {
                cc = 0;
                timer.Tick -= timer_Ticker;
                timer.Tick += timer_Ticker;
                timer.Start();
                StoryboardTurnRight.Begin();
            }
    
            private void btnTurnLeft_Click(object sender, RoutedEventArgs e)
            {
                cc = 0;
                timer.Tick -= timer_Ticker;
                timer.Tick += timer_Ticker;
                timer.Start();
                StoryboardTurnLeft.Begin();
            }
    
            private void timer_Ticker(object sender, object e)
            {
                if (cc > 2)
                {
                    timer.Stop();
                    timer.Tick -= timer_Ticker;
                }
                //tbkplaneProjection.Text = planeProjection.RotationY.ToString();
                tbkplaneProjection.Text = "";
                cc++;
            }
    

    This is my update test app source 

    http://www.mediafire.com/download/8y5mrqnkbea51c4/PlaneProjectionProblem_2015.05.11.zip


    vulcan

    Monday, May 11, 2015 9:20 AM
  • Hi Vulcan,

    >>I don't know why that animations will normal operations, is it a bug?

    Thank you for reporting this issue, I will submit it through internal way, you can use my workaround or yours to solve it temporarily.


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, May 11, 2015 9:25 AM
    Moderator