From: Anton Obzhirov Date: Fri, 9 Nov 2018 16:44:40 +0000 (+0000) Subject: Add update measured size for focus animation. X-Git-Tag: dali_1.3.52~2 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=refs%2Fchanges%2F17%2F192817%2F6;p=platform%2Fcore%2Fuifw%2Fdali-demo.git Add update measured size for focus animation. Change-Id: Ief3b7b310e90e6fb11587aa64f6f2615d9613c79 --- diff --git a/examples/layouting/animation-example.cpp b/examples/layouting/animation-example.cpp index a3f2dac..3b2c0a9 100644 --- a/examples/layouting/animation-example.cpp +++ b/examples/layouting/animation-example.cpp @@ -17,6 +17,7 @@ #include #include "animation-example.h" +#include #include #include #include @@ -65,15 +66,17 @@ void CreateChild( ImageView& child, int index, Size size ) { child = ImageView::New(); Property::Map imagePropertyMap; - imagePropertyMap[ Toolkit::Visual::Property::TYPE ] = Toolkit::Visual::IMAGE; - imagePropertyMap[ Toolkit::ImageVisual::Property::URL ] = IMAGE_PATH[ index ]; + imagePropertyMap[ Visual::Property::TYPE ] = Toolkit::Visual::IMAGE; + imagePropertyMap[ ImageVisual::Property::URL ] = IMAGE_PATH[ index ]; imagePropertyMap[ ImageVisual::Property::DESIRED_WIDTH ] = size.width; imagePropertyMap[ ImageVisual::Property::DESIRED_HEIGHT ] = size.height; + imagePropertyMap[ ImageVisual::Property::FITTING_MODE ] = FittingMode::SCALE_TO_FILL; child.SetProperty( Toolkit::ImageView::Property::IMAGE, imagePropertyMap ); std::string name = "ImageView"; name.append( 1, '0' + index ); child.SetName( name ); - child.SetAnchorPoint( AnchorPoint::TOP_LEFT ); + child.SetAnchorPoint( AnchorPoint::CENTER ); + child.SetProperty( DevelActor::Property::POSITION_USES_ANCHOR_POINT, false ); } // Create set layout transition. A parent opacity increases 'ease in out' from semi-transparent to fully opaque and children pulse in order @@ -93,6 +96,19 @@ LayoutTransitionData CreateOnSetLayoutTransition( Control& container ) // Apply to parent only layoutTransitionData.AddPropertyAnimator( container, map ); + // Reset scale after possible focus animation + { + Property::Map map; + map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::SCALE; + map[ LayoutTransitionData::AnimatorKey::TARGET_VALUE ] = Vector3::ONE; + map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map() + .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map() + .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f) + .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.0f)); + layoutTransitionData.AddPropertyAnimator( Actor(), map ); + } + + // Children pulses in/out for( size_t i = 0; i < container.GetChildCount(); i++ ) { Property::Map map; @@ -106,6 +122,18 @@ LayoutTransitionData CreateOnSetLayoutTransition( Control& container ) layoutTransitionData.AddPropertyAnimator( container.GetChildAt( i ), map ); } + // Children move + { + Property::Map map; + 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.5f ) ); + layoutTransitionData.AddPropertyAnimator( Actor(), map ); + } + return layoutTransitionData; } @@ -124,13 +152,25 @@ LayoutTransitionData CreateOnChildAddTransition( Control& parent ) .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.0f ) ); layoutTransitionData.AddPropertyAnimator( parent, map ); + // Reset scale after possible focus animation + { + Property::Map map; + map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::SCALE; + map[ LayoutTransitionData::AnimatorKey::TARGET_VALUE ] = Vector3::ONE; + 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 ); + } + // New child is growing { Property::Map map; map[ LayoutTransitionData::AnimatorKey::CONDITION ] = LayoutTransitionData::Condition::ON_ADD; - map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::SIZE; - 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::PROPERTY ] = Actor::Property::SCALE; + map[ LayoutTransitionData::AnimatorKey::INITIAL_VALUE ] = Vector3::ZERO; + map[ LayoutTransitionData::AnimatorKey::TARGET_VALUE ] = Vector3::ONE; map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map() .Add( LayoutTransitionData::AnimatorKey::ALPHA_FUNCTION, AlphaFunction::LINEAR ) .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map() @@ -152,6 +192,18 @@ LayoutTransitionData CreateOnChildAddTransition( Control& parent ) layoutTransitionData.AddPropertyAnimator( Actor(), map ); } + // Other just move + { + Property::Map map; + 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.5f ) ); + layoutTransitionData.AddPropertyAnimator( Actor(), map ); + } + return layoutTransitionData; } @@ -160,56 +212,112 @@ LayoutTransitionData CreateOnChildRemoveTransition( Control& container ) { auto layoutTransitionData = LayoutTransitionData::New(); - // Apply animation to remaining children - 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 ); + // Reset scale after possible focus animation + { + Property::Map map; + map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::SCALE; + map[ LayoutTransitionData::AnimatorKey::TARGET_VALUE ] = Vector3::ONE; + map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map() + .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map() + .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f) + .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.0f)); + layoutTransitionData.AddPropertyAnimator( Actor(), map ); + } + + // Apply animation to remaining children - sin shaking + { + 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 ); + } + + // Add a linear to reduce a linear to half + { + Property::Map map; + 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.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 ) +// Create child focus transition. A focus gained child grows 120% and focus lost child gets its original size back +LayoutTransitionData CreateOnChildFocusTransition( Control& parent, bool affectsSiblings ) { auto layoutTransitionData = LayoutTransitionData::New(); + // Focus gain child animation { 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::AFFECTS_SIBLINGS ] = affectsSiblings; + map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::SCALE; + map[ LayoutTransitionData::AnimatorKey::TARGET_VALUE ] = Vector3( 1.2f, 1.2f, 1.0f ); map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map() + .Add( LayoutTransitionData::AnimatorKey::TYPE, LayoutTransitionData::Animator::ANIMATE_TO ) .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map() .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f ) .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.5f ) ); layoutTransitionData.AddPropertyAnimator( Actor(), map ); } + // Focus lost child animation { 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::AFFECTS_SIBLINGS ] = affectsSiblings; + map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::SCALE; + map[ LayoutTransitionData::AnimatorKey::TARGET_VALUE ] = Vector3( 1.0f, 1.0f, 1.0f ); map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map() + .Add( LayoutTransitionData::AnimatorKey::TYPE, LayoutTransitionData::Animator::ANIMATE_TO ) .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map() .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f ) .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.5f ) ); layoutTransitionData.AddPropertyAnimator( Actor(), map ); } + // Linear children positioning + { + Property::Map map; + map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::POSITION; + map[ LayoutTransitionData::AnimatorKey::TARGET_VALUE ] = Property::Value(); + 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; } // An example of custom default transition, ease in for position animation, ease out for size animation -LayoutTransitionData CreateCustomDefaultTransition( Control& parent ) +LayoutTransitionData CreateCustomDefaultTransition( Control& control ) { auto layoutTransitionData = LayoutTransitionData::New(); + // Resets control scale after possible focus animation + { + Property::Map map; + map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::SCALE; + map[ LayoutTransitionData::AnimatorKey::TARGET_VALUE ] = Vector3::ONE; + map[ LayoutTransitionData::AnimatorKey::ANIMATOR ] = Property::Map() + .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map() + .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f ) + .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.0f ) ); + layoutTransitionData.AddPropertyAnimator( control, map ); + } + // Moves control ease in { Property::Map map; map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::POSITION; @@ -218,9 +326,10 @@ LayoutTransitionData CreateCustomDefaultTransition( Control& parent ) .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map() .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f ) .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.5f ) ); - layoutTransitionData.AddPropertyAnimator( parent, map ); + layoutTransitionData.AddPropertyAnimator( control, map ); } + // Sizes control ease out { Property::Map map; map[ LayoutTransitionData::AnimatorKey::PROPERTY ] = Actor::Property::SIZE; @@ -229,7 +338,7 @@ LayoutTransitionData CreateCustomDefaultTransition( Control& parent ) .Add( LayoutTransitionData::AnimatorKey::TIME_PERIOD, Property::Map() .Add( LayoutTransitionData::AnimatorKey::DELAY, 0.0f ) .Add( LayoutTransitionData::AnimatorKey::DURATION, 0.5f ) ); - layoutTransitionData.AddPropertyAnimator( parent, map ); + layoutTransitionData.AddPropertyAnimator( control, map ); } return layoutTransitionData; @@ -318,16 +427,16 @@ 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_FOCUS, CreateOnChildFocusTransition( mAnimationContainer, true ) ); 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.SetAnimateLayout( true ); + mGridLayout.SetNumberOfColumns( 2 ); + mGridLayout.SetTransitionData( LayoutTransitionData::ON_CHILD_FOCUS, CreateOnChildFocusTransition( mAnimationContainer, false ) ); mGridLayout.SetTransitionData( LayoutTransitionData::ON_CHILD_REMOVE, CreateOnChildRemoveTransition( mAnimationContainer ) ); mGridLayout.SetTransitionData( LayoutTransitionData::ON_CHILD_ADD, CreateOnChildAddTransition( mAnimationContainer ) ); @@ -335,8 +444,7 @@ void AnimationExample::Create() stage.Add( mAnimationContainer ); } -// Remove controls added by this example from stage mGridLayout.SetTransitionData( LayoutTransitionData::ON_CHILD_FOCUS, CreateOnChildFocusTransition( mAnimationContainer ) ); - +// Remove controls added by this example from stage void AnimationExample::Remove() { if ( mAnimationContainer )