Display part of foreground image over background image

Question

I wonder how to create animation like the image below, but using a background image instead of the background circle, and a foreground image instead of the arc in front ? 

 

Answer 1

Hello,

do you mean the images are static? If yes, you can use the image view for this purpose. If this is not what you expect, can you post an figure demonstrating the desired design?

Best regards

Paul Banach

Comments

Yes, both FG & BG image are static. The animation is same with below picture. I found in embedded wizard sample projects some example had such similar animation but FG image only change vertically or horizontally

---

I want to create animation similar like this video. In which FG image is change color gradient from green to red (left->right) when speed increase

https://www.youtube.com/watch?v=d3lXrqpA4oQ

---

Hello,

what you try to achieve is difficult. You would need a kind of bitmap copy operation with an additional mask changing dynamically at the runtime. The mask itself is drawn by vector graphic operation (an arc). As alternative a vector graphic operation with radial gradiant would be necessary. Both, copy with mask and radial gradients are not supported.

In some cases (like the video) you can achieve the desired effect by overlaping the image with a opaque vector graphic. The effect from the video could be made as follows:

1. In the background of your component put two Image views: on the left half the blue radial gradient and on the right the green gradient. 

2. In front of the images put two Filled Path views. They should overlap the entire component.

3. Configure the Filled Path views to be shown with opaque black color.

4. Configure the Offset property of the both Filled path views to correspond to center of the GUI component.

5. Add two Arc Path data objects. Connect each with the respective Filled Path views.

6. Configure the properties Radius, InnerRadius, StartAngle and EndAngle of the Arc Path data objects. 

Accordingly, the Filled Path views overlap the images in the backgrouznd producing the effect of an colored arc.

More advance:

7. If you want the colors of the images to change, use Alpha-only bitmaps and determine the color (blue, breen, yellow, ...) at the runtime.

8. With additional images arrangecd in front of the Filled path views you can add some glow or reflection effects. The images in the background can thus limit to show the radial gradient only. The glow or light effects can be produces by other images in front of them.

I hope it helps you further.

Best regards

Paul Banach