diff --git a/examples/layouting/animation-example.cpp b/examples/layouting/animation-example.cpp index 8582ca5..a3f2dac 100644 --- a/examples/layouting/animation-example.cpp +++ b/examples/layouting/animation-example.cpp @@ -22,6 +22,7 @@ #include #include #include +#include #include @@ -59,24 +60,24 @@ Debug::Filter* gLayoutFilter = Debug::Filter::New( Debug::NoLogging, false, "LOG const unsigned int NUMBER_OF_RESOURCES = sizeof(IMAGE_PATH) / sizeof(char*); -// Helper function to create ImageViews with given filename and size. -void CreateChildImageView( ImageView& imageView, int index, Size size ) +// Helper function +void CreateChild( ImageView& child, int index, Size size ) { - imageView = ImageView::New(); + child = ImageView::New(); Property::Map imagePropertyMap; imagePropertyMap[ Toolkit::Visual::Property::TYPE ] = Toolkit::Visual::IMAGE; imagePropertyMap[ Toolkit::ImageVisual::Property::URL ] = IMAGE_PATH[ index ]; imagePropertyMap[ ImageVisual::Property::DESIRED_WIDTH ] = size.width; imagePropertyMap[ ImageVisual::Property::DESIRED_HEIGHT ] = size.height; - imageView.SetProperty( Toolkit::ImageView::Property::IMAGE, imagePropertyMap ); + child.SetProperty( Toolkit::ImageView::Property::IMAGE, imagePropertyMap ); std::string name = "ImageView"; name.append( 1, '0' + index ); - imageView.SetName( name ); - imageView.SetAnchorPoint( AnchorPoint::TOP_LEFT ); - imageView.SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS ); + child.SetName( name ); + child.SetAnchorPoint( AnchorPoint::TOP_LEFT ); } -LayoutTransitionData CreateOnSetLayoutTransition( Control& parent, std::vector< Toolkit::ImageView >& children ) +// Create set layout transition. A parent opacity increases 'ease in out' from semi-transparent to fully opaque and children pulse in order +LayoutTransitionData CreateOnSetLayoutTransition( Control& container ) { auto layoutTransitionData = LayoutTransitionData::New(); Property::Map map; @@ -84,31 +85,32 @@ LayoutTransitionData CreateOnSetLayoutTransition( Control& parent, std::vector< map[ LayoutTransitionData::AnimatorKey::INITIAL_VALUE ] = 0.5f; map[ LayoutTransitionData::AnimatorKey::TARGET_VALUE ] = 1.0f; map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map() - .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, "EASE_IN_OUT" ) + .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, AlphaFunction::EASE_IN_OUT ) .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map() .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.25f ) .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.5f ) ); // Apply to parent only - layoutTransitionData.AddPropertyAnimator( parent, map ); + layoutTransitionData.AddPropertyAnimator( container, map ); - for( size_t i = 0; i < children.size(); i++ ) + for( size_t i = 0; i < container.GetChildCount(); i++ ) { Property::Map map; map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::SIZE; map[ LayoutTransitionData::AnimatorKey::TARGET_VALUE ] = Vector3( 100.0f * 1.2f, 100.0f * 1.2f, 0 ); map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map() - .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, "SIN" ) + .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, AlphaFunction::SIN ) .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map() .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.5f + 0.1f * i) .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.25f ) ); - layoutTransitionData.AddPropertyAnimator( children[i], map ); + layoutTransitionData.AddPropertyAnimator( container.GetChildAt( i ), map ); } return layoutTransitionData; } -LayoutTransitionData CreateOnChildAddTransition( Control& parent, ImageView& child ) +// Create add child transition. An added child grows from (0, 0) to its full size and instantly appears in its position +LayoutTransitionData CreateOnChildAddTransition( Control& parent ) { auto layoutTransitionData = LayoutTransitionData::New(); @@ -116,7 +118,7 @@ LayoutTransitionData CreateOnChildAddTransition( Control& parent, ImageView& chi Property::Map map; map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::SIZE; map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map() - .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, "LINEAR") + .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, AlphaFunction::LINEAR ) .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map() .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f ) .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.0f ) ); @@ -125,62 +127,129 @@ LayoutTransitionData CreateOnChildAddTransition( Control& parent, ImageView& chi // New child is growing { Property::Map map; + map[ LayoutTransitionData::AnimatorKey::CONDITION ] = LayoutTransitionData::Condition::ON_ADD; map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::SIZE; - map["initialValue"] = Vector3( 0.0f, 0.0f, 0 ); + map[ LayoutTransitionData::AnimatorKey::INITIAL_VALUE ] = Vector3( 0.0f, 0.0f, 0 ); map[ LayoutTransitionData::AnimatorKey::TARGET_VALUE ] = Vector3( 100.0f, 100.0f, 0 ); map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map() - .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, "LINEAR") + .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, AlphaFunction::LINEAR ) .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map() .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f ) .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.5f ) ); - layoutTransitionData.AddPropertyAnimator( child, map ); + layoutTransitionData.AddPropertyAnimator( Actor(), map ); } // Want new children instantly appear in their positions { Property::Map map; - map[ LayoutTransitionData::AnimatorKey::PROPERTY] = Actor::Property::POSITION; - map[ LayoutTransitionData::AnimatorKey::ANIMATOR] = Property::Map() - .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, "LINEAR") + map[ LayoutTransitionData::AnimatorKey::CONDITION ] = LayoutTransitionData::Condition::ON_ADD; + map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::POSITION; + map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map() + .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, AlphaFunction::LINEAR ) .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map() .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f ) .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.0f ) ); - layoutTransitionData.AddPropertyAnimator( child, map ); + layoutTransitionData.AddPropertyAnimator( Actor(), map ); } return layoutTransitionData; } -LayoutTransitionData CreateOnChildRemoveTransition(std::vector< Toolkit::ImageView >& images) +// Create remove child transition. Remaining children shake around their positions +LayoutTransitionData CreateOnChildRemoveTransition( Control& container ) { auto layoutTransitionData = LayoutTransitionData::New(); + // Apply animation to remaining children - for (unsigned int i = 0; i < images.size(); i++) + Property::Map map; + map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::POSITION; + map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map() + .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, AlphaFunction::SIN ) + .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map() + .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f) + .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.5f)); + layoutTransitionData.AddPropertyAnimator( Actor(), map ); + + return layoutTransitionData; +} + +// Create child focus transition. A focus gained child grows 115% and focus lost child gets its original size back +LayoutTransitionData CreateOnChildFocusTransition( Control& parent ) +{ + auto layoutTransitionData = LayoutTransitionData::New(); + { - { - Property::Map map; - map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = "position"; - map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map() - .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, "SIN") - .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map() - .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f) - .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.5f)); - layoutTransitionData.AddPropertyAnimator( images[i], map ); - } + Property::Map map; + map[ LayoutTransitionData::AnimatorKey::CONDITION ] = LayoutTransitionData::Condition::ON_FOCUS_GAINED; + map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::SIZE; + map[ LayoutTransitionData::AnimatorKey::TARGET_VALUE ] = Vector3( 115.0f, 115.0f, 0 ); + map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map() + .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map() + .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f ) + .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.5f ) ); + layoutTransitionData.AddPropertyAnimator( Actor(), map ); + } + + { + Property::Map map; + map[ LayoutTransitionData::AnimatorKey::CONDITION ] = LayoutTransitionData::Condition::ON_FOCUS_LOST; + map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::SIZE; + map[ LayoutTransitionData::AnimatorKey::TARGET_VALUE ] = Vector3( 100.0f, 100.0f, 0 ); + map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map() + .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map() + .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f ) + .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.5f ) ); + layoutTransitionData.AddPropertyAnimator( Actor(), map ); } return layoutTransitionData; } -void CreateChildImageViewAndAdd( Control& container, int index, std::vector< Toolkit::ImageView >& images ) +// An example of custom default transition, ease in for position animation, ease out for size animation +LayoutTransitionData CreateCustomDefaultTransition( Control& parent ) { - Toolkit::ImageView imageView; - CreateChildImageView( imageView, index, Size( 100.0f, 100.0f ) ); - auto layout = DevelControl::GetLayout( container ); - layout.SetTransitionData( LayoutTransitionData::ON_CHILD_ADD, CreateOnChildAddTransition( container, imageView ) ); + auto layoutTransitionData = LayoutTransitionData::New(); + + { + Property::Map map; + map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::POSITION; + map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map() + .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, AlphaFunction::EASE_IN ) + .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map() + .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f ) + .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.5f ) ); + layoutTransitionData.AddPropertyAnimator( parent, map ); + } + { + Property::Map map; + map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::SIZE; + map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map() + .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, AlphaFunction::EASE_OUT ) + .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map() + .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f ) + .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.5f ) ); + layoutTransitionData.AddPropertyAnimator( parent, map ); + } + + return layoutTransitionData; +} + +bool OnImageTouchCallback( Actor actor, const TouchData& event ) +{ + KeyInputFocusManager manager = KeyInputFocusManager::Get(); + manager.SetFocus( Control::DownCast( actor ) ); + return true; +} + +void CreateChildAndAdd( Demo::AnimationExample& animationExample, Control& container ) +{ + Toolkit::ImageView imageView; + CreateChild( imageView, container.GetChildCount(), Size( 100.0f, 100.0f ) ); + imageView.TouchSignal().Connect( &animationExample, &OnImageTouchCallback ); container.Add( imageView ); - images.push_back( imageView ); + + DevelControl::GetLayout( imageView ).SetTransitionData( Toolkit::LayoutTransitionData::ON_LAYOUT_CHANGE, CreateCustomDefaultTransition( imageView ) ); } } // namespace @@ -249,17 +318,25 @@ void AnimationExample::Create() mHorizontalLayout.SetOrientation( LinearLayout::Orientation::HORIZONTAL ); mHorizontalLayout.SetAlignment( LinearLayout::Alignment::CENTER_HORIZONTAL | LinearLayout::Alignment::CENTER_VERTICAL ); mHorizontalLayout.SetAnimateLayout(true); + mHorizontalLayout.SetTransitionData( LayoutTransitionData::ON_CHILD_FOCUS, CreateOnChildFocusTransition( mAnimationContainer ) ); + mHorizontalLayout.SetTransitionData( LayoutTransitionData::ON_CHILD_REMOVE, CreateOnChildRemoveTransition( mAnimationContainer ) ); + mHorizontalLayout.SetTransitionData( LayoutTransitionData::ON_CHILD_ADD, CreateOnChildAddTransition( mAnimationContainer ) ); + DevelControl::SetLayout( mAnimationContainer, mHorizontalLayout ); mGridLayout = Grid::New(); mGridLayout.SetAnimateLayout(true); mGridLayout.SetNumberOfColumns(2); + mGridLayout.SetTransitionData( LayoutTransitionData::ON_CHILD_FOCUS, CreateOnChildFocusTransition( mAnimationContainer ) ); + mGridLayout.SetTransitionData( LayoutTransitionData::ON_CHILD_REMOVE, CreateOnChildRemoveTransition( mAnimationContainer ) ); + mGridLayout.SetTransitionData( LayoutTransitionData::ON_CHILD_ADD, CreateOnChildAddTransition( mAnimationContainer ) ); - CreateChildImageViewAndAdd( mAnimationContainer, 0, mImages ); + CreateChildAndAdd( *this, mAnimationContainer ); stage.Add( mAnimationContainer ); } -// Remove controls added by this example from stage +// Remove controls added by this example from stage mGridLayout.SetTransitionData( LayoutTransitionData::ON_CHILD_FOCUS, CreateOnChildFocusTransition( mAnimationContainer ) ); + void AnimationExample::Remove() { if ( mAnimationContainer ) @@ -269,7 +346,6 @@ void AnimationExample::Remove() UnparentAndReset( mSelectGridButton ); UnparentAndReset( mShakeButton ); UnparentAndReset( mAnimationContainer); - mImages.clear(); } } @@ -277,14 +353,9 @@ bool AnimationExample::OnRemoveClicked( Button button ) { DALI_LOG_INFO( gLayoutFilter, Debug::Verbose, "AnimationExample::OnRemoveClicked\n"); - if (mImages.size() > 1) + if ( mAnimationContainer.GetChildCount() > 1 ) { - auto layout = DevelControl::GetLayout( mAnimationContainer ); - layout.SetTransitionData(LayoutTransitionData::ON_CHILD_REMOVE, CreateOnChildRemoveTransition( mImages ) ); - - ImageView imageView = mImages.back(); - mAnimationContainer.Remove( imageView ); - mImages.pop_back(); + mAnimationContainer.Remove( mAnimationContainer.GetChildAt( mAnimationContainer.GetChildCount() - 1 ) ); } return true; } @@ -296,12 +367,12 @@ bool AnimationExample::OnSelectGridClicked( Button button ) if ( !mGridSet ) { - mGridLayout.SetTransitionData( LayoutTransitionData::ON_OWNER_SET, CreateOnSetLayoutTransition( mAnimationContainer, mImages ) ); + mGridLayout.SetTransitionData( LayoutTransitionData::ON_OWNER_SET, CreateOnSetLayoutTransition( mAnimationContainer ) ); DevelControl::SetLayout( mAnimationContainer, mGridLayout ); } else { - mHorizontalLayout.SetTransitionData( LayoutTransitionData::ON_OWNER_SET, CreateOnSetLayoutTransition( mAnimationContainer, mImages ) ); + mHorizontalLayout.SetTransitionData( LayoutTransitionData::ON_OWNER_SET, CreateOnSetLayoutTransition( mAnimationContainer ) ); DevelControl::SetLayout( mAnimationContainer, mHorizontalLayout ); } @@ -311,9 +382,9 @@ bool AnimationExample::OnSelectGridClicked( Button button ) bool AnimationExample::OnAddClicked( Button button ) { - if (mImages.size() < 4) + if( mAnimationContainer.GetChildCount() < 4 ) { - CreateChildImageViewAndAdd( mAnimationContainer, mImages.size(), mImages ); + CreateChildAndAdd( *this, mAnimationContainer ); } return true; } diff --git a/examples/layouting/animation-example.h b/examples/layouting/animation-example.h index e8ea61b..c579cc9 100644 --- a/examples/layouting/animation-example.h +++ b/examples/layouting/animation-example.h @@ -61,7 +61,6 @@ private: PushButton mAddButton; PushButton mSelectGridButton; PushButton mShakeButton; - std::vector< Toolkit::ImageView > mImages; Control mAnimationContainer; Grid mGridLayout; LinearLayout mHorizontalLayout;