Merge "Custom control transform animation" into devel/master

Adeel Kazmi · Gerrit Code Review
2 parents a7d713b0 4ac781f5
Showing 15 changed files with 1067 additions and 3 deletions
com.samsung.dali-demo.xml
demo/dali-demo.cpp
examples/styling/image-channel-control-impl.cpp
examples/transitions/beat-control-impl.cpp
examples/transitions/beat-control-impl.h
examples/transitions/beat-control.cpp
examples/transitions/beat-control.h
examples/transitions/transition-application.cpp
examples/transitions/transition-application.h
examples/transitions/transition-example.cpp
resources/po/en_GB.po
resources/po/en_US.po
resources/style/mobile/style-example-theme-one.json.in
resources/style/style-example-theme-one.json.in
shared/dali-demo-strings.h
@@ -175,4 +175,7 @@
 	<ui-application appid="fpp-game.example" exec="/usr/apps/com.samsung.dali-demo/bin/fpp-game.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
 		<label>First Person Camera Game</label>
 	</ui-application>
+	<ui-application appid="transitions.example" exec="/usr/apps/com.samsung.dali-demo/bin/transitions.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
+		<label>Visual Transitions</label>
+	</ui-application>
 </manifest>
@@ -82,6 +82,7 @@ int DALI_EXPORT_API main(int argc, char **argv)
   demo.AddExample(Example("primitive-shapes.example", DALI_DEMO_STR_TITLE_PRIMITIVE_SHAPES));
   demo.AddExample(Example("styling.example", DALI_DEMO_STR_TITLE_STYLING));
   demo.AddExample(Example("sparkle.example", DALI_DEMO_STR_TITLE_SPARKLE));
+  demo.AddExample(Example("transitions.example", DALI_DEMO_STR_TITLE_VISUAL_TRANSITIONS));
   demo.AddExample(Example("progress-bar.example", DALI_DEMO_STR_TITLE_PROGRESS_BAR));
   demo.AddExample(Example("contact-cards.example", DALI_DEMO_STR_TITLE_CONTACT_CARDS));
   demo.AddExample(Example("flex-container.example", DALI_DEMO_STR_TITLE_FLEXBOX_PLAYGROUND));
@@ -112,8 +112,6 @@ void ImageChannelControl::SetVisibility( bool visibility )
 {
   printf("ImageChannelControl %s: SetVisibility( %s )\n", Self().GetName().c_str(), visibility?"T":"F" );
-  Animation animation;
-
   if( mAnimation )
   {
     mAnimation.Stop();
+/*
+ * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#include "beat-control-impl.h"
+#include <dali-toolkit/dali-toolkit.h>
+#include <dali/public-api/object/type-registry-helper.h>
+#include <dali-toolkit/devel-api/align-enums.h>
+#include <dali-toolkit/devel-api/visual-factory/visual-factory.h>
+#include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
+
+#include <cstdio>
+
+using namespace Dali; // Needed for macros
+using namespace Dali::Toolkit;
+
+namespace Demo
+{
+namespace Internal
+{
+
+namespace
+{
+
+
+Dali::BaseHandle Create()
+{
+  return Demo::BeatControl::New();
+}
+
+DALI_TYPE_REGISTRATION_BEGIN( BeatControl, Dali::Toolkit::Control, Create );
+
+DALI_PROPERTY_REGISTRATION( Demo, BeatControl, "bounceTransition", STRING, BOUNCE_TRANSITION );
+DALI_PROPERTY_REGISTRATION( Demo, BeatControl, "leftTransition", STRING, LEFT_TRANSITION );
+DALI_PROPERTY_REGISTRATION( Demo, BeatControl, "upTransition", STRING, UP_TRANSITION );
+DALI_PROPERTY_REGISTRATION( Demo, BeatControl, "beatVisual", MAP, BEAT_VISUAL );
+DALI_TYPE_REGISTRATION_END();
+
+
+Toolkit::TransitionData ConvertPropertyToTransition( const Property::Value& value )
+{
+  Toolkit::TransitionData transitionData;
+
+  if( value.GetType() == Property::ARRAY )
+  {
+    transitionData = Toolkit::TransitionData::New( *value.GetArray());
+  }
+  else if( value.GetType() == Property::MAP )
+  {
+    transitionData = Toolkit::TransitionData::New( *value.GetMap() );
+  }
+  return transitionData;
+}
+
+} // anonymous namespace
+
+
+Internal::BeatControl::BeatControl()
+: Control( ControlBehaviour( REQUIRES_STYLE_CHANGE_SIGNALS ) )
+{
+}
+
+Internal::BeatControl::~BeatControl()
+{
+}
+
+Demo::BeatControl Internal::BeatControl::New()
+{
+  IntrusivePtr<Internal::BeatControl> impl = new Internal::BeatControl();
+  Demo::BeatControl handle = Demo::BeatControl( *impl );
+  impl->Initialize();
+  return handle;
+}
+
+
+void BeatControl::StartBounceAnimation()
+{
+  if( mAnimation )
+  {
+    mAnimation.Stop();
+    mAnimation.FinishedSignal().Disconnect( this, &BeatControl::OnBounceAnimationFinished );
+    OnBounceAnimationFinished(mAnimation);
+  }
+
+  mAnimation = CreateTransition( mBounceTransition );
+  mAnimation.FinishedSignal().Connect( this, &BeatControl::OnBounceAnimationFinished );
+  mAnimation.Play();
+}
+
+
+void BeatControl::StartXAnimation()
+{
+  if( mXAnimation )
+  {
+    mXAnimation.Stop();
+    mXAnimation.FinishedSignal().Disconnect( this, &BeatControl::OnXAnimationFinished );
+    OnXAnimationFinished(mXAnimation);
+  }
+
+  mXAnimation = CreateTransition( mLeftTransition );
+  mXAnimation.FinishedSignal().Connect( this, &BeatControl::OnXAnimationFinished );
+  mXAnimation.Play();
+}
+
+void BeatControl::StartYAnimation()
+{
+  if( mYAnimation )
+  {
+    mYAnimation.Stop();
+    mYAnimation.FinishedSignal().Disconnect( this, &BeatControl::OnYAnimationFinished );
+    OnYAnimationFinished(mYAnimation);
+  }
+
+  mYAnimation = CreateTransition( mUpTransition );
+  mYAnimation.FinishedSignal().Connect( this, &BeatControl::OnYAnimationFinished );
+  mYAnimation.Play();
+}
+
+
+void BeatControl::OnBounceAnimationFinished( Animation& src )
+{
+  // Do stuff
+}
+void BeatControl::OnXAnimationFinished( Animation& src )
+{
+  // Do stuff
+}
+void BeatControl::OnYAnimationFinished( Animation& src )
+{
+  // Do stuff
+}
+
+void BeatControl::OnInitialize()
+{
+  Actor self = Self();
+}
+
+void BeatControl::OnStageConnection( int depth )
+{
+  Control::OnStageConnection( depth );
+}
+
+void BeatControl::OnStageDisconnection()
+{
+  Control::OnStageDisconnection();
+}
+
+void BeatControl::OnSizeSet( const Vector3& targetSize )
+{
+  Control::OnSizeSet( targetSize );
+  RelayoutVisuals( Vector2( targetSize ) );
+}
+
+void BeatControl::OnRelayout( const Vector2& targetSize, RelayoutContainer& container )
+{
+  RelayoutVisuals( targetSize );
+}
+
+void BeatControl::RelayoutVisuals( const Vector2& targetSize )
+{
+  if( mVisual )
+  {
+    Vector2 size( targetSize );
+    Property::Map transformMap;
+    // Make the visual half the size of the control, but leave
+    // origin and anchor point at center, position is relative, but Zer0
+    transformMap[ DevelVisual::Transform::Property::SIZE ] = Vector2(0.5, 0.5);
+    mVisual.SetTransformAndSize( transformMap, size );
+
+    // @todo We must stop this clashing with a transform animation
+  }
+}
+
+Vector3 BeatControl::GetNaturalSize()
+{
+  if( mVisual )
+  {
+    Vector2 naturalSize;
+    mVisual.GetNaturalSize(naturalSize);
+    return Vector3(naturalSize);
+  }
+  return Vector3::ZERO;
+}
+
+void BeatControl::OnStyleChange( Toolkit::StyleManager styleManager, StyleChange::Type change )
+{
+  // Chain up.
+  Control::OnStyleChange( styleManager, change );
+}
+
+
+///////////////////////////////////////////////////////////
+//
+// Properties
+//
+
+void BeatControl::SetProperty( BaseObject* object, Property::Index index, const Property::Value& value )
+{
+  Demo::BeatControl beatControl = Demo::BeatControl::DownCast( Dali::BaseHandle( object ) );
+
+  if( beatControl )
+  {
+    BeatControl& impl = GetImpl( beatControl );
+    Actor self = impl.Self();
+    switch ( index )
+    {
+      case Demo::BeatControl::Property::BEAT_VISUAL:
+      {
+        Property::Map* map = value.GetMap();
+        if( map )
+        {
+          impl.mVisual = Toolkit::VisualFactory::Get().CreateVisual( *map );
+          impl.RegisterVisual( Demo::BeatControl::Property::BEAT_VISUAL, impl.mVisual );
+        }
+        break;
+      }
+      case Demo::BeatControl::Property::BOUNCE_TRANSITION:
+      {
+        impl.mBounceTransition = ConvertPropertyToTransition( value );
+        break;
+      }
+      case Demo::BeatControl::Property::LEFT_TRANSITION:
+      {
+        impl.mLeftTransition = ConvertPropertyToTransition( value );
+        break;
+      }
+      case Demo::BeatControl::Property::UP_TRANSITION:
+      {
+        impl.mUpTransition = ConvertPropertyToTransition( value );
+        break;
+      }
+    }
+  }
+}
+
+Property::Value BeatControl::GetProperty( BaseObject* object, Property::Index propertyIndex )
+{
+  Property::Value value;
+
+  Demo::BeatControl beatControl = Demo::BeatControl::DownCast( Dali::BaseHandle( object ) );
+
+  if ( beatControl )
+  {
+    BeatControl& impl = GetImpl( beatControl );
+    switch ( propertyIndex )
+    {
+      case Demo::BeatControl::Property::BEAT_VISUAL:
+      {
+        if( impl.mVisual )
+        {
+          Property::Map map;
+          impl.mVisual.CreatePropertyMap(map);
+          value = map;
+        }
+        break;
+      }
+      case Demo::BeatControl::Property::BOUNCE_TRANSITION:
+      default:
+        break;
+    }
+  }
+
+  return value;
+}
+
+
+} // Internal
+} // Demo
+#ifndef DALI_DEMO_INTERNAL_BEAT_CONTROL_IMPL_H
+#define DALI_DEMO_INTERNAL_BEAT_CONTROL_IMPL_H
+
+/*
+ * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#include "beat-control.h"
+#include <dali/public-api/animation/animation.h>
+#include <dali-toolkit/public-api/controls/control-impl.h>
+#include <dali-toolkit/devel-api/visual-factory/visual-base.h>
+#include <dali-toolkit/devel-api/visual-factory/transition-data.h>
+
+namespace Demo
+{
+
+namespace Internal // To use TypeRegistry, handle and body classes need the same name
+{
+
+class BeatControl : public Dali::Toolkit::Internal::Control
+{
+public:
+  /**
+   * Instantiate a new BeatControl object
+   */
+  static Demo::BeatControl New();
+  BeatControl();
+  ~BeatControl();
+
+public: // API
+  void StartBounceAnimation();
+
+  void StartXAnimation();
+
+  void StartYAnimation();
+
+public:  // Properties
+  /**
+   * Called when a property of an object of this type is set.
+   * @param[in] object The object whose property is set.
+   * @param[in] index The property index.
+   * @param[in] value The new property value.
+   */
+  static void SetProperty( Dali::BaseObject* object, Dali::Property::Index index, const Dali::Property::Value& value );
+
+  /**
+   * Called to retrieve a property of an object of this type.
+   * @param[in] object The object whose property is to be retrieved.
+   * @param[in] index The property index.
+   * @return The current value of the property.
+   */
+  static Dali::Property::Value GetProperty( Dali::BaseObject* object, Dali::Property::Index propertyIndex );
+
+private: // From Control
+  /**
+   * @copydoc Toolkit::Control::OnInitialize()
+   */
+  virtual void OnInitialize();
+
+  /**
+   * @copydoc Toolkit::Control::OnStageConnect()
+   */
+  virtual void OnStageConnection( int depth );
+
+  /**
+   * @copydoc Toolkit::Control::OnStageDisconnection()
+   */
+  virtual void OnStageDisconnection();
+
+  /**
+   * @copydoc Toolkit::Control::OnSizeSet()
+   */
+  virtual void OnSizeSet( const Dali::Vector3& targetSize );
+
+  /**
+   * @copydoc Toolkit::Control::OnRelayout()
+   */
+  virtual void OnRelayout( const Dali::Vector2& targetSize, Dali::RelayoutContainer& container );
+  /**
+   * @copydoc Toolkit::Control::GetNaturalSize
+   */
+  virtual Dali::Vector3 GetNaturalSize();
+
+  /**
+   * @copydoc Toolkit::Control::OnStyleChange
+   */
+  virtual void OnStyleChange( Dali::Toolkit::StyleManager styleManager, Dali::StyleChange::Type change );
+
+private:
+  void OnBounceAnimationFinished( Dali::Animation& handle );
+  void OnXAnimationFinished( Dali::Animation& src );
+  void OnYAnimationFinished( Dali::Animation& src );
+
+  /**
+   * Relayout the visuals as a result of size negotiation
+   */
+  void RelayoutVisuals( const Dali::Vector2& targetSize );
+
+private:
+  //undefined
+  BeatControl( const BeatControl& );
+  BeatControl& operator=( const BeatControl& );
+
+private:
+  // Implementation details
+  Dali::Toolkit::Visual::Base mVisual;
+  Dali::Toolkit::TransitionData mBounceTransition;
+  Dali::Toolkit::TransitionData mLeftTransition;
+  Dali::Toolkit::TransitionData mUpTransition;
+  Dali::Animation mAnimation;
+  Dali::Animation mXAnimation;
+  Dali::Animation mYAnimation;
+};
+
+} // Internal
+
+inline Internal::BeatControl& GetImpl( Demo::BeatControl& handle )
+{
+  DALI_ASSERT_ALWAYS( handle );
+  Dali::RefObject& object = handle.GetImplementation();
+  return static_cast<Internal::BeatControl&>(object);
+}
+
+inline const Internal::BeatControl& GetImpl( const Demo::BeatControl& handle )
+{
+  DALI_ASSERT_ALWAYS( handle );
+  const Dali::RefObject& object = handle.GetImplementation();
+  return static_cast<const Internal::BeatControl&>(object);
+}
+
+} // Demo
+
+#endif //  DALI_DEMO_BEAT_CONTROL_IMPL_H
+/*
+ * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#include "beat-control.h"
+#include "beat-control-impl.h"
+
+namespace Demo
+{
+
+BeatControl::BeatControl()
+{
+}
+
+BeatControl::BeatControl( const BeatControl& beatControl )
+: Control( beatControl )
+{
+}
+
+BeatControl& BeatControl::operator= ( const BeatControl& rhs )
+{
+  if( &rhs != this )
+  {
+    Control::operator=( rhs );
+  }
+  return *this;
+}
+
+BeatControl::~BeatControl()
+{
+}
+
+BeatControl BeatControl::New()
+{
+  BeatControl beatControl = Internal::BeatControl::New();
+  return beatControl;
+}
+
+BeatControl BeatControl::New( const std::string& url )
+{
+  BeatControl beatControl = Internal::BeatControl::New();
+  return beatControl;
+}
+
+BeatControl BeatControl::DownCast( BaseHandle handle )
+{
+  return Control::DownCast< BeatControl, Internal::BeatControl > ( handle );
+}
+
+void BeatControl::StartBounceAnimation()
+{
+  GetImpl(*this).StartBounceAnimation();
+}
+
+void BeatControl::StartXAnimation()
+{
+  GetImpl(*this).StartXAnimation();
+}
+void BeatControl::StartYAnimation()
+{
+  GetImpl(*this).StartYAnimation();
+}
+
+
+BeatControl::BeatControl( Internal::BeatControl& implementation )
+: Control( implementation )
+{
+}
+
+BeatControl::BeatControl( Dali::Internal::CustomActor* internal )
+: Control( internal )
+{
+  VerifyCustomActorPointer< Internal::BeatControl >( internal ) ;
+}
+
+
+} //namespace Demo
+#ifndef DALI_DEMO_BEAT_CONTROL_H
+#define DALI_DEMO_BEAT_CONTROL_H
+
+/*
+ * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#include <dali-toolkit/dali-toolkit.h>
+#include <string>
+
+namespace Demo
+{
+
+namespace Internal
+{
+// All type registered types need to have the same name for the body and the handle
+class BeatControl;
+}
+
+/**
+ * Control that allows the RGB channels of an image to be altered.
+ */
+class BeatControl : public Dali::Toolkit::Control
+{
+public:
+  /**
+   * The start and end property ranges for this control
+   */
+  enum PropertyRange
+  {
+    PROPERTY_START_INDEX = Dali::Toolkit::Control::CONTROL_PROPERTY_END_INDEX + 1,
+    PROPERTY_END_INDEX   = PROPERTY_START_INDEX + 1000,
+    ANIMATABLE_PROPERTY_START_INDEX = Dali::ANIMATABLE_PROPERTY_REGISTRATION_START_INDEX,
+    ANIMATABLE_PROPERTY_END_INDEX = ANIMATABLE_PROPERTY_START_INDEX+1000
+  };
+
+  struct Property
+  {
+    enum
+    {
+      BOUNCE_TRANSITION = PROPERTY_START_INDEX,
+      LEFT_TRANSITION,
+      UP_TRANSITION,
+      BEAT_VISUAL
+    };
+  };
+
+public: // Construction / destruction
+
+  /**
+   * Create an uninitialized handle
+   */
+  BeatControl();
+
+  /**
+   * Create a new image channel control without an image. Use
+   * SetImage to give this control an image
+   */
+  static BeatControl New();
+
+  /**
+   * Create a new image channel control from a given URL
+   */
+  static BeatControl New( const std::string& url );
+
+  /**
+   * Destructor. This is non-virtual since derived Handle types must not
+   * contain data or virtual methods
+   */
+  ~BeatControl();
+
+  /**
+   * Copy Constructor
+   */
+  BeatControl( const BeatControl& beatControl );
+
+  /**
+   * Assignment Operator
+   */
+  BeatControl& operator=( const BeatControl& beatControl );
+
+  /**
+   * Downcast
+   */
+  static BeatControl DownCast( BaseHandle handle );
+
+public: // API
+
+  void StartBounceAnimation();
+
+  void StartXAnimation();
+
+  void StartYAnimation();
+
+public: // Not for public use
+  /**
+   * Create a handle from an implementation
+   */
+  BeatControl( Internal::BeatControl& implementation );
+
+  /**
+   * Allow the creation of an BeatControl handle from an internal CustomActor pointer
+   */
+  BeatControl( Dali::Internal::CustomActor* internal );
+};
+
+} // namespace Demo
+
+#endif // DALI_DEMO_BEAT_CONTROL_H
+/*
+ * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @file transition-application.cpp
+ * @brief Application class for showing stylable transitions
+ */
+
+// Class include
+#include "transition-application.h"
+
+// External includes
+#include <dali-toolkit/dali-toolkit.h>
+#include "beat-control.h"
+#include <cstdio>
+#include <sstream>
+
+// Internal includes
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace Demo
+{
+
+const char* TransitionApplication::DEMO_THEME_ONE_PATH( DEMO_STYLE_DIR "style-example-theme-one.json" );
+
+
+TransitionApplication::TransitionApplication( Application& application )
+: mApplication( application )
+{
+  application.InitSignal().Connect( this, &TransitionApplication::Create );
+}
+
+TransitionApplication::~TransitionApplication()
+{
+}
+
+void TransitionApplication::Create( Application& application )
+{
+  Stage stage = Stage::GetCurrent();
+  stage.KeyEventSignal().Connect(this, &TransitionApplication::OnKeyEvent);
+  stage.SetBackgroundColor( Vector4( 0.1f, 0.1f, 0.1f, 1.0f ) );
+
+  // Hide the indicator bar
+  application.GetWindow().ShowIndicator( Dali::Window::INVISIBLE );
+
+  // Content panes:
+  TableView contentLayout = TableView::New( 3, 1 );
+  contentLayout.SetName("ContentLayout");
+  contentLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+  contentLayout.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+  contentLayout.SetParentOrigin( ParentOrigin::TOP_LEFT );
+  contentLayout.SetCellPadding( Size( 10, 10 ) );
+
+  // Assign all rows the size negotiation property of fitting to children
+
+  stage.Add( contentLayout );
+
+  mTitle = TextLabel::New( "Custom Control Transition Example" );
+  mTitle.SetName( "Title" );
+  mTitle.SetStyleName("Title");
+  mTitle.SetAnchorPoint( AnchorPoint::TOP_CENTER );
+  mTitle.SetParentOrigin( ParentOrigin::TOP_CENTER );
+  mTitle.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+  mTitle.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
+  mTitle.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
+  contentLayout.Add( mTitle );
+  contentLayout.SetFitHeight(0);
+
+  mBeatControl = BeatControl::New();
+  mBeatControl.SetName("BeatControl");
+  mBeatControl.SetAnchorPoint( AnchorPoint::CENTER );
+  mBeatControl.SetParentOrigin( ParentOrigin::CENTER );
+  mBeatControl.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+  contentLayout.Add( mBeatControl );
+  // beat control should fill the tableview cell, so no change to default parameters
+
+  TableView actionButtonLayout = TableView::New( 1, 4 );
+  actionButtonLayout.SetName("ThemeButtonsLayout");
+  actionButtonLayout.SetCellPadding( Vector2( 6.0f, 0.0f ) );
+
+  actionButtonLayout.SetAnchorPoint( AnchorPoint::CENTER );
+  actionButtonLayout.SetParentOrigin( ParentOrigin::CENTER );
+  actionButtonLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+  actionButtonLayout.SetResizePolicy( ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT );
+  actionButtonLayout.SetCellPadding( Size( 10, 10 ) );
+  actionButtonLayout.SetFitHeight( 0 );
+
+  TextLabel label = TextLabel::New( "Action: ");
+  label.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
+  label.SetStyleName("ActionLabel");
+  label.SetAnchorPoint( AnchorPoint::TOP_CENTER );
+  label.SetParentOrigin( ParentOrigin::TOP_CENTER );
+  actionButtonLayout.AddChild( label, TableView::CellPosition( 0, 0 ) );
+  actionButtonLayout.SetCellAlignment( TableView::CellPosition( 0, 0 ), HorizontalAlignment::LEFT, VerticalAlignment::CENTER );
+
+  for( int i=0; i<3; ++i )
+  {
+    mActionButtons[i] = PushButton::New();
+    mActionButtons[i].SetName("ActionButton");
+    mActionButtons[i].SetStyleName("ActionButton");
+    mActionButtons[i].SetParentOrigin( ParentOrigin::CENTER );
+    mActionButtons[i].SetAnchorPoint( ParentOrigin::CENTER );
+    mActionButtons[i].SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+    mActionButtons[i].SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
+    mActionIndex = mActionButtons[i].RegisterProperty( "actionId", i, Property::READ_WRITE );
+    mActionButtons[i].ClickedSignal().Connect( this, &TransitionApplication::OnActionButtonClicked );
+    actionButtonLayout.AddChild( mActionButtons[i], TableView::CellPosition( 0, 1+i ) );
+  }
+  mActionButtons[0].SetLabelText( "Bounce" );
+  mActionButtons[1].SetLabelText( "X" );
+  mActionButtons[2].SetLabelText( "Y" );
+
+  contentLayout.Add( actionButtonLayout );
+  contentLayout.SetFitHeight(2);
+}
+
+
+bool TransitionApplication::OnActionButtonClicked( Button button )
+{
+  int action = button.GetProperty<int>( mActionIndex );
+  switch( action )
+  {
+    case 0:
+    {
+      mBeatControl.StartBounceAnimation();
+      break;
+    }
+    case 1:
+    {
+      mBeatControl.StartXAnimation();
+      break;
+    }
+    case 2:
+    {
+      mBeatControl.StartYAnimation();
+      break;
+    }
+  }
+
+  return true;
+}
+
+void TransitionApplication::OnKeyEvent( const KeyEvent& keyEvent )
+{
+  static int keyPressed = 0;
+
+  if( keyEvent.state == KeyEvent::Down)
+  {
+    if( keyPressed == 0 ) // Is this the first down event?
+    {
+      printf("Key pressed: %s %d\n", keyEvent.keyPressedName.c_str(), keyEvent.keyCode );
+
+      if( IsKey( keyEvent, DALI_KEY_ESCAPE) || IsKey( keyEvent, DALI_KEY_BACK ) )
+      {
+        mApplication.Quit();
+      }
+      else if( keyEvent.keyPressedName.compare("Return") == 0 )
+      {
+      }
+    }
+    keyPressed = 1;
+  }
+  else if( keyEvent.state == KeyEvent::Up )
+  {
+    keyPressed = 0;
+  }
+}
+
+} // namespace Demo
+#ifndef DALI_DEMO_TRANSITION_APPLICATION_H
+#define DALI_DEMO_TRANSITION_APPLICATION_H
+
+/*
+ * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// External includes
+#include <dali-toolkit/dali-toolkit.h>
+//#include <dali-toolkit/devel-api/controls/slider/slider.h>
+#include <dali-toolkit/devel-api/controls/popup/popup.h>
+#include "beat-control.h"
+#include <cstdio>
+#include <sstream>
+
+// Internal includes
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace Demo
+{
+
+class TransitionApplication : public ConnectionTracker
+{
+public:
+  // Constructor
+  TransitionApplication( Application& application );
+
+  // Destructor
+  ~TransitionApplication();
+
+  // Init signal handler
+  void Create( Application& application );
+
+  // Create the GUI components
+  Toolkit::TextLabel CreateTitle( std::string title );
+  Actor CreateContentPane();
+
+  // Key event handler
+  void OnKeyEvent( const KeyEvent& event );
+
+  bool OnActionButtonClicked(Button button);
+
+  static const char* DEMO_THEME_ONE_PATH;
+
+private:
+  Application& mApplication;
+  TextLabel mTitle;
+  BeatControl mBeatControl;
+  PushButton mActionButtons[3];
+  Property::Index mActionIndex;
+};
+
+} // Namespace Demo
+
+
+#endif // DALI_DEMO_TRANSITION_APPLICATION_H
+/*
+ * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @file transition-example.cpp
+ * @brief Example of stylable transitions.
+ */
+
+// External includes
+#include <dali/dali.h>
+
+// Internal includes
+#include "transition-application.h"
+
+
+/// Entry point for applications
+int DALI_EXPORT_API main( int argc, char** argv )
+{
+  const char* themeName = Demo::TransitionApplication::DEMO_THEME_ONE_PATH;
+
+  Application application = Application::New( &argc, &argv, themeName );
+  Demo::TransitionApplication transitionApplication( application );
+  application.MainLoop();
+  return 0;
+}
@@ -150,3 +150,6 @@ msgstr &quot;Tilt Sensor&quot;
 msgid "DALI_DEMO_STR_TITLE_FPP_GAME"
 msgstr "FPP Game"
+
+msgid "DALI_DEMO_STR_TITLE_VISUAL_TRANSITIONS"
+msgstr "Visual Transitions"
@@ -150,3 +150,6 @@ msgstr &quot;Tilt Sensor&quot;
 msgid "DALI_DEMO_STR_TITLE_FPP_GAME"
 msgstr "FPP Game"
+
+msgid "DALI_DEMO_STR_TITLE_VISUAL_TRANSITIONS"
+msgstr "Visual Transitions"
@@ -110,6 +110,70 @@
           "targetValue":[1,1,1]
         }
       ]
+    },
+    "BeatControl":
+    {
+      "beatVisual":{
+        "visualType":"IMAGE",
+        "url":"{APPLICATION_RESOURCE_PATH}/images/Logo-for-demo.png"
+      },
+
+      "bounceTransition":
+      [
+        {
+          "target":"beatVisual",
+          "property":"size",
+          "initialValue":[0.5, 0.5],
+          "targetValue":[0.75, 0.75],
+          "animator":
+          {
+            "alphaFunction":"BOUNCE",
+            "timePeriod":
+            {
+              "duration":0.5,
+              "delay":0
+            }
+          }
+        }
+      ],
+
+      "leftTransition":
+      [
+        {
+          "target":"beatVisual",
+          "property":"offset",
+          "initialValue":[0, 0],
+          "targetValue":[0.25, 0],
+          "animator":
+          {
+            "alphaFunction":"BOUNCE",
+            "timePeriod":
+            {
+              "duration":0.5,
+              "delay":0
+            }
+          }
+        }
+      ],
+
+      "upTransition":
+      [
+        {
+          "target":"beatVisual",
+          "property":"offset",
+          "initialValue":[0, 0],
+          "targetValue":[0, 0.25],
+          "animator":
+          {
+            "alphaFunction":"BOUNCE",
+            "timePeriod":
+            {
+              "duration":0.5,
+              "delay":0
+            }
+          }
+        }
+      ]
     }
   }
 }
@@ -110,6 +110,70 @@
           "targetValue":[1,1,1]
         }
       ]
+    },
+    "BeatControl":
+    {
+      "beatVisual":{
+        "visualType":"IMAGE",
+        "url":"{APPLICATION_RESOURCE_PATH}/images/Logo-for-demo.png"
+      },
+
+      "bounceTransition":
+      [
+        {
+          "target":"beatVisual",
+          "property":"size",
+          "initialValue":[0.5, 0.5],
+          "targetValue":[0.75, 0.75],
+          "animator":
+          {
+            "alphaFunction":"BOUNCE",
+            "timePeriod":
+            {
+              "duration":0.5,
+              "delay":0
+            }
+          }
+        }
+      ],
+
+      "leftTransition":
+      [
+        {
+          "target":"beatVisual",
+          "property":"offset",
+          "initialValue":[0, 0],
+          "targetValue":[0.25, 0],
+          "animator":
+          {
+            "alphaFunction":"BOUNCE",
+            "timePeriod":
+            {
+              "duration":0.5,
+              "delay":0
+            }
+          }
+        }
+      ],
+
+      "upTransition":
+      [
+        {
+          "target":"beatVisual",
+          "property":"offset",
+          "initialValue":[0, 0],
+          "targetValue":[0, 0.25],
+          "animator":
+          {
+            "alphaFunction":"BOUNCE",
+            "timePeriod":
+            {
+              "duration":0.5,
+              "delay":0
+            }
+          }
+        }
+      ]
     }
   }
 }
@@ -82,6 +82,7 @@ extern &quot;C&quot;
 #define DALI_DEMO_STR_TITLE_TEXT_SCROLLING              dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_TEXT_SCROLLING")
 #define DALI_DEMO_STR_TITLE_TILT_SENSOR                 dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_TILT_SENSOR")
 #define DALI_DEMO_STR_TITLE_FPP_GAME                    dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_FPP_GAME")
+#define DALI_DEMO_STR_TITLE_VISUAL_TRANSITIONS          dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_VISUAL_TRANSITIONS")
 #else // !INTERNATIONALIZATION_ENABLED
@@ -135,7 +136,7 @@ extern &quot;C&quot;
 #define DALI_DEMO_STR_TITLE_TILT_SENSOR                 "Tilt Sensor"
 #define DALI_DEMO_STR_TITLE_PROGRESS_BAR                "Progress Bar"
 #define DALI_DEMO_STR_TITLE_FPP_GAME                    "First Person Game"
-
+#define DALI_DEMO_STR_TITLE_VISUAL_TRANSITIONS          "Visual Transitions"
 #endif
 #ifdef __cplusplus