mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-11-05 13:26:48 +08:00
feat: touch animations demo in toolbox
This commit is contained in:
Nathan Walker
314
apps/toolbox/src/pages/touch-animations.ts
Normal file
314
apps/toolbox/src/pages/touch-animations.ts
Normal file
@@ -0,0 +1,314 @@
|
||||
import { Observable, EventData, Page, CoreTypes, TouchManager, TouchAnimationOptions, Color, View } from '@nativescript/core';
|
||||
|
||||
let page: Page;
|
||||
|
||||
export function navigatingTo(args: EventData) {
|
||||
page = <Page>args.object;
|
||||
page.bindingContext = new TouchAnimationsModel(page);
|
||||
}
|
||||
|
||||
export class TouchAnimationsModel extends Observable {
|
||||
touchAnimation: TouchAnimationOptions = {
|
||||
down: {
|
||||
scale: { x: 0.95, y: 0.95 },
|
||||
backgroundColor: new Color('purple'),
|
||||
duration: 250,
|
||||
curve: CoreTypes.AnimationCurve.easeInOut,
|
||||
},
|
||||
up: {
|
||||
scale: { x: 1, y: 1 },
|
||||
backgroundColor: new Color('#30bcff'),
|
||||
duration: 250,
|
||||
curve: CoreTypes.AnimationCurve.easeInOut,
|
||||
},
|
||||
};
|
||||
|
||||
touchAnimationLabel: TouchAnimationOptions = {
|
||||
down: {
|
||||
scale: { x: 0.85, y: 0.85 },
|
||||
duration: 150,
|
||||
curve: CoreTypes.AnimationCurve.easeInOut,
|
||||
},
|
||||
up: {
|
||||
scale: { x: 1, y: 1 },
|
||||
duration: 150,
|
||||
curve: CoreTypes.AnimationCurve.easeInOut,
|
||||
},
|
||||
};
|
||||
|
||||
touchAnimationLayout: TouchAnimationOptions = {
|
||||
down: {
|
||||
scale: { x: 0.85, y: 0.85 },
|
||||
opacity: 0.7,
|
||||
duration: 250,
|
||||
curve: CoreTypes.AnimationCurve.easeInOut,
|
||||
},
|
||||
up: {
|
||||
scale: { x: 1, y: 1 },
|
||||
opacity: 1,
|
||||
duration: 250,
|
||||
curve: CoreTypes.AnimationCurve.easeInOut,
|
||||
},
|
||||
};
|
||||
|
||||
touchAnimationNative: TouchAnimationOptions = {
|
||||
down: (view: View) => {
|
||||
const shakeIt = () => {
|
||||
// shake when all the way down
|
||||
view
|
||||
.animate({ translate: { x: -20, y: 0 }, scale: { x: 0.95, y: 0.95 }, duration: 60, curve: CoreTypes.AnimationCurve.linear })
|
||||
.then(function () {
|
||||
return view.animate({ translate: { x: 20, y: 0 }, duration: 60, curve: CoreTypes.AnimationCurve.linear });
|
||||
})
|
||||
.then(function () {
|
||||
return view.animate({ translate: { x: -20, y: 0 }, duration: 60, curve: CoreTypes.AnimationCurve.linear });
|
||||
})
|
||||
.then(function () {
|
||||
return view.animate({ translate: { x: 20, y: 0 }, duration: 60, curve: CoreTypes.AnimationCurve.linear });
|
||||
})
|
||||
.then(function () {
|
||||
return view.animate({ translate: { x: -10, y: 0 }, duration: 60, curve: CoreTypes.AnimationCurve.linear });
|
||||
})
|
||||
.then(function () {
|
||||
return view.animate({ translate: { x: 10, y: 0 }, duration: 60, curve: CoreTypes.AnimationCurve.linear });
|
||||
})
|
||||
.then(function () {
|
||||
return view.animate({ translate: { x: -5, y: 0 }, duration: 60, curve: CoreTypes.AnimationCurve.linear });
|
||||
})
|
||||
.then(function () {
|
||||
return view.animate({ translate: { x: 5, y: 0 }, duration: 60, curve: CoreTypes.AnimationCurve.linear });
|
||||
})
|
||||
.then(function () {
|
||||
return view.animate({ translate: { x: 0, y: 0 }, duration: 60, curve: CoreTypes.AnimationCurve.linear });
|
||||
})
|
||||
.then(function () {});
|
||||
};
|
||||
if (global.isIOS) {
|
||||
UIView.animateWithDurationDelayUsingSpringWithDampingInitialSpringVelocityOptionsAnimationsCompletion(
|
||||
0.4,
|
||||
0,
|
||||
0.5,
|
||||
3,
|
||||
UIViewAnimationOptions.CurveEaseInOut,
|
||||
() => {
|
||||
view.ios.transform = CGAffineTransformMakeScale(0.95, 0.95);
|
||||
view.opacity = 0.5;
|
||||
view.ios.backgroundColor = new Color('red').ios;
|
||||
view.color = new Color('white');
|
||||
},
|
||||
() => {
|
||||
shakeIt();
|
||||
}
|
||||
);
|
||||
} else {
|
||||
view
|
||||
.animate({
|
||||
scale: { x: 0.95, y: 0.95 },
|
||||
opacity: 0.5,
|
||||
backgroundColor: new Color('red'),
|
||||
duration: 400,
|
||||
})
|
||||
.then(() => {
|
||||
view.color = new Color('white');
|
||||
shakeIt();
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
},
|
||||
up: (view: View) => {
|
||||
if (global.isIOS) {
|
||||
UIView.animateWithDurationDelayUsingSpringWithDampingInitialSpringVelocityOptionsAnimationsCompletion(
|
||||
0.4,
|
||||
0,
|
||||
0.5,
|
||||
3,
|
||||
UIViewAnimationOptions.CurveEaseInOut,
|
||||
() => {
|
||||
view.ios.transform = CGAffineTransformMakeScale(1.2, 1.2);
|
||||
},
|
||||
() => {
|
||||
UIView.animateWithDurationDelayUsingSpringWithDampingInitialSpringVelocityOptionsAnimationsCompletion(
|
||||
0.2,
|
||||
0,
|
||||
0.5,
|
||||
3,
|
||||
UIViewAnimationOptions.CurveEaseInOut,
|
||||
() => {
|
||||
view.ios.transform = CGAffineTransformIdentity;
|
||||
view.opacity = 1;
|
||||
view.ios.backgroundColor = new Color('#aee406').ios;
|
||||
view.color = new Color('black');
|
||||
},
|
||||
() => {
|
||||
// complete
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
} else {
|
||||
view
|
||||
.animate({
|
||||
scale: { x: 1.2, y: 1.2 },
|
||||
duration: 400,
|
||||
})
|
||||
.then(() => {
|
||||
view.color = new Color('black');
|
||||
view
|
||||
.animate({
|
||||
scale: { x: 1, y: 1 },
|
||||
opacity: 1,
|
||||
backgroundColor: new Color('#aee406'),
|
||||
duration: 200,
|
||||
})
|
||||
.then(() => {})
|
||||
.catch(() => {});
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
touchAnimationRotate: TouchAnimationOptions = {
|
||||
down: {
|
||||
scale: { x: 0.85, y: 0.85 },
|
||||
rotate: 6,
|
||||
opacity: 0.7,
|
||||
duration: 250,
|
||||
curve: CoreTypes.AnimationCurve.easeInOut,
|
||||
},
|
||||
up: {
|
||||
scale: { x: 1, y: 1 },
|
||||
rotate: 0,
|
||||
opacity: 1,
|
||||
duration: 250,
|
||||
curve: CoreTypes.AnimationCurve.easeInOut,
|
||||
},
|
||||
};
|
||||
|
||||
touchAnimationGrow: TouchAnimationOptions = {
|
||||
down: {
|
||||
scale: { x: 1.2, y: 1.2 },
|
||||
backgroundColor: new Color('#325279'),
|
||||
rotate: -4,
|
||||
duration: 250,
|
||||
curve: CoreTypes.AnimationCurve.easeInOut,
|
||||
},
|
||||
up: {
|
||||
scale: { x: 1, y: 1 },
|
||||
backgroundColor: new Color('#006968'),
|
||||
rotate: 0,
|
||||
duration: 900,
|
||||
curve: CoreTypes.AnimationCurve.easeInOut,
|
||||
},
|
||||
};
|
||||
|
||||
touchAnimationBlowAway: TouchAnimationOptions = {
|
||||
down: (view: View) => {
|
||||
let rotate = 3;
|
||||
const shiftAway = (viewInstance: View, delay = 0) => {
|
||||
setTimeout(() => {
|
||||
viewInstance.animate({ translate: { x: 0, y: -10 }, scale: { x: 1.1, y: 1.1 }, opacity: 0.8, rotate, duration: 200, curve: CoreTypes.AnimationCurve.easeInOut }).catch(function () {});
|
||||
rotate = rotate * -1;
|
||||
}, delay);
|
||||
};
|
||||
let cnt = 0;
|
||||
for (const id of this.elementIds) {
|
||||
shiftAway(this.page.getViewById(id), cnt);
|
||||
cnt += 10;
|
||||
}
|
||||
if (global.isIOS) {
|
||||
UIView.animateWithDurationDelayUsingSpringWithDampingInitialSpringVelocityOptionsAnimationsCompletion(
|
||||
0.4,
|
||||
0,
|
||||
0.5,
|
||||
3,
|
||||
UIViewAnimationOptions.CurveEaseInOut,
|
||||
() => {
|
||||
view.ios.transform = CGAffineTransformMakeScale(0.95, 0.95);
|
||||
view.opacity = 0.5;
|
||||
},
|
||||
() => {}
|
||||
);
|
||||
} else {
|
||||
view
|
||||
.animate({
|
||||
scale: { x: 0.95, y: 0.95 },
|
||||
opacity: 0.5,
|
||||
duration: 400,
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
},
|
||||
up: (view: View) => {
|
||||
const shiftBack = (viewInstance: View, delay = 0) => {
|
||||
setTimeout(() => {
|
||||
viewInstance.animate({ translate: { x: 0, y: 0 }, scale: { x: 1, y: 1 }, opacity: 1, rotate: 0, duration: 200, curve: CoreTypes.AnimationCurve.easeInOut }).catch(function () {});
|
||||
}, delay);
|
||||
};
|
||||
let cnt = 0;
|
||||
for (const id of this.elementIds) {
|
||||
shiftBack(this.page.getViewById(id), cnt);
|
||||
cnt += 10;
|
||||
}
|
||||
if (global.isIOS) {
|
||||
UIView.animateWithDurationDelayUsingSpringWithDampingInitialSpringVelocityOptionsAnimationsCompletion(
|
||||
0.3,
|
||||
0,
|
||||
0.5,
|
||||
3,
|
||||
UIViewAnimationOptions.CurveEaseInOut,
|
||||
() => {
|
||||
view.ios.transform = CGAffineTransformIdentity;
|
||||
},
|
||||
() => {}
|
||||
);
|
||||
} else {
|
||||
view
|
||||
.animate({
|
||||
scale: { x: 1, y: 1 },
|
||||
opacity: 1,
|
||||
duration: 300,
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
elementIds = ['label', 'buttonTop', 'grid1', 'buttonShake', 'stack1', 'button2', 'button3', 'button4', 'button5'];
|
||||
|
||||
constructor(private page: Page) {
|
||||
super();
|
||||
TouchManager.enableGlobalTapAnimations = true;
|
||||
this.page.on('navigatingFrom', () => {
|
||||
TouchManager.enableGlobalTapAnimations = false;
|
||||
});
|
||||
|
||||
// reuse instance level animations but customize to ensure they are different
|
||||
TouchManager.animations = {
|
||||
down: {
|
||||
...this.touchAnimation.down,
|
||||
backgroundColor: new Color('rgba(48, 188, 255, .7)'),
|
||||
duration: 150,
|
||||
},
|
||||
up: {
|
||||
...this.touchAnimation.up,
|
||||
duration: 150,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
loadedContainer(args) {
|
||||
if (global.isAndroid) {
|
||||
if (args.object.android.setClipToPadding) {
|
||||
args.object.android.setClipToPadding(false);
|
||||
}
|
||||
if (args.object.android.setClipChildren) {
|
||||
args.object.android.setClipChildren(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onTapAnything() {
|
||||
console.log('onTapAnything');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user