Drawing from right to left (RectEffect)

asked May 22, 2018 in Embedded Wizard Studio by PhilShaw

I am using a RectEffect to control the bounds of a screen as it is generated as a screen transition.

This works fine if the new screen is coming in from the left or the top, but if it is coming in from the right, the elements on the left come in first.

Is there a way to reverse how the screen is drawn?



1 Answer

0 votes
answered May 22, 2018 by Paul Banach
Hello Phil,

I don't understand what you mean. If you animate a component to slide from the right screen edge, it is comprehensible to see its left area first. Do you want to mirror the contents?

Best regards

Paul banach
commented May 22, 2018 by PhilShaw
I have done similar things with images but not whole screens where I set the width to 0 and the alignment to right. If I then make it 1px wide, I see the far right column of pixels rather than the far left.

However if I do this with a component, it is always left aligned.
commented May 22, 2018 by Paul Banach

Hello Phil,

Ok. You want to modify the size of the component. The origin of the component, however is always its top-left corner. Accordingly, when you increase the width of the component, the left contents appear as first.

Thus, you need a kind of mask. This can be achieved easily by using the Outline Box. The necessary steps are:

1. Add an Outline Box to your application so that its is a sibline of the component you want to animate.

2. Change the order of the Outline Box so that it is arranged behind the component.

3. Set the property Embedded of the animated Component to the value true.

With these steps, the Outline Box will act as a kind of viewer presenting within its own boundary area the embedded component. Parts of the component lying outside the Outline Box are automatically clipped.

4. Adapt the Rect Effect to animate the Bounds property of the Outine Box instead of the Component.

5. The property Bounds of the component itself should be adjusted to have the final position/size.

During the animation the Outline Box changes its size/position. Accordingly it acts as a kind of mask fro the embedded component. You can see how parts of the component appear/disappear.

At the end of the animation, you can set the property Embedded of the affected component back to false

Does it help you further?

Best regards

Paul Banach

commented May 22, 2018 by PhilShaw
Perfect, thanks Paul, this is exactly how I wanted it.

I looked at Outline but gave up on it too quickly!

Ask Embedded Wizard

Welcome to the question and answer site for Embedded Wizard users and UI developers.

Ask your question and receive answers from the Embedded Wizard support team or from other members of the community!

Embedded Wizard Website | Privacy Policy | Imprint