From 700818dd28b7edd61d78bd01630e59eeaca30a8f Mon Sep 17 00:00:00 2001
From: Rossen Hristov <rossen.hristov@telerik.com>
Date: Thu, 10 Dec 2015 14:55:01 +0200
Subject: [PATCH] Resolved Issue #1223: Android views which have complex
 backgrounds (i.e. with rounded corners) cannot animate opacity.

---
 CrossPlatformModules.csproj       |  11 +++++--
 apps/animations/bkg.png           | Bin 0 -> 311 bytes
 apps/animations/main-page.ts      |   7 +++-
 apps/animations/main-page.xml     |   1 +
 apps/animations/opacity.css       |  27 +++++++++++++++
 apps/animations/opacity.ts        |  53 ++++++++++++++++++++++++++++++
 apps/animations/opacity.xml       |  35 ++++++++++++++++++++
 apps/animations/test-icon.png     | Bin 0 -> 1304 bytes
 tsconfig.json                     |   5 +--
 ui/animation/animation.android.ts |  17 +++++++---
 ui/styling/stylers.android.ts     |  23 +++++++++++++
 11 files changed, 169 insertions(+), 10 deletions(-)
 create mode 100644 apps/animations/bkg.png
 create mode 100644 apps/animations/opacity.css
 create mode 100644 apps/animations/opacity.ts
 create mode 100644 apps/animations/opacity.xml
 create mode 100644 apps/animations/test-icon.png

diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index b1df7e578..72a63583b 100644
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@@ -79,6 +79,7 @@
     <TypeScriptCompile Include="apps\action-bar-demo\pages\data-binding.ts">
       <DependentUpon>data-binding.xml</DependentUpon>
     </TypeScriptCompile>
+    <TypeScriptCompile Include="apps\animations\opacity.ts" />
     <TypeScriptCompile Include="apps\tests\ui\action-bar\ActionBar_NumberAsText.ts" />
     <TypeScriptCompile Include="apps\tests\ui\page\modal-page.ts">
       <DependentUpon>modal-page.xml</DependentUpon>
@@ -117,6 +118,12 @@
     <Content Include="apps\action-bar-demo\pages\center-view-segmented.xml" />
     <Content Include="apps\action-bar-demo\pages\center-view.xml" />
     <Content Include="apps\action-bar-demo\pages\data-binding.xml" />
+    <Content Include="apps\animations\opacity.css" />
+    <Content Include="apps\animations\opacity.xml">
+      <SubType>Designer</SubType>
+    </Content>
+    <Content Include="apps\animations\bkg.png" />
+    <Content Include="apps\animations\test-icon.png" />
     <Content Include="apps\tests\ui\action-bar\ActionBar_NumberAsText.xml" />
     <Content Include="apps\tests\ui\page\modal-page.xml">
       <SubType>Designer</SubType>
@@ -2104,7 +2111,7 @@
           <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
         </WebProjectProperties>
       </FlavorProperties>
-      <UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
+      <UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
     </VisualStudio>
   </ProjectExtensions>
-</Project>
+</Project>
\ No newline at end of file
diff --git a/apps/animations/bkg.png b/apps/animations/bkg.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa059ba75757ee3886a8fa6b4ad4e7cba46142f1
GIT binary patch
literal 311
zcmeAS@N?(olHy`uVBq!ia0vp^Mj*_=1SBWM%0B~AjKx9jP7LeL$-D$|SkfJR9T^xl
z_H+M9WCij$3p^r=85sBugD~Uq{1qucL5ULAh?3y^w370~qEv>0#LT=By}Z;C1rt33
zJ=4@yqg0@p6`n4RArbCxuN!h5HV|n}WSzs8|MtR8yJG)K+`CR)II5aps(+OApt+>Z
zKOV^*hAg&s3A{1cOz#Rdram~g?MDXZj>l^f&jnd{Kh$a6EP}!?%)hqeeE5;3D4`=o
zj&}n3AM@?svf!@pl|x6>Zx!Atyk?ND>39B-z3HOeU%S`5dop?Ry*XQtM{=cW&RP0n
r{Tji$YcFr!_gLrXnMh%~69W1>69hV1_WscYx|zY#)z4*}Q$iB}A7yx<

literal 0
HcmV?d00001

diff --git a/apps/animations/main-page.ts b/apps/animations/main-page.ts
index 40da5d9ac..1a63abb8f 100644
--- a/apps/animations/main-page.ts
+++ b/apps/animations/main-page.ts
@@ -6,6 +6,7 @@ import animationModule = require("ui/animation");
 import colorModule = require("color");
 import model = require("./model");
 import enums = require("ui/enums");
+import frame = require("ui/frame");
 
 var vm = new model.ViewModel();
 
@@ -162,4 +163,8 @@ export function onInterrupted(args: observable.EventData) {
             duration: 1000
         })
     }, 700 * 3);
-}
\ No newline at end of file
+}
+
+export function onOpacity(args: observable.EventData) {
+    frame.topmost().navigate("./opacity");
+}
diff --git a/apps/animations/main-page.xml b/apps/animations/main-page.xml
index c6f0ad165..8b939ab70 100644
--- a/apps/animations/main-page.xml
+++ b/apps/animations/main-page.xml
@@ -18,6 +18,7 @@
         <Button text="In" tap="onSlideIn" width="40" marginLeft="5" marginRight="5" />
         <Button text="Single" tap="onSingle" width="70" marginLeft="5" marginRight="5" />
         <Button text="Cancel" tap="onCancel" width="70" marginLeft="5" marginRight="5" />
+        <Button text="Opacity" tap="onOpacity" width="70" marginLeft="5" marginRight="5" />
       </StackLayout>
       
       <StackLayout orientation="horizontal" marginTop="5" marginBottom="5" horizontalAlignment="center" paddingLeft="5" paddingRight="5">>
diff --git a/apps/animations/opacity.css b/apps/animations/opacity.css
new file mode 100644
index 000000000..31c075f8f
--- /dev/null
+++ b/apps/animations/opacity.css
@@ -0,0 +1,27 @@
+.complex {
+    width: 45;
+    height: 45;
+    margin: 1;
+    background-image: url('~/bkg.png'); 
+    background-repeat:repeat-x; 
+    background-position: 20% 80%; 
+    background-color: lightyellow; 
+    background-size: 25% 50%; 
+    border-radius: 20; 
+    border-width: 4; 
+    border-color: red;
+}
+
+.simple {
+    width: 45;
+    height: 45;
+    margin: 1;
+    border-radius: 20; 
+    background-color: lightgreen; 
+}
+
+.none {
+    width: 45;
+    height: 45;
+    margin: 1;
+}
\ No newline at end of file
diff --git a/apps/animations/opacity.ts b/apps/animations/opacity.ts
new file mode 100644
index 000000000..ed8cd14f8
--- /dev/null
+++ b/apps/animations/opacity.ts
@@ -0,0 +1,53 @@
+import observable = require("data/observable");
+import pages = require("ui/page");
+import view = require("ui/core/view");
+import buttonModule = require("ui/button");
+import abs = require("ui/layouts/absolute-layout");
+import animationModule = require("ui/animation");
+import colorModule = require("color");
+import model = require("./model");
+import enums = require("ui/enums");
+import frame = require("ui/frame");
+import slider = require("ui/slider");
+import wrapLayout = require("ui/layouts/wrap-layout");
+
+var page: pages.Page;
+var opacitySlider: slider.Slider;
+var red = new colorModule.Color("red");
+var green = new colorModule.Color("green");
+var container: wrapLayout.WrapLayout; 
+
+export function pageLoaded(args: observable.EventData) {
+    page = <pages.Page>args.object;
+    opacitySlider = page.getViewById<slider.Slider>("opacitySlider");
+    container = page.getViewById<wrapLayout.WrapLayout>("container");
+}
+
+export function onSetOpacity(args: observable.EventData) {
+    var newOpacity = opacitySlider.value / 100;
+    container._eachChildView((childView: view.View) => {
+        childView.opacity = newOpacity;
+        return true;
+    });
+}
+
+var animationSet: animationModule.Animation;
+export function onAnimateOpacity(args: observable.EventData) {
+    var newOpacity = opacitySlider.value / 100;
+    var animationDefinitions = new Array<animationModule.AnimationDefinition>();
+    container._eachChildView((childView: view.View) => {
+        animationDefinitions.push({
+            target: childView,
+            opacity: newOpacity,
+            duration: 5000
+        });
+        return true;
+    });
+
+    animationSet = new animationModule.Animation(animationDefinitions);
+    animationSet.play();
+}
+
+export function onReset(args: observable.EventData) {
+    animationSet.cancel();
+}
diff --git a/apps/animations/opacity.xml b/apps/animations/opacity.xml
new file mode 100644
index 000000000..a7dd16d3b
--- /dev/null
+++ b/apps/animations/opacity.xml
@@ -0,0 +1,35 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" id="opacityPage">
+  <StackLayout orientation="vertical">
+    <StackLayout orientation="vertical">
+      <Label text="opacity" width="180" />
+      <Slider id="opacitySlider" minValue="0" maxValue="100" width="180" />
+      <Button text="Set" tap="onSetOpacity"/>
+      <Button text="Animate" tap="onAnimateOpacity"/>
+      <Button text="Reset" tap="onReset"/>
+    </StackLayout>
+    <WrapLayout orientation="horizontal" id="container">
+      
+      <StackLayout class="complex"/>
+      <Button text="Button" class="complex"/>
+      <Label text="Label" class="complex"/>
+      <Image src="~/test-icon.png" class="complex"/>
+      <TextField text="TextField" class="complex"/>
+      <TextView text="TextView" class="complex"/>
+
+      <StackLayout class="simple"/>
+      <Button text="Button" class="simple"/>
+      <Label text="Label" class="simple"/>
+      <Image src="~/test-icon.png" class="simple"/>
+      <TextField text="TextField" class="simple"/>
+      <TextView text="TextView" class="simple"/>
+
+      <StackLayout class="none"/>
+      <Button text="Button" class="none"/>
+      <Label text="Label" class="none"/>
+      <Image src="~/test-icon.png" class="none"/>
+      <TextField text="TextField" class="none"/>
+      <TextView text="TextView" class="none"/>
+
+    </WrapLayout>
+  </StackLayout>
+</Page> 
\ No newline at end of file
diff --git a/apps/animations/test-icon.png b/apps/animations/test-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..bf42af4aea371e83cb0f0ce668628bfa7ea080fa
GIT binary patch
literal 1304
zcmV+z1?T#SP)<h;3K|Lk000e1NJLTq003YB003YJ1ONa4NRhv@000EvNkl<ZcmeI(
zOK4QrAHeZ1={(~DyD8{sV%k~}O3`XaUn*&8v*<1usTdPcl%%4?C{m@0s9hC{#;9Nm
ze?)7o5^2#o3tfm65&pC#FoM+@oBF8H#AG^&<0Q`fy2_&0x%Zxv%(;#*pYK|e3%_$c
z=Uk+qpumVA^_--WK?dohjXHunM?U5bV(B)EcrFxi0I{i+BJ$n=#G%&wA0Bb3mOK{Z
z4&u@+0_3fFM4=_*t&@mCC&*i!h(b5X3$xkHZzRaj$7Oah4H!feN&(Z@!DZrPNboCP
zF%wUf@)Key%{QbFg_8V_G-ByTrr?oEdJzNlFc%NJ#UsQ}{mjO&ar}iCtb<~V`T{ZB
zRtyUA5HZ|+d>Hc~;z9E<W)tE;>oKMUQS32?sG$TueoCm}Fpm+%c45q3M5*tXgjIy&
z1|Gn`2&HMn&T7(#Yt0z*0peOCPF5qX&Bd4i-LAvq!gY}T<^>Ge=CX7r;byYSmhUr+
z8bb$S+aXjOL2Ub-5Qe=;0<ozE6$=rY`gk1=yu*DYYbB_dYCHYqcw{2S$RJqrqaui4
zEyK6Ggl8h0Kyv&5$C!vm-lKa|BUEO)4}BXClru2OMO=&6^bfNzY%G5wwjD;rQN*?z
z6l2s5mw(72xG5opIJ5<W0`wq`eUF<q#IY`X7_$IzZ8c8T=KqN-?eGYnk~VN6GjO0e
z&Sb1gXftr2F?OU(afF3TB}kAmYB@>@$;%U&ftt-PVzbRN{~9%v`PV4yL=5*iMvbKt
zG1wo3J=@F~D8Vc|Fwf9Rc)+`OWC}kZmWJ4`czu}UYn~vM+KAw(ne5^h;-u-}XSPzR
z^^xyowsVPxq>1x?zT}PP=`(8wo){v@Jz_*@rHKmsxNB3~DY*+!K@<Ck5~GVGDYPY#
z|MZBntfLesb%;WXaZ<*5&RKst{b;*~WbGo$2$Nlq+lWh@1jsJTaxNiRyNkA%;|p&a
z6Ub%};!+LSyvTOPi{o~*MG?n(*+_t=wIUAf;b}oO(T6y83T>^3Yu9-nt0IR#xtk)a
z7H|V`Z4cU-5Ty=Kj8!eSvdn%BR%1AbD76x86^LS2n2uF|C7j?UDN=NBoW%sNn!!~>
zu{mh-^9WHaPBpqdB7rE@j}LvEMU)$&0UaxNf+%-}5m|?5l%Ww-pO8T`TEmExB3fl=
zK*b6&ntyME5xR(IHAJ<->_0)YI?sqLLo|!?8ct@AKr~y*h=qB8Xci-koiSWRG`mO0
z$ai6f_G9NDqTOajWdgm3c9l817VBmlqqGsx?ivBCg4}pE*Nj1~Bie1q$-U}T{Nz9t
zqFoQ;E&KgGM6(R@4gaSGjc;As5$*PpGsRp%H0vV7urS?-X6=N?q3OgC&FUGp9MP<o
zSIDtyh7heTFzgbd)gV<E(4f5un+!mi_TsI>kVef%SPQ^<&0l{d1~q66QWSu5TEkO^
zVbvPTc>o^)k{V053J**thA37}g~p5XRXh@AKcdtsniMC$g%F;q<Qn2y3;UGzJoCYO
z0XFauaqKiv*9~(sex8}}Y~jA+T*n+wTbmijGZ&(s3uJ7r#k*`~{ya+wkw>PmmM8<(
z7ipGH6=zsOggoV=oK>`Nns)9oK#COo+@+mU>|rHy@R2hG1qB5K1^)tOypHj&Ah#O;
O0000<MNUMnLSTY+D_SxD

literal 0
HcmV?d00001

diff --git a/tsconfig.json b/tsconfig.json
index 86f098620..97427c6cf 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -48,6 +48,7 @@
         "apps/animations/app.ts",
         "apps/animations/main-page.ts",
         "apps/animations/model.ts",
+        "apps/animations/opacity.ts",
         "apps/connectivity-demo/app.ts",
         "apps/connectivity-demo/main-page.ts",
         "apps/cuteness.io/app.ts",
@@ -319,9 +320,9 @@
         "apps/tests/xml-declaration/mainPage.ts",
         "apps/tests/xml-declaration/mymodule/MyControl.ts",
         "apps/tests/xml-declaration/mymodulewithxml/MyControl.ts",
-        "apps/tests/xml-declaration/template-builder-tests/template-view.ts",
-        "apps/tests/xml-declaration/template-builder-tests/event-in-template.ts",
         "apps/tests/xml-declaration/template-builder-tests/event-in-codeless-fragment.ts",
+        "apps/tests/xml-declaration/template-builder-tests/event-in-template.ts",
+        "apps/tests/xml-declaration/template-builder-tests/template-view.ts",
         "apps/tests/xml-declaration/xml-declaration-tests.ts",
         "apps/tests/xml-parser-tests/xml-parser-tests.ts",
         "apps/transforms/app.ts",
diff --git a/ui/animation/animation.android.ts b/ui/animation/animation.android.ts
index bcb0702f2..be762396d 100644
--- a/ui/animation/animation.android.ts
+++ b/ui/animation/animation.android.ts
@@ -159,11 +159,18 @@ export class Animation extends common.Animation implements definition.Animation
 
             case common.Properties.opacity:
                 originalValue1 = nativeView.getAlpha();
-                nativeArray = java.lang.reflect.Array.newInstance(floatType, 1);
-                nativeArray[0] = propertyAnimation.value;
-                propertyUpdateCallbacks.push(checkAnimation(() => { propertyAnimation.target.opacity = propertyAnimation.value }));
-                propertyResetCallbacks.push(checkAnimation(() => { nativeView.setAlpha(originalValue1); }));
-                animators.push(android.animation.ObjectAnimator.ofFloat(nativeView, "alpha", nativeArray));
+                nativeArray = java.lang.reflect.Array.newInstance(floatType, 2);
+                nativeArray[0] = originalValue1;
+                nativeArray[1] = propertyAnimation.value;
+                animator = android.animation.ValueAnimator.ofFloat(nativeArray);
+                animator.addUpdateListener(new android.animation.ValueAnimator.AnimatorUpdateListener({
+                    onAnimationUpdate(animator: android.animation.ValueAnimator) {
+                        propertyAnimation.target.opacity = (<java.lang.Float>animator.getAnimatedValue()).floatValue();
+                    }
+                }));
+                propertyUpdateCallbacks.push(checkAnimation(() => { propertyAnimation.target.opacity = propertyAnimation.value; }));
+                propertyResetCallbacks.push(checkAnimation(() => { propertyAnimation.target.opacity = originalValue1; }));
+                animators.push(animator);
                 break;
 
             case common.Properties.backgroundColor:
diff --git a/ui/styling/stylers.android.ts b/ui/styling/stylers.android.ts
index 42d03f21a..1fc6e75fe 100644
--- a/ui/styling/stylers.android.ts
+++ b/ui/styling/stylers.android.ts
@@ -341,6 +341,25 @@ export class ImageStyler implements definition.stylers.Styler {
         onBackgroundOrBorderPropertyChanged(view);
     }
 
+    //Opacity methods
+    private static setOpacityProperty(view: view.View, newValue: any) {
+        ImageStyler._setOpacity(view, newValue);
+    }
+
+    private static resetOpacityProperty(view: view.View, nativeValue: any) {
+        ImageStyler._setOpacity(view, 1.0);
+    }
+
+    private static _setOpacity(view: view.View, value: any) {
+        let opacity = float(value);
+        let nativeView = <android.view.View>view._nativeView;
+        nativeView.setAlpha(opacity);
+        let background = nativeView.getBackground();
+        if (background) {
+            background.setAlpha(opacity);
+        }
+    }
+
     public static registerHandlers() {
         // Use the same handler for all background/border properties
         // Note: There is no default value getter - the default value is handled in onBackgroundOrBorderPropertyChanged
@@ -352,6 +371,10 @@ export class ImageStyler implements definition.stylers.Styler {
         style.registerHandler(style.borderWidthProperty, new stylersCommon.StylePropertyChangedHandler(
             ImageStyler.setBorderWidthProperty,
             ImageStyler.resetBorderWidthProperty), "Image");
+
+        style.registerHandler(style.opacityProperty, new stylersCommon.StylePropertyChangedHandler(
+            ImageStyler.setOpacityProperty,
+            ImageStyler.resetOpacityProperty), "Image");
     }
 }