Animation Problem

Bug Reports
1

Hi guys.

I have a little question about animation performance on different devices and OS.

I’m trying to make a simple animation when the keyboard is visible:

My header component:

<Panel ux:Class="Timewax.LoginPageHeader">

	<ImageSource ux:Property="Logo" />

	<Panel Color="LoginBackground" Height="250" ux:Name="backPanel">
		<WhileKeyboardVisible>
			<Scale Y="0.7" Duration="0.3" Easing="QuadraticInOut"/>
		</WhileKeyboardVisible>
	</Panel>

	<Image Source="{Property Logo}" Width="200" Height="200" Layer="Overlay"/>
</Panel>

My Login.ux:

<Timewax.LoginPageHeader Margin="0,0,0,50" Logo="mainLogo" Dock="Top" ux:Name="pageMainLogo">
	<WhileKeyboardVisible>
		<Change pageMainLogo.Margin="0,0,0,-40" Duration="0.3" Easing="QuadraticInOut" /> 
		<Move Y="-0.2" Duration="0.3" Easing="QuadraticInOut" RelativeTo="Size"/>
	</WhileKeyboardVisible>
</Timewax.LoginPageHeader>

But I’m having different behaviours in the devices I have. The devices I have tested this on are:

Android:

  • OnePlus 3 (Android 7.0)
  • Nexus 5 (Android 6.0.1)
  • Zopo ZP999 (Android 4.4.2)

iOS:

  • iPhone 5 (iOS 10.2.1)
  • iPhone 6s (iOS 10.2)
  • iPhone 7 (iOS 10.2.1)

I also tested on Xcode simulators iPhone 5s, 6s and SE (iOS 10.2).

The results were odd.
In the simulator all went smooth and fine. Also on all Androids, but on the iPhones 5 and 6s it seems it has no animations, on iPhone 7 however the animation is shown.

Is there a reason why this happens? Am I missing something in my code? Is it a iPhone performance issue?

I’ll leave some videos here to show the difference between devices (sorry for the quality of some of the videos).

iPhone 7 vs Nexus 5

iPhone 6s

iPhone 5

OnePlus 3

Zopo ZP999

Thank you in advance.

2

Hi!

This seems strange. Are you able to create a small project that reproduces the issue?

3

Hello, Anders!

I’ve already created a small project with just this login screen and could not reproduce the problem.

<App>

<iOS.StatusBarConfig Style="Light" ux:Name="iosStyle" />
<Android.StatusBarConfig Color="#955CA1" ux:Name="androidStyle"/>

<DockPanel>

	<StatusBarBackground Dock="Top"/>
	<!-- <TopFrameBackground Dock="Top" /> -->
	<BottomFrameBackground Dock="Bottom" Visibility="Visible" ux:Name="bottomFrame"/>

	
	<!-- Header -->
	<Timewax.LoginPageHeader Margin="0,0,0,50" Logo="mainLogo" Dock="Top" ux:Name="pageMainLogo">
		<WhileKeyboardVisible>
			<Change pageMainLogo.Margin="0,0,0,-40" Duration="0.3" Easing="QuadraticInOut" /> 
			<Move Y="-0.2" Duration="0.3" Easing="QuadraticInOut" RelativeTo="Size"/>
		</WhileKeyboardVisible>
	</Timewax.LoginPageHeader>

	<StackPanel>
		<!-- Email -->
		<Panel HitTestMode="LocalBoundsAndChildren">
			<Timewax.Email HasIcon="False" Text="{username}" />
			<Clicked>
				<Change bottomFrame.IncludesKeyboard="False" />
			</Clicked>
		</Panel>

		<!-- Password -->
		<Panel HitTestMode="LocalBoundsAndChildren">
			<Timewax.Password Margin="0,30,0,0" Text="{password}" PlaceholderText="Password" HasIcon="False" />
			<Clicked>
				<Change bottomFrame.IncludesKeyboard="False" />
			</Clicked>
		</Panel>

		<!-- Login button -->
		<Timewax.PrimaryButton Text="Login" Margin="40,30,40,0" />

		<!-- Links -->
		<DockPanel Margin="20,20,20,0">
			<Timewax.Link Value="Register" Dock="Left" Alignment="Left" FontSize="13"/>
			<Timewax.Link Value="Forgot Password" Dock="Right" Alignment="Right" FontSize="13"/>
		</DockPanel>

	</StackPanel>

</DockPanel>

</App>

The Components I use are the same as in my project, I just put them all inside the project folder, instead of organising them into folders. Just a simple app with no routers, resources (colours, locales, icons, … ).

The animation works fine in iPhone 5, can’t figure out why it doesn’t with my app and why it just happens on iOS.

Don’t know if it’s important but I’m using

My MainView.ux has a navigator to the login page (and others):

<Navigator DefaultPath="Splashscreen" Reuse="None">
	<Timewax.Splashscreen ux:Name="Splashscreen" router="router" />
	 <Timewax.Login ux:Name="Login" router="router"/>
	 <Timewax.ForgotPassword ux:Name="ForgotPassword" router="router"/>
	 <Timewax.ChangePassword ux:Name="ChangePassword" router="router"/>
	 <Timewax.MainPagePlanning ux:Name="MainPagePlanning" router="router"/>
	 <Timewax.MainPageTimesheets ux:Name="MainPageTimesheets" router="router"/>
	 <Timewax.MainPageProgress ux:Name="MainPageProgress" router="router" />
</Navigator>

When I have fields in a Scrollview that are hidden by the keyboard and I want to make them visible, the animation on iOS is also laggy, but works great with Android.

I don’t know which other relevant things can I tell you about this problem.

4

Hi,

In order to be able to help/debug, we need a test project that reproduces the issue + a precise description of how to reproduce the problem. There is problably something else/unrelated in the app causing issues.

5

As I couldn’t reproduce the issue, I wasn’t able to make a project where the issue existed.

So, I lost time and started the app from the beginning adding the elements / pages one by one and checking if the issue appeared. And it did. Let me see if i can explain this right. The problem was the BottomFrameBackground.

I used this because I had fields in some pages to fill that were behind the keyboard, so I used the

<Clicked>
      <Change bottomFrame.IncludesKeyboard="False" />
</Clicked>

And in the login page I had a

<WhileKeyboardVisible>
      <Scale Y="0.7" Duration="0.3" Easing="QuadraticInOut"/>
</WhileKeyboardVisible>

and

<WhileKeyboardVisible>
     <Change pageMainLogo.Margin="0,0,0,-40" Duration="0.3" Easing="QuadraticInOut" /> 
     <Move Y="-0.2" Duration="0.3" Easing="QuadraticInOut" RelativeTo="Size"/>
</WhileKeyboardVisible>

When I selected the fields in the other pages, it also messed with this animations.

I never thought that this could interfere in all the app instead only the page I’m in.

But now with the issue detected I was able to solve it.

Thank you for your time!