Peter M. Groen / dali-demo

Commit b4259546489354dc9e6d696f95c878aaf5fec283

Authored by Anton Obzhirov
1 parent 878efa68

Add complex animation demo 

Change-Id: Ic0dc7a4364c411fcd905201a889719be5bccde4c
Inline Side-by-side
Showing 3 changed files with 426 additions and 0 deletions
examples/layouting/animation-example.cpp 0 → 100644
  View file @b425954
  1 +/*
  2 + * Copyright (c) 2018 Samsung Electronics Co., Ltd.
  3 + *
  4 + * Licensed under the Apache License, Version 2.0 (the "License");
  5 + * you may not use this file except in compliance with the License.
  6 + * You may obtain a copy of the License at
  7 + *
  8 + * http://www.apache.org/licenses/LICENSE-2.0
  9 + *
  10 + * Unless required by applicable law or agreed to in writing, software
  11 + * distributed under the License is distributed on an "AS IS" BASIS,
  12 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13 + * See the License for the specific language governing permissions and
  14 + * limitations under the License.
  15 + *
  16 + */
  17 +
  18 +#include <string>
  19 +#include "animation-example.h"
  20 +#include <dali-toolkit/devel-api/visuals/image-visual-properties-devel.h>
  21 +#include <dali-toolkit/devel-api/visual-factory/visual-factory.h>
  22 +#include <dali-toolkit/devel-api/controls/control-devel.h>
  23 +#include <dali-toolkit/devel-api/layouting/linear-layout.h>
  24 +#include <dali-toolkit/devel-api/layouting/grid.h>
  25 +
  26 +#include <dali/integration-api/debug.h>
  27 +
  28 +using namespace Dali;
  29 +using namespace Dali::Toolkit;
  30 +
  31 +namespace
  32 +{
  33 +const char* const TITLE = "Animation Example";
  34 +
  35 +// Button file names
  36 +const char* LTR_IMAGE( DEMO_IMAGE_DIR "icon-play.png" );
  37 +const char* LTR_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-play-selected.png" );
  38 +
  39 +const char* RTL_IMAGE( DEMO_IMAGE_DIR "icon-reverse.png" );
  40 +const char* RTL_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-reverse-selected.png" );
  41 +
  42 +const char* ROTATE_CLOCKWISE_IMAGE( DEMO_IMAGE_DIR "icon-reset.png" );
  43 +const char* ROTATE_CLOCKWISE_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-reset-selected.png" );
  44 +
  45 +const char* GRID_IMAGE( DEMO_IMAGE_DIR "icon-item-view-layout-grid.png" );
  46 +const char* GRID_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-item-view-layout-grid-selected.png" );
  47 +
  48 +// Child image filenames
  49 +const char* IMAGE_PATH[] = {
  50 + DEMO_IMAGE_DIR "application-icon-101.png",
  51 + DEMO_IMAGE_DIR "application-icon-102.png",
  52 + DEMO_IMAGE_DIR "application-icon-103.png",
  53 + DEMO_IMAGE_DIR "application-icon-104.png"
  54 +};
  55 +
  56 +#if defined(DEBUG_ENABLED)
  57 +Debug::Filter* gLayoutFilter = Debug::Filter::New( Debug::NoLogging, false, "LOG_LAYOUT" );
  58 +#endif
  59 +
  60 +const unsigned int NUMBER_OF_RESOURCES = sizeof(IMAGE_PATH) / sizeof(char*);
  61 +
  62 +// Helper function to create ImageViews with given filename and size.
  63 +void CreateChildImageView( ImageView& imageView, int index, Size size )
  64 +{
  65 + imageView = ImageView::New();
  66 + Property::Map imagePropertyMap;
  67 + imagePropertyMap[ Toolkit::Visual::Property::TYPE ] = Toolkit::Visual::IMAGE;
  68 + imagePropertyMap[ Toolkit::ImageVisual::Property::URL ] = IMAGE_PATH[ index ];
  69 + imagePropertyMap[ ImageVisual::Property::DESIRED_WIDTH ] = size.width;
  70 + imagePropertyMap[ ImageVisual::Property::DESIRED_HEIGHT ] = size.height;
  71 + imageView.SetProperty( Toolkit::ImageView::Property::IMAGE, imagePropertyMap );
  72 + std::string name = "ImageView";
  73 + name.append( 1, '0' + index );
  74 + imageView.SetName( name );
  75 + imageView.SetAnchorPoint( AnchorPoint::TOP_LEFT );
  76 + imageView.SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS );
  77 +}
  78 +
  79 +LayoutTransitionData CreateOnSetLayoutTransition( Control& parent, std::vector< Toolkit::ImageView >& children )
  80 +{
  81 + auto layoutTransitionData = LayoutTransitionData::New();
  82 + Property::Map map;
  83 + map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::COLOR_ALPHA;
  84 + map[ LayoutTransitionData::AnimatorKey::INITIAL_VALUE ] = 0.5f;
  85 + map[ LayoutTransitionData::AnimatorKey::TARGET_VALUE ] = 1.0f;
  86 + map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map()
  87 + .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, "EASE_IN_OUT" )
  88 + .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map()
  89 + .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.25f )
  90 + .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.5f ) );
  91 +
  92 + // Apply to parent only
  93 + layoutTransitionData.AddPropertyAnimator( parent, map );
  94 +
  95 + for( size_t i = 0; i < children.size(); i++ )
  96 + {
  97 + Property::Map map;
  98 + map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::SIZE;
  99 + map[ LayoutTransitionData::AnimatorKey::TARGET_VALUE ] = Vector3( 100.0f * 1.2f, 100.0f * 1.2f, 0 );
  100 + map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map()
  101 + .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, "SIN" )
  102 + .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map()
  103 + .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.5f + 0.1f * i)
  104 + .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.25f ) );
  105 + layoutTransitionData.AddPropertyAnimator( children[i], map );
  106 + }
  107 +
  108 + return layoutTransitionData;
  109 +}
  110 +
  111 +LayoutTransitionData CreateOnChildAddTransition( Control& parent, ImageView& child )
  112 +{
  113 + auto layoutTransitionData = LayoutTransitionData::New();
  114 +
  115 + // Want the parent to resize itself instantly so children will position themselves correctly when the parent is added to stage first time
  116 + Property::Map map;
  117 + map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::SIZE;
  118 + map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map()
  119 + .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, "LINEAR")
  120 + .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map()
  121 + .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f )
  122 + .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.0f ) );
  123 + layoutTransitionData.AddPropertyAnimator( parent, map );
  124 +
  125 + // New child is growing
  126 + {
  127 + Property::Map map;
  128 + map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::SIZE;
  129 + map["initialValue"] = Vector3( 0.0f, 0.0f, 0 );
  130 + map[ LayoutTransitionData::AnimatorKey::TARGET_VALUE ] = Vector3( 100.0f, 100.0f, 0 );
  131 + map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map()
  132 + .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, "LINEAR")
  133 + .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map()
  134 + .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f )
  135 + .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.5f ) );
  136 + layoutTransitionData.AddPropertyAnimator( child, map );
  137 + }
  138 +
  139 + // Want new children instantly appear in their positions
  140 + {
  141 + 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 + .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map()
  146 + .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f )
  147 + .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.0f ) );
  148 + layoutTransitionData.AddPropertyAnimator( child, map );
  149 + }
  150 +
  151 + return layoutTransitionData;
  152 +}
  153 +
  154 +LayoutTransitionData CreateOnChildRemoveTransition(std::vector< Toolkit::ImageView >& images)
  155 +{
  156 + auto layoutTransitionData = LayoutTransitionData::New();
  157 + // Apply animation to remaining children
  158 + for (unsigned int i = 0; i < images.size(); i++)
  159 + {
  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 + }
  170 + }
  171 +
  172 + return layoutTransitionData;
  173 +}
  174 +
  175 +void CreateChildImageViewAndAdd( Control& container, int index, std::vector< Toolkit::ImageView >& images )
  176 +{
  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 ) );
  181 +
  182 + container.Add( imageView );
  183 + images.push_back( imageView );
  184 +}
  185 +
  186 +} // namespace
  187 +
  188 +namespace Demo
  189 +{
  190 +
  191 +AnimationExample::AnimationExample()
  192 +: Example( TITLE ),
  193 + mGridSet( false )
  194 +{
  195 +}
  196 +
  197 +void AnimationExample::Create()
  198 +{
  199 + DALI_LOG_INFO( gLayoutFilter, Debug::Verbose, "AnimationExample::Create\n");
  200 + auto stage = Stage::GetCurrent();
  201 +
  202 + mRemoveButton = PushButton::New();
  203 + mRemoveButton.SetProperty( PushButton::Property::UNSELECTED_ICON, RTL_IMAGE );
  204 + mRemoveButton.SetProperty( PushButton::Property::SELECTED_ICON, RTL_SELECTED_IMAGE );
  205 + mRemoveButton.ClickedSignal().Connect( this, &AnimationExample::OnRemoveClicked );
  206 + mRemoveButton.SetParentOrigin( Vector3( 0.2f, 1.0f, 0.5f ) );
  207 + mRemoveButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
  208 + mRemoveButton.SetSize( 75, 75 );
  209 + stage.Add( mRemoveButton );
  210 +
  211 + mAddButton = PushButton::New();
  212 + mAddButton.SetProperty( PushButton::Property::UNSELECTED_ICON, LTR_IMAGE );
  213 + mAddButton.SetProperty( PushButton::Property::SELECTED_ICON, LTR_SELECTED_IMAGE );
  214 + mAddButton.ClickedSignal().Connect( this, &AnimationExample::OnAddClicked );
  215 + mAddButton.SetParentOrigin( Vector3( 0.4f, 1.0f, 0.5f ) );
  216 + mAddButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
  217 + mAddButton.SetSize( 75, 75 );
  218 + stage.Add( mAddButton );
  219 +
  220 + mSelectGridButton = Toolkit::PushButton::New();
  221 + mSelectGridButton.SetProperty( PushButton::Property::UNSELECTED_ICON, GRID_IMAGE );
  222 + mSelectGridButton.SetProperty( PushButton::Property::SELECTED_ICON, GRID_SELECTED_IMAGE );
  223 + mSelectGridButton.ClickedSignal().Connect( this, &AnimationExample::OnSelectGridClicked );
  224 + mSelectGridButton.SetParentOrigin( Vector3( 0.6f, 1.0f, 0.5f ) );
  225 + mSelectGridButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
  226 + mSelectGridButton.SetSize( 75, 75 );
  227 + stage.Add( mSelectGridButton );
  228 +
  229 + mShakeButton = PushButton::New();
  230 + mShakeButton.SetProperty( PushButton::Property::UNSELECTED_ICON, ROTATE_CLOCKWISE_IMAGE );
  231 + mShakeButton.SetProperty( PushButton::Property::SELECTED_ICON, ROTATE_CLOCKWISE_SELECTED_IMAGE );
  232 + mShakeButton.ClickedSignal().Connect( this, &AnimationExample::OnChangeClicked );
  233 + mShakeButton.SetParentOrigin( Vector3( 0.8f, 1.0f, 0.5f ) );
  234 + mShakeButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
  235 + mShakeButton.SetSize( 75, 75 );
  236 + stage.Add( mShakeButton );
  237 +
  238 + // Create a linear layout
  239 + mAnimationContainer = Control::New();
  240 + mAnimationContainer.SetProperty( Toolkit::LayoutItem::ChildProperty::WIDTH_SPECIFICATION, ChildLayoutData::MATCH_PARENT );
  241 + mAnimationContainer.SetProperty( Toolkit::LayoutItem::ChildProperty::HEIGHT_SPECIFICATION, ChildLayoutData::MATCH_PARENT );
  242 + mAnimationContainer.SetProperty( Actor::Property::LAYOUT_DIRECTION, LayoutDirection::LEFT_TO_RIGHT );
  243 + mAnimationContainer.SetParentOrigin( ParentOrigin::CENTER );
  244 + mAnimationContainer.SetAnchorPoint( AnchorPoint::CENTER );
  245 + mAnimationContainer.SetName( "AnimationExample" );
  246 + mAnimationContainer.SetProperty( Toolkit::Control::Property::PADDING, Extents( 0.0f, 0.0f, 45.0f, 75.0f) );
  247 +
  248 + mHorizontalLayout = LinearLayout::New();
  249 + mHorizontalLayout.SetOrientation( LinearLayout::Orientation::HORIZONTAL );
  250 + mHorizontalLayout.SetAlignment( LinearLayout::Alignment::CENTER_HORIZONTAL | LinearLayout::Alignment::CENTER_VERTICAL );
  251 + mHorizontalLayout.SetAnimateLayout(true);
  252 + DevelControl::SetLayout( mAnimationContainer, mHorizontalLayout );
  253 +
  254 + mGridLayout = Grid::New();
  255 + mGridLayout.SetAnimateLayout(true);
  256 + mGridLayout.SetNumberOfColumns(2);
  257 +
  258 + CreateChildImageViewAndAdd( mAnimationContainer, 0, mImages );
  259 + stage.Add( mAnimationContainer );
  260 +}
  261 +
  262 +// Remove controls added by this example from stage
  263 +void AnimationExample::Remove()
  264 +{
  265 + if ( mAnimationContainer )
  266 + {
  267 + UnparentAndReset( mRemoveButton );
  268 + UnparentAndReset( mAddButton );
  269 + UnparentAndReset( mSelectGridButton );
  270 + UnparentAndReset( mShakeButton );
  271 + UnparentAndReset( mAnimationContainer);
  272 + mImages.clear();
  273 + }
  274 +}
  275 +
  276 +bool AnimationExample::OnRemoveClicked( Button button )
  277 +{
  278 + DALI_LOG_INFO( gLayoutFilter, Debug::Verbose, "AnimationExample::OnRemoveClicked\n");
  279 +
  280 + if (mImages.size() > 1)
  281 + {
  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();
  288 + }
  289 + return true;
  290 +}
  291 +
  292 +// Change layout by setting new layout, triggers set layout transition
  293 +bool AnimationExample::OnSelectGridClicked( Button button )
  294 +{
  295 + DALI_LOG_INFO( gLayoutFilter, Debug::Verbose, "AnimationExample::OnRotateClicked\n");
  296 +
  297 + if ( !mGridSet )
  298 + {
  299 + mGridLayout.SetTransitionData( LayoutTransitionData::ON_OWNER_SET, CreateOnSetLayoutTransition( mAnimationContainer, mImages ) );
  300 + DevelControl::SetLayout( mAnimationContainer, mGridLayout );
  301 + }
  302 + else
  303 + {
  304 + mHorizontalLayout.SetTransitionData( LayoutTransitionData::ON_OWNER_SET, CreateOnSetLayoutTransition( mAnimationContainer, mImages ) );
  305 + DevelControl::SetLayout( mAnimationContainer, mHorizontalLayout );
  306 + }
  307 +
  308 + mGridSet = !mGridSet;
  309 + return true;
  310 +}
  311 +
  312 +bool AnimationExample::OnAddClicked( Button button )
  313 +{
  314 + if (mImages.size() < 4)
  315 + {
  316 + CreateChildImageViewAndAdd( mAnimationContainer, mImages.size(), mImages );
  317 + }
  318 + return true;
  319 +}
  320 +
  321 +bool AnimationExample::OnChangeClicked( Button button )
  322 +{
  323 + if ( !mGridSet )
  324 + {
  325 + auto layout = LinearLayout::DownCast( DevelControl::GetLayout( mAnimationContainer ) );
  326 + layout.SetAlignment( LinearLayout::Alignment::CENTER_HORIZONTAL | LinearLayout::Alignment::CENTER_VERTICAL );
  327 + if ( layout.GetOrientation() == LinearLayout::Orientation::VERTICAL )
  328 + {
  329 + layout.SetOrientation( LinearLayout::Orientation::HORIZONTAL );
  330 + }
  331 + else
  332 + {
  333 + layout.SetOrientation( LinearLayout::Orientation::VERTICAL );
  334 + }
  335 + }
  336 + else
  337 + {
  338 + auto layout = Grid::DownCast( DevelControl::GetLayout( mAnimationContainer ) );
  339 + if ( layout.GetNumberOfColumns() == 2 )
  340 + {
  341 + layout.SetNumberOfColumns(3);
  342 + }
  343 + else
  344 + {
  345 + layout.SetNumberOfColumns(2);
  346 + }
  347 + }
  348 + return true;
  349 +}
  350 +
  351 +} // namespace Demo
... ...
examples/layouting/animation-example.h 0 → 100644
  View file @b425954
  1 +#ifndef DALI_DEMO_ANIMATION_EXAMPLE_H
  2 +#define DALI_DEMO_ANIMATION_EXAMPLE_H
  3 +
  4 +/*
  5 + * Copyright (c) 2018 Samsung Electronics Co., Ltd.
  6 + *
  7 + * Licensed under the Apache License, Version 2.0 (the "License");
  8 + * you may not use this file except in compliance with the License.
  9 + * You may obtain a copy of the License at
  10 + *
  11 + * http://www.apache.org/licenses/LICENSE-2.0
  12 + *
  13 + * Unless required by applicable law or agreed to in writing, software
  14 + * distributed under the License is distributed on an "AS IS" BASIS,
  15 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16 + * See the License for the specific language governing permissions and
  17 + * limitations under the License.
  18 + *
  19 + */
  20 +
  21 +#include <dali/dali.h>
  22 +#include <dali-toolkit/dali-toolkit.h>
  23 +#include <dali-toolkit/devel-api/layouting/linear-layout.h>
  24 +#include <dali-toolkit/devel-api/layouting/grid.h>
  25 +
  26 +#include "example.h"
  27 +
  28 +using namespace Dali;
  29 +using namespace Dali::Toolkit;
  30 +
  31 +namespace Demo
  32 +{
  33 +
  34 +/**
  35 + * @file animation-example.hcpp
  36 + * @brief Example of a layout complex animation.
  37 + */
  38 +class AnimationExample final: public ConnectionTracker, public Example
  39 +{
  40 +public:
  41 + AnimationExample();
  42 +
  43 + // Creates a Animation Layout Example and displays it.
  44 + virtual void Create() override;
  45 +
  46 + // Remove and destroy this layout
  47 + virtual void Remove() override;
  48 +
  49 +private:
  50 +
  51 + bool OnRemoveClicked( Button button );
  52 +
  53 + bool OnSelectGridClicked( Button button );
  54 +
  55 + bool OnAddClicked( Button button );
  56 +
  57 + bool OnChangeClicked( Button button );
  58 +
  59 +private:
  60 + PushButton mRemoveButton;
  61 + PushButton mAddButton;
  62 + PushButton mSelectGridButton;
  63 + PushButton mShakeButton;
  64 + std::vector< Toolkit::ImageView > mImages;
  65 + Control mAnimationContainer;
  66 + Grid mGridLayout;
  67 + LinearLayout mHorizontalLayout;
  68 + bool mGridSet;
  69 +}; // class AnimationContainer
  70 +
  71 +} // namespace Demo
  72 +
  73 +#endif //DALI_DEMO_ANIMATION_CONTAINER_H
... ...
examples/layouting/layouting-examples.cpp
  View file @b425954
... ... @@ -24,6 +24,7 @@
24 24  
25 25 // INTERNAL INCLUDES
26 26 #include "shared/view.h"
  27 +#include "animation-example.h"
27 28 #include "linear-example.h"
28 29 #include "padding-example.h"
29 30 #include "flex-example.h"
... ... @@ -47,6 +48,7 @@ typedef std::vector&lt; ExamplePointer &gt; ExampleContainer;
47 48 /// All layouting examples to be shown should be added to this method
48 49 void CreateExamples( ExampleContainer& container )
49 50 {
  51 + container.push_back( ExamplePointer(new Demo::AnimationExample) );
50 52 container.push_back( ExamplePointer(new Demo::LinearExample) );
51 53 container.push_back( ExamplePointer(new Demo::PaddingExample) );
52 54 container.push_back( ExamplePointer(new Demo::AbsoluteExample) );
... ...