Parallax Background image like ios home screen motion based


#1

Hi everyone,

What is the best way to implement a background image parallax animation based on motion like ios home screen. I prefer to use Javascript version of native script 2.5 or 3.0

Thank you.


#2

Do you mean this https://www.npmjs.com/package/nativescript-parallax or perhaps impliment something custom with the PAN gesture? https://docs.nativescript.org/cookbook/ui/gestures#pan


#3

Hi steve,
Actually both of them makes animation based tap I want to animate the background with gyroscope sensor like the image below


#4

I have just found the native (swift) way to do it but have no idea to do it with nativescript.


#5

After some tries I have found to make it in nativescript.
Here is the code for do that. If anybody knows how to do it in android can help me.
Javascript:

if (page.ios) {
        applyMotionEffect(page.getViewById("background").ios, 30);
        applyMotionEffect(page.getViewById("logo").ios, -10);
    }

function applyMotionEffect (view, magnitude) {
    var xMotion = new UIInterpolatingMotionEffect({
        keyPath: "center.x",
        type: UIInterpolatingMotionEffectType.TiltAlongHorizontalAxis
    });
    xMotion.minimumRelativeValue = -magnitude;
    xMotion.maximumRelativeValue = magnitude;

    var yMotion = new UIInterpolatingMotionEffect({
        keyPath: "center.y",
        type: UIInterpolatingMotionEffectType.TiltAlongVerticalAxis
    });
    yMotion.minimumRelativeValue = -magnitude;
    yMotion.maximumRelativeValue = magnitude;

    var group = new UIMotionEffectGroup();
    group.motionEffects = [xMotion, yMotion];

    view.addMotionEffect(group);
}

Xml

    <grid-layout id="background" ios:marginTop="-50" ios:marginBottom="-50" ios:marginLeft="-50" ios:marginRight="-50">
      <Image src="res://background.jpg"   strech="aspectFill"/>
    </grid-layout>