nativescript-effects - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

package.json

 {
-  "name": "nativescript-effects",
-  "version": "0.1.0",
-  "main": "tns-effects.js",
-  "description": "A NativeScript plugin that extend animations to include common animation scenarios.",
-  "nativescript": {
-    "platforms": {
-      "android": "1.5.0",
-      "ios": "1.5.2"
-    }
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/alexziskind1/nativescript-effects.git"
-  },
-  "keywords": [
-    "NativeScript",
-    "native",
-    "script",
-    "animation",
-    "effects"
-  ],
-  "contributors": [ ],
-  "author":     {
-      "name": "Alexander Ziskind",
-      "email": "[e-mail]",
-      "url": "https://github.com/alexziskind1"
-    },
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/alexziskind1/nativescript-effects/issues"
-  },
-  "homepage": "https://github.com/alexziskind1/nativescript-effects",
- "readmeFilename": "README.md",
-  "gitHead": "7a5addbe9192a7708fbaac9db42e33f2a156fea6",
-  "_id": "nativescript-effects@0.1.0",
-  "scripts": {},
-  "_shasum": "7bdee571649168a79ded1bf63beb6d7b4b9cfa2a",
-  "_from": "..",
-  "_resolved": "file:.."
-}
+	"name": "nativescript-effects",
+	"version": "0.2.0",
+	"main": "tns-effects.js",
+	"description": "A NativeScript plugin that extend animations to include common animation scenarios.",
+	"nativescript": {
+		"platforms": {
+			"android": "1.5.0",
+			"ios": "1.5.2"
+		},
+		"tns-ios": {
+			"version": "1.5.2"
+		}
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/alexziskind1/nativescript-effects.git"
+	},
+	"keywords": [
+		"NativeScript",
+		"native",
+		"script",
+		"animation",
+		"effects"
+	],
+	"contributors": [],
+	"author": {
+		"name": "Alexander Ziskind",
+		"email": "[e-mail]",
+		"url": "https://github.com/alexziskind1"
+	},
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/alexziskind1/nativescript-effects/issues"
+	},
+	"homepage": "https://github.com/alexziskind1/nativescript-effects",
+	"readmeFilename": "README.md",
+	"gitHead": "7a5addbe9192a7708fbaac9db42e33f2a156fea6",
+	"_id": "nativescript-effects@0.1.0",
+	"scripts": {},
+	"_shasum": "7bdee571649168a79ded1bf63beb6d7b4b9cfa2a",
+	"_from": "..",
+	"_resolved": "file:.."
+}

README.md

@@ -1,1 +0,217 @@
-# nativescript-effects
+# NativeScript Effects
+
+A NativeScript plugin that adds commonly used animation effects to views. This includes the nativescript-animation-spring as one of the effects so no need to get that plugin if you get this one.
+
+## Installation
+
+```
+$ tns plugin add nativescript-effects
+```
+
+This command automatically installs the necessary files, as well as stores nativescript-effects as a dependency in your project's `package.json` file.
+
+
+## Usage
+
+To use the animation effects plugin you must first `require()` its module. After you `require()` the module you have access to its APIs.
+
+``` js
+var tnsfx = require('nativescript-effects');
+```
+
+Then get a reference to the view you want to animate and call one of the functions listed below. This view can be any child of the NativeScript View class such as Button, Label, etc.
+
+```js
+var myLabel = page.getViewById('lblMessage');
+myLabel.fadeIn()
+       .then(function(){
+           myLabel.fadeOut(10000);
+       });
+
+```
+
+## API
+
+All extensions listed below return a Promise that will call it's ```then``` function once finished successfully.
+
+----
+## .fadeIn([duration])
+Description: *Display the view by fading it to opaque.*
+
+**duration** (default: 400)
+Type: Number or String <br/>
+A string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.
+
+----
+## .fadeOut([duration])
+Description: *Hide the view by fading it to transparent.*
+
+**duration** (default: 400)
+Type: Number or String <br/>
+A string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.
+
+
+----
+## .fadeTo([duration], [opacity])
+Description: *Gradually adjust the opacity of the view.*
+
+**duration** (default: 400)
+Type: Number or String <br/>
+A string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.
+
+**opacity** (default: 1)
+Type: Number <br/>
+A number between 0.0 and 1.0
+
+----
+## .fadeToggle([duration])
+Description: *Display or hide the view by animating its opacity.*
+
+**duration** (default: 400)
+Type: Number or String <br/>
+A string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.
+
+----
+## .floatIn([duration], [direction])
+Description: *Display the view with a sliding motion in a certain direction.*
+
+**duration** (default: 400)
+Type: Number or String <br/>
+A string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.
+
+**direction** (default: 'up')
+Type: String <br/>
+A constant representing the direction to float. Can be 'up', 'down', 'left', 'right'
+
+----
+## .floatOut([duration], [direction])
+Description: *Hide the view with a sliding motion in a certain direction.*
+
+
+**duration** (default: 400)
+Type: Number or String <br/>
+A string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.
+
+**direction** (default: 'down')
+Type: String <br/>
+A constant representing the direction to float. Can be 'up', 'down', 'left', 'right'
+
+
+----
+## .hide([duration])
+Description: *Hide the view.*
+
+**duration** (default: 1)
+Type: Number or String <br/>
+A string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.
+
+
+----
+## .show([duration])
+Description: *Display the view.*
+
+**duration** (default: 1)
+Type: Number or String <br/>
+A string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.
+
+
+----
+## .slideDown([duration], [distance])
+Description: *Display the view with a sliding motion.*
+
+**duration** (default: 400)
+Type: Number or String <br/>
+A string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.
+
+**distance** (default: -100)
+Type: Number <br/>
+A number determining how many points the view will slide.
+
+
+----
+## .slideUp([duration], [distance])
+Description: *Hide the view with a sliding motion.*
+
+**duration** (default: 400)
+Type: Number or String <br/>
+A string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.
+
+**distance** (default: -100)
+Type: Number <br/>
+A number determining how many points the view will slide.
+
+
+----
+## .spring([duration], [animation]) <- currently iOS only
+Description: *Moves the view with a spring like bouncing motion.*
+
+**duration** (default: 400)
+Type: Number or String <br/>
+A string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.
+
+**animation** (default: see default object below)
+Type: Object <br/>
+An animation definition object as described in the "Spring Animation" section below.
+
+Default animation:
+```js
+        animation = {
+                translate: {
+                    x: 0,
+                    y: -100
+                },
+                scale: {
+                    x: 2,
+                    y: 2
+                },
+                duration: msDuration,
+                delay: 0,
+                dampingRatio: 0.3,
+                velocity: 2.0,
+                options: null
+            };
+```
+
+###Spring Animation options
+
+- translate: x and y distance translate animation
+- scale: x and y scale animation
+- delay: decimal (in ms)
+- dampingRatio: float
+- velocity: float
+- options: object (UIViewAnimationOptions)
+
+
+The full set of options is documented on the [Apple developer site](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/#//apple_ref/occ/clm/UIView/animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:). Modifying these options gives a different spring-like effect. Here is an example function call for the screenshot above (although it looks much smoother on the emulator or the actual device since the GIF is not 60 frames per second).
+
+###Example Usage
+``` js
+myView.spring(10000, {
+            translate: {
+                x: 0,
+                y: -100
+            },
+            scale: {
+                x: 2,
+                y: 2
+            },
+            delay: 0,
+            dampingRatio: 0.3,
+            velocity: 2.0,
+            options: null,
+        });
+```
+
+
+----
+## .toggle([duration])
+Description: *Display or hide the view.*
+
+**duration** (default: 400)
+Type: Number or String <br/>
+A string or number determining how long the animation will run. Number is milliseconds. String is a constant value 'fast' or 'slow'.
+
+
+
+
+

tns-effects-common.js

@@ -11,2 +11,9 @@ //nativescript-effects
     defaultSlideDistance: -100,
+    defaultFloatDirection: 'up',
+    presetDirections: {
+        'up': {x: 0, y: 100},
+        'down': {x: 0, y: -100},
+        'left': {x: 100, y: 0},
+        'right': {x: -100, y: 0}
+    },
     presetDurations: {
@@ -65,6 +72,49 @@ 'fast' : 200,
 
+//.floatIn( [duration ]  )
+//.floatIn( options )
+viewModule.View.prototype.floatIn = function(duration = Effects.defaultDuration, direction = Effects.defaultFloatDirection) {
+    var self = this;
+    var msDuration = Effects.getMsValue(duration);
+    var dir = Effects.presetDirections[direction];
+    if (!dir) {
+        dir = Effects.presetDirections['up'];
+    }
+
+    var promiseSetup = self.animate({
+        translate: { x: dir.x, y: dir.y },
+        opacity: 0,
+        duration: 1
+    });
+    
+    return promiseSetup.then(function() {
+        return self.animate({ 
+            translate: { x: 0, y: 0 },
+            opacity: 1,
+            duration: msDuration 
+        });
+    });
+};
+
+
+
+viewModule.View.prototype.floatOut = function(duration = Effects.defaultDuration, direction = Effects.defaultFloatDirection) {
+    var msDuration = Effects.getMsValue(duration);
+    var dir = Effects.presetDirections[direction];
+    if (!dir) {
+        dir = Effects.presetDirections['down'];
+    }
+    return this.animate({ 
+        translate: { x: dir.x, y: dir.y }, 
+        opacity: 0,
+        duration: msDuration
+    });
+};
+
+
+
+
+
 //.hide()
 //.hide( [duration ] )
 //.hide( options )
-//.hide( duration [, easing ] )
 viewModule.View.prototype.hide = function(duration = 1) {
@@ -86,9 +136,19 @@ this.fadeOut(duration);
     var msDuration = Effects.getMsValue(duration);
+    
     this.translateY = distance;
     this.opacity = 0;
-    return this.animate({ 
-        translate: { x: 0, y: 0 }, 
-        opacity: 1,
-        duration: msDuration 
+    
+    var promiseSetup = self.animate({
+        translate: { x: 0, y: distance },
+        opacity: 0,
+        duration: 1
     });
+
+    return promiseSetup.then(function() {
+        return self.animate({ 
+            translate: { x: 0, y: 0 },
+            opacity: 1,
+            duration: msDuration 
+        });
+    });
 };
@@ -95,0 +155,0 @@

tns-effects.android.js

 var common = require("./tns-effects-common");
 global.moduleMerge(common, exports);
 var ViewEffects = (function () {
-    function ViewEffects() {
+    function ViewEffects(view) {
+        this._view = view;
     }
+    ViewEffects.prototype.nativeSpring = function (animation) {
+        //this is where the native android spring animation will be implemeted 
+        return this._view.animate(animation);
+    };
     return ViewEffects;
 })();
 exports.ViewEffects = ViewEffects;

tns-effects.android.ts

 import common = require("./tns-effects-common");
+import {View} from "ui/core/view";
 
@@ -6,5 +7,12 @@ global.moduleMerge(common, exports);
 export class ViewEffects {
-    constructor() {
-        
+    private _view: View;
+    
+    constructor(view: View) {
+        this._view = view;
     }
+    
+    public nativeSpring(animation): Promise<void> {
+        //this is where the native android spring animation will be implemeted 
+        return this._view.animate(animation);
+    }
 }

tns-effects.d.ts

 declare module "ui/core/view" {
     interface View {
-        fadeIn(duration?: string): Promise<void>;
-        fadeIn(duration?: number): Promise<void>;
-        fadeOut(duration?: string): Promise<void>;
-        fadeOut(duration?: number): Promise<void>;
-        fadeTo(duration?: string, opacity?: number): Promise<void>;
-        fadeTo(duration?: number, opacity?: number): Promise<void>;
-        fadeToggle(duration?: string): Promise<void>;
-        fadeToggle(duration?: number): Promise<void>;
+        fadeIn(duration?: string | number): Promise<void>;
+        fadeOut(duration?: string | number): Promise<void>;
+        fadeTo(duration?: string | number, opacity?: number): Promise<void>;
+        fadeToggle(duration?: string | number): Promise<void>;
         
-        show(duration?: string): Promise<void>;
-        show(duration?: number): Promise<void>;
-        hide(duration?: string): Promise<void>;
-        hide(duration?: number): Promise<void>;
-        toggle(duration?: string): Promise<void>;
-        toggle(duration?: number): Promise<void>;
+        floatIn(duration?: string|number, direction?: string): Promise<void>;
+        floatOut(duration?: string|number, direction?: string): Promise<void>;
         
-        slideDown(duration?: string, distance?: number): Promise<void>;
-        slideDown(duration?: number, distance?: number): Promise<void>; 
-        slideUp(duration?: string, distance?: number): Promise<void>;
-        slideUp(duration?: number, distance?: number): Promise<void>;
-        slideToggle(duration?: string, distance?: number): Promise<void>;
-        slideToggle(duration?: number, distance?: number): Promise<void>;
+        show(duration?: string | number): Promise<void>;
+        hide(duration?: string | number): Promise<void>;
+        toggle(duration?: string | number): Promise<void>;
+        
+        slideDown(duration?: string | number, distance?: number): Promise<void>;
+        slideUp(duration?: string | number, distance?: number): Promise<void>;
+        slideToggle(duration?: string | number, distance?: number): Promise<void>;
 
-        spring(duration?: string, animation?:any): Promise<void>;
-        spring(duration?: number, animation?:any): Promise<void>;
+        spring(duration?: string | number, animation?:any): Promise<void>;
     }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19372

increased by75%

Lines of code

304

increased by19.69%

Number of lines in readme file

218

increased by21700%

No dependency changes