From: David Steele Date: Mon, 9 Jan 2017 19:06:14 +0000 (+0000) Subject: Updated transition example to animate tick X-Git-Tag: dali_1.2.23~4 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=6a833b2ce54cadef605d3b6f82ef2a4226b36eb6;hp=e2ee6baaa8dcfe20f708b17a51e4303b8cfc3824;p=platform%2Fcore%2Fuifw%2Fdali-demo.git 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 --- diff --git a/examples/transitions/shadow-button-impl.cpp b/examples/transitions/shadow-button-impl.cpp index aa82ce1..8a6ea56 100644 --- 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 --- 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 --- 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 --- 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 --- 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 + } + } + } ] } }