Smooth page transitions on Android


#1

Hi some how I think https://tabrisjs.com/ these guys have done a better job at page transitions than us…how do better our page transitions without the white flashes and a thin white line in a split second mostly when its slide transitions…but the other page transitions its white flashes…need resolve this @bradwaynemartin @NathanaelA @wwwalkerrun @jen.looper
and am using JavaScript not Angular


#2

I haven’t seen this on iOS, so I’m wondering if Android people could weigh in? @bradwaynemartin @triniwiz ping ping?


#3

@jen.looper its Android


#4

Can you share your package.json and the code you’re using for your transitions?


#5

@bradwaynemartin
exports.personal = function(){
frameModule.topmost().navigate({
moduleName: “views/visitordetails/visitordetails”,
animated: true,
transition: {
name: “fade”,
}
});
}


#6

@bradwaynemartin my package.json

{
“description”: “NativeScript Application”,
“license”: "SEE LICENSE IN ",
“readme”: “NativeScript Application”,
“repository”: “”,
“nativescript”: {
“id”: “org.nativescript.IVET”,
“tns-android”: {
“version”: “2.4.1”
}
},
“dependencies”: {
“nativescript-barcodescanner”: “^2.3.3”,
“nativescript-insomnia”: “^1.2.0”,
“nativescript-permissions”: “^1.2.2”,
“nativescript-ripple”: “^1.1.0”,
“nativescript-theme-core”: “^0.2.1”,
“tns-core-modules”: “2.4.4”,
“tns-core-modules-snapshot”: “2.4.4-5.2.361”
},
“devDependencies”: {
“babel-traverse”: “6.21.0”,
“babel-types”: “6.21.0”,
“babylon”: “6.14.1”,
“lazy”: “1.0.11”,
“nativescript-dev-android-snapshot”: “^0..
}
}


#7

Try setting a duration on the transition and see if taking more control helps smooth things out. There was a bug with 2.3 is why I was curious about your package.json. So all of that looks okay. Also the page events you are using can have an effect on the transition.

See nathanaela’s post here for the order: http://fluentreports.com/blog/?p=191


#8

I didn’t get the clarification on this part of your answer from nathanaela’s post quite too well, if you could clarify and possibly a sample how to reduce or prevent effect on the transition


#9

So when you transition to a page, most of the time that next page/module has an event firing. Possibly navigatedTo(), loaded()`, or some other event on the page. If you’re doing some logic there you can play around with moving things a bit, adjusting logic to offset the transition or move to a different page event.

Also use the duration on the transition: http://docs.nativescript.org/api-reference/interfaces/ui_frame.navigationtransition.html to see if that helps smooth things out. With no duration the fade happens so fast it will flash. I use it extensively in one app and I use 300 for the duration and it’s really smooth.


#10

ok, I mostly use the loaded event…but if I get this right I should not be running too many logic in that event?


#11

I think navigatedTo() might be recommended when going to a module/page. You just need to test with the duration on the navigation transition and determine if your logic is causing any issues during the transition and see what happens to be honest.


#12

will do that and revert to you the results


#13

Thanks, I tested the scenarios and they are working


#14

@michaelsowah - perhaps mark this as ‘solved’ if you feel comfortable


#15

Hey, I had the same problem (white flashing while changing the page on android), I was able to fix it by adding these lines into your Android styles.xml (into AppThemeBase):

<item name="android:windowBackground">@color/black</item>
<item name="android:colorBackground">@color/black</item>
<item name="android:windowAnimationStyle">@null</item>

Fixed it for me, now the transition looks native :slight_smile:


#16

which on the styles.xml one in values-v21 or values and where did you define the @color/black and how did you define it

which version of nativescript?


#17

Hey, it has to go into the values/styles.xml in your App_Resources/Android folder.
(Not the values-v21!)

@color/black is defined in values/colors.xml as follows:

<color name="black">#000000</color>

I think I am using version: 3.0.1

Hope this helps you, I was also looking for a solution for about 2 months till I found this.