Nativescript: Question: what's the best way to animate a tap on Image?

Created on 15 Jun 2017 · 4Comments · Source: NativeScript/NativeScript

I have a few tapable tiles that are represented by a grid layout with Image components inside. Unlike ActionItem or SegmentedBar items, which animate properly on tap, the images don't. What's the best way to add platform appropriate tap animations for both iOS and Android (material and not)?

    <GridLayout rows="auto,auto" columns="*,*,*,*" class="info-bar">
      <Image col="0" row="0" src="res://call" stretch="none" tap="action1Tap" />
      <Image col="1" row="0" src="res://email" stretch="none" tap="action2Tap" />
      <Image col="2" row="0" src="res://website" stretch="none" tap="action3Tap" />
      <Image col="3" row="0" src="res://map" stretch="none" tap="action4Tap" />
      <Label col="0" row="1" text="Call" />
      <Label col="1" row="1" text="Email" />
      <Label col="2" row="1" text="Website" />
      <Label col="3" row="1" text="Map" />
    </GridLayout>

$ tns info
All NativeScript components versions information
┌──────────────────┬─────────────────┬────────────────┬─────────────┐
│ Component        │ Current version │ Latest version │ Information │
│ nativescript     │ 3.0.3           │ 3.0.3          │ Up to date  │
│ tns-core-modules │ 3.0.1           │ 3.0.1          │ Up to date  │
│ tns-android      │ 3.0.1           │ 3.0.1          │ Up to date  │
│ tns-ios          │ 3.0.1           │ 3.0.1          │ Up to date  │
└──────────────────┴─────────────────┴────────────────┴─────────────┘

question

Source

sserdyuk

Most helpful comment

template:

<Image col="0" row="0" src="res://call" stretch="none" #image1 tap="highlight(image1)" />

controller:

 highlight(a) {
        a.className = "";
        a.className = "highlighted"
 }

CSS:

Image.highlighted {
    animation-name: animation;
    animation-duration: 1.2s;
}
@keyframes animation {
    from {
        opacity: 0.2;
    }
    to {
        opacity: 1;
    }
}

Tukkan on 4 Jan 2018

🎉4

All 4 comments

For the record, the following works great for Android, both material and not. Still looking for a good iOS solution.

      <StackLayout col="0" id="action1" tap="action1Tap">
        <Image src="res://call" stretch="none"/>
        <Label text="Call" />
      </StackLayout>

on loading...

    if (action1.android) {
        let outValue = new android.util.TypedValue();
        application.android.context.getTheme().resolveAttribute(
            (<any>android).R.attr.selectableItemBackground, outValue, true
        );
        action1.android.setBackgroundResource(outValue.resourceId);
    }

sserdyuk on 15 Jun 2017

@sserdyuk you can try using nativescript-ripple plugin to apply a custom effect.
Another possible scenario is to apply your own custom effect using the native iOS approaches (e.g. like the ones discussed here)

NickIliev on 15 Jun 2017

template:

<Image col="0" row="0" src="res://call" stretch="none" #image1 tap="highlight(image1)" />

controller:

 highlight(a) {
        a.className = "";
        a.className = "highlighted"
 }

CSS:

Image.highlighted {
    animation-name: animation;
    animation-duration: 1.2s;
}
@keyframes animation {
    from {
        opacity: 0.2;
    }
    to {
        opacity: 1;
    }
}

Tukkan on 4 Jan 2018

🎉4

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.