javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-17 12:57:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1106 from NativeScript/issue-1102

Browse Source 
Implemented #1102: Ability to specify an animation easing, i.e. curve…
This commit is contained in:
Rossen Hristov
2015-11-17 09:51:53 +02:00
parent 5176634c37 c4c92efd8e
commit 2b474059ea
8 changed files with 92 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/animations/main-page.ts
View File

@ -5,6 +5,7 @@ import abs = require("ui/layouts/absolute-layout");
import animationModule = require("ui/animation");
import colorModule = require("color");
import model = require("./model");
import enums = require("ui/enums");
var vm = new model.ViewModel();
@ -27,7 +28,7 @@ export function pageLoaded(args: observable.EventData) {
export function onSlideOut(args: observable.EventData) {
console.log("onSlideOut");
var curve = page.android ? new android.view.animation.AccelerateInterpolator(1) : UIViewAnimationCurve.UIViewAnimationCurveEaseIn;
var curve = enums.AnimationCurve.easeOut;
var buttonAnimations = [
{ target: button1, translate: { x: -240, y: 0 }, scale: { x: 0.5, y: 0.5 }, opacity: 0, duration: vm.duration, delay: 0, iterations: vm.iterations, curve: curve },
@ -36,7 +37,7 @@ export function onSlideOut(args: observable.EventData) {
]
buttonAnimation = new animationModule.Animation(buttonAnimations, vm.playSequentially);
panelAnimation = panel.createAnimation({ opacity: 0, scale: { x: 0.5, y: 0.5 }, rotate: -360, backgroundColor: new colorModule.Color("red"), duration: vm.duration, iterations: vm.iterations });
panelAnimation = panel.createAnimation({ opacity: 0, scale: { x: 0.5, y: 0.5 }, rotate: -360, backgroundColor: new colorModule.Color("red"), duration: vm.duration, iterations: vm.iterations, curve: enums.AnimationCurve.easeInOut });
buttonAnimation.play()
.then(() => panelAnimation.play())
@ -45,9 +46,9 @@ export function onSlideOut(args: observable.EventData) {
export function onSlideIn(args: observable.EventData) {
console.log("onSlideIn");
var curve = page.android ? new android.view.animation.DecelerateInterpolator(1) : UIViewAnimationCurve.UIViewAnimationCurveEaseOut;
var curve = enums.AnimationCurve.easeIn;
panelAnimation = panel.createAnimation({ opacity: 1, scale: { x: 1, y: 1 }, rotate: 0, backgroundColor: new colorModule.Color("yellow"), duration: vm.duration, iterations: vm.iterations });
panelAnimation = panel.createAnimation({ opacity: 1, scale: { x: 1, y: 1 }, rotate: 0, backgroundColor: new colorModule.Color("yellow"), duration: vm.duration, iterations: vm.iterations, curve: enums.AnimationCurve.easeInOut });
var buttonAnimations = [
{ target: button3, translate: { x: 0, y: 0 }, scale: { x: 1, y: 1 }, opacity: 1, duration: vm.duration, delay: 0, iterations: vm.iterations, curve: curve },
@ -86,7 +87,7 @@ export function onSingle(args: observable.EventData) {
duration: vm.duration,
delay: 0,
iterations: vm.iterations,
curve: button1.ios ? UIViewAnimationCurve.UIViewAnimationCurveEaseIn : new android.view.animation.AccelerateInterpolator(1),
curve: enums.AnimationCurve.linear,
})
.then(() => console.log("Animation finished"))
.catch((e) => console.log(e.message));

3
apps/tests/ui/animation/animation-tests.ts
View File

@ -5,6 +5,7 @@ import viewModule = require("ui/core/view");
import labelModule = require("ui/label");
import stackLayoutModule = require("ui/layouts/stack-layout");
import colorModule = require("color");
import enums = require("ui/enums");
// <snippet module="ui/animation" title="animation">
// # Animation
@ -42,7 +43,7 @@ export var test_AnimatingProperties = function (done) {
duration: 1000,
delay: 100,
iterations: 3,
curve: label.ios ? UIViewAnimationCurve.UIViewAnimationCurveEaseIn : new android.view.animation.AccelerateInterpolator(1),
curve: enums.AnimationCurve.easeIn
})
.then(() => {
////console.log("Animation finished.");