width height animation example

.migration_backup/package.json

@@ -40,7 +40,7 @@
     "tar.gz": "^1.0.7",
     "tns-platform-declarations": "6.0.1",
     "tslint": "5.11.0",
-    "typescript": "3.4.1"
+    "typescript": "3.4.5"
   },
   "scripts": {
     "lint": "eslint \"app/**/*.js\"",

app/app.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var application = require("tns-core-modules/application");
+var platformModule = require("tns-core-modules/platform");
+var applicationSettingsModule = require("tns-core-modules/application-settings");
+var deepLinkDataModule = require("./shared/deep-link-data");
+if (platformModule.isIOS) {
+    var mydelegate = require("./delegate/my-delegate");
+    application.ios.delegate = mydelegate.MyDelegate;
+}
+function launchExample() {
+    var rootView = application.getRootView();
+    if (applicationSettingsModule.hasKey("gotoexample")) {
+        var value = applicationSettingsModule.getString("gotoexample");
+        if (value !== "") {
+            applicationSettingsModule.remove("gotoexample");
+            rootView.navigate({
+                moduleName: value,
+                clearHistory: true
+            });
+        }
+    }
+}
+application.on(application.resumeEvent, function (args) {
+    if (args.android) {
+        var dld = new deepLinkDataModule.DeepLinkData("", args.android);
+        launchExample();
+    }
+    else if (args.ios) {
+        launchExample();
+    }
+});
+application.run({ moduleName: "app-root" });

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

@@ -8,6 +8,7 @@ NativeScript lets you animate the following properties:
 `translateX` and `translateY`
 `scaleX` and `scaleY`
 `rotate`
+`width` and `height`
 
 In every animation, you can control the following properties:
 

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

@@ -4,14 +4,16 @@ const navigationLinks = [
     new link("Animated Properties", "ns-ui-widgets-category/animations/animating-properties/animating-properties-page"),
     new link("Chained Animations", "ns-ui-widgets-category/animations/chaining-animations/chaining-animations-page"),
     new link("Animating Multiple Views", "ns-ui-widgets-category/animations/multiple-views-animation/multiple-views-page"),
-    new link("Properties originX and originY", "ns-ui-widgets-category/animations/origin-properties/property-origin-page")
+    new link("Properties originX and originY", "ns-ui-widgets-category/animations/origin-properties/property-origin-page"),
+    new link("Properties width and height", "ns-ui-widgets-category/animations/width-height-properties/width-height-properties-page")
 ];
 
 const navigationLinksTsc = [
     new link("Animated Properties", "ns-ui-widgets-category/animations/animating-properties/animating-properties-ts-page"),
     new link("Chained Animations", "ns-ui-widgets-category/animations/chaining-animations/chaining-animations-ts-page"),
     new link("Animating Multiple Views", "ns-ui-widgets-category/animations/multiple-views-animation/multiple-views-ts-page"),
-    new link("Properties originX and originY", "ns-ui-widgets-category/animations/origin-properties/property-origin-ts-page")
+    new link("Properties originX and originY", "ns-ui-widgets-category/animations/origin-properties/property-origin-ts-page"),
+    new link("Properties width and height", "ns-ui-widgets-category/animations/width-height-properties/width-height-properties-ts-page")
 ];
 
 // >> animations-imports

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

@@ -0,0 +1,5 @@
+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:
+
+<snippet id='animation-properties-width-height'/>
+<snippet id='animation-properties-width-height-ts'/>
+<snippet id='animation-properties-width-height-xml'/>

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

@@ -0,0 +1,9 @@
+Label {
+    color: white;
+    background-color:blue;
+    border-radius: 20;
+    margin: 16;
+    padding: 8;
+    horizontal-align: center;
+    vertical-align: top;
+}

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

@@ -0,0 +1,29 @@
+// >> animation-properties-width-height
+const AnimationCurve = require("tns-core-modules/ui/enums").AnimationCurve;
+
+function animateWidth(args) {
+    const button = args.object;
+    const page = button.page;
+    const myView = page.getViewById("lbl");
+
+    myView.animate({
+        width:320,
+        duration: 1000,
+        curve: AnimationCurve.easeIn
+    });
+}
+exports.animateWidth = animateWidth;
+
+function animateHeight(args) {
+    const button = args.object;
+    const page = button.page;
+    const myView = page.getViewById("lbl");
+
+    myView.animate({
+        height:400,
+        duration: 1000,
+        curve: AnimationCurve.easeIn
+    });
+}
+exports.animateHeight = animateHeight;
+// << animation-properties-width-height

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

@@ -0,0 +1,12 @@
+<Page xmlns="http://www.nativescript.org/tns.xsd">
+	<Page.actionBar>
+		<ActionBar title="Animating Width & Height Properties" />
+	</Page.actionBar>
+    <!-- >> animation-properties-width-height-xml -->
+	<GridLayout rows="auto, auto, *">
+		<Button row="0" text="Animate height" tap="animateHeight" class="btn btn-primary btn-active" width="80%"/>
+        <Button row="1" text="Animate width" tap="animateWidth" class="btn btn-primary btn-active" width="80%"/>
+		<Label row="2" id="lbl" text="NativeScript" textWrap="true" marginTop="50"/>
+	</GridLayout>
+    <!-- << animation-properties-width-height-xml -->
+</Page>

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

@@ -0,0 +1,9 @@
+Label {
+    color: white;
+    background-color:blue;
+    border-radius: 20;
+    margin: 16;
+    padding: 8;
+    horizontal-align: center;
+    vertical-align: top;
+}

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

@@ -0,0 +1,28 @@
+// >> animation-properties-width-height-ts
+import { AnimationCurve } from "tns-core-modules/ui/enums";
+import { View } from "tns-core-modules/ui/core/view";
+
+export function animateWidth(args) {
+    let button = args.object;
+    let page =  button.page;
+    let view = <View>page.getViewById("lbl");
+
+    view.animate({
+        width: 320,
+        duration: 1000,
+        curve: AnimationCurve.easeIn
+    });
+}
+
+export function animateHeight(args) {
+    let button = args.object;
+    let page =  button.page;
+    let view = <View>page.getViewById("lbl");
+
+    view.animate({
+        height: 400,
+        duration: 1000,
+        curve: AnimationCurve.easeIn
+    });
+}
+// << animation-properties-width-height-ts

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

@@ -0,0 +1,10 @@
+<Page xmlns="http://www.nativescript.org/tns.xsd">
+	<Page.actionBar>
+		<ActionBar title="Animating Width & Height Properties" />
+	</Page.actionBar>
+	<GridLayout rows="auto, auto, *">
+		<Button row="0" text="Animate height" tap="animateHeight" class="btn btn-primary btn-active" width="80%"/>
+        <Button row="1" text="Animate width" tap="animateWidth" class="btn btn-primary btn-active" width="80%"/>
+		<Label row="2" id="lbl" text="NativeScript" textWrap="true" marginTop="50"/>
+	</GridLayout>
+</Page>

package.json

@@ -25,7 +25,7 @@
       "version": "6.0.0"
     },
     "tns-ios": {
-      "version": "6.0.0"
+      "version": "6.0.1"
     }
   },
   "dependencies": {
@@ -36,7 +36,7 @@
     "eslint": "~5.9.0",
     "fs-extra": "^0.30.0",
     "markdown-snippet-injector": "^0.2.4",
-    "nativescript-dev-webpack": "1.0.0",
+    "nativescript-dev-webpack": "1.0.1",
     "tar.gz": "^1.0.7",
     "tns-platform-declarations": "6.0.1",
     "tslint": "5.11.0",

webpack.config.js

@@ -234,8 +234,6 @@ module.exports = env => {
             new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),
             // Copy assets to out dir. Add your own globs as needed.
             new CopyWebpackPlugin([
-                { from: { glob: "ns-ui-widgets-category/web-view/source-load/*.html" } }, 
-                { from: { glob: "ns-ui-widgets-category/placeholder/platform-files/*.ts" } },
                 { from: { glob: "fonts/**" } },
                 { from: { glob: "**/*.jpg" } },
                 { from: { glob: "**/*.png" } },