Last active
April 6, 2019 09:31
-
-
Save danielgek/d3d7812bd3ed9793efadabdebbec6c4e to your computer and use it in GitHub Desktop.
Custom nativescript android page transition
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import * as transition from "ui/transition/transition"; | |
import * as platform from "platform"; | |
import lazy from "utils/lazy"; | |
const screenWidth = lazy(() => platform.screen.mainScreen.widthPixels); | |
const screenHeight = lazy(() => platform.screen.mainScreen.heightPixels); | |
let interpolator = lazy(() => new android.view.animation.AccelerateDecelerateInterpolator()); | |
export class CustomTransition extends transition.Transition { | |
private _direction: string; | |
constructor(duration?: number, curve = interpolator()) { | |
super(duration, curve); | |
} | |
public createAndroidAnimator(transitionType: string): android.animation.Animator { | |
const animatorSet = new android.animation.AnimatorSet(); | |
const fullDuration = this.getDuration() || 300; | |
const interpolator = this.getCurve(); | |
let translationValues = Array.create("float", 2); | |
let alphaValues = Array.create("float", 2); | |
switch (transitionType) { | |
case transition.AndroidTransitionType.enter: | |
translationValues[0] = screenHeight(); | |
translationValues[1] = 0; | |
break; | |
case transition.AndroidTransitionType.exit: | |
translationValues[0] = 0; | |
translationValues[1] = 0; | |
break; | |
case transition.AndroidTransitionType.popEnter: | |
translationValues[0] = 0; | |
translationValues[1] = 0; | |
break; | |
case transition.AndroidTransitionType.popExit: | |
translationValues[0] = 0; | |
translationValues[1] = screenHeight(); | |
break; | |
} | |
switch (transitionType) { | |
case transition.AndroidTransitionType.enter: | |
alphaValues[0] = 0; | |
alphaValues[1] = 1; | |
break; | |
case transition.AndroidTransitionType.popEnter: | |
alphaValues[0] = 0; | |
alphaValues[1] = 1; | |
break; | |
case transition.AndroidTransitionType.exit: | |
alphaValues[0] = 1; | |
alphaValues[1] = 0; | |
break; | |
case transition.AndroidTransitionType.popExit: | |
alphaValues[0] = 1; | |
alphaValues[1] = 0; | |
break; | |
} | |
const animatorTranlation = android.animation.ObjectAnimator.ofFloat(null, "translationY", translationValues); | |
const animatorAlpha = android.animation.ObjectAnimator.ofFloat(null, "alpha", alphaValues); | |
let objectAnimators = Array.create(android.animation.Animator, 2); | |
animatorTranlation.setDuration(fullDuration); | |
animatorAlpha.setDuration(fullDuration); | |
animatorTranlation.setInterpolator(interpolator); | |
animatorAlpha.setInterpolator(interpolator); | |
objectAnimators[0] = animatorTranlation; | |
objectAnimators[1] = animatorAlpha; | |
animatorSet.playTogether(objectAnimators); | |
return animatorSet; | |
} | |
public toString(): string { | |
return `${super.toString()} ${this._direction}`; | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component, OnInit } from "@angular/core"; | |
import { Item } from "./item"; | |
import { ItemService } from "./item.service"; | |
import { RouterExtensions } from 'nativescript-angular/router'; | |
import { CustomTransition } from './custom.transition'; | |
@Component({ | |
selector: "ns-items", | |
moduleId: module.id, | |
templateUrl: "./items.component.html", | |
}) | |
export class ItemsComponent implements OnInit { | |
items: Item[]; | |
constructor( | |
private itemService: ItemService, | |
private routerExtensions: RouterExtensions | |
) { } | |
ngOnInit(): void { | |
this.items = this.itemService.getItems(); | |
} | |
goto(item) { | |
this.routerExtensions.navigate(['/item', item.id], { transition: { | |
instance: new CustomTransition(400) | |
} }); | |
} | |
} |
@vahidvdn i don't think so, and i don't know if this is working anymore, got any luck running it ?
@danielgek Yes, it works like a charm :)
The only change is nativescript stops using short imports. So you must import like the following:
import * as transition from "tns-core-modules/ui/transition/transition";
It's really useful to have css based transitions. As it's nativescript goal, code once, run anywhere. Btw, thanks.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Is there any way to use custom transitions with css instead of each platform's native code? (as mentioned here)?