[TIMOB-25684] iOS: Adds home-screen like parallax effect to views

apidoc/Titanium/UI/View.yml

@@ -1322,6 +1322,19 @@ properties:
     platforms: [android]
     since: 6.1.0
 
+  - name: horizontalMotionEffect
+    summary: Adds a horizontal parallax effect to the view
+    description: |
+        Pass an object with the following key-value pairs:
+
+         * `min` (Number): Minimum amount it can move horizontally (-10 for example)
+         * `max` (Number): Maximum amount it can move horizontally (10 for example)
+
+         Note that the parallax effect only happens by tilting the device so results can not be seen on Simulator
+    type: Dictionary
+    platforms: [iphone, ipad]
+    since: 7.1.0
+
   - name: left
     summary: View's left position, in platform-specific units.
     description: |
@@ -1661,6 +1674,19 @@ properties:
     since: "5.0.2"
     osver: {android: {min: 5.0}}
 
+  - name: verticalMotionEffect
+    summary: Adds a vertical parallax effect to the view
+    description: |
+        Pass an object with the following key-value pairs:
+
+         * `min` (Number): Minimum amount it can move vertically (-10 for example)
+         * `max` (Number): Maximum amount it can move vertically (10 for example)
+
+         Note that the parallax effect only happens by tilting the device so results can not be seen on Simulator
+    type: Dictionary
+    platforms: [iphone, ipad]
+    since: 7.1.0
+
   - name: viewShadowRadius
     summary: Determines the blur radius used to create the shadow.
     type: Number

iphone/Classes/TiUIView.m

@@ -792,6 +792,30 @@ - (void)setViewShadowColor_:(id)arg
   [self updateClipping];
 }
 
+- (void)setHorizontalMotionEffect_:(id)motionEffect
+{
+  CGFloat min = [TiUtils floatValue:[motionEffect objectForKey:@"min"]];
+  CGFloat max = [TiUtils floatValue:[motionEffect objectForKey:@"max"]];
+  UIInterpolatingMotionEffect *effect = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:@"center.x"
+                                                                                        type:UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis];
+  effect.minimumRelativeValue = @(min);
+  effect.maximumRelativeValue = @(max);
+
+  [self addMotionEffect:effect];
+}
+
+- (void)setVerticalMotionEffect_:(id)motionEffect
+{
+  CGFloat min = [TiUtils floatValue:[motionEffect objectForKey:@"min"]];
+  CGFloat max = [TiUtils floatValue:[motionEffect objectForKey:@"max"]];
+  UIInterpolatingMotionEffect *effect = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:@"center.y"
+                                                                                        type:UIInterpolatingMotionEffectTypeTiltAlongVerticalAxis];
+  effect.minimumRelativeValue = @(min);
+  effect.maximumRelativeValue = @(max);
+
+  [self addMotionEffect:effect];
+}
+
 - (void)updateViewShadowPath
 {
   if ([self shadowLayer].shadowOpacity > 0.0f) {

tests/Resources/ti.ui.view.addontest.js

@@ -0,0 +1,48 @@
+/*
+ * Appcelerator Titanium Mobile
+ * Copyright (c) 2015-Present by Appcelerator, Inc. All Rights Reserved.
+ * Licensed under the terms of the Apache Public License
+ * Please see the LICENSE included with this distribution for details.
+ */
+/* eslint-env mocha */
+/* global Ti */
+/* eslint no-unused-expressions: "off" */
+'use strict';
+var should = require('./utilities/assertions');
+
+describe('Titanium.UI.View', function() {
+
+  it.ios('.horizontalMotionEffect, .verticalMotionEffect', function(finish) {
+    var win = Ti.UI.createWindow({
+      backgroundColor: 'blue'
+    });
+
+    var view = Ti.UI.createView({
+      horizontalMotionEffect: {
+        min: -50,
+        max: 50
+      },
+      verticalMotionEffect: {
+        min: -50,
+        max: 50
+      }
+    });
+
+    win.addEventListener('open', function() {
+        // horizontalMotionEffect
+        should(view.horizontalMotionEffect).be.an.Object;
+        should(view.horizontalMotionEffect.min).be.a.Number;
+        should(view.horizontalMotionEffect.max).be.a.Number;
+
+        // verticalMotionEffect
+        should(view.verticalMotionEffect).be.an.Object;
+        should(view.verticalMotionEffect.min).be.a.Number;
+        should(view.verticalMotionEffect.max).be.a.Number;
+
+        finish();
+    });
+
+    win.add(view);
+    win.open();
+  });
+});