Added a stylable transition to styling example.

Added Enable / Disable transitions to ImageChannelControl which can be set via the style sheet. Added a Visibility attribute to ImageChannelControl which forces the enable / disable transition to be executed when the visibility changes. Added 3 different transitions to the style sheet: 1) a cross fade 2) a longer cross fade 3) a scale change. Change-Id: I82a1f0e4e4c89ae0bdcb1c59ce01a0a918f17afd Signed-off-by: David Steele <david.steele@samsung.com>

Added a stylable transition to styling example.
Added Enable / Disable transitions to ImageChannelControl which can be set via the style sheet. Added a Visibility attribute to ImageChannelControl which forces the enable / disable transition to be executed when the visibility changes. Added 3 different transitions to the style sheet: 1) a cross fade 2) a longer cross fade 3) a scale change. Change-Id: I82a1f0e4e4c89ae0bdcb1c59ce01a0a918f17afd Signed-off-by: David Steele <david.steele@samsung.com>
David Steele
1 parent 2f41a309
Showing 12 changed files with 555 additions and 62 deletions
examples/styling/image-channel-control-impl.cpp
examples/styling/image-channel-control-impl.h
examples/styling/image-channel-control.cpp
examples/styling/image-channel-control.h
examples/styling/styling-application.cpp
examples/styling/styling-application.h
resources/style/mobile/style-example-theme-one.json.in
resources/style/mobile/style-example-theme-three.json.in
resources/style/mobile/style-example-theme-two.json.in
resources/style/style-example-theme-one.json.in
resources/style/style-example-theme-three.json.in
resources/style/style-example-theme-two.json.in
@@ -18,6 +18,7 @@
 #include <dali-toolkit/dali-toolkit.h>
 #include <dali/public-api/object/type-registry-helper.h>
 #include <dali-toolkit/devel-api/visual-factory/visual-factory.h>
+#include <cstdio>
 using namespace Dali; // Needed for macros
@@ -53,6 +54,11 @@ DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, &quot;redChannel&quot;, FLOAT, RED_
 DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "greenChannel", FLOAT, GREEN_CHANNEL );
 DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "blueChannel", FLOAT, BLUE_CHANNEL );
+DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "visibility", BOOLEAN, VISIBILITY );
+DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "enableVisibilityTransition", ARRAY, ENABLE_VISIBILITY_TRANSITION );
+DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "disableVisibilityTransition", ARRAY, DISABLE_VISIBILITY_TRANSITION );
+
+DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "imageVisual", MAP, IMAGE_VISUAL );
 DALI_TYPE_REGISTRATION_END();
 } // anonymous namespace
@@ -60,7 +66,9 @@ DALI_TYPE_REGISTRATION_END();
 Internal::ImageChannelControl::ImageChannelControl()
 : Control( ControlBehaviour( REQUIRES_STYLE_CHANGE_SIGNALS ) ),
-  mChannels( 1.0f, 1.0f, 1.0f )
+  mChannels( 1.0f, 1.0f, 1.0f ),
+  mVisibility(true),
+  mTargetVisibility(true)
 {
 }
@@ -90,10 +98,60 @@ void ImageChannelControl::SetImage( const std::string&amp; url )
   properties[Dali::Toolkit::ImageVisual::Property::URL] = url;
   Dali::Toolkit::InitializeVisual( self, mVisual, properties );
+  RegisterVisual( Demo::ImageChannelControl::Property::IMAGE_VISUAL, self, mVisual );
+  mVisual.SetName("imageVisual");
   RelayoutRequest();
 }
+void ImageChannelControl::SetVisibility( bool visibility )
+{
+  printf("ImageChannelControl %s: SetVisibility( %s )\n", Self().GetName().c_str(), visibility?"T":"F" );
+
+  Animation animation;
+
+  if( mAnimation )
+  {
+    mAnimation.Stop();
+    mAnimation.FinishedSignal().Disconnect( this, &ImageChannelControl::OnStateChangeAnimationFinished );
+    OnStateChangeAnimationFinished(mAnimation);
+  }
+
+  if( mVisibility != visibility )
+  {
+    if( mVisibility )
+    {
+      if( mDisableVisibilityTransition.Count() > 0 )
+      {
+        mAnimation = CreateTransition( mDisableVisibilityTransition );
+      }
+    }
+    else
+    {
+      if( mEnableVisibilityTransition.Count() > 0 )
+      {
+        mAnimation = CreateTransition( mEnableVisibilityTransition );
+      }
+    }
+  }
+
+  if( mAnimation )
+  {
+    mAnimation.FinishedSignal().Connect( this, &ImageChannelControl::OnStateChangeAnimationFinished );
+    mAnimation.Play();
+    mTargetVisibility = visibility;
+  }
+  else
+  {
+    mVisibility = visibility;
+  }
+}
+
+void ImageChannelControl::OnStateChangeAnimationFinished( Animation& src )
+{
+  mVisibility = mTargetVisibility;
+}
+
 void ImageChannelControl::OnInitialize()
 {
   Actor self = Self();
@@ -144,6 +202,12 @@ Vector3 ImageChannelControl::GetNaturalSize()
   return Vector3::ZERO;
 }
+void ImageChannelControl::OnStyleChange( Toolkit::StyleManager styleManager, StyleChange::Type change )
+{
+  // Chain up.
+  Control::OnStyleChange( styleManager, change );
+}
+
 ///////////////////////////////////////////////////////////
 //
@@ -154,12 +218,55 @@ void ImageChannelControl::SetProperty( BaseObject* object, Property::Index index
 {
   Demo::ImageChannelControl imageChannelControl = Demo::ImageChannelControl::DownCast( Dali::BaseHandle( object ) );
-  if ( imageChannelControl )
+  if( imageChannelControl )
   {
     ImageChannelControl& impl = GetImpl( imageChannelControl );
     Actor self = impl.Self();
     switch ( index )
     {
+      case Demo::ImageChannelControl::Property::RESOURCE_URL:
+      {
+        impl.SetImage( value.Get<std::string>() );
+        break;
+      }
+      case Demo::ImageChannelControl::Property::IMAGE_VISUAL:
+      {
+        Property::Map* map = value.GetMap();
+        if( map )
+        {
+          Dali::Toolkit::InitializeVisual( self, impl.mVisual, *map );
+        }
+        break;
+      }
+      case Demo::ImageChannelControl::Property::VISIBILITY:
+      {
+        impl.SetVisibility( value.Get<bool>() );
+        break;
+      }
+      case Demo::ImageChannelControl::Property::ENABLE_VISIBILITY_TRANSITION:
+      {
+        if( value.GetType() == Property::ARRAY )
+        {
+          impl.mEnableVisibilityTransition = Toolkit::TransitionData::New( *value.GetArray());
+        }
+        else if( value.GetType() == Property::MAP )
+        {
+          impl.mEnableVisibilityTransition = Toolkit::TransitionData::New( *value.GetMap() );
+        }
+        break;
+      }
+      case Demo::ImageChannelControl::Property::DISABLE_VISIBILITY_TRANSITION:
+      {
+        if( value.GetType() == Property::ARRAY )
+        {
+          impl.mDisableVisibilityTransition = Toolkit::TransitionData::New( *value.GetArray());
+        }
+        else if( value.GetType() == Property::MAP )
+        {
+          impl.mDisableVisibilityTransition = Toolkit::TransitionData::New( *value.GetMap() );
+        }
+        break;
+      }
       case Demo::ImageChannelControl::Property::RED_CHANNEL:
       {
         impl.mChannels[0] = value.Get<float>();
@@ -208,6 +315,13 @@ Property::Value ImageChannelControl::GetProperty( BaseObject* object, Property::
         value = impl.mChannels[2];
         break;
       }
+      case Demo::ImageChannelControl::Property::VISIBILITY:
+      {
+        value = impl.mVisibility;
+        break;
+      }
+      default:
+        break;
     }
   }
@@ -18,8 +18,10 @@
  */
 #include "image-channel-control.h"
+#include <dali/public-api/animation/animation.h>
 #include <dali-toolkit/public-api/controls/control-impl.h>
 #include <dali-toolkit/devel-api/visual-factory/visual-base.h>
+#include <dali-toolkit/devel-api/visual-factory/transition-data.h>
 namespace Demo
 {
@@ -43,6 +45,11 @@ public: // API
    */
   void SetImage( const std::string& url );
+  /**
+   * @copydoc ImageChannelControl::SetVisibility
+   */
+  void SetVisibility( bool visibility );
+
 public:  // Properties
   /**
    * Called when a property of an object of this type is set.
@@ -86,6 +93,14 @@ private: // From Control
    */
   virtual Dali::Vector3 GetNaturalSize();
+  /**
+   * @copydoc Toolkit::Control::OnStyleChange
+   */
+  virtual void OnStyleChange( Dali::Toolkit::StyleManager styleManager, Dali::StyleChange::Type change );
+
+private:
+  void OnStateChangeAnimationFinished(Dali::Animation& handle);
+
 private:
   //undefined
   ImageChannelControl( const ImageChannelControl& );
@@ -96,7 +111,12 @@ private:
   std::string mUrl;
   Dali::Toolkit::Visual::Base mVisual;
   Dali::Vector3 mChannels;
+  Dali::Toolkit::TransitionData mEnableVisibilityTransition;
+  Dali::Toolkit::TransitionData mDisableVisibilityTransition;
+  Dali::Animation mAnimation;
   Dali::Property::Index mChannelIndex;
+  bool mVisibility:1;
+  bool mTargetVisibility:1;
 };
 } // Internal
@@ -65,6 +65,11 @@ void ImageChannelControl::SetImage( const std::string&amp; url )
   GetImpl( *this ).SetImage( url );
 }
+void ImageChannelControl::SetVisibility( bool visibility )
+{
+  GetImpl( *this ).SetVisibility( visibility );
+}
+
 ImageChannelControl::ImageChannelControl( Internal::ImageChannelControl& implementation )
 : Control( implementation )
 {
@@ -42,7 +42,6 @@ public:
   {
     PROPERTY_START_INDEX = Dali::Toolkit::Control::CONTROL_PROPERTY_END_INDEX + 1,
     PROPERTY_END_INDEX   = PROPERTY_START_INDEX + 1000,
-
     ANIMATABLE_PROPERTY_START_INDEX = Dali::ANIMATABLE_PROPERTY_REGISTRATION_START_INDEX,
     ANIMATABLE_PROPERTY_END_INDEX = ANIMATABLE_PROPERTY_START_INDEX+1000
   };
@@ -51,11 +50,14 @@ public:
   {
     enum
     {
-
       RESOURCE_URL = PROPERTY_START_INDEX,
       RED_CHANNEL,
       GREEN_CHANNEL,
-      BLUE_CHANNEL
+      BLUE_CHANNEL,
+      VISIBILITY,
+      ENABLE_VISIBILITY_TRANSITION,
+      DISABLE_VISIBILITY_TRANSITION,
+      IMAGE_VISUAL
     };
   };
@@ -106,6 +108,11 @@ public: // API
    */
   void SetImage( const std::string& url );
+  /**
+   * Set the visibility of this control
+   */
+  void SetVisibility( bool visibility );
+
 public: // Not for public use
   /**
    * Create a handle from an implementation
@@ -198,14 +198,41 @@ void StylingApplication::Create( Application&amp; application )
   mRadioButtons[0].SetSelected( true );
-  mImageChannelControl = ImageChannelControl::New( BIG_IMAGE_1 );
-  mImageChannelControl.SetName("ImageChannelControl");
-  mImageChannelControl.SetResizePolicy( ResizePolicy::FILL_TO_PARENT , Dimension::ALL_DIMENSIONS );
-  mImageChannelControl.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO );
-  imageSelectLayout.AddChild( mImageChannelControl, TableView::CellPosition( 0, 1 ) );
-
+  mImagePlacement = Actor::New();
+  mImagePlacement.SetParentOrigin( ParentOrigin::CENTER );
+  mImagePlacement.SetAnchorPoint( AnchorPoint::CENTER );
+  mImagePlacement.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+  imageSelectLayout.AddChild( mImagePlacement, TableView::CellPosition( 0, 1 ) );
   imageSelectLayout.SetCellAlignment( TableView::CellPosition( 0, 1 ), HorizontalAlignment::RIGHT, VerticalAlignment::CENTER );
+  mIcc1 = ImageChannelControl::New( BIG_IMAGE_1 );
+  mIcc1.SetName("ICC1");
+  mIcc1.SetResizePolicy( ResizePolicy::FILL_TO_PARENT , Dimension::ALL_DIMENSIONS );
+  mIcc1.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO );
+  mIcc1.SetParentOrigin( ParentOrigin::CENTER );
+  mIcc1.SetVisibility( true );
+  
+  mImagePlacement.Add( mIcc1 );
+
+  mIcc2 = ImageChannelControl::New( BIG_IMAGE_2 );
+  mIcc2.SetName("ICC2");
+  mIcc2.SetResizePolicy( ResizePolicy::FILL_TO_PARENT , Dimension::ALL_DIMENSIONS );
+  mIcc2.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO );
+  mIcc2.SetParentOrigin( ParentOrigin::CENTER );
+  mIcc2.SetVisibility( false );
+
+  mImagePlacement.Add( mIcc2 );
+
+  mIcc3 = ImageChannelControl::New( BIG_IMAGE_3 );
+  mIcc3.SetName("ICC3");
+  mIcc3.SetResizePolicy( ResizePolicy::FILL_TO_PARENT , Dimension::ALL_DIMENSIONS );
+  mIcc3.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO );
+  mIcc3.SetParentOrigin( ParentOrigin::CENTER );
+  mIcc3.SetVisibility( false );
+
+  mImagePlacement.Add( mIcc3 );
+
+  mImageChannelControl = mIcc1;
   TableView channelSliderLayout = TableView::New( 3, 3 );
   channelSliderLayout.SetName("ChannelSliderLayout");
@@ -451,23 +478,40 @@ TextLabel StylingApplication::CreateTitle( std::string title )
 bool StylingApplication::OnButtonStateChange( Button button )
 {
-  // Todo: save / restore slider states per image
+  // On button press, called twice, once to tell new button it's selected,
+  // once to tell old button it isn't selected?
+
+// Todo: save / restore slider states per image
-  if( mImageChannelControl )
+  if( button.IsSelected() )
   {
+
+    ImageChannelControl prevIcc = mImageChannelControl;
+
     if( mRadioButtons[0].IsSelected() )
     {
-      mImageChannelControl.SetImage( BIG_IMAGE_1 );
+      mImageChannelControl = mIcc1;
     }
     else if( mRadioButtons[1].IsSelected() )
     {
-      mImageChannelControl.SetImage( BIG_IMAGE_2 );
+      mImageChannelControl = mIcc2;
     }
     else if( mRadioButtons[2].IsSelected() )
     {
-      mImageChannelControl.SetImage( BIG_IMAGE_3 );
+      mImageChannelControl = mIcc3;
+    }
+
+    if( prevIcc )
+    {
+      prevIcc.SetVisibility( false );
+    }
+
+    if( mImageChannelControl )
+    {
+      mImageChannelControl.SetVisibility( true );
     }
   }
+
   return true;
 }
@@ -512,6 +556,7 @@ bool StylingApplication::OnThemeButtonClicked( Button button )
       break;
     }
   }
+
   StyleManager::Get().ApplyTheme( themePath );
   return true;
@@ -87,6 +87,10 @@ private:
   PushButton mThemeButtons[3];
   PushButton mResetButton;
   ImageChannelControl mImageChannelControl;
+  ImageChannelControl mIcc1;
+  ImageChannelControl mIcc2;
+  ImageChannelControl mIcc3;
+  Actor mImagePlacement;
   Popup mResetPopup;
   PanGestureDetector mPanGestureDetector;
 };
 {
   "styles":
   {
-    "title":{
+    "Title":{
       "textColor":"#0000ff",
       "background":
       {
@@ -9,59 +9,107 @@
         "mixColor": [ 1.0, 1.0, 1.0, 1.0 ]
       }
     },
-    "tableview":{
+    "TableView":{
       "background":
       {
         "visualType":"COLOR",
         "mixColor": [ 1.0, 1.0, 1.0, 0.03 ]
       }
     },
-    "flexcontainer":{
+    "FlexContainer":{
       "background":
       {
         "visualType":"COLOR",
         "mixColor": [ 1.0, 1.0, 1.0, 0.1 ]
       }
     },
-    "radiobutton":{
+    "RadioButton":{
       "label":{
         "textColor": [1,1,1,1]
       }
     },
-    "checkboxbutton":{
+    "CheckBoxButton":{
       "label":{
         "textColor": [1,1,1,1]
       }
     },
-    "colorLabel1":{
+    "ColorLabel1":{
       "textColor": [1,0,0,1]
     },
-    "colorLabel2":{
+    "ColorLabel2":{
       "textColor": [0,1,0,1]
     },
-    "colorLabel3":{
+    "ColorLabel3":{
       "textColor": [0.3,0.3,1,1]
     },
-    "themelabel":{
+    "ThemeLabel":{
       "textColor":[0,1,1,1]
     },
-    "popupTitle":{
+    "PopupTitle":{
       "textColor":[1,1,1,1]
     },
-    "popupBody":{
+    "PopupBody":{
       "textColor":[1,1,0,1]
     },
-    "textlabel":{
+    "TextLabel":{
       "textColor":[0,0,0,1]
     },
-    "colorSlider1":{
-      "styles":["slider"]
+    "ColorSlider1":{
+      "styles":["Slider"]
     },
-    "colorSlider2":{
+    "ColorSlider2":{
       "styles":["slider"]
     },
-    "colorSlider3":{
+    "ColorSlider3":{
       "styles":["slider"]
+    },
+    "ImageChannelControl":
+    {
+      "enableVisibilityTransition":
+      [
+        {
+          "target":"imageVisual",
+          "property":"colorAlpha",
+          "initialValue":0,
+          "targetValue":1,
+          "animator":
+          {
+            "alphaFunction":"EASE_IN_OUT",
+            "timePeriod":
+            {
+              "duration":0.25,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"imageVisual",
+          "property":"scale",
+          "targetValue":[1,1,1]
+        }
+      ],
+      "disableVisibilityTransition":
+      [
+        {
+          "target":"imageVisual",
+          "property":"colorAlpha",
+          "targetValue":0,
+          "animator":
+          {
+            "alphaFunction":"EASE_IN_OUT",
+            "timePeriod":
+            {
+              "duration":0.25,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"imageVisual",
+          "property":"scale",
+          "targetValue":[1,1,1]
+        }
+      ]
     }
   }
 }
 {
   "styles":
   {
-    "title":{
+    "Title":{
       "textColor":"#0000ff",
       "background":
       {
-        "rendererType":"color",
+        "visualType":"COLOR",
         "mixColor": [ 1.0, 1.0, 1.0, 1.0 ]
       }
     },
-    "tableview":{
+    "TableView":{
       "background":
       {
-        "rendererType":"color",
+        "visualType":"COLOR",
         "mixColor": [ 1.0, 1.0, 1.0, 0.03 ]
       }
     },
-    "radiobutton":{
+    "RadioButton":{
       "label":{
         "textColor": [1,1,1,1]
       }
     },
-    "checkboxbutton":{
+    "CheckboxButton":{
       "label":{
         "textColor": [1,1,1,1]
       }
     },
-    "colorLabel1":{
+    "ColorLabel1":{
       "textColor": [1,0,0,1]
     },
-    "colorLabel2":{
+    "ColorLabel2":{
       "textColor": [0,1,0,1]
     },
-    "colorLabel3":{
+    "ColorLabel3":{
       "textColor": [0.3,0.3,1,1]
     },
-    "themelabel":{
+    "ThemeLabel":{
       "textColor":[0,1,1,1]
     },
-    "popupTitle":{
+    "PopupTitle":{
       "textColor":[1,1,1,1]
     },
-    "popupBody":{
+    "PopupBody":{
       "textColor":[1,1,0,1]
     },
-    "textlabel":{
+    "TextLabel":{
       "textColor":[0,0,0,1]
+    },
+    "ImageChannelControl":
+    {
+      "enableVisibilityTransition":
+      [
+        {
+          "target":"imageVisual",
+          "property":"scale",
+          "initialValue":[0.1,0.1,0.1],
+          "targetValue":[1,1,1],
+          "animator":
+          {
+            "alphaFunction":"EASE_IN",
+            "timePeriod":
+            {
+              "duration":0.3,
+              "delay":0.1
+            }
+          }
+        },
+        {
+          "target":"imageVisual",
+          "property":"colorAlpha",
+          "targetValue":1
+        }
+      ],
+      "disableVisibilityTransition":
+      [
+        {
+          "target":"imageVisual",
+          "property":"scale",
+          "initialValue":[1,1,1],
+          "targetValue":[0.1,0.1,0.1],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT",
+            "timePeriod":
+            {
+              "duration":0.3,
+              "delay":0.0
+            }
+          }
+        },
+        {
+          "target":"imageVisual",
+          "property":"colorAlpha",
+          "targetValue":0,
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT",
+            "timePeriod":
+            {
+              "duration":0.3,
+              "delay":0.0
+            }
+          }
+        }
+      ]
     }
   }
 }
 {
   "constants":
   {
-    "DEMO_IMAGE_DIR":"@DEMO_STYLE_IMAGE_DIR@"
+    "STYLE_DIR":"{APPLICATION_RESOURCE_PATH}/style"
   },
   "styles":
   {
-    "title":{
+    "Title":{
       "textColor":"#0000ff",
       "background":
       {
@@ -13,7 +13,7 @@
         "mixColor": [ 1.0, 1.0, 1.0, 1.0 ]
       }
     },
-    "tableview":{
+    "TableView":{
       "background":
       {
         "visualType":"GRADIENT",
@@ -24,10 +24,10 @@
     },
     // Change an icon size, see if it gets properly re-sized
-    "radiobutton":{
-      "unselectedStateImage":"{DEMO_IMAGE_DIR}/radio-button-unselected.png",
-      "selectedStateImage":"{DEMO_IMAGE_DIR}/radio-button-selected.png",
-      "disabledStateImage":"{DEMO_IMAGE_DIR}/radio-button-unselected-disabled.png",
+    "RadioButton":{
+      "unselectedStateImage":"{STYLE_DIR}/images/radio-button-unselected.png",
+      "selectedStateImage":"{STYLE_DIR}/images/radio-button-selected.png",
+      "disabledStateImage":"{STYLE_DIR}/images/radio-button-unselected-disabled.png",
       "imageLabelGap":10,
       "label":{
         "textColor": [0.1,1,1,1]
@@ -58,11 +58,11 @@
     },
     // Note, this overrides any non-renamed label styles, e.g. those in a button.
-    "textlabel":{
+    "TextLabel":{
       //"textColor":[0,0,0,1]
     },
-    "thinslider":{
+    "ThinSlider":{
       "styles": ["slider"],
       "showPopup":true,
       "showValue":false,
@@ -75,23 +75,66 @@
       },
       "enabled":true
     },
-    "colorSlider1":{
-      "styles":["thinslider"],
+    "ColorSlider1":{
+      "styles":["ThinSlider"],
       "progressVisual":{
-        "url":"{DEMO_IMAGE_DIR}/slider-skin-progress-red.9.png"
+        "url":"{STYLE_DIR}/images/slider-skin-progress-red.9.png"
       }
     },
-    "colorSlider2":{
-      "styles":["thinslider"],
+    "ColorSlider2":{
+      "styles":["ThinSlider"],
       "progressVisual":{
-        "url":"{DEMO_IMAGE_DIR}/slider-skin-progress-green.9.png"
+        "url":"{STYLE_DIR}/images/slider-skin-progress-green.9.png"
       }
     },
-    "colorSlider3":{
+    "ColorSlider3":{
       "styles":["thinslider"],
       "progressVisual":{
-        "url":"{DEMO_IMAGE_DIR}/slider-skin-progress-blue.9.png"
+        "url":"{STYLE_DIR}/images/slider-skin-progress-blue.9.png"
       }
+    },
+    "ImageChannelControl":
+    {
+      "enableVisibilityTransition":
+      [
+        {
+          "target":"imageVisual",
+          "property":"colorAlpha",
+          "initialValue":0,
+          "targetValue":1,
+          "animator":
+          {
+            "alphaFunction":"EASE_IN_OUT",
+            "timePeriod":
+            {
+              "duration":0.4,
+              "delay":0
+            }
+          }
+        }
+      ],
+      "disableVisibilityTransition":
+      [
+        {
+          "target":"imageVisual",
+          "property":"colorAlpha",
+          "targetValue":0,
+          "animator":
+          {
+            "alphaFunction":"EASE_IN_OUT",
+            "timePeriod":
+            {
+              "duration":0.4,
+              "delay":0.2
+            }
+          }
+        },
+        {
+          "target":"imageVisual",
+          "property":"scale",
+          "targetValue":[1,1,1]
+        }
+      ]
     }
   }
 }
@@ -62,6 +62,54 @@
     },
     "ColorSlider3":{
       "styles":["slider"]
+    },
+    "ImageChannelControl":
+    {
+      "enableVisibilityTransition":
+      [
+        {
+          "target":"imageVisual",
+          "property":"colorAlpha",
+          "initialValue":0,
+          "targetValue":1,
+          "animator":
+          {
+            "alphaFunction":"EASE_IN_OUT",
+            "timePeriod":
+            {
+              "duration":0.25,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"imageVisual",
+          "property":"scale",
+          "targetValue":[1,1,1]
+        }
+      ],
+      "disableVisibilityTransition":
+      [
+        {
+          "target":"imageVisual",
+          "property":"colorAlpha",
+          "targetValue":0,
+          "animator":
+          {
+            "alphaFunction":"EASE_IN_OUT",
+            "timePeriod":
+            {
+              "duration":0.25,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"imageVisual",
+          "property":"scale",
+          "targetValue":[1,1,1]
+        }
+      ]
     }
   }
 }
@@ -46,6 +46,64 @@
     },
     "TextLabel":{
       "textColor":[0,0,0,1]
+    },
+    "ImageChannelControl":
+    {
+      "enableVisibilityTransition":
+      [
+        {
+          "target":"imageVisual",
+          "property":"scale",
+          "initialValue":[0.1,0.1,0.1],
+          "targetValue":[1,1,1],
+          "animator":
+          {
+            "alphaFunction":"EASE_IN",
+            "timePeriod":
+            {
+              "duration":0.3,
+              "delay":0.1
+            }
+          }
+        },
+        {
+          "target":"imageVisual",
+          "property":"colorAlpha",
+          "targetValue":1
+        }
+      ],
+      "disableVisibilityTransition":
+      [
+        {
+          "target":"imageVisual",
+          "property":"scale",
+          "initialValue":[1,1,1],
+          "targetValue":[0.1,0.1,0.1],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT",
+            "timePeriod":
+            {
+              "duration":0.3,
+              "delay":0.0
+            }
+          }
+        },
+        {
+          "target":"imageVisual",
+          "property":"colorAlpha",
+          "targetValue":0,
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT",
+            "timePeriod":
+            {
+              "duration":0.3,
+              "delay":0.0
+            }
+          }
+        }
+      ]
     }
   }
 }
@@ -92,6 +92,49 @@
       "progressVisual":{
         "url":"{STYLE_DIR}/images/slider-skin-progress-blue.9.png"
       }
+    },
+    "ImageChannelControl":
+    {
+      "enableVisibilityTransition":
+      [
+        {
+          "target":"imageVisual",
+          "property":"colorAlpha",
+          "initialValue":0,
+          "targetValue":1,
+          "animator":
+          {
+            "alphaFunction":"EASE_IN_OUT",
+            "timePeriod":
+            {
+              "duration":0.4,
+              "delay":0
+            }
+          }
+        }
+      ],
+      "disableVisibilityTransition":
+      [
+        {
+          "target":"imageVisual",
+          "property":"colorAlpha",
+          "targetValue":0,
+          "animator":
+          {
+            "alphaFunction":"EASE_IN_OUT",
+            "timePeriod":
+            {
+              "duration":0.4,
+              "delay":0.2
+            }
+          }
+        },
+        {
+          "target":"imageVisual",
+          "property":"scale",
+          "targetValue":[1,1,1]
+        }
+      ]
     }
   }
 }