Rotate object by 360 degrees with different Images in Ionic 5? - ionic-framework

Question

i am creating an Ionic App to rotate an image of Car by 360 degrees. I want to rotate the object with different image files of same object (eg Car)
Here is the Example of car that I want to implement in my app.
i tried by using Gesture, loading different images on Gesture onMove.
But its not working properly.
Is there any cordova package is available? or any other way to achieve this?
My Ionic info:
Ionic CLI : 5.4.16
Ionic Framework : #ionic/angular 5.2.3
onSwipe(e) {
let count = 0;
let direction = '';
if (e.deltaX > 0) {
direction = 'R';
count = Math.round(parseInt(e.deltaX) / 10);
} else { // left
// console.log('Left');
direction = 'L';
count = Math.round(parseInt(e.deltaX) / 10);
}
this.ref.detectChanges();
this.imageChange(count, direction);
}

Answer 1

i tried using the sample from the JSFiddle and modify it to use gestureController. Maybe not the best solution. but it works
//your.html
<div (click)="createGesture()">
<img src="https://res.cloudinary.com/dewn0wy2s/image/upload/v1592668487/360/{{delta}}.png">
</div>
//your.component.ts
delta:number = 1;
constructor(
private gestureCtrl: GestureController,
private el: ElementRef
) { }
public createGesture() {
const gesture = this.gestureCtrl.create({
gestureName: 'rotateGesture',
el: this.el.nativeElement,
onStart: ($event) => {
console.log("onStart")
},
onMove: ($event) => {
if ($event.deltaX < 0) {
this.delta = this.delta == 0? 51 : this.delta - 1
} else {
this.delta = this.delta == 51? 0 : this.delta + 1
}
console.log("onMove", this.delta, $event)
},
onEnd: ($event) => {
console.log("onEnd", $event)
},
}, true);
gesture.enable();
}