8000 Add animations demo to the gallery app, make vertical alignment cente… · Cayan/NativeScript@0dd8f98 · GitHub
[go: up one dir, main page]
Skip to content

Commit 0dd8f98

Browse files
PanayotCankovPanayotCankov
committed
Add animations demo to the gallery app, make vertical alignment center and visibility collapsed backward compatible
1 parent ba2d5d4 commit 0dd8f98

File tree

12 files changed

+376
-11
lines changed

12 files changed

+376
-11
lines changed

‎apps/app/gallery-app/animations/bkg.png

311 Bytes
Loading

‎apps/app/gallery-app/animations/configurable.ts

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
import * as observable from "data/observable";
2+
import * as pages from "ui/page";
3+
import * as buttonModule from "ui/button";
4+
import * as abs from "ui/layouts/absolute-layout";
5+
import * as animationModule from "ui/animation";
6+
import * as colorModule from "color";
7+
import * as model from "./model";
8+
import * as enums from "ui/enums";
9+
import * as frame from "ui/frame";
10+
import * as trace from "trace";
11+
12+
var vm = new model.ViewModel();
13+
14+
var page: pages.Page;
15+
var panel: abs.AbsoluteLayout;
16+
var button1: buttonModule.Button;
17+
var button2: buttonModule.Button;
18+
var button3: buttonModule.Button;
19+
var buttonAnimation: animationModule.Animation;
20+
var panelAnimation: animationModule.Animation;
21+
22+
export function pageLoaded(args: observable.EventData) {
23+
page = <pages.Page>args.object;
24+
page.bindingContext = vm;
25+
panel = page.getViewById<abs.AbsoluteLayout>("panel1");
26+
button1 = page.getViewById<buttonModule.Button>("button1");
27+
button2 = page.getViewById<buttonModule.Button>("button2");
28+
button3 = page.getViewById<buttonModule.Button>("button3");
29+
30+
31+
trace.enable();
32+
trace.addCategories(trace.categories.concat(trace.categories.Animation));
33+
}
34+
35+
export function onSlideOut(args: observable.EventData) {
36+
console.log("onSlideOut");
37+
var curve = enums.AnimationCurve.easeOut;
38+
39+
var buttonAnimations = [
40+
{ 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 },
41+
{ target: button2, translate: { x: -240, y: 0 }, scale: { x: 0.5, y: 0.5 }, opacity: 0, duration: vm.duration, delay: vm.duration, iterations: vm.iterations, curve: curve },
42+
{ target: button3, translate: { x: -240, y: 0 }, scale: { x: 0.5, y: 0.5 }, opacity: 0, duration: vm.duration, delay: vm.duration * 2, iterations: vm.iterations, curve: curve },
43+
]
44+
buttonAnimation = new animationModule.Animation(buttonAnimations, vm.playSequentially);
45+
46+
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 });
47+
48+
buttonAnimation.play()
49+
.then(() => panelAnimation.play())
50+
.catch((e) => console.log(e.message));
51+
}
52+
53+
export function onSlideIn(args: observable.EventData) {
54+
console.log("onSlideIn");
55+
var curve = enums.AnimationCurve.easeIn;
56+
57+
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 });
58+
59+
var buttonAnimations = [
60+
{ target: button3, translate: { x: 0, y: 0 }, scale: { x: 1, y: 1 }, opacity: 1, duration: vm.duration, delay: 0, iterations: vm.iterations, curve: curve },
61+
{ target: button2, translate: { x: 0, y: 0 }, scale: { x: 1, y: 1 }, opacity: 1, duration: vm.duration, delay: vm.duration, iterations: vm.iterations, curve: curve },
62+
{ target: button1, translate: { x: 0, y: 0 }, scale: { x: 1, y: 1 }, opacity: 1, duration: vm.duration, delay: vm.duration * 2, iterations: vm.iterations, curve: curve },
63+
]
64+
buttonAnimation = new animationModule.Animation(buttonAnimations, vm.playSequentially);
65+
66+
panelAnimation.play()
67+
.then(() => buttonAnimation.play())
68+
.catch((e) => console.log(e.message));
69+
}
70+
71+
export function onCancel(args: observable.EventData) {
72+
console.log("onCancel");
73+
if (panelAnimation && panelAnimation.isPlaying) {
74+
panelAnimation.cancel();
75+
}
76+
if (buttonAnimation && buttonAnimation.isPlaying) {
77+
buttonAnimation.cancel();
78+
}
79+
}
80+
81+
export function onTap(args: observable.EventData) {
82+
console.log((<any>a F987 rgs.object).text);
83+
}
84+
85+
export function onSingle(args: observable.EventData) {
86+
console.log("onSingle");
87+
button1.animate({
88+
opacity: 0.75,
89+
backgroundColor: new colorModule.Color("Red"),
90+
translate: { x: 100, y: 100 },
91+
scale: { x: 2, y: 2 },
92+
rotate: 180,
93+
duration: vm.duration,
94+
delay: 0,
95+
iterations: vm.iterations,
96+
curve: enums.AnimationCurve.linear,
97+
})
98+
.then(() => console.log("Animation finished"))
99+
.catch((e) => console.log(e.message));
100+
}
101+
102+
export function onSequence(args: observable.EventData) {
103+
console.log("onSequence");
104+
105+
button3.animate({
106+
translate: { x: 80, y: -40 },
107+
scale: { x: 0.9, y: 0.3 },
108+
rotate: 25,
109+
duration: 1000
110+
})
111+
.then(() => button3.animate({
112+
translate: { x: 0, y: -80 },
113+
scale: { x: 0.5, y: 0.5 },
114+
rotate: -25,
115+
duration: 1000
116+
}))
117+
.then(() => button3.animate({
118+
translate: { x: -80, y: -40 },
119+
scale: { x: 0.5, y: 0.9 },
120+
rotate: 45,
121+
duration: 1000
122+
}))
123+
.then(() => button3.animate({
124+
translate: { x: 0, y: 0 },
125+
scale: { x: 1, y: 1 },
126+
rotate: 0,
127+
duration: 1000
128+
}))
129+
.then(() => console.log("Animation finished"))
130+
.catch((e) => console.log(e.message));
131+
}
132+
133+
export function onInterrupted(args: observable.EventData) {
134+
console.log("onInterrupt");
135+
136+
setTimeout(() => {
137+
button3.animate({
138+
translate: { x: 80, y: -40 },
139+
scale: { x: 0.9, y: 0.3 },
140+
rotate: 25,
141+
duration: 1000
142+
});
143+
}, 700 * 0);
144+
145+
setTimeout(function() {
146+
button3.animate({
147+
translate: { x: 0, y: -80 },
148+
scale: { x: 0.5, y: 0.5 },
149+
rotate: -25,
150+
duration: 1000
151+
})
152+
}, 700 * 1);
153+
154+
setTimeout(function() {
155+
button3.animate({
156+
translate: { x: -80, y: -40 },
157+
scale: { x: 0.5, y: 0.9 },
158+
rotate: 45,
159+
duration: 1000
160+
})
161+
}, 700 * 2);
162+
163+
setTimeout(function() {
164+
button3.animate({
165+
translate: { x: 0, y: 0 },
166+
scale: { x: 1, y: 1 },
167+
rotate: 0,
168+
duration: 1000
169+
})
170+
}, 700 * 3);
171+
}
172+
173+
export function onOpacity(args: observable.EventData) {
174+
frame.topmost().navigate("./opacity");
175+
}

‎apps/app/gallery-app/animations/configurable.xml

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" id="mainPage">
2+
<StackLayout orientation="vertical">
3+
<StackLayout orientation="vertical" backgroundColor="LightGray" paddingTop="5" paddingBottom="5">
4+
5+
<Label text="{{ duration, 'Duration: ' + duration + ' ms' }}" width="180" />
6+
<Slider minValue="0" maxValue="10000" value="{{ duration }}" margin="0 15" />
7+
8+
<Label text="{{ iterations, 'Iterations: ' + iterations + ' times' }}" width="180" />
9+
<Slider minValue="0" maxValue="10" value="{{ iterations }}" margin="0 15" />
10+
11+
<StackLayout orientation="horizontal" horizontalAlignment="center">
12+
<Label text="Play Sequentially?"/>
13+
<Switch marginLeft="10" checked="{{ playSequentially }}"/>
14+
</StackLayout>
15+
16+
<StackLayout orientation="horizontal" marginTop="5" marginBottom="5" horizontalAlignment="center" paddingLeft="5" paddingRight="5">
17+
<Button text="Out" tap="onSlideOut" width="40" marginLeft="5" marginRight="5" />
18+
<Button text="In" tap="onSlideIn" width="40" marginLeft="5" marginRight="5" />
19+
<Button text="Single" tap="onSingle" width="70" marginLeft="5" marginRight="5" />
20+
<Button text="Cancel" tap="onCancel" width="70" marginLeft="5" marginRight="5" />
21+
<Button text="Opacity" tap="onOpacity" width="70" marginLeft="5" marginRight="5" />
22+
</StackLayout>
23+
24+
<StackLayout orientation="horizontal" marginTop="5" marginBottom="5" horizontalAlignment="center" paddingLeft="5" paddingRight="5">>
25+
<Button text="Sequence" width="80" marginLeft="5" marginRight="5" tap="onSequence" />
26+
<Button text="Interrupted" width="80" marginLeft="5" marginRight="5" tap="onInterrupted" />
27+
</StackLayout>
28+
29+
</StackLayout>
30+
<AbsoluteLayout id="panel1" backgroundColor="Yellow" width="300" height="190" clipToBounds="true" marginTop="10">
31+
<Button id="button1" text="Button 1" backgroundColor="White" width="180" height="50" left="60" top="10" tap="onTap" borderWidth="1" borderColor="red" />
32+
<Button id="button2" text="Button 2" backgroundColor="White" width="180" height="50" left="60" top="70" tap="onTap" borderWidth="1" borderColor="red" />
33+
<Button id="button3" text="Button 3" backgroundColor="White" width="180" height="50" left="60" top="130" tap="onTap" borderWidth="1" borderColor="red" />
34+
</AbsoluteLayout>
35+
</StackLayout>
36+
</Page>

‎apps/app/gallery-app/animations/model.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import observable = require("data/observable");
2+
3+
export class ViewModel extends observable.Observable {
4+
constructor() {
5+
super();
6+
7+
this._duration = 3000;
8+
this._iterations = 1;
9+
}
10+
11+
private _playSequentially: boolean;
12+
get playSequentially(): boolean {
13+
return this._playSequentially;
14+
}
15+
set playSequentially(value: boolean) {
16+
this._playSequentially = value;
17+
this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "playSequentially", value: value });
18+
}
19+
20+
private _duration: number;
21+
get duration(): number {
22+
return this._duration;
23+
}
24+
set duration(value: number) {
25+
this._duration = value;
26+
this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "duration", value: value });
27+
}
28+
29+
private _iterations: number;
30+
get iterations(): number {
31+
return this._iterations;
32+
}
33+
set iterations(value: number) {
34+
this._iterations = value;
35+
this.notify({ object: this, eventName: observable.Observable.propertyChangeEvent, propertyName: "iterations", value: value });
36+
}
37+
}

‎apps/app/gallery-app/animations/opacity.css

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.complex {
2+
width: 45;
3+
height: 45;
4+
margin: 1;
5+
background-image: url('~/gallery-app/animations/bkg.png');
6+
background-repeat:repeat-x;
7+
background-position: 20% 80%;
8+
background-color: lightyellow;
9+
background-size: 25% 50%;
10+
border-radius: 20;
11+
border-width: 4;
12+
border-color: red;
13+
}
14+
15+
.simple {
16+
width: 45;
17+
height: 45;
18+
margin: 1;
19+
border-radius: 20;
20+
background-color: lightgreen;
21+
}
22+
23+
.none {
24+
width: 45;
25+
height: 45;
26+
margin: 1;
27+
}

‎apps/app/gallery-app/animations/opacity.ts

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import observable = require("data/observable");
2+
import pages = require("ui/page");
3+
import view = require("ui/core/view");
4+
import animationModule = require("ui/animation");
5+
import slider = require("ui/slider");
6+
import wrapLayout = require("ui/layouts/wrap-layout");
7+
8+
var page: pages.Page;
9+
var opacitySlider: slider.Slider;
10+
var container: wrapLayout.WrapLayout;
11+
12+
export function pageLoaded(args: observable.EventData) {
13+
page = <pages.Page>args.object;
14+
opacitySlider = page.getViewById<slider.Slider>("opacitySlider");
15+
container = page.getViewById<wrapLayout.WrapLayout>("container");
16+
}
17+
18+
export function onSetOpacity(args: observable.EventData) {
19+
var newOpacity = opacitySlider.value / 100;
20+
container.eachChildView((view: view.View) => {
21+
view.opacity = newOpacity;
22+
return true;
23+
});
24+
}
25+
26+
var animationSet: animationModule.Animation;
27+
export function onAnimateOpacity(args: observable.EventData) {
28+
var newOpacity = opacitySlider.value / 100;
29+
var animationDefinitions = new Array<animationModule.AnimationDefinition>();
30+
container.eachChildView((view: view.View) => {
31+
animationDefinitions.push({
32+
target: view,
33+
opacity: newOpacity,
34+
duration: 5000
35+
});
36+
return true;
37+
});
38+
39+
animationSet = new animationModule.Animation(animationDefinitions);
40+
animationSet.play();
41+
}
42+
43+
export function onReset(args: observable.EventData) {
44+
if (animationSet.isPlaying) {
45+
animationSet.cancel();
46+
}
47+
}

‎apps/app/gallery-app/animations/opacity.xml

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" id="opacityPage">
2+
<StackLayout orientation="vertical">
3+
<StackLayout orientation="vertical">
4+
<Label text="opacity" width="180" />
5+
<Slider id="opacitySlider" minValue="0" maxValue="100" width="180" />
6+
<Button text="Set" tap="onSetOpacity"/>
7+
<Button text="Animate" tap="onAnimateOpacity"/>
8+
<Button text="Reset" tap="onReset"/>
9+
</StackLayout>
10+
<WrapLayout orientation="horizontal" id="container">
11+
12+
<StackLayout class="complex"/>
13+
<Button text="Button" class="complex"/>
14+
<Label text="Label" class="complex"/>
15+
<Image src="~/test-icon.png" class="complex"/>
16+
<TextField text="TextField" class="complex"/>
17+
<TextView text="TextView" class="complex"/>
18+
19+
<StackLayout class="simple"/>
20+
<Button text="Button" class="simple"/>
21+
<Label text="Label" class="simple"/>
22+
<Image src="~/test-icon.png" class="simple"/>
23+
<TextField text="TextField" class="simple"/>
24+
<TextView text="TextView" class="simple"/>
25+
26+
<StackLayout class="none"/>
27+
<Button text="Button" class="none"/>
28+
<Label text="Label" class="none"/>
29+
<Image src="~/test-icon.png" class="none"/>
30+
<TextField text="TextField" class="none"/>
31+
<TextView text="TextView" class="none"/>
32+
33+
</WrapLayout>
34+
</StackLayout>
35+
</Page>

‎apps/app/gallery-app/animations/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
{ "name" : "animations",
2+
"main" : "app.js" }

‎apps/app/gallery-app/animations/test-icon.png

1.27 KB
Loading

‎apps/app/gallery-app/main-page.xml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,12 @@
4040
<Button tag="views/list-picker" text="ListPicker" tap="itemTap" />
4141
<Button tag="views/segmented-bar" text="SegmentedBar" tap="itemTap" />
4242
</StackLayout>
43+
44+
<Label class="title" text="Animations" />
45+
<StackLayout>
46+
<Button tag="animations/configurable" text="configurable" tap="itemTap" />
47+
<Button tag="animations/opacity" text="opacity" tap="itemTap" />
48+
</StackLayout>
4349
</StackLayout>
4450
</ScrollView>
4551
</Page>

0 commit comments

Comments
 (0)
0