Animation / Image bigger than screen size

How-to Discussions
1

Hi I have two questions:

  1. Can I animate a element (with Scale, Change, or Move) but that dont start with a Trigger. For example: I want that when the app start a animation is trigger. With a timer for example…

  2. It is posible to put a image that his Width is bigger than the screen Width? Because I cant put the image width bigger than 100%…

Thanks!

2
  1. There is a ManualTrigger with an On property that can be set to true/false to turn on/off the animation. We don’t have formal timers yet, but you can hook in to the Update event via code.

What type of timed event are you looking for? I can put in a feature request for it.

  1. By default all elements are constrained in width/height to the maximum size available (usually parent size). You can override this limit by setting a really large value for MaxWidth and MaxHeight.

I’m also looking at options for how we can provide an option to simply lift the constraint rather than having to give large max values.

3

edA-qa mort-ora-y: Thanks for the answer! Im looking for a timer that every X second repeat a Animation. Its a loop animation for the home screen. How can I do this?

4

If the animation is a basic cycling animation, or only a few components you can use the Cycle animator:

<Star Alignment="Center" Width="50" Height="50">
    <SolidColor Color="0,1,1,1"/>
    <Scaling ux:Name="StarScale"/>
    <ManualTrigger On="true">
        <Cycle Target="StarScale.Factor" Low="0.5" High="2.0" Hertz="1"/>
    </ManualTrigger>
</Star>

Otherwise you’ll have to resort to Uno code at the moment an hook into the Update mechanism to turn on/off a trigger manually. I’ll enter the feature request for a timed trigger.

Can you describe a bit more what type of animation your want? I would then use that as our motivating use-case.

5

Thanks! I want to do something very similar to the example that you put! I dont now that Cycle exist! Thanks!

6 
<Cycle Target="StarScale.Factor" Low="0.5" High="2.0" Hertz="1"/>

Can I put a Delay in the Cycle Element? I try but dont work! I want to the same Animation start with a litle delay.

I want to create a “snake” effect with the scaling Cycle (like when a project is open in Fuse and the green circles moves Up and Down…)

7

Unfortunately we can’t quite achieve what you want yet. The problem is that when you specify On="true" on the manual trigger it goes to 100% progress and stays there. It’s the Cycle animator that has a special “repeat” aspect to it.

We need a more generic Loop animator to achieve what you want. I’ll add the feature request.

8

Thanks!