Peter M. Groen / dali-demo

Commit 53b755595342929e2f00544774b49e4dbce99fbe

Authored by Anton Obzhirov
1 parent 82d0f0ee

Add focus transition in the layout animation demo. 

Change-Id: I89b4521ec1dd3387222fc8d8f4cc6ab6ce024c4d
Inline Side-by-side
Showing 2 changed files with 125 additions and 55 deletions
examples/layouting/animation-example.cpp
  View file @53b7555
... ... @@ -22,6 +22,7 @@
22 22 #include <dali-toolkit/devel-api/controls/control-devel.h>
23 23 #include <dali-toolkit/devel-api/layouting/linear-layout.h>
24 24 #include <dali-toolkit/devel-api/layouting/grid.h>
  25 +#include <dali-toolkit/devel-api/focus-manager/keyinput-focus-manager.h>
25 26  
26 27 #include <dali/integration-api/debug.h>
27 28  
... ... @@ -59,24 +60,24 @@ Debug::Filter* gLayoutFilter = Debug::Filter::New( Debug::NoLogging, false, &quot;LOG
59 60  
60 61 const unsigned int NUMBER_OF_RESOURCES = sizeof(IMAGE_PATH) / sizeof(char*);
61 62  
62   -// Helper function to create ImageViews with given filename and size.
63   -void CreateChildImageView( ImageView& imageView, int index, Size size )
  63 +// Helper function
  64 +void CreateChild( ImageView& child, int index, Size size )
64 65 {
65   - imageView = ImageView::New();
  66 + child = ImageView::New();
66 67 Property::Map imagePropertyMap;
67 68 imagePropertyMap[ Toolkit::Visual::Property::TYPE ] = Toolkit::Visual::IMAGE;
68 69 imagePropertyMap[ Toolkit::ImageVisual::Property::URL ] = IMAGE_PATH[ index ];
69 70 imagePropertyMap[ ImageVisual::Property::DESIRED_WIDTH ] = size.width;
70 71 imagePropertyMap[ ImageVisual::Property::DESIRED_HEIGHT ] = size.height;
71   - imageView.SetProperty( Toolkit::ImageView::Property::IMAGE, imagePropertyMap );
  72 + child.SetProperty( Toolkit::ImageView::Property::IMAGE, imagePropertyMap );
72 73 std::string name = "ImageView";
73 74 name.append( 1, '0' + index );
74   - imageView.SetName( name );
75   - imageView.SetAnchorPoint( AnchorPoint::TOP_LEFT );
76   - imageView.SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS );
  75 + child.SetName( name );
  76 + child.SetAnchorPoint( AnchorPoint::TOP_LEFT );
77 77 }
78 78  
79   -LayoutTransitionData CreateOnSetLayoutTransition( Control& parent, std::vector< Toolkit::ImageView >& children )
  79 +// Create set layout transition. A parent opacity increases 'ease in out' from semi-transparent to fully opaque and children pulse in order
  80 +LayoutTransitionData CreateOnSetLayoutTransition( Control& container )
80 81 {
81 82 auto layoutTransitionData = LayoutTransitionData::New();
82 83 Property::Map map;
... ... @@ -84,31 +85,32 @@ LayoutTransitionData CreateOnSetLayoutTransition( Control&amp; parent, std::vector&lt;
84 85 map[ LayoutTransitionData::AnimatorKey::INITIAL_VALUE ] = 0.5f;
85 86 map[ LayoutTransitionData::AnimatorKey::TARGET_VALUE ] = 1.0f;
86 87 map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map()
87   - .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, "EASE_IN_OUT" )
  88 + .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, AlphaFunction::EASE_IN_OUT )
88 89 .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map()
89 90 .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.25f )
90 91 .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.5f ) );
91 92  
92 93 // Apply to parent only
93   - layoutTransitionData.AddPropertyAnimator( parent, map );
  94 + layoutTransitionData.AddPropertyAnimator( container, map );
94 95  
95   - for( size_t i = 0; i < children.size(); i++ )
  96 + for( size_t i = 0; i < container.GetChildCount(); i++ )
96 97 {
97 98 Property::Map map;
98 99 map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::SIZE;
99 100 map[ LayoutTransitionData::AnimatorKey::TARGET_VALUE ] = Vector3( 100.0f * 1.2f, 100.0f * 1.2f, 0 );
100 101 map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map()
101   - .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, "SIN" )
  102 + .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, AlphaFunction::SIN )
102 103 .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map()
103 104 .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.5f + 0.1f * i)
104 105 .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.25f ) );
105   - layoutTransitionData.AddPropertyAnimator( children[i], map );
  106 + layoutTransitionData.AddPropertyAnimator( container.GetChildAt( i ), map );
106 107 }
107 108  
108 109 return layoutTransitionData;
109 110 }
110 111  
111   -LayoutTransitionData CreateOnChildAddTransition( Control& parent, ImageView& child )
  112 +// Create add child transition. An added child grows from (0, 0) to its full size and instantly appears in its position
  113 +LayoutTransitionData CreateOnChildAddTransition( Control& parent )
112 114 {
113 115 auto layoutTransitionData = LayoutTransitionData::New();
114 116  
... ... @@ -116,7 +118,7 @@ LayoutTransitionData CreateOnChildAddTransition( Control&amp; parent, ImageView&amp; chi
116 118 Property::Map map;
117 119 map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::SIZE;
118 120 map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map()
119   - .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, "LINEAR")
  121 + .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, AlphaFunction::LINEAR )
120 122 .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map()
121 123 .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f )
122 124 .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.0f ) );
... ... @@ -125,62 +127,129 @@ LayoutTransitionData CreateOnChildAddTransition( Control&amp; parent, ImageView&amp; chi
125 127 // New child is growing
126 128 {
127 129 Property::Map map;
  130 + map[ LayoutTransitionData::AnimatorKey::CONDITION ] = LayoutTransitionData::Condition::ON_ADD;
128 131 map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::SIZE;
129   - map["initialValue"] = Vector3( 0.0f, 0.0f, 0 );
  132 + map[ LayoutTransitionData::AnimatorKey::INITIAL_VALUE ] = Vector3( 0.0f, 0.0f, 0 );
130 133 map[ LayoutTransitionData::AnimatorKey::TARGET_VALUE ] = Vector3( 100.0f, 100.0f, 0 );
131 134 map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map()
132   - .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, "LINEAR")
  135 + .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, AlphaFunction::LINEAR )
133 136 .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map()
134 137 .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f )
135 138 .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.5f ) );
136   - layoutTransitionData.AddPropertyAnimator( child, map );
  139 + layoutTransitionData.AddPropertyAnimator( Actor(), map );
137 140 }
138 141  
139 142 // Want new children instantly appear in their positions
140 143 {
141 144 Property::Map map;
142   - map[ LayoutTransitionData::AnimatorKey::PROPERTY] = Actor::Property::POSITION;
143   - map[ LayoutTransitionData::AnimatorKey::ANIMATOR] = Property::Map()
144   - .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, "LINEAR")
  145 + map[ LayoutTransitionData::AnimatorKey::CONDITION ] = LayoutTransitionData::Condition::ON_ADD;
  146 + map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::POSITION;
  147 + map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map()
  148 + .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, AlphaFunction::LINEAR )
145 149 .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map()
146 150 .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f )
147 151 .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.0f ) );
148   - layoutTransitionData.AddPropertyAnimator( child, map );
  152 + layoutTransitionData.AddPropertyAnimator( Actor(), map );
149 153 }
150 154  
151 155 return layoutTransitionData;
152 156 }
153 157  
154   -LayoutTransitionData CreateOnChildRemoveTransition(std::vector< Toolkit::ImageView >& images)
  158 +// Create remove child transition. Remaining children shake around their positions
  159 +LayoutTransitionData CreateOnChildRemoveTransition( Control& container )
155 160 {
156 161 auto layoutTransitionData = LayoutTransitionData::New();
  162 +
157 163 // Apply animation to remaining children
158   - for (unsigned int i = 0; i < images.size(); i++)
  164 + Property::Map map;
  165 + map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::POSITION;
  166 + map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map()
  167 + .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, AlphaFunction::SIN )
  168 + .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map()
  169 + .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f)
  170 + .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.5f));
  171 + layoutTransitionData.AddPropertyAnimator( Actor(), map );
  172 +
  173 + return layoutTransitionData;
  174 +}
  175 +
  176 +// Create child focus transition. A focus gained child grows 115% and focus lost child gets its original size back
  177 +LayoutTransitionData CreateOnChildFocusTransition( Control& parent )
  178 +{
  179 + auto layoutTransitionData = LayoutTransitionData::New();
  180 +
159 181 {
160   - {
161   - Property::Map map;
162   - map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = "position";
163   - map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map()
164   - .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, "SIN")
165   - .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map()
166   - .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f)
167   - .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.5f));
168   - layoutTransitionData.AddPropertyAnimator( images[i], map );
169   - }
  182 + Property::Map map;
  183 + map[ LayoutTransitionData::AnimatorKey::CONDITION ] = LayoutTransitionData::Condition::ON_FOCUS_GAINED;
  184 + map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::SIZE;
  185 + map[ LayoutTransitionData::AnimatorKey::TARGET_VALUE ] = Vector3( 115.0f, 115.0f, 0 );
  186 + map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map()
  187 + .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map()
  188 + .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f )
  189 + .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.5f ) );
  190 + layoutTransitionData.AddPropertyAnimator( Actor(), map );
  191 + }
  192 +
  193 + {
  194 + Property::Map map;
  195 + map[ LayoutTransitionData::AnimatorKey::CONDITION ] = LayoutTransitionData::Condition::ON_FOCUS_LOST;
  196 + map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::SIZE;
  197 + map[ LayoutTransitionData::AnimatorKey::TARGET_VALUE ] = Vector3( 100.0f, 100.0f, 0 );
  198 + map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map()
  199 + .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map()
  200 + .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f )
  201 + .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.5f ) );
  202 + layoutTransitionData.AddPropertyAnimator( Actor(), map );
170 203 }
171 204  
172 205 return layoutTransitionData;
173 206 }
174 207  
175   -void CreateChildImageViewAndAdd( Control& container, int index, std::vector< Toolkit::ImageView >& images )
  208 +// An example of custom default transition, ease in for position animation, ease out for size animation
  209 +LayoutTransitionData CreateCustomDefaultTransition( Control& parent )
176 210 {
177   - Toolkit::ImageView imageView;
178   - CreateChildImageView( imageView, index, Size( 100.0f, 100.0f ) );
179   - auto layout = DevelControl::GetLayout( container );
180   - layout.SetTransitionData( LayoutTransitionData::ON_CHILD_ADD, CreateOnChildAddTransition( container, imageView ) );
  211 + auto layoutTransitionData = LayoutTransitionData::New();
  212 +
  213 + {
  214 + Property::Map map;
  215 + map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::POSITION;
  216 + map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map()
  217 + .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, AlphaFunction::EASE_IN )
  218 + .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map()
  219 + .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f )
  220 + .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.5f ) );
  221 + layoutTransitionData.AddPropertyAnimator( parent, map );
  222 + }
181 223  
  224 + {
  225 + Property::Map map;
  226 + map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::SIZE;
  227 + map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map()
  228 + .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, AlphaFunction::EASE_OUT )
  229 + .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map()
  230 + .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f )
  231 + .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.5f ) );
  232 + layoutTransitionData.AddPropertyAnimator( parent, map );
  233 + }
  234 +
  235 + return layoutTransitionData;
  236 +}
  237 +
  238 +bool OnImageTouchCallback( Actor actor, const TouchData& event )
  239 +{
  240 + KeyInputFocusManager manager = KeyInputFocusManager::Get();
  241 + manager.SetFocus( Control::DownCast( actor ) );
  242 + return true;
  243 +}
  244 +
  245 +void CreateChildAndAdd( Demo::AnimationExample& animationExample, Control& container )
  246 +{
  247 + Toolkit::ImageView imageView;
  248 + CreateChild( imageView, container.GetChildCount(), Size( 100.0f, 100.0f ) );
  249 + imageView.TouchSignal().Connect( &animationExample, &OnImageTouchCallback );
182 250 container.Add( imageView );
183   - images.push_back( imageView );
  251 +
  252 + DevelControl::GetLayout( imageView ).SetTransitionData( Toolkit::LayoutTransitionData::ON_LAYOUT_CHANGE, CreateCustomDefaultTransition( imageView ) );
184 253 }
185 254  
186 255 } // namespace
... ... @@ -249,17 +318,25 @@ void AnimationExample::Create()
249 318 mHorizontalLayout.SetOrientation( LinearLayout::Orientation::HORIZONTAL );
250 319 mHorizontalLayout.SetAlignment( LinearLayout::Alignment::CENTER_HORIZONTAL | LinearLayout::Alignment::CENTER_VERTICAL );
251 320 mHorizontalLayout.SetAnimateLayout(true);
  321 + mHorizontalLayout.SetTransitionData( LayoutTransitionData::ON_CHILD_FOCUS, CreateOnChildFocusTransition( mAnimationContainer ) );
  322 + mHorizontalLayout.SetTransitionData( LayoutTransitionData::ON_CHILD_REMOVE, CreateOnChildRemoveTransition( mAnimationContainer ) );
  323 + mHorizontalLayout.SetTransitionData( LayoutTransitionData::ON_CHILD_ADD, CreateOnChildAddTransition( mAnimationContainer ) );
  324 +
252 325 DevelControl::SetLayout( mAnimationContainer, mHorizontalLayout );
253 326  
254 327 mGridLayout = Grid::New();
255 328 mGridLayout.SetAnimateLayout(true);
256 329 mGridLayout.SetNumberOfColumns(2);
  330 + mGridLayout.SetTransitionData( LayoutTransitionData::ON_CHILD_FOCUS, CreateOnChildFocusTransition( mAnimationContainer ) );
  331 + mGridLayout.SetTransitionData( LayoutTransitionData::ON_CHILD_REMOVE, CreateOnChildRemoveTransition( mAnimationContainer ) );
  332 + mGridLayout.SetTransitionData( LayoutTransitionData::ON_CHILD_ADD, CreateOnChildAddTransition( mAnimationContainer ) );
257 333  
258   - CreateChildImageViewAndAdd( mAnimationContainer, 0, mImages );
  334 + CreateChildAndAdd( *this, mAnimationContainer );
259 335 stage.Add( mAnimationContainer );
260 336 }
261 337  
262   -// Remove controls added by this example from stage
  338 +// Remove controls added by this example from stage mGridLayout.SetTransitionData( LayoutTransitionData::ON_CHILD_FOCUS, CreateOnChildFocusTransition( mAnimationContainer ) );
  339 +
263 340 void AnimationExample::Remove()
264 341 {
265 342 if ( mAnimationContainer )
... ... @@ -269,7 +346,6 @@ void AnimationExample::Remove()
269 346 UnparentAndReset( mSelectGridButton );
270 347 UnparentAndReset( mShakeButton );
271 348 UnparentAndReset( mAnimationContainer);
272   - mImages.clear();
273 349 }
274 350 }
275 351  
... ... @@ -277,14 +353,9 @@ bool AnimationExample::OnRemoveClicked( Button button )
277 353 {
278 354 DALI_LOG_INFO( gLayoutFilter, Debug::Verbose, "AnimationExample::OnRemoveClicked\n");
279 355  
280   - if (mImages.size() > 1)
  356 + if ( mAnimationContainer.GetChildCount() > 1 )
281 357 {
282   - auto layout = DevelControl::GetLayout( mAnimationContainer );
283   - layout.SetTransitionData(LayoutTransitionData::ON_CHILD_REMOVE, CreateOnChildRemoveTransition( mImages ) );
284   -
285   - ImageView imageView = mImages.back();
286   - mAnimationContainer.Remove( imageView );
287   - mImages.pop_back();
  358 + mAnimationContainer.Remove( mAnimationContainer.GetChildAt( mAnimationContainer.GetChildCount() - 1 ) );
288 359 }
289 360 return true;
290 361 }
... ... @@ -296,12 +367,12 @@ bool AnimationExample::OnSelectGridClicked( Button button )
296 367  
297 368 if ( !mGridSet )
298 369 {
299   - mGridLayout.SetTransitionData( LayoutTransitionData::ON_OWNER_SET, CreateOnSetLayoutTransition( mAnimationContainer, mImages ) );
  370 + mGridLayout.SetTransitionData( LayoutTransitionData::ON_OWNER_SET, CreateOnSetLayoutTransition( mAnimationContainer ) );
300 371 DevelControl::SetLayout( mAnimationContainer, mGridLayout );
301 372 }
302 373 else
303 374 {
304   - mHorizontalLayout.SetTransitionData( LayoutTransitionData::ON_OWNER_SET, CreateOnSetLayoutTransition( mAnimationContainer, mImages ) );
  375 + mHorizontalLayout.SetTransitionData( LayoutTransitionData::ON_OWNER_SET, CreateOnSetLayoutTransition( mAnimationContainer ) );
305 376 DevelControl::SetLayout( mAnimationContainer, mHorizontalLayout );
306 377 }
307 378  
... ... @@ -311,9 +382,9 @@ bool AnimationExample::OnSelectGridClicked( Button button )
311 382  
312 383 bool AnimationExample::OnAddClicked( Button button )
313 384 {
314   - if (mImages.size() < 4)
  385 + if( mAnimationContainer.GetChildCount() < 4 )
315 386 {
316   - CreateChildImageViewAndAdd( mAnimationContainer, mImages.size(), mImages );
  387 + CreateChildAndAdd( *this, mAnimationContainer );
317 388 }
318 389 return true;
319 390 }
... ...
examples/layouting/animation-example.h
  View file @53b7555
... ... @@ -61,7 +61,6 @@ private:
61 61 PushButton mAddButton;
62 62 PushButton mSelectGridButton;
63 63 PushButton mShakeButton;
64   - std::vector< Toolkit::ImageView > mImages;
65 64 Control mAnimationContainer;
66 65 Grid mGridLayout;
67 66 LinearLayout mHorizontalLayout;
... ...