Updated transition example to animate tick

The animation uses the pixel area and size to animate the tick when
the checkbox is enabled / disabled

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

diff --git a/examples/transitions/shadow-button-impl.cpp b/examples/transitions/shadow-button-impl.cpp
index aa82ce1..8a6ea56 100644 (file)
--- a/examples/transitions/shadow-button-impl.cpp
+++ b/examples/transitions/shadow-button-impl.cpp
@@ -45,7 +45,8 @@ DALI_TYPE_REGISTRATION_BEGIN( ShadowButton, Dali::Toolkit::Button, Create );
 
 DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "activeTransition", ARRAY, ACTIVE_TRANSITION );
 DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "inactiveTransition", ARRAY, INACTIVE_TRANSITION );
-DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "clickTransition", ARRAY, CLICK_TRANSITION );
+DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "checkTransition", ARRAY, CHECK_TRANSITION );
+DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "uncheckTransition", ARRAY, UNCHECK_TRANSITION );
 DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "backgroundVisual", MAP, BACKGROUND_VISUAL );
 DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "checkboxBgVisual", MAP, CHECKBOX_BG_VISUAL );
 DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "checkboxFgVisual", MAP, CHECKBOX_FG_VISUAL );
@@ -123,7 +124,18 @@ bool ShadowButton::GetActiveState()
 void ShadowButton::SetCheckState( bool checkState )
 {
   mCheckState = checkState;
-  EnableVisual( Demo::ShadowButton::Property::CHECKBOX_FG_VISUAL, mCheckState );
+  EnableVisual( Demo::ShadowButton::Property::CHECKBOX_FG_VISUAL, true );
+  if( Self().OnStage() )
+  {
+    if( checkState )
+    {
+      StartTransition( Demo::ShadowButton::Property::CHECK_TRANSITION );
+    }
+    else
+    {
+      StartTransition( Demo::ShadowButton::Property::UNCHECK_TRANSITION );
+    }
+  }
   RelayoutRequest();
 }
 
@@ -175,6 +187,11 @@ void ShadowButton::OnTransitionFinished( Animation& src )
           // Consider relayouting the text.
           break;
         }
+        case Demo::ShadowButton::Property::UNCHECK_TRANSITION:
+        {
+          EnableVisual( Demo::ShadowButton::Property::CHECKBOX_FG_VISUAL, false );
+          break;
+        }
       }
       break;
     }
@@ -328,7 +345,6 @@ void ShadowButton::ResetVisual(
   if( map )
   {
     visual = Toolkit::VisualFactory::Get().CreateVisual( *map );
-    RegisterVisual( index, visual );
 
     // Set the appropriate depth index.
     // @todo Should be able to set this from the style sheet
@@ -336,21 +352,25 @@ void ShadowButton::ResetVisual(
     {
       case Demo::ShadowButton::Property::BACKGROUND_VISUAL:
       {
+        RegisterVisual( index, visual );
         visual.SetDepthIndex(0.0f);
         break;
       }
       case Demo::ShadowButton::Property::CHECKBOX_BG_VISUAL:
       {
+        RegisterVisual( index, visual );
         visual.SetDepthIndex(1.0f);
         break;
       }
       case Demo::ShadowButton::Property::CHECKBOX_FG_VISUAL:
       {
+        RegisterVisual( index, visual, mCheckState );
         visual.SetDepthIndex(2.0f);
         break;
       }
       case Demo::ShadowButton::Property::LABEL_VISUAL:
       {
+        RegisterVisual( index, visual );
         visual.SetDepthIndex(1.0f);
         break;
       }
@@ -486,7 +506,8 @@ void ShadowButton::SetProperty( BaseObject* object, Property::Index index, const
       }
       case Demo::ShadowButton::Property::ACTIVE_TRANSITION:
       case Demo::ShadowButton::Property::INACTIVE_TRANSITION:
-      case Demo::ShadowButton::Property::CLICK_TRANSITION:
+      case Demo::ShadowButton::Property::CHECK_TRANSITION:
+      case Demo::ShadowButton::Property::UNCHECK_TRANSITION:
       {
         impl.ResetTransition( index, value );
         break;

diff --git a/examples/transitions/shadow-button.h b/examples/transitions/shadow-button.h
index 4df3e27..e06b3db 100644 (file)
--- a/examples/transitions/shadow-button.h
+++ b/examples/transitions/shadow-button.h
@@ -53,7 +53,8 @@ public:
     {
       ACTIVE_TRANSITION = PROPERTY_START_INDEX,
       INACTIVE_TRANSITION,
-      CLICK_TRANSITION,
+      CHECK_TRANSITION,
+      UNCHECK_TRANSITION,
       BACKGROUND_VISUAL,
       CHECKBOX_BG_VISUAL,
       CHECKBOX_FG_VISUAL,

diff --git a/examples/transitions/transition-application.cpp b/examples/transitions/transition-application.cpp
index 03799bf..2e90252 100644 (file)
--- a/examples/transitions/transition-application.cpp
+++ b/examples/transitions/transition-application.cpp
@@ -106,7 +106,6 @@ void TransitionApplication::Create( Application& application )
   mShadowButton = ShadowButton::New();
   mShadowButton.SetName("ShadowButton");
   mShadowButton.SetActiveState( false );
-  mShadowButton.SetCheckState( false );
   mShadowButton.SetAnchorPoint( AnchorPoint::CENTER );
   mShadowButton.SetParentOrigin( ParentOrigin::CENTER );
   mShadowButton.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
@@ -137,6 +136,7 @@ void TransitionApplication::Create( Application& application )
   }
   SetLabelText( mActionButtons[0], "Activate" );
   SetLabelText( mActionButtons[1], "Check" );
+  mActionButtons[1].SetProperty( Button::Property::DISABLED, true );
 
   contentLayout.Add( actionButtonLayout );
   contentLayout.SetFitHeight(2);
@@ -159,12 +159,21 @@ bool TransitionApplication::OnActionButtonClicked( Button button )
       {
         SetLabelText( button, "Deactivate" );
       }
+      mActionButtons[1].SetProperty( Button::Property::DISABLED, activeState );
       break;
     }
     case 1:
     {
       bool checkState = mShadowButton.GetCheckState();
       mShadowButton.SetCheckState( ! checkState );
+      if( checkState )
+      {
+        SetLabelText( button, "Check" );
+      }
+      else
+      {
+        SetLabelText( button, "Uncheck" );
+      }
       break;
     }
     case 2:

diff --git a/resources/style/mobile/style-example-theme-one.json.in b/resources/style/mobile/style-example-theme-one.json.in
index 7067cdd..6d6c7d8 100644 (file)
--- a/resources/style/mobile/style-example-theme-one.json.in
+++ b/resources/style/mobile/style-example-theme-one.json.in
@@ -312,6 +312,71 @@
             }
           }
         }
+      ],
+      "checkTransition":
+      [
+        {
+          "target":"checkboxFgVisual",
+          "property":"pixelArea",
+          "initialValue":[0.0, 0.0, 0.0, 1.0],
+          "targetValue":[0.0, 0.0, 1.0, 1.0],
+          "animator":
+          {
+            "alphaFunction":"EASE_IN",
+            "timePeriod":
+            {
+              "duration":0.4,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"checkboxFgVisual",
+          "property":"size",
+          "initialValue":[0.0, 0.37],
+          "targetValue":[0.12, 0.37],
+          "animator":
+          {
+            "alphaFunction":"EASE_IN",
+            "timePeriod":
+            {
+              "duration":0.4,
+              "delay":0
+            }
+          }
+        }
+      ],
+      "uncheckTransition":
+      [
+        {
+          "target":"checkboxFgVisual",
+          "property":"pixelArea",
+          "initialValue":[0.0, 0.0, 1.0, 1.0],
+          "targetValue":[0.0, 0.0, 0.0, 1.0],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT",
+            "timePeriod":
+            {
+              "duration":0.4,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"checkboxFgVisual",
+          "property":"size",
+          "targetValue":[0.0, 0.37],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT",
+            "timePeriod":
+            {
+              "duration":0.4,
+              "delay":0
+            }
+          }
+        }
       ]
     }
   }

diff --git a/resources/style/style-example-theme-one.json.in b/resources/style/style-example-theme-one.json.in
index 777faba..a28f842 100644 (file)
--- a/resources/style/style-example-theme-one.json.in
+++ b/resources/style/style-example-theme-one.json.in
@@ -312,6 +312,71 @@
             }
           }
         }
+      ],
+      "checkTransition":
+      [
+        {
+          "target":"checkboxFgVisual",
+          "property":"pixelArea",
+          "initialValue":[0.0, 0.0, 0.0, 1.0],
+          "targetValue":[0.0, 0.0, 1.0, 1.0],
+          "animator":
+          {
+            "alphaFunction":"EASE_IN",
+            "timePeriod":
+            {
+              "duration":0.4,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"checkboxFgVisual",
+          "property":"size",
+          "initialValue":[0.0, 0.37],
+          "targetValue":[0.12, 0.37],
+          "animator":
+          {
+            "alphaFunction":"EASE_IN",
+            "timePeriod":
+            {
+              "duration":0.4,
+              "delay":0
+            }
+          }
+        }
+      ],
+      "uncheckTransition":
+      [
+        {
+          "target":"checkboxFgVisual",
+          "property":"pixelArea",
+          "initialValue":[0.0, 0.0, 1.0, 1.0],
+          "targetValue":[0.0, 0.0, 0.0, 1.0],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT",
+            "timePeriod":
+            {
+              "duration":0.4,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"checkboxFgVisual",
+          "property":"size",
+          "targetValue":[0.0, 0.37],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT",
+            "timePeriod":
+            {
+              "duration":0.4,
+              "delay":0
+            }
+          }
+        }
       ]
     }
   }