Flip Card

How-to Discussions
1

Hello,

I’ve been working on a small app and i was trying to create a flip effect. My app shows small cards with posters and i wanted to make it so that when someone clicks one of them it flips around and on the back side had info about the card. I had found a post about it but it said that it can be used only in the main app. Is it fixed ? Can i use it inside a class ? And if yes how can i do it ?

Thanks

2

Hi!

3D features in general are being worked on and we’ll release an example soon.

3

okay thank you i will wait for that then :slight_smile:

4

This is an example of what I have working internally at the moment:

video

When the changes are released to support this I’ll publish the full example. The bit that does the actual card flipping looks like this now:

<Viewport Perspective="450" CullFace="Back">
    <Panel ux:Name="Card">
        <Rectangle Color="#AFA" CornerRadius="15" Padding="10">
            <Image File="../../Assets/icons_200/zen.png"/>
        </Rectangle>
        <Rectangle Color="#FAA" CornerRadius="15" Padding="10">
            <Image Source="{DataToResource icon}"/>
            <Rotation DegreesY="180"/>
        </Rectangle>
        <Clicked Handler="{reveal}">
            <BringToFront Target="self"/>
            <Move Z="-200" Duration="0.5" Easing="SinusoidalInOut"/>
        </Clicked>
        <WhileTrue Value="{revealed}">
            <Rotate DegreesY="180" Duration="0.5" Easing="CubicInOut"/>
        </WhileTrue>
    </Panel>
</Viewport>

The revealed is a flag handled by the JavaScript code; modified in the reveal handler in the Clicked gesture.

The change I’m working on is basically to allow Viewport anywhere in the UX tree, thus provided local perspective on elements. There are several minor things I need to change as well, but as you can see the core is done. Hopefully this will make it into a release soon.

5

Oh very nice !! I will wait for this then ! It has exactly what i want to make