Skip to content

Commit 8f5616b

Browse files
tsonevntsonevn
authored
Merge pull request #144 from NativeScript/animation_example
width height animation example
2 parents ef6713a + 34bf47a commit 8f5616b

13 files changed

+143
-7
lines changed

‎.migration_backup/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
"tar.gz": "^1.0.7",
4141
"tns-platform-declarations": "6.0.1",
4242
"tslint": "5.11.0",
43-
"typescript": "3.4.1"
43+
"typescript": "3.4.5"
4444
},
4545
"scripts": {
4646
"lint": "eslint \"app/**/*.js\"",

‎app/app.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
"use strict";
2+
Object.defineProperty(exports, "__esModule", { value: true });
3+
var application = require("tns-core-modules/application");
4+
var platformModule = require("tns-core-modules/platform");
5+
var applicationSettingsModule = require("tns-core-modules/application-settings");
6+
var deepLinkDataModule = require("./shared/deep-link-data");
7+
if (platformModule.isIOS) {
8+
var mydelegate = require("./delegate/my-delegate");
9+
application.ios.delegate = mydelegate.MyDelegate;
10+
}
11+
function launchExample() {
12+
var rootView = application.getRootView();
13+
if (applicationSettingsModule.hasKey("gotoexample")) {
14+
var value = applicationSettingsModule.getString("gotoexample");
15+
if (value !== "") {
16+
applicationSettingsModule.remove("gotoexample");
17+
rootView.navigate({
18+
moduleName: value,
19+
clearHistory: true
20+
});
21+
}
22+
}
23+
}
24+
application.on(application.resumeEvent, function (args) {
25+
if (args.android) {
26+
var dld = new deepLinkDataModule.DeepLinkData("", args.android);
27+
launchExample();
28+
}
29+
else if (args.ios) {
30+
launchExample();
31+
}
32+
});
33+
application.run({ moduleName: "app-root" });

‎app/ns-ui-widgets-category/animations/animating-properties/article.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ NativeScript lets you animate the following properties:
88
`translateX` and `translateY`
99
`scaleX` and `scaleY`
1010
`rotate`
11+
`width` and `height`
1112

1213
In every animation, you can control the following properties:
1314

‎app/ns-ui-widgets-category/animations/animations-page.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,16 @@ const navigationLinks = [
44
new link("Animated Properties", "ns-ui-widgets-category/animations/animating-properties/animating-properties-page"),
55
new link("Chained Animations", "ns-ui-widgets-category/animations/chaining-animations/chaining-animations-page"),
66
new link("Animating Multiple Views", "ns-ui-widgets-category/animations/multiple-views-animation/multiple-views-page"),
7-
new link("Properties originX and originY", "ns-ui-widgets-category/animations/origin-properties/property-origin-page")
7+
new link("Properties originX and originY", "ns-ui-widgets-category/animations/origin-properties/property-origin-page"),
8+
new link("Properties width and height", "ns-ui-widgets-category/animations/width-height-properties/width-height-properties-page")
89
];
910

1011
const navigationLinksTsc = [
1112
new link("Animated Properties", "ns-ui-widgets-category/animations/animating-properties/animating-properties-ts-page"),
1213
new link("Chained Animations", "ns-ui-widgets-category/animations/chaining-animations/chaining-animations-ts-page"),
1314
new link("Animating Multiple Views", "ns-ui-widgets-category/animations/multiple-views-animation/multiple-views-ts-page"),
14-
new link("Properties originX and originY", "ns-ui-widgets-category/animations/origin-properties/property-origin-ts-page")
15+
new link("Properties originX and originY", "ns-ui-widgets-category/animations/origin-properties/property-origin-ts-page"),
16+
new link("Properties width and height", "ns-ui-widgets-category/animations/width-height-properties/width-height-properties-ts-page")
1517
];
1618

1719
// >> animations-imports

‎app/ns-ui-widgets-category/animations/width-height-properties/article.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
Since {N} 6.0, we can animate the `width` and `height` properties of views. On the snippets below are demonstrated, how to configure those animations:
2+
3+
<snippet id='animation-properties-width-height'/>
4+
<snippet id='animation-properties-width-height-ts'/>
5+
<snippet id='animation-properties-width-height-xml'/>

‎app/ns-ui-widgets-category/animations/width-height-properties/width-height-properties-page.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
Label {
2+
color: white;
3+
background-color:blue;
4+
border-radius: 20;
5+
margin: 16;
6+
padding: 8;
7+
horizontal-align: center;
8+
vertical-align: top;
9+
}

‎app/ns-ui-widgets-category/animations/width-height-properties/width-height-properties-page.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// >> animation-properties-width-height
2+
const AnimationCurve = require("tns-core-modules/ui/enums").AnimationCurve;
3+
4+
function animateWidth(args) {
5+
const button = args.object;
6+
const page = button.page;
7+
const myView = page.getViewById("lbl");
8+
9+
myView.animate({
10+
width:320,
11+
duration: 1000,
12+
curve: AnimationCurve.easeIn
13+
});
14+
}
15+
exports.animateWidth = animateWidth;
16+
17+
function animateHeight(args) {
18+
const button = args.object;
19+
const page = button.page;
20+
const myView = page.getViewById("lbl");
21+
22+
myView.animate({
23+
height:400,
24+
duration: 1000,
25+
curve: AnimationCurve.easeIn
26+
});
27+
}
28+
exports.animateHeight = animateHeight;
29+
// << animation-properties-width-height

‎app/ns-ui-widgets-category/animations/width-height-properties/width-height-properties-page.xml

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<Page xmlns="http://www.nativescript.org/tns.xsd">
2+
<Page.actionBar>
3+
<ActionBar title="Animating Width & Height Properties" />
4+
</Page.actionBar>
5+
<!-- >> animation-properties-width-height-xml -->
6+
<GridLayout rows="auto, auto, *">
7+
<Button row="0" text="Animate height" tap="animateHeight" class="btn btn-primary btn-active" width="80%"/>
8+
<Button row="1" text="Animate width" tap="animateWidth" class="btn btn-primary btn-active" width="80%"/>
9+
<Label row="2" id="lbl" text="NativeScript" textWrap="true" marginTop="50"/>
10+
</GridLayout>
11+
<!-- << animation-properties-width-height-xml -->
12+
</Page>

‎app/ns-ui-widgets-category/animations/width-height-properties/width-height-properties-ts-page.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
Label {
2+
color: white;
3+
background-color:blue;
4+
border-radius: 20;
5+
margin: 16;
6+
padding: 8;
7+
horizontal-align: center;
8+
vertical-align: top;
9+
}

‎app/ns-ui-widgets-category/animations/width-height-properties/width-height-properties-ts-page.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// >> animation-properties-width-height-ts
2+
import { AnimationCurve } from "tns-core-modules/ui/enums";
3+
import { View } from "tns-core-modules/ui/core/view";
4+
5+
export function animateWidth(args) {
6+
let button = args.object;
7+
let page = button.page;
8+
let view = <View>page.getViewById("lbl");
9+
10+
view.animate({
11+
width: 320,
12+
duration: 1000,
13+
curve: AnimationCurve.easeIn
14+
});
15+
}
16+
17+
export function animateHeight(args) {
18+
let button = args.object;
19+
let page = button.page;
20+
let view = <View>page.getViewById("lbl");
21+
22+
view.animate({
23+
height: 400,
24+
duration: 1000,
25+
curve: AnimationCurve.easeIn
26+
});
27+
}
28+
// << animation-properties-width-height-ts

‎app/ns-ui-widgets-category/animations/width-height-properties/width-height-properties-ts-page.xml

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<Page xmlns="http://www.nativescript.org/tns.xsd">
2+
<Page.actionBar>
3+
<ActionBar title="Animating Width & Height Properties" />
4+
</Page.actionBar>
5+
<GridLayout rows="auto, auto, *">
6+
<Button row="0" text="Animate height" tap="animateHeight" class="btn btn-primary btn-active" width="80%"/>
7+
<Button row="1" text="Animate width" tap="animateWidth" class="btn btn-primary btn-active" width="80%"/>
8+
<Label row="2" id="lbl" text="NativeScript" textWrap="true" marginTop="50"/>
9+
</GridLayout>
10+
</Page>

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"version": "6.0.0"
2626
},
2727
"tns-ios": {
28-
"version": "6.0.0"
28+
"version": "6.0.1"
2929
}
3030
},
3131
"dependencies": {
@@ -36,7 +36,7 @@
3636
"eslint": "~5.9.0",
3737
"fs-extra": "^0.30.0",
3838
"markdown-snippet-injector": "^0.2.4",
39-
"nativescript-dev-webpack": "1.0.0",
39+
"nativescript-dev-webpack": "1.0.1",
4040
"tar.gz": "^1.0.7",
4141
"tns-platform-declarations": "6.0.1",
4242
"tslint": "5.11.0",

‎webpack.config.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -234,8 +234,6 @@ module.exports = env => {
234234
new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),
235235
// Copy assets to out dir. Add your own globs as needed.
236236
new CopyWebpackPlugin([
237-
{ from: { glob: "ns-ui-widgets-category/web-view/source-load/*.html" } },
238-
{ from: { glob: "ns-ui-widgets-category/placeholder/platform-files/*.ts" } },
239237
{ from: { glob: "fonts/**" } },
240238
{ from: { glob: "**/*.jpg" } },
241239
{ from: { glob: "**/*.png" } },

0 commit comments

Comments
 (0)