From: David Steele <david.steele@samsung.com>
Date: Thu, 16 Feb 2017 16:46:11 +0000 (+0000)
Subject: Updated shadow-button transition demo to use states and sub-states
X-Git-Tag: dali_1.2.28~1^2
X-Git-Url: http://review.tizen.org/git/?p=platform%2Fcore%2Fuifw%2Fdali-demo.git;a=commitdiff_plain;h=2c54b5f664a6cab86ce5c857f462ed0448a568b6

Updated shadow-button transition demo to use states and sub-states

Also updated the style sheet to set up the transitions for a future
patch in Toolkit.

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

diff --git a/examples/transitions/transition-application.cpp b/examples/transitions/transition-application.cpp
index da81bb9..d3acd98 100644
--- a/examples/transitions/transition-application.cpp
+++ b/examples/transitions/transition-application.cpp
@@ -24,6 +24,7 @@
 
 // External includes
 #include <dali-toolkit/dali-toolkit.h>
+#include <dali-toolkit/devel-api/controls/control-devel.h>
 #include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
 #include <dali-toolkit/devel-api/visuals/text-visual-properties.h>
 #include "shadow-button.h"
@@ -110,6 +111,9 @@ void TransitionApplication::Create( Application& application )
   mShadowButton.SetAnchorPoint( AnchorPoint::CENTER );
   mShadowButton.SetParentOrigin( ParentOrigin::CENTER );
   mShadowButton.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+  mShadowButton.SetProperty( DevelControl::Property::STATE, DevelControl::DISABLED );
+  mShadowButton.SetProperty( DevelControl::Property::SUB_STATE, "UNCHECKED" );
+
   buttonLayout.AddChild( mShadowButton, TableView::CellPosition(1, 1) );
 
   TableView actionButtonLayout = TableView::New( 1, NUMBER_OF_ACTION_BUTTONS+1 );
@@ -135,7 +139,7 @@ void TransitionApplication::Create( Application& application )
     mActionButtons[i].ClickedSignal().Connect( this, &TransitionApplication::OnActionButtonClicked );
     actionButtonLayout.AddChild( mActionButtons[i], TableView::CellPosition( 0, 1+i ) );
   }
-  SetLabelText( mActionButtons[0], "Activate" );
+  SetLabelText( mActionButtons[0], "Enable" );
   SetLabelText( mActionButtons[1], "Check" );
   mActionButtons[1].SetProperty( Button::Property::DISABLED, true );
 
@@ -154,11 +158,13 @@ bool TransitionApplication::OnActionButtonClicked( Button button )
       mShadowButton.SetActiveState( ! activeState );
       if( activeState )
       {
-        SetLabelText( button, "Activate" );
+        SetLabelText( button, "Enable" );
+        mShadowButton.SetProperty( DevelControl::Property::STATE, DevelControl::DISABLED );
       }
       else
       {
-        SetLabelText( button, "Deactivate" );
+        SetLabelText( button, "Disable" );
+        mShadowButton.SetProperty( DevelControl::Property::STATE, DevelControl::NORMAL );
       }
       mActionButtons[1].SetProperty( Button::Property::DISABLED, activeState );
       break;
@@ -170,10 +176,12 @@ bool TransitionApplication::OnActionButtonClicked( Button button )
       if( checkState )
       {
         SetLabelText( button, "Check" );
+        mShadowButton.SetProperty( DevelControl::Property::SUB_STATE, "UNCHECKED" );
       }
       else
       {
         SetLabelText( button, "Uncheck" );
+        mShadowButton.SetProperty( DevelControl::Property::SUB_STATE, "CHECKED" );
       }
       break;
     }
diff --git a/resources/style/mobile/style-example-theme-one.json.in b/resources/style/mobile/style-example-theme-one.json.in
index 9447a9d..53bbcde 100644
--- a/resources/style/mobile/style-example-theme-one.json.in
+++ b/resources/style/mobile/style-example-theme-one.json.in
@@ -117,264 +117,226 @@
     },
     "ShadowButton":
     {
-      "backgroundVisual":{
-        "visualType":"IMAGE",
-        "url":"{STYLE_DIR}/images/shadowButtonBg.9.png",
-        "mixColor":[1,1,1,0]
-      },
-      "checkboxBgVisual":{
-        "visualType":"IMAGE",
-        "url":"{STYLE_DIR}/images/CheckBg.png",
-        "transform":{
-          "size":[0.09, 0.28],
-          "offset":[30,0],
-          "offsetSizeMode":[1,1,0,0],
-          "origin":"CENTER_BEGIN",
-          "anchorPoint":"CENTER_BEGIN"
-        }
-      },
-      "checkboxFgVisual":{
-        "visualType":"IMAGE",
-        "url":"{STYLE_DIR}/images/Tick.png",
-        "transform":{
-          "size":[0.09, 0.28],
-          "offset":[30,0],
-          "offsetSizeMode":[1,1,0,0],
-          "origin":"CENTER_BEGIN",
-          "anchorPoint":"CENTER_BEGIN"
-        }
-      },
-      "labelVisual":{
-        "visualType":"TEXT",
-        "text":"Don't show again",
-        "pointSize":8,
-        "horizontalAlignment":"END",
-        "verticalAlignment":"CENTER",
-        "textColor":[1,1,1,1],
-        "mixColor":[0.3, 0.3, 0.3, 1],
-        "transform":{
-          "size":[0.9, 0.9],
-          "offset":[-30,0],
-          "offsetSizeMode":[1,1,0,0],
-          "origin":"CENTER_END",
-          "anchorPoint":"CENTER_END"
-        }
-      },
-      "activeTransition":
-      [
-        {
-          "target":"checkboxBgVisual",
-          "property":"size",
-          "initialValue":[0.09, 0.28],
-          "targetValue":[0.12, 0.37],
-          "animator":
-          {
-            "alphaFunction":"EASE_OUT_BACK",
-            "timePeriod":
-            {
-              "duration":0.8,
-              "delay":0
-            }
-          }
-        },
+      "states":
+      {
+        "NORMAL":
         {
-          "target":"backgroundVisual",
-          "property":"mixColor",
-          "initialValue":[1,1,1,0],
-          "targetValue":[1,1,1,1],
-          "animator":
+          "visuals":
           {
-            "alphaFunction":"EASE_OUT_BACK",
-            "timePeriod":
-            {
-              "duration":0.8,
-              "delay":0
+            "backgroundVisual":{
+              "visualType":"IMAGE",
+              "url":"{STYLE_DIR}/images/shadowButtonBg.9.png"
+            },
+
+            "checkboxBgVisual":{
+              "visualType":"IMAGE",
+              "url":"{STYLE_DIR}/images/CheckBg.png",
+              "transform":{
+                "size":[0.09, 0.28],
+                "offset":[30,0],
+                "offsetSizeMode":[1,1,0,0],
+                "origin":"CENTER_BEGIN",
+                "anchorPoint":"CENTER_BEGIN"
+              }
+            },
+
+            "labelVisual":{
+              "visualType":"TEXT",
+              "text":"Don't show again",
+              "pointSize":8,
+              "horizontalAlignment":"END",
+              "verticalAlignment":"CENTER",
+              "textColor":[1,1,1,1],
+              "mixColor":[0, 0, 0, 1],
+              "transform":{
+                "size":[0.9, 0.9],
+                "offset":[-30,0],
+                "offsetSizeMode":[1,1,0,0],
+                "origin":"CENTER_END",
+                "anchorPoint":"CENTER_END"
+              }
             }
-          }
-        },
-        {
-          "target":"backgroundVisual",
-          "property":"size",
-          "initialValue":[0.9, 0.9],
-          "targetValue":[1, 1],
-          "animator":
+          },
+
+          "states":
           {
-            "alphaFunction":"EASE_OUT_BACK",
-            "timePeriod":
+            "CHECKED":
             {
-              "duration":0.8,
-              "delay":0
-            }
-          }
-        },
-        {
-          "target":"checkboxFgVisual",
-          "property":"size",
-          "initialValue":[0.09, 0.28],
-          "targetValue":[0.12, 0.37],
-          "animator":
-          {
-            "alphaFunction":"EASE_OUT_BACK",
-            "timePeriod":
+              "visuals":
+              {
+                "checkboxFgVisual":{
+                  "visualType":"IMAGE",
+                  "url":"{STYLE_DIR}/images/Tick.png",
+                  "transform":{
+                    "size":[0.09, 0.28],
+                    "offset":[30,0],
+                    "offsetSizeMode":[1,1,0,0],
+                    "origin":"CENTER_BEGIN",
+                    "anchorPoint":"CENTER_BEGIN"
+                  }
+                }
+              },
+              "entryTransition":
+              [
+                {
+                  "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
+                    }
+                  }
+                }
+              ],
+              "exitTransition":
+              [
+                {
+                  "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
+                    }
+                  }
+                }
+              ]
+            },
+            "UNCHECKED":
             {
-              "duration":0.8,
-              "delay":0
             }
           }
         },
+        //"FOCUSED"
+        "DISABLED":
         {
-          "target":"labelVisual",
-          "property":"mixColor",
-          "initialValue":[0.2, 0.2, 0.2, 1.0],
-          "targetValue":[0, 0, 0, 1],
-          "animator":
+          "visuals":
           {
-            "alphaFunction":"EASE_OUT_BACK",
-            "timePeriod":
-            {
-              "duration":0.8,
-              "delay":0
+            "checkboxBgVisual":{
+              "visualType":"IMAGE",
+              "url":"{STYLE_DIR}/images/CheckBg.png",
+              "transform":{
+                "size":[0.09, 0.28],
+                "offset":[30,0],
+                "offsetSizeMode":[1,1,0,0],
+                "origin":"CENTER_BEGIN",
+                "anchorPoint":"CENTER_BEGIN"
+              }
+            },
+
+            "checkboxFgVisual":{
+              "visualType":"IMAGE",
+              "url":"{STYLE_DIR}/images/Tick.png",
+              "transform":{
+                "size":[0.09, 0.28],
+                "offset":[30,0],
+                "offsetSizeMode":[1,1,0,0],
+                "origin":"CENTER_BEGIN",
+                "anchorPoint":"CENTER_BEGIN"
+              }
+            },
+
+            "labelVisual":{
+              "visualType":"TEXT",
+              "text":"Don't show again",
+              "pointSize":8,
+              "horizontalAlignment":"END",
+              "verticalAlignment":"CENTER",
+              "textColor":[1,1,1,1],
+              "mixColor":[0.3, 0.3, 0.3, 1],
+              "transform":{
+                "size":[0.9, 0.9],
+                "offset":[-30,0],
+                "offsetSizeMode":[1,1,0,0],
+                "origin":"CENTER_END",
+                "anchorPoint":"CENTER_END"
+              }
             }
           }
         }
-      ],
-      "inactiveTransition":
+      },
+      "transitions":
       [
         {
-          "target":"checkboxBgVisual",
-          "property":"size",
-          "initialValue":[0.12, 0.37],
-          "targetValue":[0.09, 0.28],
+          "from":"DISABLED",
+          "to":"NORMAL",
+          "visualName":"backgroundVisual",
+          "effect":"FADE_IN",
           "animator":
           {
             "alphaFunction":"EASE_OUT_BACK",
-            "timePeriod":
-            {
-              "duration":0.8,
-              "delay":0
-            }
+            "duration":0.8
           }
         },
         {
-          "target":"backgroundVisual",
-          "property":"mixColor",
-          "targetValue":[1,1,1,0],
+          "from":"DISABLED",
+          "to":"NORMAL",
+          "visualName":"*",
           "animator":
           {
             "alphaFunction":"EASE_OUT_BACK",
-            "timePeriod":
-            {
-              "duration":0.8,
-              "delay":0
-            }
+            "duration":0.8
           }
         },
         {
-          "target":"checkboxFgVisual",
-          "property":"size",
-          "initialValue":[0.12, 0.37],
-          "targetValue":[0.09, 0.28],
+          "from":"NORMAL",
+          "to":"DISABLED",
+          "visualName":"backgroundVisual",
+          "effect":"FADE_OUT",
           "animator":
           {
             "alphaFunction":"EASE_OUT_BACK",
-            "timePeriod":
-            {
-              "duration":0.8,
-              "delay":0
-            }
+            "duration":0.8
           }
         },
         {
-          "target":"labelVisual",
-          "property":"mixColor",
-          "targetValue":[0.4, 0.4, 0.4, 1.0],
+          "from":"NORMAL",
+          "to":"DISABLED",
+          "visualName":"*",
           "animator":
           {
             "alphaFunction":"EASE_OUT_BACK",
-            "timePeriod":
-            {
-              "duration":0.8,
-              "delay":0
-            }
-          }
-        },
-        {
-          "target":"backgroundVisual",
-          "property":"size",
-          "targetValue":[0.9, 0.9],
-          "animator":
-          {
-            "alphaFunction":"EASE_OUT_BACK",
-            "timePeriod":
-            {
-              "duration":0.8,
-              "delay":0
-            }
-          }
-        }
-      ],
-      "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
-            }
+            "duration":0.8
           }
         }
       ]
diff --git a/resources/style/style-example-theme-one.json.in b/resources/style/style-example-theme-one.json.in
index 507c685..d495a3d 100644
--- a/resources/style/style-example-theme-one.json.in
+++ b/resources/style/style-example-theme-one.json.in
@@ -117,264 +117,226 @@
     },
     "ShadowButton":
     {
-      "backgroundVisual":{
-        "visualType":"IMAGE",
-        "url":"{STYLE_DIR}/images/shadowButtonBg.9.png",
-        "mixColor":[1,1,1,0]
-      },
-      "checkboxBgVisual":{
-        "visualType":"IMAGE",
-        "url":"{STYLE_DIR}/images/CheckBg.png",
-        "transform":{
-          "size":[0.09, 0.28],
-          "offset":[30,0],
-          "offsetSizeMode":[1,1,0,0],
-          "origin":"CENTER_BEGIN",
-          "anchorPoint":"CENTER_BEGIN"
-        }
-      },
-      "checkboxFgVisual":{
-        "visualType":"IMAGE",
-        "url":"{STYLE_DIR}/images/Tick.png",
-        "transform":{
-          "size":[0.09, 0.28],
-          "offset":[30,0],
-          "offsetSizeMode":[1,1,0,0],
-          "origin":"CENTER_BEGIN",
-          "anchorPoint":"CENTER_BEGIN"
-        }
-      },
-      "labelVisual":{
-        "visualType":"TEXT",
-        "text":"Don't show again",
-        "pointSize":20,
-        "horizontalAlignment":"END",
-        "verticalAlignment":"CENTER",
-        "textColor":[1,1,1,1],
-        "mixColor":[0.3, 0.3, 0.3, 1],
-        "transform":{
-          "size":[0.9, 0.9],
-          "offset":[-30,0],
-          "offsetSizeMode":[1,1,0,0],
-          "origin":"CENTER_END",
-          "anchorPoint":"CENTER_END"
-        }
-      },
-      "activeTransition":
-      [
-        {
-          "target":"checkboxBgVisual",
-          "property":"size",
-          "initialValue":[0.09, 0.28],
-          "targetValue":[0.12, 0.37],
-          "animator":
-          {
-            "alphaFunction":"EASE_OUT_BACK",
-            "timePeriod":
-            {
-              "duration":0.8,
-              "delay":0
-            }
-          }
-        },
+      "states":
+      {
+        "NORMAL":
         {
-          "target":"backgroundVisual",
-          "property":"mixColor",
-          "initialValue":[1,1,1,0],
-          "targetValue":[1,1,1,1],
-          "animator":
+          "visuals":
           {
-            "alphaFunction":"EASE_OUT_BACK",
-            "timePeriod":
-            {
-              "duration":0.8,
-              "delay":0
+            "backgroundVisual":{
+              "visualType":"IMAGE",
+              "url":"{STYLE_DIR}/images/shadowButtonBg.9.png"
+            },
+
+            "checkboxBgVisual":{
+              "visualType":"IMAGE",
+              "url":"{STYLE_DIR}/images/CheckBg.png",
+              "transform":{
+                "size":[0.09, 0.28],
+                "offset":[30,0],
+                "offsetSizeMode":[1,1,0,0],
+                "origin":"CENTER_BEGIN",
+                "anchorPoint":"CENTER_BEGIN"
+              }
+            },
+
+            "labelVisual":{
+              "visualType":"TEXT",
+              "text":"Don't show again",
+              "pointSize":20,
+              "horizontalAlignment":"END",
+              "verticalAlignment":"CENTER",
+              "textColor":[1,1,1,1],
+              "mixColor":[0, 0, 0, 1],
+              "transform":{
+                "size":[0.9, 0.9],
+                "offset":[-30,0],
+                "offsetSizeMode":[1,1,0,0],
+                "origin":"CENTER_END",
+                "anchorPoint":"CENTER_END"
+              }
             }
-          }
-        },
-        {
-          "target":"backgroundVisual",
-          "property":"size",
-          "initialValue":[0.9, 0.9],
-          "targetValue":[1, 1],
-          "animator":
+          },
+
+          "states":
           {
-            "alphaFunction":"EASE_OUT_BACK",
-            "timePeriod":
+            "CHECKED":
             {
-              "duration":0.8,
-              "delay":0
-            }
-          }
-        },
-        {
-          "target":"checkboxFgVisual",
-          "property":"size",
-          "initialValue":[0.09, 0.28],
-          "targetValue":[0.12, 0.37],
-          "animator":
-          {
-            "alphaFunction":"EASE_OUT_BACK",
-            "timePeriod":
+              "visuals":
+              {
+                "checkboxFgVisual":{
+                  "visualType":"IMAGE",
+                  "url":"{STYLE_DIR}/images/Tick.png",
+                  "transform":{
+                    "size":[0.09, 0.28],
+                    "offset":[30,0],
+                    "offsetSizeMode":[1,1,0,0],
+                    "origin":"CENTER_BEGIN",
+                    "anchorPoint":"CENTER_BEGIN"
+                  }
+                }
+              },
+              "entryTransition":
+              [
+                {
+                  "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
+                    }
+                  }
+                }
+              ],
+              "exitTransition":
+              [
+                {
+                  "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
+                    }
+                  }
+                }
+              ]
+            },
+            "UNCHECKED":
             {
-              "duration":0.8,
-              "delay":0
             }
           }
         },
+        //"FOCUSED"
+        "DISABLED":
         {
-          "target":"labelVisual",
-          "property":"mixColor",
-          "initialValue":[0.2, 0.2, 0.2, 1.0],
-          "targetValue":[0, 0, 0, 1],
-          "animator":
+          "visuals":
           {
-            "alphaFunction":"EASE_OUT_BACK",
-            "timePeriod":
-            {
-              "duration":0.8,
-              "delay":0
+            "checkboxBgVisual":{
+              "visualType":"IMAGE",
+              "url":"{STYLE_DIR}/images/CheckBg.png",
+              "transform":{
+                "size":[0.09, 0.28],
+                "offset":[30,0],
+                "offsetSizeMode":[1,1,0,0],
+                "origin":"CENTER_BEGIN",
+                "anchorPoint":"CENTER_BEGIN"
+              }
+            },
+
+            "checkboxFgVisual":{
+              "visualType":"IMAGE",
+              "url":"{STYLE_DIR}/images/Tick.png",
+              "transform":{
+                "size":[0.09, 0.28],
+                "offset":[30,0],
+                "offsetSizeMode":[1,1,0,0],
+                "origin":"CENTER_BEGIN",
+                "anchorPoint":"CENTER_BEGIN"
+              }
+            },
+
+            "labelVisual":{
+              "visualType":"TEXT",
+              "text":"Don't show again",
+              "pointSize":20,
+              "horizontalAlignment":"END",
+              "verticalAlignment":"CENTER",
+              "textColor":[1,1,1,1],
+              "mixColor":[0.3, 0.3, 0.3, 1],
+              "transform":{
+                "size":[0.9, 0.9],
+                "offset":[-30,0],
+                "offsetSizeMode":[1,1,0,0],
+                "origin":"CENTER_END",
+                "anchorPoint":"CENTER_END"
+              }
             }
           }
         }
-      ],
-      "inactiveTransition":
+      },
+      "transitions":
       [
         {
-          "target":"checkboxBgVisual",
-          "property":"size",
-          "initialValue":[0.12, 0.37],
-          "targetValue":[0.09, 0.28],
+          "from":"DISABLED",
+          "to":"NORMAL",
+          "visualName":"backgroundVisual",
+          "effect":"FADE_IN",
           "animator":
           {
             "alphaFunction":"EASE_OUT_BACK",
-            "timePeriod":
-            {
-              "duration":0.8,
-              "delay":0
-            }
+            "duration":0.8
           }
         },
         {
-          "target":"backgroundVisual",
-          "property":"mixColor",
-          "targetValue":[1,1,1,0],
+          "from":"DISABLED",
+          "to":"NORMAL",
+          "visualName":"*",
           "animator":
           {
             "alphaFunction":"EASE_OUT_BACK",
-            "timePeriod":
-            {
-              "duration":0.8,
-              "delay":0
-            }
+            "duration":0.8
           }
         },
         {
-          "target":"checkboxFgVisual",
-          "property":"size",
-          "initialValue":[0.12, 0.37],
-          "targetValue":[0.09, 0.28],
+          "from":"NORMAL",
+          "to":"DISABLED",
+          "visualName":"backgroundVisual",
+          "effect":"FADE_OUT",
           "animator":
           {
             "alphaFunction":"EASE_OUT_BACK",
-            "timePeriod":
-            {
-              "duration":0.8,
-              "delay":0
-            }
+            "duration":0.8
           }
         },
         {
-          "target":"labelVisual",
-          "property":"mixColor",
-          "targetValue":[0.4, 0.4, 0.4, 1.0],
+          "from":"NORMAL",
+          "to":"DISABLED",
+          "visualName":"*",
           "animator":
           {
             "alphaFunction":"EASE_OUT_BACK",
-            "timePeriod":
-            {
-              "duration":0.8,
-              "delay":0
-            }
-          }
-        },
-        {
-          "target":"backgroundVisual",
-          "property":"size",
-          "targetValue":[0.9, 0.9],
-          "animator":
-          {
-            "alphaFunction":"EASE_OUT_BACK",
-            "timePeriod":
-            {
-              "duration":0.8,
-              "delay":0
-            }
-          }
-        }
-      ],
-      "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
-            }
+            "duration":0.8
           }
         }
       ]