From 34bf47a879019083f8971396951299052fb5eb17 Mon Sep 17 00:00:00 2001 From: tsonevn Date: Tue, 23 Jul 2019 12:34:27 +0300 Subject: [PATCH] width height animation example --- .migration_backup/package.json | 2 +- app/app.js | 33 +++++++++++++++++++ .../animating-properties/article.md | 1 + .../animations/animations-page.js | 6 ++-- .../width-height-properties/article.md | 5 +++ .../width-height-properties-page.css | 9 +++++ .../width-height-properties-page.js | 29 ++++++++++++++++ .../width-height-properties-page.xml | 12 +++++++ .../width-height-properties-ts-page.css | 9 +++++ .../width-height-properties-ts-page.ts | 28 ++++++++++++++++ .../width-height-properties-ts-page.xml | 10 ++++++ package.json | 4 +-- webpack.config.js | 2 -- 13 files changed, 143 insertions(+), 7 deletions(-) create mode 100644 app/app.js create mode 100644 app/ns-ui-widgets-category/animations/width-height-properties/article.md create mode 100644 app/ns-ui-widgets-category/animations/width-height-properties/width-height-properties-page.css create mode 100644 app/ns-ui-widgets-category/animations/width-height-properties/width-height-properties-page.js create mode 100644 app/ns-ui-widgets-category/animations/width-height-properties/width-height-properties-page.xml create mode 100644 app/ns-ui-widgets-category/animations/width-height-properties/width-height-properties-ts-page.css create mode 100644 app/ns-ui-widgets-category/animations/width-height-properties/width-height-properties-ts-page.ts create mode 100644 app/ns-ui-widgets-category/animations/width-height-properties/width-height-properties-ts-page.xml diff --git a/.migration_backup/package.json b/.migration_backup/package.json index f4237f1..46f17d9 100644 --- a/.migration_backup/package.json +++ b/.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\"", diff --git a/app/app.js b/app/app.js new file mode 100644 index 0000000..de7f4f4 --- /dev/null +++ b/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" }); diff --git a/app/ns-ui-widgets-category/animations/animating-properties/article.md b/app/ns-ui-widgets-category/animations/animating-properties/article.md index 5c41e31..8cf825b 100644 --- a/app/ns-ui-widgets-category/animations/animating-properties/article.md +++ b/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: diff --git a/app/ns-ui-widgets-category/animations/animations-page.js b/app/ns-ui-widgets-category/animations/animations-page.js index e796963..08d3d24 100644 --- a/app/ns-ui-widgets-category/animations/animations-page.js +++ b/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 diff --git a/app/ns-ui-widgets-category/animations/width-height-properties/article.md b/app/ns-ui-widgets-category/animations/width-height-properties/article.md new file mode 100644 index 0000000..bd77d7e --- /dev/null +++ b/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: + + + + \ No newline at end of file diff --git a/app/ns-ui-widgets-category/animations/width-height-properties/width-height-properties-page.css b/app/ns-ui-widgets-category/animations/width-height-properties/width-height-properties-page.css new file mode 100644 index 0000000..8b6a90b --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/app/ns-ui-widgets-category/animations/width-height-properties/width-height-properties-page.js b/app/ns-ui-widgets-category/animations/width-height-properties/width-height-properties-page.js new file mode 100644 index 0000000..f15bf8e --- /dev/null +++ b/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 diff --git a/app/ns-ui-widgets-category/animations/width-height-properties/width-height-properties-page.xml b/app/ns-ui-widgets-category/animations/width-height-properties/width-height-properties-page.xml new file mode 100644 index 0000000..d2d6102 --- /dev/null +++ b/app/ns-ui-widgets-category/animations/width-height-properties/width-height-properties-page.xml @@ -0,0 +1,12 @@ + + + + + + +