From: David Steele <david.steele@samsung.com>
Date: Wed, 15 Feb 2017 11:05:10 +0000 (+0000)
Subject: Updated visuals to separate alpha channel from mixColor
X-Git-Tag: dali_1.2.28~1^2~1
X-Git-Url: http://review.tizen.org/git/?p=platform%2Fcore%2Fuifw%2Fdali-toolkit.git;a=commitdiff_plain;h=5a2a5883422f4d114902ac57d57d7d1e973fbb2e

Updated visuals to separate alpha channel from mixColor

Visuals can now set "mixColor" property as either a vector3 or a vector4, but can
also set the alpha using the "opacity" property.

This works for setting via stylesheet and also for animating via transitions

Change-Id: Ib4e729a714f630b61278265e54bdfd71c4756425
Signed-off-by: David Steele <david.steele@samsung.com>
---

diff --git a/automated-tests/src/dali-toolkit/dali-toolkit-test-utils/dali-test-suite-utils.h b/automated-tests/src/dali-toolkit/dali-toolkit-test-utils/dali-test-suite-utils.h
index 79d422b..03c788c 100644
--- a/automated-tests/src/dali-toolkit/dali-toolkit-test-utils/dali-test-suite-utils.h
+++ b/automated-tests/src/dali-toolkit/dali-toolkit-test-utils/dali-test-suite-utils.h
@@ -20,10 +20,13 @@
 
 // EXTERNAL INCLUDES
 #include <cstdarg>
+#include <cstdio>
 #include <iostream>
+#include <cstring>
 
 // INTERNAL INCLUDES
 #include <dali/public-api/dali-core.h>
+#include <test-compare-types.h>
 
 void tet_infoline(const char*str);
 void tet_printf(const char *format, ...);
@@ -73,176 +76,6 @@ else
   throw("TET_FAIL");                                                                      \
 }
 
-template <typename Type>
-inline bool CompareType(Type value1, Type value2, float epsilon);
-
-/**
- * A helper for fuzzy-comparing Vector2 objects
- * @param[in] vector1 the first object
- * @param[in] vector2 the second object
- * @param[in] epsilon difference threshold
- * @returns true if difference is smaller than epsilon threshold, false otherwise
- */
-template <>
-inline bool CompareType<float>(float value1, float value2, float epsilon)
-{
-  return fabsf(value1 - value2) < epsilon;
-}
-
-/**
- * A helper for fuzzy-comparing Vector2 objects
- * @param[in] vector1 the first object
- * @param[in] vector2 the second object
- * @param[in] epsilon difference threshold
- * @returns true if difference is smaller than epsilon threshold, false otherwise
- */
-template <>
-inline bool CompareType<Vector2>(Vector2 vector1, Vector2 vector2, float epsilon)
-{
-  return fabsf(vector1.x - vector2.x)<epsilon && fabsf(vector1.y - vector2.y)<epsilon;
-}
-
-/**
- * A helper for fuzzy-comparing Vector3 objects
- * @param[in] vector1 the first object
- * @param[in] vector2 the second object
- * @param[in] epsilon difference threshold
- * @returns true if difference is smaller than epsilon threshold, false otherwise
- */
-template <>
-inline bool CompareType<Vector3>(Vector3 vector1, Vector3 vector2, float epsilon)
-{
-  return fabsf(vector1.x - vector2.x)<epsilon &&
-         fabsf(vector1.y - vector2.y)<epsilon &&
-         fabsf(vector1.z - vector2.z)<epsilon;
-}
-
-
-/**
- * A helper for fuzzy-comparing Vector4 objects
- * @param[in] vector1 the first object
- * @param[in] vector2 the second object
- * @param[in] epsilon difference threshold
- * @returns true if difference is smaller than epsilon threshold, false otherwise
- */
-template <>
-inline bool CompareType<Vector4>(Vector4 vector1, Vector4 vector2, float epsilon)
-{
-  return fabsf(vector1.x - vector2.x)<epsilon &&
-         fabsf(vector1.y - vector2.y)<epsilon &&
-         fabsf(vector1.z - vector2.z)<epsilon &&
-         fabsf(vector1.w - vector2.w)<epsilon;
-}
-
-template <>
-inline bool CompareType<Quaternion>(Quaternion q1, Quaternion q2, float epsilon)
-{
-  Quaternion q2N = -q2; // These quaternions represent the same rotation
-  return CompareType<Vector4>(q1.mVector, q2.mVector, epsilon) || CompareType<Vector4>(q1.mVector, q2N.mVector, epsilon);
-}
-
-template <>
-inline bool CompareType<Radian>(Radian q1, Radian q2, float epsilon)
-{
-  return CompareType<float>(q1.radian, q2.radian, epsilon);
-}
-
-template <>
-inline bool CompareType<Degree>(Degree q1, Degree q2, float epsilon)
-{
-  return CompareType<float>(q1.degree, q2.degree, epsilon);
-}
-
-template <>
-inline bool CompareType<Property::Value>(Property::Value q1, Property::Value q2, float epsilon)
-{
-  Property::Type type = q1.GetType();
-  if( type != q2.GetType() )
-  {
-    return false;
-  }
-
-  bool result = false;
-  switch(type)
-  {
-    case Property::BOOLEAN:
-    {
-      bool a, b;
-      q1.Get(a);
-      q2.Get(b);
-      result =  a == b;
-      break;
-    }
-    case Property::INTEGER:
-    {
-      int a, b;
-      q1.Get(a);
-      q2.Get(b);
-      result =  a == b;
-      break;
-    }
-    case Property::FLOAT:
-    {
-      float a, b;
-      q1.Get(a);
-      q2.Get(b);
-      result =  CompareType<float>(a, b, epsilon);
-      break;
-    }
-    case Property::VECTOR2:
-    {
-      Vector2 a, b;
-      q1.Get(a);
-      q2.Get(b);
-      result = CompareType<Vector2>(a, b, epsilon);
-      break;
-    }
-    case Property::VECTOR3:
-    {
-      Vector3 a, b;
-      q1.Get(a);
-      q2.Get(b);
-      result = CompareType<Vector3>(a, b, epsilon);
-      break;
-    }
-    case Property::RECTANGLE:
-    case Property::VECTOR4:
-    {
-      Vector4 a, b;
-      q1.Get(a);
-      q2.Get(b);
-      result = CompareType<Vector4>(a, b, epsilon);
-      break;
-    }
-    case Property::ROTATION:
-    {
-      Quaternion a, b;
-      q1.Get(a);
-      q2.Get(b);
-      result = CompareType<Quaternion>(a, b, epsilon);
-      break;
-    }
-    case Property::MATRIX:
-    case Property::MATRIX3:
-    case Property::STRING:
-    case Property::ARRAY:
-    case Property::MAP:
-    {
-      //TODO: Implement this?
-      DALI_ASSERT_ALWAYS( 0 && "Not implemented");
-      result = false;
-      break;
-    }
-    case Property::NONE:
-    {
-      result = false;
-      break;
-    }
-  }
-
-  return result;
-}
-
 
 bool operator==(TimePeriod a, TimePeriod b);
 std::ostream& operator<<( std::ostream& ostream, TimePeriod value );
@@ -258,7 +91,7 @@ std::ostream& operator<<( std::ostream& ostream, Degree angle );
 template<typename Type>
 inline void DALI_TEST_EQUALS(Type value1, Type value2, const char* location)
 {
-  if (!(value1 == value2))
+  if( !CompareType<Type>(value1, value2, 0.01f) )
   {
     std::ostringstream o;
     o << value1 << " == " << value2 << std::endl;
@@ -514,6 +347,7 @@ struct DefaultFunctionCoverage
 BufferImage CreateBufferImage();
 BufferImage CreateBufferImage(int width, int height, const Vector4& color);
 
+
 // Prepare a resource image to be loaded. Should be called before creating the ResourceImage
 void PrepareResourceImage( TestApplication& application, unsigned int imageWidth, unsigned int imageHeight, Pixel::Format pixelFormat );
 
diff --git a/automated-tests/src/dali-toolkit/dali-toolkit-test-utils/test-compare-types.h b/automated-tests/src/dali-toolkit/dali-toolkit-test-utils/test-compare-types.h
new file mode 100644
index 0000000..248276e
--- /dev/null
+++ b/automated-tests/src/dali-toolkit/dali-toolkit-test-utils/test-compare-types.h
@@ -0,0 +1,199 @@
+#ifndef DALI_TEST_COMPARE_TYPES_H
+#define DALI_TEST_COMPARE_TYPES_H
+
+/*
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#include <dali/public-api/dali-core.h>
+using namespace Dali;
+
+
+template <typename Type>
+inline bool CompareType(Type value1, Type value2, float epsilon)
+{
+  return value1 == value2;
+}
+
+/**
+ * A helper for fuzzy-comparing Vector2 objects
+ * @param[in] vector1 the first object
+ * @param[in] vector2 the second object
+ * @param[in] epsilon difference threshold
+ * @returns true if difference is smaller than epsilon threshold, false otherwise
+ */
+template <>
+inline bool CompareType<float>(float value1, float value2, float epsilon)
+{
+  return fabsf(value1 - value2) < epsilon;
+}
+
+/**
+ * A helper for fuzzy-comparing Vector2 objects
+ * @param[in] vector1 the first object
+ * @param[in] vector2 the second object
+ * @param[in] epsilon difference threshold
+ * @returns true if difference is smaller than epsilon threshold, false otherwise
+ */
+template <>
+inline bool CompareType<Vector2>(Vector2 vector1, Vector2 vector2, float epsilon)
+{
+  return fabsf(vector1.x - vector2.x)<epsilon && fabsf(vector1.y - vector2.y)<epsilon;
+}
+
+/**
+ * A helper for fuzzy-comparing Vector3 objects
+ * @param[in] vector1 the first object
+ * @param[in] vector2 the second object
+ * @param[in] epsilon difference threshold
+ * @returns true if difference is smaller than epsilon threshold, false otherwise
+ */
+template <>
+inline bool CompareType<Vector3>(Vector3 vector1, Vector3 vector2, float epsilon)
+{
+  return fabsf(vector1.x - vector2.x)<epsilon &&
+         fabsf(vector1.y - vector2.y)<epsilon &&
+         fabsf(vector1.z - vector2.z)<epsilon;
+}
+
+
+/**
+ * A helper for fuzzy-comparing Vector4 objects
+ * @param[in] vector1 the first object
+ * @param[in] vector2 the second object
+ * @param[in] epsilon difference threshold
+ * @returns true if difference is smaller than epsilon threshold, false otherwise
+ */
+template <>
+inline bool CompareType<Vector4>(Vector4 vector1, Vector4 vector2, float epsilon)
+{
+  return fabsf(vector1.x - vector2.x)<epsilon &&
+         fabsf(vector1.y - vector2.y)<epsilon &&
+         fabsf(vector1.z - vector2.z)<epsilon &&
+         fabsf(vector1.w - vector2.w)<epsilon;
+}
+
+template <>
+inline bool CompareType<Quaternion>(Quaternion q1, Quaternion q2, float epsilon)
+{
+  Quaternion q2N = -q2; // These quaternions represent the same rotation
+  return CompareType<Vector4>(q1.mVector, q2.mVector, epsilon) || CompareType<Vector4>(q1.mVector, q2N.mVector, epsilon);
+}
+
+template <>
+inline bool CompareType<Radian>(Radian q1, Radian q2, float epsilon)
+{
+  return CompareType<float>(q1.radian, q2.radian, epsilon);
+}
+
+template <>
+inline bool CompareType<Degree>(Degree q1, Degree q2, float epsilon)
+{
+  return CompareType<float>(q1.degree, q2.degree, epsilon);
+}
+
+template <>
+inline bool CompareType<Property::Value>(Property::Value q1, Property::Value q2, float epsilon)
+{
+  Property::Type type = q1.GetType();
+  if( type != q2.GetType() )
+  {
+    return false;
+  }
+
+  bool result = false;
+  switch(type)
+  {
+    case Property::BOOLEAN:
+    {
+      bool a, b;
+      q1.Get(a);
+      q2.Get(b);
+      result =  a == b;
+      break;
+    }
+    case Property::INTEGER:
+    {
+      int a, b;
+      q1.Get(a);
+      q2.Get(b);
+      result =  a == b;
+      break;
+    }
+    case Property::FLOAT:
+    {
+      float a, b;
+      q1.Get(a);
+      q2.Get(b);
+      result =  CompareType<float>(a, b, epsilon);
+      break;
+    }
+    case Property::VECTOR2:
+    {
+      Vector2 a, b;
+      q1.Get(a);
+      q2.Get(b);
+      result = CompareType<Vector2>(a, b, epsilon);
+      break;
+    }
+    case Property::VECTOR3:
+    {
+      Vector3 a, b;
+      q1.Get(a);
+      q2.Get(b);
+      result = CompareType<Vector3>(a, b, epsilon);
+      break;
+    }
+    case Property::RECTANGLE:
+    case Property::VECTOR4:
+    {
+      Vector4 a, b;
+      q1.Get(a);
+      q2.Get(b);
+      result = CompareType<Vector4>(a, b, epsilon);
+      break;
+    }
+    case Property::ROTATION:
+    {
+      Quaternion a, b;
+      q1.Get(a);
+      q2.Get(b);
+      result = CompareType<Quaternion>(a, b, epsilon);
+      break;
+    }
+    case Property::MATRIX:
+    case Property::MATRIX3:
+    case Property::STRING:
+    case Property::ARRAY:
+    case Property::MAP:
+    {
+      //TODO: Implement this?
+      DALI_ASSERT_ALWAYS( 0 && "Not implemented");
+      result = false;
+      break;
+    }
+    case Property::NONE:
+    {
+      result = false;
+      break;
+    }
+  }
+
+  return result;
+}
+
+
+
+#endif
diff --git a/automated-tests/src/dali-toolkit/dali-toolkit-test-utils/test-gl-abstraction.h b/automated-tests/src/dali-toolkit/dali-toolkit-test-utils/test-gl-abstraction.h
index 9bed832..1613bb5 100644
--- a/automated-tests/src/dali-toolkit/dali-toolkit-test-utils/test-gl-abstraction.h
+++ b/automated-tests/src/dali-toolkit/dali-toolkit-test-utils/test-gl-abstraction.h
@@ -25,13 +25,15 @@
 #include <map>
 #include <cstdio>
 #include <cstring> // for strcmp
+#include <typeinfo>
 
 // INTERNAL INCLUDES
 #include <dali/public-api/dali-core.h>
 #include <dali/integration-api/core.h>
 #include <dali/integration-api/gl-abstraction.h>
 #include <dali/integration-api/gl-defines.h>
-#include "test-trace-call-stack.h"
+#include <test-trace-call-stack.h>
+#include <test-compare-types.h>
 
 namespace Dali
 {
@@ -2132,7 +2134,7 @@ private:
       T uniformValue;
       if ( GetUniformValue( program, uniform, uniformValue ) )
       {
-        return value == uniformValue;
+        return CompareType<T>(value, uniformValue, Math::MACHINE_EPSILON_10);
       }
 
       return false;
@@ -2176,6 +2178,9 @@ private:
   ProgramUniformValue<Matrix> mProgramUniformsMat4;
   ProgramUniformValue<Matrix3> mProgramUniformsMat3;
 
+
+
+
   inline const ProgramUniformValue<int>& GetProgramUniformsForType( const int ) const
   {
     return mProgramUniforms1i;
diff --git a/automated-tests/src/dali-toolkit/utc-Dali-CheckBoxButton.cpp b/automated-tests/src/dali-toolkit/utc-Dali-CheckBoxButton.cpp
index c67b2ae..1606d71 100644
--- a/automated-tests/src/dali-toolkit/utc-Dali-CheckBoxButton.cpp
+++ b/automated-tests/src/dali-toolkit/utc-Dali-CheckBoxButton.cpp
@@ -19,7 +19,7 @@
 #include <stdlib.h>
 #include <dali-toolkit-test-suite-utils.h>
 #include <dali-toolkit/dali-toolkit.h>
-
+#include <test-application.h>
 #include <dali-toolkit/devel-api/controls/buttons/button-devel.h>
 #include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
 #include <dali-toolkit/devel-api/visuals/text-visual-properties.h>
diff --git a/automated-tests/src/dali-toolkit/utc-Dali-TransitionData.cpp b/automated-tests/src/dali-toolkit/utc-Dali-TransitionData.cpp
index 5ca2b17..de4c4dd 100644
--- a/automated-tests/src/dali-toolkit/utc-Dali-TransitionData.cpp
+++ b/automated-tests/src/dali-toolkit/utc-Dali-TransitionData.cpp
@@ -22,6 +22,7 @@
 #include <dali-toolkit/dali-toolkit.h>
 #include <dali-toolkit/devel-api/visual-factory/transition-data.h>
 #include <dali-toolkit/devel-api/visual-factory/visual-factory.h>
+#include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
 #include "dummy-control.h"
 
 using namespace Dali;
@@ -254,10 +255,12 @@ int UtcDaliTransitionDataMap1P(void)
 
   Renderer renderer = actor.GetRendererAt(0);
   Property::Index mixColorIndex = DevelHandle::GetPropertyIndex( renderer, ColorVisual::Property::MIX_COLOR );
+  Property::Index opacityIndex = DevelHandle::GetPropertyIndex( renderer, DevelVisual::Property::OPACITY );
   application.SendNotification();
   application.Render(0);
 
-  DALI_TEST_EQUALS( renderer.GetProperty<Vector4>(mixColorIndex), Color::MAGENTA, TEST_LOCATION);
+  DALI_TEST_EQUALS( renderer.GetProperty<Vector3>(mixColorIndex), Vector3(Color::MAGENTA), TEST_LOCATION);
+  DALI_TEST_EQUALS( renderer.GetProperty<float>(opacityIndex), 1.0f, 0.001f, TEST_LOCATION );
 
   anim.Play();
 
@@ -265,15 +268,19 @@ int UtcDaliTransitionDataMap1P(void)
   application.Render(500); // Start animation
   application.Render(500); // Halfway thru anim
   application.SendNotification();
-  DALI_TEST_EQUALS( renderer.GetProperty<Vector4>(mixColorIndex), (Color::MAGENTA+Color::RED)*0.5f, TEST_LOCATION);
+  DALI_TEST_EQUALS( renderer.GetProperty<Vector3>(mixColorIndex), Vector3(Color::MAGENTA+Color::RED)*0.5f, TEST_LOCATION);
+  DALI_TEST_EQUALS( renderer.GetProperty<float>(opacityIndex), 1.0f, 0.001f, TEST_LOCATION );
 
   application.Render(500); // End of anim
   application.SendNotification();
-  DALI_TEST_EQUALS( renderer.GetProperty<Vector4>(mixColorIndex), Color::RED, TEST_LOCATION );
+  DALI_TEST_EQUALS( renderer.GetProperty<Vector3>(mixColorIndex), Vector3(Color::RED), TEST_LOCATION );
+  DALI_TEST_EQUALS( renderer.GetProperty<float>(opacityIndex), 1.0f, 0.001f, TEST_LOCATION );
 
   END_TEST;
 }
 
+
+
 int UtcDaliTransitionDataMap2P(void)
 {
   TestApplication application;
@@ -282,7 +289,6 @@ int UtcDaliTransitionDataMap2P(void)
 
   Property::Map map;
   map["target"] = "visual1";
-  //Control::CONTROL_PROPERTY_END_INDEX + 1
   map["property"] = ColorVisual::Property::MIX_COLOR;
   map["initialValue"] = Color::MAGENTA;
   map["targetValue"] = Color::RED;
@@ -316,10 +322,83 @@ int UtcDaliTransitionDataMap2P(void)
 
   Renderer renderer = actor.GetRendererAt(0);
   Property::Index mixColorIndex = DevelHandle::GetPropertyIndex( renderer, ColorVisual::Property::MIX_COLOR );
+  Property::Index opacityIndex = DevelHandle::GetPropertyIndex( renderer, DevelVisual::Property::OPACITY );
+  application.SendNotification();
+  application.Render(0);
+
+  DALI_TEST_EQUALS( renderer.GetProperty<Vector3>(mixColorIndex), Vector3(Color::MAGENTA), TEST_LOCATION);
+  DALI_TEST_EQUALS( renderer.GetProperty<float>(opacityIndex), 1.0f, 0.001f, TEST_LOCATION);
+
+  anim.Play();
+
+  application.SendNotification();
+  application.Render(0);
+  application.Render(500); // Start animation
+  application.Render(500); // Halfway thru anim
+  application.SendNotification();
+  DALI_TEST_EQUALS( renderer.GetProperty<Vector3>(mixColorIndex), Vector3(Color::MAGENTA+Color::RED)*0.5f, TEST_LOCATION);
+  DALI_TEST_EQUALS( renderer.GetProperty<float>(opacityIndex), 1.0f, 0.001f, TEST_LOCATION);
+
+  application.Render(500); // End of anim
+  application.SendNotification();
+  DALI_TEST_EQUALS( renderer.GetProperty<Vector3>(mixColorIndex), Vector3(Color::RED), TEST_LOCATION );
+  DALI_TEST_EQUALS( renderer.GetProperty<float>(opacityIndex), 1.0f, 0.001f, TEST_LOCATION);
+
+  END_TEST;
+}
+
+
+int UtcDaliTransitionDataMap2Pb(void)
+{
+  TestApplication application;
+
+  tet_printf("Testing animation of a visual property using programmatic maps\n");
+
+  Property::Map map;
+  map["target"] = "visual1";
+  map["property"] = PrimitiveVisual::Property::MIX_COLOR;
+  map["initialValue"] = Color::MAGENTA;
+  map["targetValue"] = Color::RED;
+  map["animator"] = Property::Map()
+    .Add("alphaFunction", "LINEAR")
+    .Add("timePeriod", Property::Map()
+         .Add("delay", 0.5f)
+         .Add("duration", 1.0f));
+
+  Dali::Toolkit::TransitionData transition = TransitionData::New( map );
+
+  DummyControl actor = DummyControl::New();
+  actor.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS);
+  actor.SetName("Actor1");
+  actor.SetColor(Color::CYAN);
+  Stage::GetCurrent().Add(actor);
+
+  DummyControlImpl& dummyImpl = static_cast<DummyControlImpl&>(actor.GetImplementation());
+
+  Property::Map visualMap;
+  visualMap[Visual::Property::TYPE] = Visual::PRIMITIVE;
+  visualMap[PrimitiveVisual::Property::MIX_COLOR] = Color::MAGENTA;
+  visualMap[ PrimitiveVisual::Property::SHAPE  ] = PrimitiveVisual::Shape::SPHERE;
+  visualMap[ PrimitiveVisual::Property::SLICES ] = 10;
+  visualMap[ PrimitiveVisual::Property::STACKS ] = 10;
+
+  Visual::Base visual = VisualFactory::Get().CreateVisual( visualMap );
+  visual.SetName( "visual1" );
+
+  Property::Index visualIndex = Control::CONTROL_PROPERTY_END_INDEX + 1;
+  dummyImpl.RegisterVisual( visualIndex, visual );
+
+  Animation anim = dummyImpl.CreateTransition( transition );
+  DALI_TEST_CHECK( anim );
+
+  Renderer renderer = actor.GetRendererAt(0);
+  Property::Index mixColorIndex = DevelHandle::GetPropertyIndex( renderer, PrimitiveVisual::Property::MIX_COLOR );
+  Property::Index opacityIndex = DevelHandle::GetPropertyIndex( renderer, DevelVisual::Property::OPACITY );
   application.SendNotification();
   application.Render(0);
 
-  DALI_TEST_EQUALS( renderer.GetProperty<Vector4>(mixColorIndex), Color::MAGENTA, TEST_LOCATION);
+  DALI_TEST_EQUALS( renderer.GetProperty<Vector3>(mixColorIndex), Vector3(Color::MAGENTA), TEST_LOCATION);
+  DALI_TEST_EQUALS( renderer.GetProperty<float>(opacityIndex), 1.0f, 0.001f, TEST_LOCATION);
 
   anim.Play();
 
@@ -328,15 +407,18 @@ int UtcDaliTransitionDataMap2P(void)
   application.Render(500); // Start animation
   application.Render(500); // Halfway thru anim
   application.SendNotification();
-  DALI_TEST_EQUALS( renderer.GetProperty<Vector4>(mixColorIndex), (Color::MAGENTA+Color::RED)*0.5f, TEST_LOCATION);
+  DALI_TEST_EQUALS( renderer.GetProperty<Vector3>(mixColorIndex), Vector3(Color::MAGENTA+Color::RED)*0.5f, TEST_LOCATION);
+  DALI_TEST_EQUALS( renderer.GetProperty<float>(opacityIndex), 1.0f, 0.001f, TEST_LOCATION);
 
   application.Render(500); // End of anim
   application.SendNotification();
-  DALI_TEST_EQUALS( renderer.GetProperty<Vector4>(mixColorIndex), Color::RED, TEST_LOCATION );
+  DALI_TEST_EQUALS( renderer.GetProperty<Vector3>(mixColorIndex), Vector3(Color::RED), TEST_LOCATION );
+  DALI_TEST_EQUALS( renderer.GetProperty<float>(opacityIndex), 1.0f, 0.001f, TEST_LOCATION);
 
   END_TEST;
 }
 
+
 int UtcDaliTransitionDataMap3P(void)
 {
   TestApplication application;
@@ -464,6 +546,146 @@ int UtcDaliTransitionDataMap4P(void)
   END_TEST;
 }
 
+int UtcDaliTransitionDataMap5P(void)
+{
+  TestApplication application;
+
+  tet_printf("Testing animation visual opacity using stylesheet equivalent maps\n");
+
+  Property::Map map;
+  map["target"] = "visual1";
+  map["property"] = "opacity";
+  map["initialValue"] = 0.0f;
+  map["targetValue"] = 1.0f;
+  map["animator"] = Property::Map()
+    .Add("alphaFunction", "EASE_IN_OUT")
+    .Add("timePeriod", Property::Map()
+         .Add("delay", 0.5f)
+         .Add("duration", 1.0f));
+
+  Dali::Toolkit::TransitionData transition = TransitionData::New( map );
+
+  DummyControl actor = DummyControl::New();
+  actor.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS);
+  actor.SetName("Actor1");
+  actor.SetColor(Color::CYAN);
+  Stage::GetCurrent().Add(actor);
+
+  DummyControlImpl& dummyImpl = static_cast<DummyControlImpl&>(actor.GetImplementation());
+
+  Property::Map visualMap;
+  visualMap[Visual::Property::TYPE] = Visual::COLOR;
+  visualMap[ColorVisual::Property::MIX_COLOR] = Color::MAGENTA;
+  Visual::Base visual = VisualFactory::Get().CreateVisual( visualMap );
+  visual.SetName( "visual1" );
+
+  Property::Index visualIndex = Control::CONTROL_PROPERTY_END_INDEX + 1;
+  dummyImpl.RegisterVisual( visualIndex, visual );
+
+  Animation anim = dummyImpl.CreateTransition( transition );
+  DALI_TEST_CHECK( anim );
+
+  Renderer renderer = actor.GetRendererAt(0);
+  Property::Index mixColorIndex = DevelHandle::GetPropertyIndex( renderer, ColorVisual::Property::MIX_COLOR );
+  Property::Index opacityIndex = DevelHandle::GetPropertyIndex( renderer, DevelVisual::Property::OPACITY );
+  application.SendNotification();
+  application.Render(0);
+
+  DALI_TEST_EQUALS( renderer.GetProperty<Vector3>(mixColorIndex), Vector3(Color::MAGENTA), TEST_LOCATION);
+  DALI_TEST_EQUALS( renderer.GetProperty<float>(opacityIndex), 0.0f, 0.001f, TEST_LOCATION );
+  DALI_TEST_EQUALS( renderer.GetProperty<int>(Renderer::Property::BLEND_MODE), (int)BlendMode::ON, TEST_LOCATION );
+
+  anim.Play();
+
+  application.SendNotification();
+  application.Render(500); // Start animation
+  application.Render(500); // Halfway thru anim
+  application.SendNotification();
+  DALI_TEST_EQUALS( renderer.GetProperty<Vector3>(mixColorIndex), Vector3(Color::MAGENTA), TEST_LOCATION);
+  DALI_TEST_EQUALS( renderer.GetProperty<float>(opacityIndex), 0.5f, 0.001f, TEST_LOCATION );
+  DALI_TEST_EQUALS( renderer.GetProperty<int>(Renderer::Property::BLEND_MODE), (int)BlendMode::ON, TEST_LOCATION );
+
+  application.Render(501); // End of anim
+  application.SendNotification();
+  DALI_TEST_EQUALS( renderer.GetProperty<Vector3>(mixColorIndex), Vector3(Color::MAGENTA), TEST_LOCATION );
+  DALI_TEST_EQUALS( renderer.GetProperty<float>(opacityIndex), 1.0f, 0.001f, TEST_LOCATION );
+  DALI_TEST_EQUALS( renderer.GetProperty<int>(Renderer::Property::BLEND_MODE), (int)BlendMode::AUTO, TEST_LOCATION );
+
+  END_TEST;
+}
+
+
+int UtcDaliTransitionDataMap6P(void)
+{
+  TestApplication application;
+
+  tet_printf("Testing animation visual opacity using stylesheet equivalent maps\n");
+
+  Property::Map map;
+  map["target"] = "visual1";
+  map["property"] = "opacity";
+  map["targetValue"] = 0.0f;
+  map["animator"] = Property::Map()
+    .Add("alphaFunction", "EASE_IN_OUT")
+    .Add("timePeriod", Property::Map()
+         .Add("delay", 0.5f)
+         .Add("duration", 1.0f));
+
+  Dali::Toolkit::TransitionData transition = TransitionData::New( map );
+
+  DummyControl actor = DummyControl::New();
+  actor.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS);
+  actor.SetName("Actor1");
+  actor.SetColor(Color::CYAN);
+  Stage::GetCurrent().Add(actor);
+
+  DummyControlImpl& dummyImpl = static_cast<DummyControlImpl&>(actor.GetImplementation());
+
+  Property::Map visualMap;
+  visualMap[Visual::Property::TYPE] = Visual::COLOR;
+  visualMap[ColorVisual::Property::MIX_COLOR] = Color::MAGENTA;
+  Visual::Base visual = VisualFactory::Get().CreateVisual( visualMap );
+  visual.SetName( "visual1" );
+
+  Property::Index visualIndex = Control::CONTROL_PROPERTY_END_INDEX + 1;
+  dummyImpl.RegisterVisual( visualIndex, visual );
+
+  Animation anim = dummyImpl.CreateTransition( transition );
+  DALI_TEST_CHECK( anim );
+
+  Renderer renderer = actor.GetRendererAt(0);
+  Property::Index mixColorIndex = DevelHandle::GetPropertyIndex( renderer, ColorVisual::Property::MIX_COLOR );
+  Property::Index opacityIndex = DevelHandle::GetPropertyIndex( renderer, DevelVisual::Property::OPACITY );
+  application.SendNotification();
+  application.Render(0);
+
+  DALI_TEST_EQUALS( renderer.GetProperty<Vector3>(mixColorIndex), Vector3(Color::MAGENTA), TEST_LOCATION);
+  DALI_TEST_EQUALS( renderer.GetProperty<float>(opacityIndex), 1.0f, 0.001f, TEST_LOCATION );
+
+  // Note, This should be testing for AUTO
+  // this is the same problem as C# target value being set before Play is called.
+  // @todo How was this solved?
+  DALI_TEST_EQUALS( renderer.GetProperty<int>(Renderer::Property::BLEND_MODE), (int)BlendMode::ON, TEST_LOCATION );
+
+  anim.Play();
+
+  application.SendNotification();
+  application.Render(500); // Start animation
+  application.Render(500); // Halfway thru anim
+  application.SendNotification();
+  DALI_TEST_EQUALS( renderer.GetProperty<Vector3>(mixColorIndex), Vector3(Color::MAGENTA), TEST_LOCATION);
+  DALI_TEST_EQUALS( renderer.GetProperty<float>(opacityIndex), 0.5f, 0.001f, TEST_LOCATION );
+  DALI_TEST_EQUALS( renderer.GetProperty<int>(Renderer::Property::BLEND_MODE), (int)BlendMode::ON, TEST_LOCATION );
+
+  application.Render(500); // End of anim
+  application.SendNotification();
+  DALI_TEST_EQUALS( renderer.GetProperty<Vector3>(mixColorIndex), Vector3(Color::MAGENTA), TEST_LOCATION );
+  DALI_TEST_EQUALS( renderer.GetProperty<float>(opacityIndex), 0.0f, 0.001f, TEST_LOCATION );
+  DALI_TEST_EQUALS( renderer.GetProperty<int>(Renderer::Property::BLEND_MODE), (int)BlendMode::ON, TEST_LOCATION );
+
+  END_TEST;
+}
+
 
 int UtcDaliTransitionDataMap1N(void)
 {
@@ -506,8 +728,8 @@ int UtcDaliTransitionDataMapN3(void)
   Property::Map map;
   map["target"] = "visual1";
   map["property"] = "mixColor";
-  map["initialValue"] = Color::MAGENTA;
-  map["targetValue"] = Color::RED;
+  map["initialValue"] = Vector3(Color::MAGENTA);
+  map["targetValue"] = Vector3(Color::RED);
   map["animator"] = Property::Map()
     .Add("alphaFunction", "EASE_OUT_BACK")
     .Add("timePeriod", Property::Map()
@@ -526,7 +748,7 @@ int UtcDaliTransitionDataMapN3(void)
   DummyControlImpl& dummyImpl = static_cast<DummyControlImpl&>(actor.GetImplementation());
   Property::Map visualMap;
   visualMap[Visual::Property::TYPE] = Visual::COLOR;
-  visualMap[ColorVisual::Property::MIX_COLOR] = Color::MAGENTA;
+  visualMap[ColorVisual::Property::MIX_COLOR] = Vector3(Color::MAGENTA);
   Visual::Base visual = VisualFactory::Get().CreateVisual( visualMap );
   visual.SetName( "visual1" );
 
@@ -548,8 +770,8 @@ int UtcDaliTransitionDataMapN4(void)
   Property::Map map;
   map["target"] = "visual1";
   map["property"] = "mixColor";
-  map["initialValue"] = Color::MAGENTA;
-  map["targetValue"] = Color::RED;
+  map["initialValue"] = Vector3(Color::MAGENTA);
+  map["targetValue"] = Vector3(Color::RED);
   map["animator"] = Property::Map()
     .Add("alphaFunction", Vector3(.1f,1.0f,0.5f))
     .Add("timePeriod", Property::Map()
@@ -583,9 +805,11 @@ int UtcDaliTransitionDataMapN4(void)
 
   Renderer renderer = actor.GetRendererAt(0);
   Property::Index mixColorIdx = DevelHandle::GetPropertyIndex( renderer, ColorVisual::Property::MIX_COLOR );
+  Property::Index opacityIdx = DevelHandle::GetPropertyIndex( renderer, DevelVisual::Property::OPACITY );
 
   tet_printf( "Test that the property has been set to target value\n");
-  DALI_TEST_EQUALS(renderer.GetProperty<Vector4>(mixColorIdx), Color::RED, 0.001, TEST_LOCATION);
+  DALI_TEST_EQUALS(renderer.GetProperty<Vector3>(mixColorIdx), Vector3(Color::RED), 0.001, TEST_LOCATION);
+  DALI_TEST_EQUALS(renderer.GetProperty<float>(opacityIdx), 1.0f, 0.001, TEST_LOCATION);
 
   END_TEST;
 }
@@ -636,7 +860,7 @@ int UtcDaliTransitionDataMapN5(void)
   Property::Index mixColorIdx = DevelHandle::GetPropertyIndex( renderer, ColorVisual::Property::MIX_COLOR );
 
   tet_printf( "Test that the property has been set to target value\n");
-  DALI_TEST_EQUALS(renderer.GetProperty<Vector4>(mixColorIdx), Color::RED, 0.001, TEST_LOCATION);
+  DALI_TEST_EQUALS(renderer.GetProperty<Vector3>(mixColorIdx), Vector3(Color::RED), 0.001, TEST_LOCATION);
 
   END_TEST;
 }
@@ -685,9 +909,11 @@ int UtcDaliTransitionDataMapN6(void)
 
   Renderer renderer = actor.GetRendererAt(0);
   Property::Index mixColorIdx = DevelHandle::GetPropertyIndex( renderer, ColorVisual::Property::MIX_COLOR );
+  Property::Index opacityIdx = DevelHandle::GetPropertyIndex( renderer, DevelVisual::Property::OPACITY );
 
   tet_printf( "Test that the property has been set to target value\n");
-  DALI_TEST_EQUALS(renderer.GetProperty<Vector4>(mixColorIdx), Color::RED, 0.001, TEST_LOCATION);
+  DALI_TEST_EQUALS(renderer.GetProperty<Vector3>(mixColorIdx), Vector3(Color::RED), 0.001, TEST_LOCATION);
+  DALI_TEST_EQUALS(renderer.GetProperty<float>(opacityIdx), 1.0f, 0.001, TEST_LOCATION);
 
   END_TEST;
 }
@@ -852,7 +1078,8 @@ int UtcDaliTransitionDataGetAnimatorP(void)
 
   Property::Map map8;
   map8["target"] = "Visual1";
-  map8["property"] = "colorAlpha";
+  map8["property"] = "opacity";
+  map8["initialValue"] = 0.0f;
   map8["targetValue"] = 1.0f;
   map8["animator"] = Property::Map()
     .Add("alphaFunction", "EASE_IN")
diff --git a/automated-tests/src/dali-toolkit/utc-Dali-Visual.cpp b/automated-tests/src/dali-toolkit/utc-Dali-Visual.cpp
index f399d4d..fc94130 100644
--- a/automated-tests/src/dali-toolkit/utc-Dali-Visual.cpp
+++ b/automated-tests/src/dali-toolkit/utc-Dali-Visual.cpp
@@ -119,9 +119,21 @@ static void TestMixColor( Visual::Base visual, Property::Index mixColorIndex, co
   visual.CreatePropertyMap(map);
   Property::Value* value = map.Find( mixColorIndex );
   DALI_TEST_CHECK( value );
-  Vector4 mixColor;
-  DALI_TEST_CHECK( value->Get( mixColor ) );
-  DALI_TEST_EQUALS( mixColor, testColor, 0.001, TEST_LOCATION );
+  Vector3 mixColor1;
+  DALI_TEST_CHECK( value->Get( mixColor1 ) );
+  DALI_TEST_EQUALS( mixColor1, Vector3(testColor), 0.001, TEST_LOCATION );
+
+  value = map.Find( DevelVisual::Property::MIX_COLOR );
+  DALI_TEST_CHECK( value );
+  Vector4 mixColor2;
+  DALI_TEST_CHECK( value->Get( mixColor2 ) );
+  DALI_TEST_EQUALS( mixColor2, testColor, 0.001, TEST_LOCATION );
+
+  value = map.Find( DevelVisual::Property::OPACITY );
+  DALI_TEST_CHECK( value );
+  float opacity;
+  DALI_TEST_CHECK( value->Get( opacity ) );
+  DALI_TEST_EQUALS( opacity, testColor.a, 0.001, TEST_LOCATION );
 }
 
 
@@ -1119,12 +1131,13 @@ int UtcDaliVisualAnimateBorderVisual01(void)
   DALI_TEST_EQUALS( color, testColor, TEST_LOCATION );
   DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<Vector4>("borderColor", testColor ), true, TEST_LOCATION );
 
-  color = renderer.GetProperty<Vector4>( mixColorIndex );
+  color = renderer.GetProperty<Vector3>( mixColorIndex );
   testColor = Vector4( 1,1,1,0.4f );
-  DALI_TEST_EQUALS( color, testColor, 0.0001f, TEST_LOCATION );
-  DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<Vector4>("mixColor", testColor ), true, TEST_LOCATION );
+  DALI_TEST_EQUALS( Vector3(color), Vector3(testColor), 0.0001f, TEST_LOCATION );
+  DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<Vector3>("mixColor", Vector3(testColor) ), true, TEST_LOCATION );
+  DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<float>("opacity", testColor.a ) , true, TEST_LOCATION );
 
-  application.Render(2000u); // halfway point between blue and white
+  application.Render(2000u);
 
   color = renderer.GetProperty<Vector4>( borderColorIndex );
   DALI_TEST_EQUALS( color, Color::WHITE, TEST_LOCATION );
@@ -1133,7 +1146,8 @@ int UtcDaliVisualAnimateBorderVisual01(void)
   color = renderer.GetProperty<Vector4>( mixColorIndex );
   testColor = Vector4(1,1,1,0);
   DALI_TEST_EQUALS( color, testColor, TEST_LOCATION );
-  DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<Vector4>("mixColor", testColor ), true, TEST_LOCATION );
+  DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<Vector3>("mixColor", Vector3(testColor) ), true, TEST_LOCATION );
+  DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<float>("opacity", testColor.a ), true, TEST_LOCATION );
 
   END_TEST;
 }
@@ -1205,31 +1219,31 @@ int UtcDaliVisualAnimateColorVisual(void)
   DALI_TEST_EQUALS( actor.GetRendererCount(), 1u, TEST_LOCATION);
 
   Renderer renderer = actor.GetRendererAt(0);
-  Property::Index index = DevelHandle::GetPropertyIndex( renderer, ColorVisual::Property::MIX_COLOR );
+  Property::Index mixColorIndex = DevelHandle::GetPropertyIndex( renderer, ColorVisual::Property::MIX_COLOR );
 
   Property::Value blendModeValue = renderer.GetProperty( Renderer::Property::BLEND_MODE );
   DALI_TEST_EQUALS( blendModeValue.Get<int>(), (int)BlendMode::AUTO, TEST_LOCATION );
 
   Animation animation = Animation::New(4.0f);
-  animation.AnimateTo( Property(renderer, index), Color::WHITE );
+  animation.AnimateTo( Property(renderer, mixColorIndex), Vector3(Color::WHITE) );
   animation.Play();
 
   application.SendNotification();
   application.Render(0);
   application.Render(2000u); // halfway point
 
-  Vector4 color = renderer.GetProperty<Vector4>( index );
-  Vector4 testColor = (Color::BLUE + Color::WHITE)*0.5f;
+  Vector3 color = renderer.GetProperty<Vector3>( mixColorIndex );
+  Vector3 testColor = Vector3(Color::BLUE + Color::WHITE)*0.5f;
   DALI_TEST_EQUALS( color, testColor, TEST_LOCATION );
 
-  DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<Vector4>("mixColor", testColor ), true, TEST_LOCATION );
+  DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<Vector3>("mixColor", testColor ), true, TEST_LOCATION );
 
   application.Render(2000u); // halfway point between blue and white
 
-  color = renderer.GetProperty<Vector4>( index );
-  DALI_TEST_EQUALS( color, Color::WHITE, TEST_LOCATION );
+  color = renderer.GetProperty<Vector3>( mixColorIndex );
+  DALI_TEST_EQUALS( color, Vector3(Color::WHITE), TEST_LOCATION );
 
-  DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<Vector4>("mixColor", Color::WHITE ), true, TEST_LOCATION );
+  DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<Vector3>("mixColor", Vector3(Color::WHITE) ), true, TEST_LOCATION );
 
   blendModeValue = renderer.GetProperty( Renderer::Property::BLEND_MODE );
   DALI_TEST_EQUALS( blendModeValue.Get<int>(), (int)BlendMode::AUTO, TEST_LOCATION );
@@ -1297,14 +1311,16 @@ int UtcDaliVisualAnimatePrimitiveVisual(void)
     DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<Vector4>("uColor", Vector4(0.5f, 0.5f, 0.5f, 1.0f )), true, TEST_LOCATION );
 
     Vector4 halfwayColor = (INITIAL_MIX_COLOR + TARGET_MIX_COLOR)*0.5;
-    DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<Vector4>("mixColor", halfwayColor ), true, TEST_LOCATION );
+    DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<Vector3>("mixColor", Vector3(halfwayColor) ), true, TEST_LOCATION );
+    DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<float>("opacity", halfwayColor.a ), true, TEST_LOCATION );
 
     application.Render(2001u); // go past end
     application.SendNotification(); // Trigger signals
 
     DALI_TEST_EQUALS( actor.GetCurrentColor(), Color::WHITE, TEST_LOCATION );
     DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<Vector4>("uColor", Color::WHITE ), true, TEST_LOCATION );
-    DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<Vector4>("mixColor", TARGET_MIX_COLOR ), true, TEST_LOCATION );
+    DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<Vector3>("mixColor", Vector3(TARGET_MIX_COLOR) ), true, TEST_LOCATION );
+    DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<float>("opacity", TARGET_MIX_COLOR.a ), true, TEST_LOCATION );
 
     blendModeValue = renderer.GetProperty( Renderer::Property::BLEND_MODE );
     DALI_TEST_EQUALS( blendModeValue.Get<int>(), (int)BlendMode::AUTO, TEST_LOCATION );
@@ -1375,15 +1391,18 @@ int UtcDaliVisualAnimateImageVisualMixColor(void)
   application.SendNotification();
   application.Render(0);
   application.Render(2000u); // halfway point
+  Vector4 testColor(1.0f, 0.0f, 0.5f, 0.75f );
 
   DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<Vector4>("uColor", Vector4(0.5f, 0.5f, 0.5f, 1.0f )), true, TEST_LOCATION );
-  DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<Vector4>("mixColor", Vector4(1.0f, 0.0f, 0.5f, 0.75f )), true, TEST_LOCATION );
+  DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<Vector3>("mixColor", Vector3(testColor)), true, TEST_LOCATION );
+  DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<float>("opacity", testColor.a), true, TEST_LOCATION );
 
   application.Render(2000u); // halfway point between blue and white
 
   DALI_TEST_EQUALS( actor.GetCurrentColor(), Color::WHITE, TEST_LOCATION );
   DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<Vector4>("uColor", Color::WHITE ), true, TEST_LOCATION );
-  DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<Vector4>("mixColor", TARGET_MIX_COLOR), true, TEST_LOCATION );
+  DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<Vector3>("mixColor", Vector3(TARGET_MIX_COLOR)), true, TEST_LOCATION );
+  DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<float>("opacity", TARGET_MIX_COLOR.a), true, TEST_LOCATION );
 
   TestMixColor( visual, DevelVisual::Property::MIX_COLOR, TARGET_MIX_COLOR );
 
@@ -1393,6 +1412,116 @@ int UtcDaliVisualAnimateImageVisualMixColor(void)
   END_TEST;
 }
 
+
+int UtcDaliVisualAnimateImageVisualOpacity(void)
+{
+  ToolkitTestApplication application;
+  tet_infoline( "UtcDaliAnimateImageVisual mix color" );
+
+  application.GetPlatform().SetClosestImageSize( Vector2(100, 100) );
+
+  VisualFactory factory = VisualFactory::Get();
+  Property::Map propertyMap;
+  propertyMap.Insert(Visual::Property::TYPE,  Visual::IMAGE);
+  propertyMap.Insert(ImageVisual::Property::URL, TEST_IMAGE_FILE_NAME );
+  propertyMap.Insert("opacity", 0.5f);
+  propertyMap.Insert(ImageVisual::Property::SYNCHRONOUS_LOADING, true);
+  Visual::Base visual = factory.CreateVisual( propertyMap );
+
+  DummyControl actor = DummyControl::New(true);
+  Impl::DummyControl& dummyImpl = static_cast<Impl::DummyControl&>(actor.GetImplementation());
+  dummyImpl.RegisterVisual( DummyControl::Property::TEST_VISUAL, visual );
+
+  actor.SetSize(2000, 2000);
+  actor.SetParentOrigin(ParentOrigin::CENTER);
+  actor.SetColor(Color::BLACK);
+  Stage::GetCurrent().Add(actor);
+
+  DALI_TEST_EQUALS( actor.GetRendererCount(), 1u, TEST_LOCATION);
+
+  Renderer renderer = actor.GetRendererAt(0);
+  tet_infoline("Test that the renderer has the opacity property");
+  Property::Index index = DevelHandle::GetPropertyIndex( renderer, DevelVisual::Property::OPACITY );
+  DALI_TEST_CHECK( index != Property::INVALID_INDEX );
+
+
+  Property::Value blendModeValue = renderer.GetProperty( Renderer::Property::BLEND_MODE );
+  DALI_TEST_EQUALS( blendModeValue.Get<int>(), (int)BlendMode::ON, TEST_LOCATION );
+
+  {
+    tet_infoline( "Test that the opacity can be increased to full via animation, and that the blend mode is set appropriately at the start and end of the animation." );
+
+    Property::Map map;
+    map["target"] = "testVisual";
+    map["property"] = "opacity";
+    map["targetValue"] = 1.0f;
+    map["animator"] = Property::Map()
+      .Add("alphaFunction", "LINEAR")
+      .Add("timePeriod", Property::Map()
+           .Add("delay", 0.0f)
+           .Add("duration", 4.0f));
+
+    Dali::Toolkit::TransitionData transition = TransitionData::New( map );
+    Animation animation = dummyImpl.CreateTransition( transition );
+    animation.Play();
+
+    application.SendNotification();
+    application.Render(0);
+    application.Render(2000u); // halfway point
+    application.SendNotification();
+
+    DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<float>("opacity", 0.75f), true, TEST_LOCATION );
+
+    application.Render(2001u); // end
+    application.SendNotification();
+
+    DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<float>("opacity", 1.0f), true, TEST_LOCATION );
+
+    blendModeValue = renderer.GetProperty( Renderer::Property::BLEND_MODE );
+    DALI_TEST_EQUALS( blendModeValue.Get<int>(), (int)BlendMode::AUTO, TEST_LOCATION );
+  }
+
+
+  {
+    tet_infoline( "Test that the opacity can be reduced via animation, and that the blend mode is set appropriately at the start and end of the animation." );
+
+    Property::Map map;
+    map["target"] = "testVisual";
+    map["property"] = DevelVisual::Property::OPACITY;
+    map["targetValue"] = 0.1f;
+    map["animator"] = Property::Map()
+      .Add("alphaFunction", "LINEAR")
+      .Add("timePeriod", Property::Map()
+           .Add("delay", 0.0f)
+           .Add("duration", 4.0f));
+
+    Dali::Toolkit::TransitionData transition = TransitionData::New( map );
+    Animation animation = dummyImpl.CreateTransition( transition );
+    animation.Play();
+
+    blendModeValue = renderer.GetProperty( Renderer::Property::BLEND_MODE );
+    DALI_TEST_EQUALS( blendModeValue.Get<int>(), (int)BlendMode::ON, TEST_LOCATION );
+
+    application.SendNotification();
+    application.Render(0);
+    application.Render(2000u); // halfway point
+    application.SendNotification();
+
+    DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<float>("opacity", 0.55f), true, TEST_LOCATION );
+
+    application.Render(2016u); // end
+    application.SendNotification();
+
+    DALI_TEST_EQUALS( application.GetGlAbstraction().CheckUniformValue<float>("opacity", 0.1f), true, TEST_LOCATION );
+
+    blendModeValue = renderer.GetProperty( Renderer::Property::BLEND_MODE );
+    DALI_TEST_EQUALS( blendModeValue.Get<int>(), (int)BlendMode::ON, TEST_LOCATION );
+  }
+
+
+  END_TEST;
+}
+
 int UtcDaliVisualAnimateImageVisualPixelArea(void)
 {
   ToolkitTestApplication application;
diff --git a/automated-tests/src/dali-toolkit/utc-Dali-VisualFactory.cpp b/automated-tests/src/dali-toolkit/utc-Dali-VisualFactory.cpp
index 2eb6262..ab0f0cd 100644
--- a/automated-tests/src/dali-toolkit/utc-Dali-VisualFactory.cpp
+++ b/automated-tests/src/dali-toolkit/utc-Dali-VisualFactory.cpp
@@ -330,10 +330,13 @@ int UtcDaliVisualFactoryGetColorVisual1(void)
   DummyControl actor = DummyControl::New();
   TestVisualRender( application, actor, visual );
 
-  Vector4 actualValue(Vector4::ZERO);
+  Vector3 actualValue(Vector4::ZERO);
+  float opacity=0.0f;
   TestGlAbstraction& gl = application.GetGlAbstraction();
-  DALI_TEST_CHECK( gl.GetUniformValue<Vector4>( "mixColor", actualValue ) );
-  DALI_TEST_EQUALS( actualValue, testColor, TEST_LOCATION );
+  DALI_TEST_CHECK( gl.GetUniformValue<Vector3>( "mixColor", actualValue ) );
+  DALI_TEST_CHECK( gl.GetUniformValue<float>( "opacity", opacity ) );
+  DALI_TEST_EQUALS( actualValue, Vector3(testColor), TEST_LOCATION );
+  DALI_TEST_EQUALS( opacity, testColor.a, TEST_LOCATION );
 
   END_TEST;
 }
@@ -356,10 +359,13 @@ int UtcDaliVisualFactoryGetColorVisual2(void)
   DummyControl actor = DummyControl::New();
   TestVisualRender( application, actor, visual );
 
-  Vector4 actualValue(Vector4::ZERO);
+  Vector3 actualValue;
+  float opacity;
   TestGlAbstraction& gl = application.GetGlAbstraction();
-  DALI_TEST_CHECK( gl.GetUniformValue<Vector4>( "mixColor", actualValue ) );
-  DALI_TEST_EQUALS( actualValue, testColor, TEST_LOCATION );
+  DALI_TEST_CHECK( gl.GetUniformValue<Vector3>( "mixColor", actualValue ) );
+  DALI_TEST_CHECK( gl.GetUniformValue<float>( "opacity", opacity ) );
+  DALI_TEST_EQUALS( actualValue, Vector3(testColor), TEST_LOCATION );
+  DALI_TEST_EQUALS( opacity, testColor.a, TEST_LOCATION );
 
   Stage::GetCurrent().Remove(actor);
   DALI_TEST_CHECK( actor.GetRendererCount() == 0u );
diff --git a/dali-toolkit/devel-api/visuals/visual-properties-devel.h b/dali-toolkit/devel-api/visuals/visual-properties-devel.h
index 9c9a628..b70d254 100644
--- a/dali-toolkit/devel-api/visuals/visual-properties-devel.h
+++ b/dali-toolkit/devel-api/visuals/visual-properties-devel.h
@@ -76,11 +76,19 @@ enum Type
 
   /**
    * @brief Mix color is a blend color for any visual.
-   * @details Name "mixColor", type Property::VECTOR4
+   * @details Name "mixColor", type Property::VECTOR3 or Property::VECTOR4
    *
    * @note Optional
    */
   MIX_COLOR = SHADER + 3,
+
+  /**
+   * @brief Opacity is the alpha component of the mixColor, above.
+   * @details Name "opacity", type Property::FLOAT
+   *
+   * @note Optional
+   */
+  OPACITY = SHADER + 4
 };
 
 } //namespace Property
diff --git a/dali-toolkit/internal/visuals/border/border-visual.cpp b/dali-toolkit/internal/visuals/border/border-visual.cpp
index 05fa234..13b8633 100644
--- a/dali-toolkit/internal/visuals/border/border-visual.cpp
+++ b/dali-toolkit/internal/visuals/border/border-visual.cpp
@@ -82,11 +82,12 @@ const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
 const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
   uniform lowp vec4 uColor;\n
   uniform lowp vec4 borderColor;\n
-  uniform lowp vec4 mixColor;\n
+  uniform lowp vec3 mixColor;\n
+  uniform lowp float opacity;\n
   \n
   void main()\n
   {\n
-    gl_FragColor = mixColor*borderColor*uColor;\n
+    gl_FragColor = vec4(mixColor, opacity)*borderColor*uColor;\n
   }\n
 );
 
@@ -109,13 +110,14 @@ const char* VERTEX_SHADER_ANTI_ALIASING = DALI_COMPOSE_SHADER(
 const char* FRAGMENT_SHADER_ANTI_ALIASING = DALI_COMPOSE_SHADER(
   uniform lowp vec4 uColor;\n
   uniform lowp vec4 borderColor;\n
-  uniform lowp vec4 mixColor;\n
+  uniform lowp vec3 mixColor;\n
+  uniform lowp float opacity;\n
   uniform mediump float borderSize;\n
   varying mediump float vAlpha;\n
   \n
   void main()\n
   {\n
-    gl_FragColor = mixColor*borderColor*uColor;\n
+    gl_FragColor = vec4(mixColor, opacity)*borderColor*uColor;\n
     gl_FragColor.a *= smoothstep(0.0, 1.5, vAlpha)*smoothstep( borderSize+1.5, borderSize, vAlpha );\n
   }\n
 );
diff --git a/dali-toolkit/internal/visuals/color/color-visual.cpp b/dali-toolkit/internal/visuals/color/color-visual.cpp
index 6313211..0ac80d6 100644
--- a/dali-toolkit/internal/visuals/color/color-visual.cpp
+++ b/dali-toolkit/internal/visuals/color/color-visual.cpp
@@ -70,11 +70,12 @@ const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
 
 const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
   uniform lowp vec4 uColor;\n
-  uniform lowp vec4 mixColor;\n
+  uniform lowp vec3 mixColor;\n
+  uniform lowp float opacity;\n
   \n
   void main()\n
   {\n
-    gl_FragColor = mixColor*uColor;\n
+    gl_FragColor = vec4(mixColor, opacity)*uColor;\n
   }\n
 );
 }
@@ -105,7 +106,16 @@ void ColorVisual::DoSetProperties( const Property::Map& propertyMap )
     Vector4 color;
     if( colorValue->Get( color ) )
     {
-      SetMixColor( color );
+      Property::Type type = colorValue->GetType();
+      if( type == Property::VECTOR4 )
+      {
+        SetMixColor( color );
+      }
+      else if( type == Property::VECTOR3 )
+      {
+        Vector3 color3(color);
+        SetMixColor( color3 );
+      }
     }
     else
     {
@@ -152,7 +162,8 @@ void ColorVisual::InitializeRenderer()
   // ColorVisual has it's own index key for mix color - use this instead
   // of using the new base index to avoid changing existing applications
   // String keys will get to this property.
-  mImpl->mMixColorIndex = DevelHandle::RegisterProperty( mImpl->mRenderer, Toolkit::ColorVisual::Property::MIX_COLOR, MIX_COLOR, mImpl->mMixColor );
+  mImpl->mMixColorIndex = DevelHandle::RegisterProperty( mImpl->mRenderer, Toolkit::ColorVisual::Property::MIX_COLOR, MIX_COLOR, Vector3(mImpl->mMixColor) );
+
   if( mImpl->mMixColor.a < 1.f )
   {
     mImpl->mRenderer.SetProperty( Renderer::Property::BLEND_MODE, BlendMode::ON );
diff --git a/dali-toolkit/internal/visuals/gradient/gradient-visual.cpp b/dali-toolkit/internal/visuals/gradient/gradient-visual.cpp
index 7f58d66..4ea6a28 100644
--- a/dali-toolkit/internal/visuals/gradient/gradient-visual.cpp
+++ b/dali-toolkit/internal/visuals/gradient/gradient-visual.cpp
@@ -172,12 +172,13 @@ const char* FRAGMENT_SHADER[] =
 DALI_COMPOSE_SHADER(
   uniform sampler2D sTexture;\n // sampler1D?
   uniform lowp vec4 uColor;\n
-  uniform lowp vec4 mixColor;\n
+  uniform lowp vec3 mixColor;\n
+  uniform lowp float opacity;\n
   varying mediump vec2 vTexCoord;\n
   \n
   void main()\n
   {\n
-      gl_FragColor = texture2D( sTexture, vec2( vTexCoord.y, 0.5 ) ) * vec4(mixColor.rgb*mixColor.a, mixColor.a) * uColor;\n
+    gl_FragColor = texture2D( sTexture, vec2( vTexCoord.y, 0.5 ) ) * vec4(mixColor*opacity, opacity) * uColor;\n
   }\n
 ),
 
@@ -185,12 +186,13 @@ DALI_COMPOSE_SHADER(
 DALI_COMPOSE_SHADER(
   uniform sampler2D sTexture;\n // sampler1D?
   uniform lowp vec4 uColor;\n
-  uniform lowp vec4 mixColor;\n
+  uniform lowp vec3 mixColor;\n
+  uniform lowp float opacity;\n
   varying mediump vec2 vTexCoord;\n
   \n
   void main()\n
   {\n
-    gl_FragColor = texture2D( sTexture, vec2( length(vTexCoord), 0.5 ) ) * vec4(mixColor.rgb*mixColor.a, mixColor.a) * uColor;\n
+    gl_FragColor = texture2D( sTexture, vec2( length(vTexCoord), 0.5 ) ) * vec4(mixColor*opacity, opacity) * uColor;\n
   }\n
 )
 };
diff --git a/dali-toolkit/internal/visuals/image/image-visual.cpp b/dali-toolkit/internal/visuals/image/image-visual.cpp
index a0197cd..f6e2a9f 100644
--- a/dali-toolkit/internal/visuals/image/image-visual.cpp
+++ b/dali-toolkit/internal/visuals/image/image-visual.cpp
@@ -125,12 +125,13 @@ const char* FRAGMENT_SHADER_NO_ATLAS = DALI_COMPOSE_SHADER(
   varying mediump vec2 vTexCoord;\n
   uniform sampler2D sTexture;\n
   uniform lowp vec4 uColor;\n
-  uniform lowp vec4 mixColor;\n
+  uniform lowp vec3 mixColor;\n
+  uniform lowp float opacity;\n
   uniform lowp float preMultipliedAlpha;\n
   \n
   lowp vec4 visualMixColor()\n
   {\n
-    return vec4( mixColor.rgb * mix( 1.0, mixColor.a, preMultipliedAlpha ), mixColor.a );\n
+    return vec4( mixColor * mix( 1.0, opacity, preMultipliedAlpha ), opacity );\n
   }\n
   void main()\n
   {\n
@@ -143,12 +144,13 @@ const char* FRAGMENT_SHADER_ATLAS_CLAMP = DALI_COMPOSE_SHADER(
     uniform sampler2D sTexture;\n
     uniform mediump vec4 uAtlasRect;\n
     uniform lowp vec4 uColor;\n
-    uniform lowp vec4 mixColor;\n
+    uniform lowp vec3 mixColor;\n
+    uniform lowp float opacity;\n
     uniform lowp float preMultipliedAlpha;\n
     \n
     lowp vec4 visualMixColor()\n
     {\n
-        return vec4( mixColor.rgb * mix( 1.0, mixColor.a, preMultipliedAlpha ), mixColor.a );\n
+        return vec4( mixColor * mix( 1.0, opacity, preMultipliedAlpha ), opacity );\n
     }\n
     \n
     void main()\n
@@ -165,7 +167,8 @@ const char* FRAGMENT_SHADER_ATLAS_VARIOUS_WRAP = DALI_COMPOSE_SHADER(
     // WrapMode -- 0: CLAMP; 1: REPEAT; 2: REFLECT;
     uniform lowp vec2 wrapMode;\n
     uniform lowp vec4 uColor;\n
-    uniform lowp vec4 mixColor;\n
+    uniform lowp vec3 mixColor;\n
+    uniform lowp float opacity;\n
     uniform lowp float preMultipliedAlpha;\n
     \n
     mediump float wrapCoordinate( mediump vec2 range, mediump float coordinate, lowp float wrap )\n
@@ -180,7 +183,7 @@ const char* FRAGMENT_SHADER_ATLAS_VARIOUS_WRAP = DALI_COMPOSE_SHADER(
     \n
     lowp vec4 visualMixColor()\n
     {\n
-      return vec4( mixColor.rgb * mix( 1.0, mixColor.a, preMultipliedAlpha ), mixColor.a );\n
+      return vec4( mixColor * mix( 1.0, opacity, preMultipliedAlpha ), opacity );\n
     }\n
     \n
     void main()\n
diff --git a/dali-toolkit/internal/visuals/mesh/mesh-visual.cpp b/dali-toolkit/internal/visuals/mesh/mesh-visual.cpp
index 73140cf..051dfa3 100644
--- a/dali-toolkit/internal/visuals/mesh/mesh-visual.cpp
+++ b/dali-toolkit/internal/visuals/mesh/mesh-visual.cpp
@@ -164,12 +164,13 @@ const char* SIMPLE_FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
   precision mediump float;\n
   varying mediump vec3 vIllumination;\n
   uniform lowp vec4 uColor;\n
-  uniform lowp vec4 mixColor;\n
+  uniform lowp vec3 mixColor;\n
+  uniform lowp float opacity;\n
   uniform lowp float preMultipliedAlpha;\n
 
   lowp vec4 visualMixColor()\n
   {\n
-    return vec4( mixColor.rgb * mix( 1.0, mixColor.a, preMultipliedAlpha ), mixColor.a );\n
+    return vec4( mixColor * mix( 1.0, opacity, preMultipliedAlpha ), opacity );\n
   }\n
   void main()\n
   {\n
@@ -247,12 +248,13 @@ const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
   varying mediump float vSpecular;\n
   uniform sampler2D sDiffuse;\n
   uniform lowp vec4 uColor;\n
-  uniform lowp vec4 mixColor;\n
+  uniform lowp vec3 mixColor;\n
+  uniform lowp float opacity;\n
   uniform lowp float preMultipliedAlpha;\n
 
   lowp vec4 visualMixColor()\n
   {\n
-    return vec4( mixColor.rgb * mix( 1.0, mixColor.a, preMultipliedAlpha ), mixColor.a );\n
+    return vec4( mixColor * mix( 1.0, opacity, preMultipliedAlpha ), opacity );\n
   }\n
   void main()\n
   {\n
@@ -339,12 +341,13 @@ const char* NORMAL_MAP_FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
   uniform sampler2D sNormal;\n
   uniform sampler2D sGloss;\n
   uniform lowp vec4 uColor;\n
-  uniform lowp vec4 mixColor;\n
+  uniform lowp vec3 mixColor;\n
+  uniform lowp float opacity;\n
   uniform lowp float preMultipliedAlpha;\n
 
   lowp vec4 visualMixColor()\n
   {\n
-    return vec4( mixColor.rgb * mix( 1.0, mixColor.a, preMultipliedAlpha ), mixColor.a );\n
+    return vec4( mixColor * mix( 1.0, opacity, preMultipliedAlpha ), opacity );\n
   }\n
   void main()\n
   {\n
diff --git a/dali-toolkit/internal/visuals/npatch/npatch-visual.cpp b/dali-toolkit/internal/visuals/npatch/npatch-visual.cpp
index b2f0cbb..6ecb818 100644
--- a/dali-toolkit/internal/visuals/npatch/npatch-visual.cpp
+++ b/dali-toolkit/internal/visuals/npatch/npatch-visual.cpp
@@ -132,11 +132,12 @@ const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
   varying mediump vec2 vTexCoord;\n
   uniform sampler2D sTexture;\n
   uniform lowp vec4 uColor;\n
-  uniform lowp vec4 mixColor;\n
+  uniform lowp vec3 mixColor;\n
+  uniform lowp float opacity;\n
   uniform lowp float preMultipliedAlpha;\n
   lowp vec4 visualMixColor()\n
   {\n
-    return vec4( mixColor.rgb * mix( 1.0, mixColor.a, preMultipliedAlpha ), mixColor.a );\n
+    return vec4( mixColor * mix( 1.0, opacity, preMultipliedAlpha ), opacity );\n
   }\n
   void main()\n
   {\n
diff --git a/dali-toolkit/internal/visuals/primitive/primitive-visual.cpp b/dali-toolkit/internal/visuals/primitive/primitive-visual.cpp
index 78f4c88..748564e 100644
--- a/dali-toolkit/internal/visuals/primitive/primitive-visual.cpp
+++ b/dali-toolkit/internal/visuals/primitive/primitive-visual.cpp
@@ -166,11 +166,11 @@ const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
   precision mediump float;\n
   varying   mediump vec3  vIllumination;\n
   uniform   lowp    vec4  uColor;\n
-  uniform   lowp    vec4  mixColor;\n
-
+  uniform   lowp    vec3  mixColor;\n
+  uniform   lowp    float opacity;\n
   void main()\n
   {\n
-    vec4 baseColor = mixColor * uColor;\n
+      vec4 baseColor = vec4(mixColor, opacity) * uColor;\n
     gl_FragColor = vec4( vIllumination.rgb * baseColor.rgb, baseColor.a );\n
   }\n
 );
@@ -225,7 +225,16 @@ void PrimitiveVisual::DoSetProperties( const Property::Map& propertyMap )
     Vector4 color;
     if( colorValue->Get( color ) )
     {
-      SetMixColor( color );
+      Property::Type type = colorValue->GetType();
+      if( type == Property::VECTOR4 )
+      {
+        SetMixColor( color );
+      }
+      else if( type == Property::VECTOR3 )
+      {
+        Vector3 color3(color);
+        SetMixColor( color3 );
+      }
     }
   }
 
@@ -455,7 +464,7 @@ void PrimitiveVisual::InitializeRenderer()
   // Register transform properties
   mImpl->mTransform.RegisterUniforms( mImpl->mRenderer, Direction::LEFT_TO_RIGHT );
 
-  mImpl->mMixColorIndex = DevelHandle::RegisterProperty( mImpl->mRenderer, Toolkit::PrimitiveVisual::Property::MIX_COLOR, MIX_COLOR, mImpl->mMixColor );
+  mImpl->mMixColorIndex = DevelHandle::RegisterProperty( mImpl->mRenderer, Toolkit::PrimitiveVisual::Property::MIX_COLOR, MIX_COLOR, Vector3(mImpl->mMixColor) );
 }
 
 void PrimitiveVisual::UpdateShaderUniforms()
diff --git a/dali-toolkit/internal/visuals/text/text-visual.cpp b/dali-toolkit/internal/visuals/text/text-visual.cpp
index 280fac2..55b1478 100644
--- a/dali-toolkit/internal/visuals/text/text-visual.cpp
+++ b/dali-toolkit/internal/visuals/text/text-visual.cpp
@@ -128,12 +128,13 @@ const char* FRAGMENT_SHADER_ATLAS_CLAMP = DALI_COMPOSE_SHADER(
     uniform sampler2D sTexture;\n
     uniform mediump vec4 uAtlasRect;\n
     uniform lowp vec4 uColor;\n
-    uniform lowp vec4 mixColor;\n
+    uniform lowp vec3 mixColor;\n
+    uniform lowp float opacity;\n
     \n
     void main()\n
     {\n
       mediump vec2 texCoord = clamp( mix( uAtlasRect.xy, uAtlasRect.zw, vTexCoord ), uAtlasRect.xy, uAtlasRect.zw );\n
-      gl_FragColor = texture2D( sTexture, texCoord ) * uColor * mixColor;\n
+      gl_FragColor = texture2D( sTexture, texCoord ) * uColor * vec4( mixColor, opacity );\n
     }\n
 );
 
diff --git a/dali-toolkit/internal/visuals/visual-base-data-impl.cpp b/dali-toolkit/internal/visuals/visual-base-data-impl.cpp
index 8990c9a..19c2c74 100644
--- a/dali-toolkit/internal/visuals/visual-base-data-impl.cpp
+++ b/dali-toolkit/internal/visuals/visual-base-data-impl.cpp
@@ -90,6 +90,7 @@ Internal::Visual::Base::Impl::Impl()
   mControlSize( Vector2::ZERO ),
   mDepthIndex( 0.0f ),
   mMixColorIndex( Property::INVALID_INDEX ),
+  mOpacityIndex( Property::INVALID_INDEX ),
   mFlags( 0 )
 {
 }
diff --git a/dali-toolkit/internal/visuals/visual-base-data-impl.h b/dali-toolkit/internal/visuals/visual-base-data-impl.h
index 999b41c..347cf7d 100644
--- a/dali-toolkit/internal/visuals/visual-base-data-impl.h
+++ b/dali-toolkit/internal/visuals/visual-base-data-impl.h
@@ -122,6 +122,7 @@ struct Base::Impl
   Size            mControlSize;
   float           mDepthIndex;
   Property::Index mMixColorIndex;
+  Property::Index mOpacityIndex;
   int             mFlags;
 };
 
diff --git a/dali-toolkit/internal/visuals/visual-base-impl.cpp b/dali-toolkit/internal/visuals/visual-base-impl.cpp
index 701da0e..0d2b050 100644
--- a/dali-toolkit/internal/visuals/visual-base-impl.cpp
+++ b/dali-toolkit/internal/visuals/visual-base-impl.cpp
@@ -24,6 +24,8 @@
 #include <dali/integration-api/debug.h>
 
 //INTERNAL HEARDER
+#include <dali-toolkit/public-api/visuals/color-visual-properties.h>
+#include <dali-toolkit/public-api/visuals/primitive-visual-properties.h>
 #include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
 #include <dali-toolkit/internal/visuals/visual-base-data-impl.h>
 #include <dali-toolkit/internal/visuals/visual-string-constants.h>
@@ -94,6 +96,10 @@ void Visual::Base::SetProperties( const Property::Map& propertyMap )
       {
         matchKey = Property::Key( DevelVisual::Property::MIX_COLOR );
       }
+      else if( matchKey == OPACITY )
+      {
+        matchKey = Property::Key( DevelVisual::Property::OPACITY );
+      }
     }
 
     switch( matchKey.indexKey )
@@ -133,7 +139,25 @@ void Visual::Base::SetProperties( const Property::Map& propertyMap )
         Vector4 mixColor;
         if( value.Get( mixColor ) )
         {
-          SetMixColor( mixColor );
+          if( value.GetType() == Property::VECTOR4 )
+          {
+            SetMixColor( mixColor );
+          }
+          else
+          {
+            Vector3 mixColor3(mixColor);
+            SetMixColor( mixColor3 );
+          }
+        }
+        break;
+      }
+      case DevelVisual::Property::OPACITY:
+      {
+        float opacity;
+        if( value.Get( opacity ) )
+        {
+          mImpl->mMixColor.a = opacity;
+          SetMixColor( mImpl->mMixColor );
         }
         break;
       }
@@ -236,6 +260,7 @@ void Visual::Base::SetOffStage( Actor& actor )
   {
     DoSetOffStage( actor );
     mImpl->mMixColorIndex = Property::INVALID_INDEX;
+    mImpl->mOpacityIndex = Property::INVALID_INDEX;
     mImpl->mFlags &= ~Impl::IS_ON_STAGE;
   }
 }
@@ -258,7 +283,8 @@ void Visual::Base::CreatePropertyMap( Property::Map& map ) const
 
   // Note, Color and Primitive will also insert their own mix color into the map
   // which is ok, because they have a different key value range.
-  map.Insert( DevelVisual::Property::MIX_COLOR, GetMixColor() );
+  map.Insert( DevelVisual::Property::MIX_COLOR, mImpl->mMixColor ); // vec4
+  map.Insert( DevelVisual::Property::OPACITY, mImpl->mMixColor.a );
 }
 
 void Visual::Base::EnablePreMultipliedAlpha( bool preMultipled )
@@ -309,20 +335,29 @@ void Visual::Base::RegisterMixColor()
       mImpl->mRenderer,
       Toolkit::DevelVisual::Property::MIX_COLOR,
       MIX_COLOR,
-      mImpl->mMixColor );
+      Vector3(mImpl->mMixColor) );
+  }
 
-    if( mImpl->mMixColor.a < 1.f )
-    {
-      mImpl->mRenderer.SetProperty( Renderer::Property::BLEND_MODE, BlendMode::ON );
-    }
+  if( mImpl->mMixColor.a < 1.f )
+  {
+    mImpl->mRenderer.SetProperty( Renderer::Property::BLEND_MODE, BlendMode::ON );
+  }
 
-    float preMultipliedAlpha = 0.0f;
-    if( IsPreMultipliedAlphaEnabled() )
-    {
-      preMultipliedAlpha = 1.0f;
-    }
-    mImpl->mRenderer.RegisterProperty( "preMultipliedAlpha", preMultipliedAlpha );
+  if( mImpl->mOpacityIndex == Property::INVALID_INDEX )
+  {
+    mImpl->mOpacityIndex = DevelHandle::RegisterProperty(
+      mImpl->mRenderer,
+      Toolkit::DevelVisual::Property::OPACITY,
+      OPACITY,
+      mImpl->mMixColor.a );
   }
+
+  float preMultipliedAlpha = 0.0f;
+  if( IsPreMultipliedAlphaEnabled() )
+  {
+    preMultipliedAlpha = 1.0f;
+  }
+  mImpl->mRenderer.RegisterProperty( "preMultipliedAlpha", preMultipliedAlpha );
 }
 
 void Visual::Base::SetMixColor( const Vector4& color )
@@ -331,7 +366,8 @@ void Visual::Base::SetMixColor( const Vector4& color )
 
   if( mImpl->mRenderer )
   {
-    mImpl->mRenderer.SetProperty( mImpl->mMixColorIndex, color );
+    mImpl->mRenderer.SetProperty( mImpl->mMixColorIndex, Vector3(color) );
+    mImpl->mRenderer.SetProperty( mImpl->mOpacityIndex, color.a );
     if( color.a < 1.f )
     {
       mImpl->mRenderer.SetProperty( Renderer::Property::BLEND_MODE, BlendMode::ON );
@@ -339,6 +375,18 @@ void Visual::Base::SetMixColor( const Vector4& color )
   }
 }
 
+void Visual::Base::SetMixColor( const Vector3& color )
+{
+  mImpl->mMixColor.r = color.r;
+  mImpl->mMixColor.g = color.g;
+  mImpl->mMixColor.b = color.b;
+
+  if( mImpl->mRenderer )
+  {
+    mImpl->mRenderer.SetProperty( mImpl->mMixColorIndex, color );
+  }
+}
+
 const Vector4& Visual::Base::GetMixColor() const
 {
   return mImpl->mMixColor;
@@ -349,7 +397,6 @@ Renderer Visual::Base::GetRenderer()
   return mImpl->mRenderer;
 }
 
-
 Property::Index Visual::Base::GetPropertyIndex( Property::Key key )
 {
   Property::Index index = DevelHandle::GetPropertyIndex( mImpl->mRenderer, key );
@@ -385,7 +432,9 @@ Property::Index Visual::Base::GetPropertyIndex( Property::Key key )
 void Visual::Base::SetupTransition(
   Dali::Animation& transition,
   Internal::TransitionData::Animator& animator,
-  Property::Index index )
+  Property::Index index,
+  Property::Value& initialValue,
+  Property::Value& targetValue )
 {
   if( index != Property::INVALID_INDEX )
   {
@@ -393,13 +442,13 @@ void Visual::Base::SetupTransition(
     {
       if( animator.animate == false )
       {
-        mImpl->mRenderer.SetProperty( index, animator.targetValue );
+        mImpl->mRenderer.SetProperty( index, targetValue );
       }
       else
       {
         if( animator.initialValue.GetType() != Property::NONE )
         {
-          mImpl->mRenderer.SetProperty( index, animator.initialValue );
+          mImpl->mRenderer.SetProperty( index, initialValue );
         }
 
         if( ! transition )
@@ -408,7 +457,7 @@ void Visual::Base::SetupTransition(
         }
 
         transition.AnimateTo( Property( mImpl->mRenderer, index ),
-                              animator.targetValue,
+                              targetValue,
                               animator.alphaFunction,
                               TimePeriod( animator.timePeriodDelay,
                                           animator.timePeriodDuration ) );
@@ -429,44 +478,70 @@ void Visual::Base::AnimateProperty(
   }
 #endif
 
-  Property::Index index = Property::INVALID_INDEX;
-
-  bool isMixColor = false;
-  bool isMixColorOpaque = true;
+  Property::Map map;
+  DoCreatePropertyMap( map );
+  Property::Value* valuePtr = map.Find( Toolkit::DevelVisual::Property::TYPE );
+  int visualType;
+  valuePtr->Get(visualType);
 
-  // Get the property index
   if( animator.propertyKey == Toolkit::DevelVisual::Property::MIX_COLOR ||
-      animator.propertyKey == MIX_COLOR )
+      animator.propertyKey == MIX_COLOR ||
+      ( visualType == Toolkit::Visual::COLOR &&
+        animator.propertyKey == ColorVisual::Property::MIX_COLOR ) ||
+      ( visualType == Toolkit::Visual::PRIMITIVE &&
+        animator.propertyKey == PrimitiveVisual::Property::MIX_COLOR ) )
   {
-    isMixColor = true;
-    index = mImpl->mMixColorIndex;
-
-    Vector4 initialColor;
-    if( animator.initialValue.Get(initialColor) ) // if there is an initial color, test it
-    {
-      isMixColorOpaque = initialColor.a >= 1.0f;
-    }
-    else
-    {
-      isMixColorOpaque = mImpl->mMixColor.a >= 1.0f; // otherwise, test the current color
-    }
+    AnimateMixColorProperty( transition, animator );
+  }
+  else if(animator.propertyKey == Toolkit::DevelVisual::Property::OPACITY ||
+          animator.propertyKey == OPACITY )
+  {
+    AnimateOpacityProperty( transition, animator );
   }
   else if( mImpl->mRenderer )
   {
-    index = GetPropertyIndex( animator.propertyKey );
+    AnimateRendererProperty(transition, animator);
   }
+}
 
-  // Set target value into data store
-  if( animator.targetValue.GetType() != Property::NONE )
+void Visual::Base::AnimateOpacityProperty(
+  Dali::Animation& transition,
+  Internal::TransitionData::Animator& animator )
+{
+  Property::Index index = mImpl->mOpacityIndex;
+
+  bool isOpaque = mImpl->mMixColor.a >= 1.0f;
+
+  if( index != Property::INVALID_INDEX )
   {
-    if( isMixColor )
+    float initialOpacity;
+    if( animator.initialValue.Get( initialOpacity ) )
+    {
+      isOpaque = (initialOpacity >= 1.0f);
+    }
+
+    float targetOpacity;
+    if( animator.targetValue.Get( targetOpacity ) )
     {
-      animator.targetValue.Get( mImpl->mMixColor );
+      mImpl->mMixColor.a = targetOpacity;
     }
-    else
+
+    SetupTransition( transition, animator, index, animator.initialValue, animator.targetValue );
+    SetupBlendMode( transition, isOpaque, animator.animate );
+  }
+}
+
+void Visual::Base::AnimateRendererProperty(
+  Dali::Animation& transition,
+  Internal::TransitionData::Animator& animator )
+{
+  Property::Index index = GetPropertyIndex( animator.propertyKey );
+  if( index != Property::INVALID_INDEX )
+  {
+    if( animator.targetValue.GetType() != Property::NONE )
     {
-      // Note: there may be several of these calls if more than one
-      // transform property is animated.
+      // Try writing target value into transform property map
+      // if it's not a valid key, then it won't alter mTransform
       Property::Map map;
       if( animator.propertyKey.type == Property::Key::INDEX )
       {
@@ -479,28 +554,82 @@ void Visual::Base::AnimateProperty(
 
       mImpl->mTransform.UpdatePropertyMap( map );
     }
+
+    SetupTransition( transition, animator, index, animator.initialValue, animator.targetValue );
   }
+}
+
+void Visual::Base::AnimateMixColorProperty(
+  Dali::Animation& transition,
+  Internal::TransitionData::Animator& animator )
+{
+  Property::Index index = mImpl->mMixColorIndex;
+  bool animateOpacity = false;
+  bool isOpaque = true;
+
+  Property::Value initialOpacity;
+  Property::Value targetOpacity;
+  Property::Value initialMixColor;
+  Property::Value targetMixColor;
 
   if( index != Property::INVALID_INDEX )
   {
-    SetupTransition( transition, animator, index );
+    Vector4 initialColor;
+    if( animator.initialValue.Get(initialColor) )
+    {
+      if( animator.initialValue.GetType() == Property::VECTOR4 )
+      {
+        // if there is an initial color specifying alpha, test it
+        isOpaque = initialColor.a >= 1.0f;
+        initialOpacity = initialColor.a;
+      }
+      initialMixColor = Vector3( initialColor );
+    }
 
-    // For mix color, ensure the blend mode is on if the initial or final values are not opaque,
-    // and that it is turned off after the animation ends if the final value is opaque
-    if( isMixColor && (!isMixColorOpaque || mImpl->mMixColor.a < 1.0f) )
+    // Set target value into data store
+    if( animator.targetValue.GetType() != Property::NONE )
     {
-      mImpl->mRenderer.SetProperty( Renderer::Property::BLEND_MODE, BlendMode::ON );
+      Vector4 mixColor;
+      animator.targetValue.Get(mixColor);
+      if( animator.targetValue.GetType() == Property::VECTOR4 )
+      {
+        mImpl->mMixColor.a = mixColor.a;
+        targetOpacity = mixColor.a;
+        animateOpacity = true;
+      }
 
-      if( animator.animate == true && mImpl->mMixColor.a >= 1.0f )
+      mImpl->mMixColor.r = mixColor.r;
+      mImpl->mMixColor.g = mixColor.g;
+      mImpl->mMixColor.b = mixColor.b;
+      targetMixColor = Vector3(mixColor);
+    }
+
+    SetupTransition( transition, animator, index, initialMixColor, targetMixColor );
+    if( animateOpacity )
+    {
+      SetupTransition( transition, animator, mImpl->mOpacityIndex, initialOpacity, targetOpacity );
+      SetupBlendMode( transition, isOpaque, animator.animate );
+    }
+  }
+}
+
+void Visual::Base::SetupBlendMode( Animation& transition, bool isInitialOpaque, bool animating )
+{
+  // Ensure the blend mode is turned on if we are animating opacity, and
+  // turned off after the animation ends if the final value is opaque
+  if( ! isInitialOpaque || mImpl->mMixColor.a < 1.0f )
+  {
+    mImpl->mRenderer.SetProperty( Renderer::Property::BLEND_MODE, BlendMode::ON );
+
+    if( animating == true && mImpl->mMixColor.a >= 1.0f )
+    {
+      // When it becomes opaque, set the blend mode back to automatically
+      if( ! mImpl->mBlendSlotDelegate )
       {
-        // When it becomes opaque, set the blend mode back to automatically
-        if( ! mImpl->mBlendSlotDelegate )
-        {
-          mImpl->mBlendSlotDelegate = new SlotDelegate<Visual::Base>(this);
-        }
-        transition.FinishedSignal().Connect( *(mImpl->mBlendSlotDelegate),
-                                             &Visual::Base::OnMixColorFinished );
+        mImpl->mBlendSlotDelegate = new SlotDelegate<Visual::Base>(this);
       }
+      transition.FinishedSignal().Connect( *(mImpl->mBlendSlotDelegate),
+                                           &Visual::Base::OnMixColorFinished );
     }
   }
 }
diff --git a/dali-toolkit/internal/visuals/visual-base-impl.h b/dali-toolkit/internal/visuals/visual-base-impl.h
index 1722964..e7d8ddd 100644
--- a/dali-toolkit/internal/visuals/visual-base-impl.h
+++ b/dali-toolkit/internal/visuals/visual-base-impl.h
@@ -166,12 +166,18 @@ public:
   Renderer GetRenderer();
 
   /**
-   * Sets the mix color of the visual.
+   * Sets the mix color ( including opacity )  of the visual.
    * @param[in] mixColor The new mix color
    */
   void SetMixColor( const Vector4& color );
 
   /**
+   * Sets the mix color of the visual.
+   * @param[in] mixColor The new mix color
+   */
+  void SetMixColor( const Vector3& color );
+
+  /**
    * Gets the mix color of the visual.
    * @return The mix color
    */
@@ -285,10 +291,62 @@ private:
    * @param[in] transition The transition to use or set up.
    * @param[in] animator The animation data to use
    * @param[in] index The property index on the renderer to animate
+   * @param[in] initialValue The optional initial value
+   * @param[in] targetValue The target value to use
    */
   void SetupTransition( Dali::Animation& transition,
                         Internal::TransitionData::Animator& animator,
-                        Property::Index index );
+                        Property::Index index,
+                        Property::Value& initialValue,
+                        Property::Value& targetValue );
+
+  /**
+   * Animate the opacity property - Special handling to
+   * ensure that the blend mode is set to ON whilst animating,
+   * and set back to AUTO if it's opaque at the end of the
+   * animation.
+   *
+   * @param[in] transition The transition to use or set up.
+   * @param[in] animator The animation data to use
+   */
+  void AnimateOpacityProperty( Dali::Animation& transition,
+                               Internal::TransitionData::Animator& animator );
+
+  /**
+   * Animate the renderer property - no special handling
+   *
+   * @param[in] transition The transition to use or set up.
+   * @param[in] animator The animation data to use
+   */
+  void AnimateRendererProperty( Dali::Animation& transition,
+                                Internal::TransitionData::Animator& animator );
+
+  /**
+   * Animate the mix color property.
+   *
+   * If the animator is a vec3, then it only animates the color
+   * channels without animating the opacity.  If it's a vec4, then it
+   * runs 2 animators, one for the the vec3 mixColor, and one for the
+   * opacity. (They are separate uniforms in the shader )
+   *
+   * @param[in] transition The transition to use or set up.
+   * @param[in] animator The animation data to use
+   */
+  void AnimateMixColorProperty( Dali::Animation& transition,
+                                Internal::TransitionData::Animator& animator );
+
+  /**
+   * Set up the right blend mode if the opacity is being animated.
+   * Also ensure that when the animation finishes, the blend mode is
+   * set to the appropriate value. It also uses the target value as
+   * set into mMixColor.
+   *
+   * @param[in] transition The transition to listen to
+   * @param[in] isInitialOpaque Whether the initial value is opaque
+   * @param[in] animating If the transition animates the value.
+   */
+  void SetupBlendMode( Dali::Animation& transition,
+                       bool isInitialOpaque, bool animating );
 
   /**
    * When a mix color animation has finished, ensure the blend mode is set back
diff --git a/dali-toolkit/internal/visuals/visual-string-constants.cpp b/dali-toolkit/internal/visuals/visual-string-constants.cpp
index 864227e..c57a8cf 100644
--- a/dali-toolkit/internal/visuals/visual-string-constants.cpp
+++ b/dali-toolkit/internal/visuals/visual-string-constants.cpp
@@ -66,6 +66,7 @@ const char * const PREMULTIPLIED_ALPHA( "premultipliedAlpha" );
 
 // Mix color
 const char * const MIX_COLOR( "mixColor" );
+const char * const OPACITY( "opacity" );
 
 // Image visual
 const char * const IMAGE_URL_NAME( "url" );
diff --git a/dali-toolkit/internal/visuals/visual-string-constants.h b/dali-toolkit/internal/visuals/visual-string-constants.h
index 8079d34..1a8df73 100644
--- a/dali-toolkit/internal/visuals/visual-string-constants.h
+++ b/dali-toolkit/internal/visuals/visual-string-constants.h
@@ -56,6 +56,7 @@ extern const char * const PREMULTIPLIED_ALPHA;
 
 // Mix color
 extern const char * const MIX_COLOR;
+extern const char * const OPACITY;
 
 // Image visual
 extern const char * const IMAGE_URL_NAME;
diff --git a/dali-toolkit/internal/visuals/wireframe/wireframe-visual.cpp b/dali-toolkit/internal/visuals/wireframe/wireframe-visual.cpp
index 0a5221d..764ba27 100644
--- a/dali-toolkit/internal/visuals/wireframe/wireframe-visual.cpp
+++ b/dali-toolkit/internal/visuals/wireframe/wireframe-visual.cpp
@@ -67,12 +67,13 @@ void main()\n
 );
 
 const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER(\n
-uniform lowp vec4 uColor;\n
-uniform lowp vec4 mixColor;\n
+  uniform lowp vec4 uColor;\n
+  uniform lowp vec3 mixColor;\n
+  uniform lowp float opacity;\n
 \n
 void main()\n
 {\n
-  gl_FragColor = uColor*mixColor;\n
+  gl_FragColor = uColor * vec4( mixColor, opacity );\n
 }\n
 );