Flip View Like iOS

How-to Discussions
1

Hello.

I’m getting my hands dirty with Fuse and I’m loving it!

I have a panel that is like a card and I’m trying to figure out how I can do a “flip” animation to show what’s in the “back” of the card

https://www.dropbox.com/s/tvrwp8au8tinfvq/Screenshot%202016-02-29%2010.13.37.png?dl=0

I’ve seen that this can be achieved on iOS but I’m not sure how to start in Fuse with this:

https://www.youtube.com/watch?v=547FUpPVGRE

Any ideas?

2

I need to achieve the same!

3

The standard transforms in Fuse support 3D transformation, but you need to have a 3D viewport enabled first. At the root of your app (sorry, it’s not supported elsewhere yet) add:

<Viewport Perspective="100"> ... your app ... </Viewport>

Where Perspective is the distance to the camera. There is also a CullFace="Back" option that will cause things to not draw when facing backwards, but you should instead make them invisible insted. Culled objects are still there and will receive pointer events, potentially blocking other input.

Then you rotate things in 3D in an action, such as <Rotate DegreesY="45"/>.

There are also the TransformOrigin="HorizontalBoxCenter" and VerticalBoxCenter to assist in such transforms. These set the rotation point of an object such that it was the face of a box of that size. In the particular card animation you are showing however this is probably not needed.

4

Thanks a lot edA-qa mort-ora-y, going to start working on that!

5

Yeah! It worked:

http://d.pr/v/18kmv

As you said still have to hide it and display the other, will tackle that right away :).

I had to set the perspective to Perspective="1000" so the card looks inside the panel when rotating, on the preview it seems that it flickers a bit BUT in the phone looks just fine.

Thanks a lot!

6

Hey Erick! Can you repost your solution? I’m curious as well as to how you did this.

Thanks! Jay

7

Just started playing with Fuse so not sure if this is even right or optimal but can someone tell me if there’s a better way?

Thanks, Jay


```ux
    <DockPanel>

        <Panel ux:Name="FrontPanel" Width="95%" Height="80%">
            <Page >
            <Rectangle Layer="Background" Color="#eee" CornerRadius="5"/>
            <DropShadow/>
            <StackPanel Alignment="Center" Margin="15">
                <Text Value="Front" TextWrapping="Wrap" Alignment="Center" LineSpacing="15" FontSize="17" />


            </StackPanel>
            </Page>
            <Clicked>
                <Set state.Active="frontToBack"/>




            </Clicked>

        </Panel>

        <Panel ux:Name="BackPanel" Width="95%" Height="80%">
            <Page >
            <Rotation DegreesY="180"/>
            <Rectangle Layer="Background" Color="#ddd" CornerRadius="5"/>
            <DropShadow />
            <StackPanel Alignment="Center" Margin="15">
                <Text Value="Back" />
            </StackPanel>
            </Page>

            <Clicked>
                <Set state.Active="backToFront"/>




            </Clicked>
        </Panel>
    </DockPanel>

    <StateGroup ux:Name="state" Transition="Parallel" Rest="frontState">
        <State Name="frontState">
            <DebugAction />
        </State>
        <State Name="frontToBack" >
            <Set BackPanel.Opacity="1"/>
            <Rotate DegreesY="180" Duration="0.2" DurationBack="0" Target="FrontPanel"/>
            <Rotate DegreesY="180" Duration="0.2" DurationBack="0" Target="BackPanel"/>
            <BringToFront Target="BackPanel"/>
            <DebugAction Message="FrontToBack"/>
        </State>
        <State Name="backToFront" >
            <Rotate DegreesY="180" Target="BackPanel" />
            <Rotate DegreesY="180" Target="FrontPanel"/>
            <Rotate DegreesY="-180" Duration="0.2" DurationBack="0" Target="FrontPanel"/>

            <Rotate DegreesY="-180" Duration="0.2" DurationBack="0" Target="BackPanel"/>
        <BringToFront Target="FrontPanel"/>





            <DebugAction Message="backToFront"/>
        </State>

    </StateGroup> 
</Viewport>