Resolved Issue #1223: Android views which have complex backgrounds (i.e. with rounded corners) cannot animate opacity.

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);
-}
+}
+
+export function onOpacity(args: observable.EventData) {
+    frame.topmost().navigate("./opacity");
+}

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">>

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;
+}

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();
+}

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>