[dali_2.3.26] Merge branch 'devel/master'
[platform/core/uifw/dali-toolkit.git] / dali-toolkit / internal / controls / image-view / image-view-impl.cpp
index f769b44..91e33df 100644 (file)
@@ -1,5 +1,5 @@
 /*
 /*
- * Copyright (c) 2022 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2024 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.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
 
 // EXTERNAL INCLUDES
 #include <dali/devel-api/scripting/scripting.h>
 
 // EXTERNAL INCLUDES
 #include <dali/devel-api/scripting/scripting.h>
+#include <dali/public-api/math/math-utils.h>
 #include <dali/public-api/object/type-registry-helper.h>
 #include <dali/public-api/object/type-registry.h>
 
 // INTERNAL INCLUDES
 #include <dali/public-api/object/type-registry-helper.h>
 #include <dali/public-api/object/type-registry.h>
 
 // INTERNAL INCLUDES
-#include <dali-toolkit/devel-api/visuals/visual-actions-devel.h>
+#include <dali-toolkit/devel-api/controls/control-depth-index-ranges.h>
 #include <dali-toolkit/devel-api/controls/control-devel.h>
 #include <dali-toolkit/devel-api/visual-factory/visual-factory.h>
 #include <dali-toolkit/devel-api/controls/control-devel.h>
 #include <dali-toolkit/devel-api/visual-factory/visual-factory.h>
+#include <dali-toolkit/devel-api/visuals/visual-actions-devel.h>
 #include <dali-toolkit/internal/controls/control/control-data-impl.h>
 #include <dali-toolkit/internal/visuals/visual-base-data-impl.h>
 #include <dali-toolkit/internal/visuals/visual-base-impl.h>
 #include <dali-toolkit/internal/controls/control/control-data-impl.h>
 #include <dali-toolkit/internal/visuals/visual-base-data-impl.h>
 #include <dali-toolkit/internal/visuals/visual-base-impl.h>
@@ -42,7 +44,13 @@ namespace Internal
 {
 namespace
 {
 {
 namespace
 {
-const Vector4 FULL_TEXTURE_RECT(0.f, 0.f, 1.f, 1.f);
+constexpr float FULL_OPACITY = 1.0f;
+constexpr float LOW_OPACITY  = 0.2f;
+constexpr float TRANSITION_EFFECT_SPEED = 0.3f;
+
+constexpr int PLACEHOLDER_DEPTH_INDEX     = -2;
+constexpr int PREVIOUS_VISUAL_DEPTH_INDEX = -1;
+constexpr int CURRENT_VISUAL_DEPTH_INDEX  = 0;
 
 BaseHandle Create()
 {
 
 BaseHandle Create()
 {
@@ -53,7 +61,9 @@ BaseHandle Create()
 DALI_TYPE_REGISTRATION_BEGIN(Toolkit::ImageView, Toolkit::Control, Create);
 DALI_PROPERTY_REGISTRATION(Toolkit, ImageView, "image", MAP, IMAGE)
 DALI_PROPERTY_REGISTRATION(Toolkit, ImageView, "preMultipliedAlpha", BOOLEAN, PRE_MULTIPLIED_ALPHA)
 DALI_TYPE_REGISTRATION_BEGIN(Toolkit::ImageView, Toolkit::Control, Create);
 DALI_PROPERTY_REGISTRATION(Toolkit, ImageView, "image", MAP, IMAGE)
 DALI_PROPERTY_REGISTRATION(Toolkit, ImageView, "preMultipliedAlpha", BOOLEAN, PRE_MULTIPLIED_ALPHA)
-
+DALI_PROPERTY_REGISTRATION(Toolkit, ImageView, "placeholderImage", STRING, PLACEHOLDER_IMAGE)
+DALI_PROPERTY_REGISTRATION(Toolkit, ImageView, "enableTransitionEffect", BOOLEAN, ENABLE_TRANSITION_EFFECT)
+DALI_PROPERTY_REGISTRATION(Toolkit, ImageView, "transitionEffectOption", MAP, TRANSITION_EFFECT_OPTION)
 DALI_ANIMATABLE_PROPERTY_REGISTRATION_WITH_DEFAULT(Toolkit, ImageView, "pixelArea", Vector4(0.f, 0.f, 1.f, 1.f), PIXEL_AREA)
 DALI_TYPE_REGISTRATION_END()
 
 DALI_ANIMATABLE_PROPERTY_REGISTRATION_WITH_DEFAULT(Toolkit, ImageView, "pixelArea", Vector4(0.f, 0.f, 1.f, 1.f), PIXEL_AREA)
 DALI_TYPE_REGISTRATION_END()
 
@@ -64,8 +74,9 @@ using namespace Dali;
 ImageView::ImageView(ControlBehaviour additionalBehaviour)
 : Control(ControlBehaviour(CONTROL_BEHAVIOUR_DEFAULT | additionalBehaviour)),
   mImageSize(),
 ImageView::ImageView(ControlBehaviour additionalBehaviour)
 : Control(ControlBehaviour(CONTROL_BEHAVIOUR_DEFAULT | additionalBehaviour)),
   mImageSize(),
-  mImageVisualPaddingSetByTransform(false),
-  mImageViewPixelAreaSetByFittingMode(false)
+  mTransitionTargetAlpha(FULL_OPACITY),
+  mTransitionEffect(false),
+  mImageReplaced(false)
 {
 }
 
 {
 }
 
@@ -99,13 +110,60 @@ void ImageView::OnInitialize()
 
 void ImageView::SetImage(const Property::Map& map)
 {
 
 void ImageView::SetImage(const Property::Map& map)
 {
+  if(mTransitionEffect && mVisual)
+  {
+    // Clear previous transition effect if it is playing
+    if(mPreviousVisual)
+    {
+      if(mTransitionAnimation)
+      {
+        if(mTransitionAnimation.GetState() == Animation::PLAYING)
+        {
+          // Hide placeholder
+          HidePlaceholderImage();
+          ClearTransitionAnimation();
+        }
+      }
+    }
+
+    // Enable transition effect for previous visual.
+    // This previous visual will be deleted when transition effect is done.
+    Internal::Control::Impl& controlDataImpl = Internal::Control::Impl::Get(*this);
+    controlDataImpl.EnableReadyTransitionOverriden(mVisual, true);
+    mPreviousVisual = mVisual;
+  }
+
   // Comparing a property map is too expensive so just creating a new visual
   mPropertyMap = map;
   mUrl.clear();
 
   // Comparing a property map is too expensive so just creating a new visual
   mPropertyMap = map;
   mUrl.clear();
 
+  mImageReplaced = true;
+
+  // keep alpha for transition effect
+  if(mTransitionEffect)
+  {
+    float            alpha      = FULL_OPACITY;
+    Property::Value* alphaValue = map.Find(Toolkit::Visual::Property::OPACITY);
+    if(alphaValue && alphaValue->Get(alpha))
+    {
+      mTransitionTargetAlpha = alpha;
+    }
+  }
+
+  if(!mVisual)
+  {
+    ShowPlaceholderImage();
+  }
+
   Toolkit::Visual::Base visual = Toolkit::VisualFactory::Get().CreateVisual(mPropertyMap);
   if(visual)
   {
   Toolkit::Visual::Base visual = Toolkit::VisualFactory::Get().CreateVisual(mPropertyMap);
   if(visual)
   {
+    Internal::Visual::Base& visualImpl = Toolkit::GetImplementation(visual);
+    if(visualImpl.GetFittingMode() == Visual::FittingMode::DONT_CARE)
+    {
+      visualImpl.SetFittingMode(Visual::FittingMode::FILL);
+    }
+
     // Don't set mVisual until it is ready and shown. Getters will still use current visual.
     if(!mVisual)
     {
     // Don't set mVisual until it is ready and shown. Getters will still use current visual.
     if(!mVisual)
     {
@@ -114,11 +172,10 @@ void ImageView::SetImage(const Property::Map& map)
 
     if(!mShaderMap.Empty())
     {
 
     if(!mShaderMap.Empty())
     {
-      Internal::Visual::Base& visualImpl = Toolkit::GetImplementation(visual);
       visualImpl.SetCustomShader(mShaderMap);
     }
 
       visualImpl.SetCustomShader(mShaderMap);
     }
 
-    DevelControl::RegisterVisual(*this, Toolkit::ImageView::Property::IMAGE, visual);
+    DevelControl::RegisterVisual(*this, Toolkit::ImageView::Property::IMAGE, visual, DepthIndex::CONTENT);
   }
   else
   {
   }
   else
   {
@@ -128,21 +185,55 @@ void ImageView::SetImage(const Property::Map& map)
     // Trigger a size negotiation request that may be needed when unregistering a visual.
     RelayoutRequest();
   }
     // Trigger a size negotiation request that may be needed when unregistering a visual.
     RelayoutRequest();
   }
-
   // Signal that a Relayout may be needed
 }
 
 void ImageView::SetImage(const std::string& url, ImageDimensions size)
 {
   // Signal that a Relayout may be needed
 }
 
 void ImageView::SetImage(const std::string& url, ImageDimensions size)
 {
+  if(mTransitionEffect && mVisual)
+  {
+    // Clear previous transition effect if it is playing
+    if(mPreviousVisual)
+    {
+      if(mTransitionAnimation)
+      {
+        if(mTransitionAnimation.GetState() == Animation::PLAYING)
+        {
+          HidePlaceholderImage();
+          ClearTransitionAnimation();
+        }
+      }
+    }
+
+    // Enable transition effect for previous visual.
+    // This previous visual will be deleted when transition effect is done.
+    Internal::Control::Impl& controlDataImpl = Internal::Control::Impl::Get(*this);
+    controlDataImpl.EnableReadyTransitionOverriden(mVisual, true);
+    mPreviousVisual = mVisual;
+  }
+
   // Don't bother comparing if we had a visual previously, just drop old visual and create new one
   mUrl       = url;
   mImageSize = size;
   mPropertyMap.Clear();
 
   // Don't bother comparing if we had a visual previously, just drop old visual and create new one
   mUrl       = url;
   mImageSize = size;
   mPropertyMap.Clear();
 
+  mImageReplaced = true;
+
+  if(!mVisual)
+  {
+    ShowPlaceholderImage();
+  }
+
   // Don't set mVisual until it is ready and shown. Getters will still use current visual.
   Toolkit::Visual::Base visual = Toolkit::VisualFactory::Get().CreateVisual(url, size);
   if(visual)
   {
   // Don't set mVisual until it is ready and shown. Getters will still use current visual.
   Toolkit::Visual::Base visual = Toolkit::VisualFactory::Get().CreateVisual(url, size);
   if(visual)
   {
+    Internal::Visual::Base& visualImpl = Toolkit::GetImplementation(visual);
+    if(visualImpl.GetFittingMode() == Visual::FittingMode::DONT_CARE)
+    {
+      visualImpl.SetFittingMode(Visual::FittingMode::FILL);
+    }
+
     if(!mVisual)
     {
       mVisual = visual;
     if(!mVisual)
     {
       mVisual = visual;
@@ -150,11 +241,10 @@ void ImageView::SetImage(const std::string& url, ImageDimensions size)
 
     if(!mShaderMap.Empty())
     {
 
     if(!mShaderMap.Empty())
     {
-      Internal::Visual::Base& visualImpl = Toolkit::GetImplementation(visual);
       visualImpl.SetCustomShader(mShaderMap);
     }
 
       visualImpl.SetCustomShader(mShaderMap);
     }
 
-    DevelControl::RegisterVisual(*this, Toolkit::ImageView::Property::IMAGE, visual);
+    DevelControl::RegisterVisual(*this, Toolkit::ImageView::Property::IMAGE, visual, DepthIndex::CONTENT);
   }
   else
   {
   }
   else
   {
@@ -164,7 +254,6 @@ void ImageView::SetImage(const std::string& url, ImageDimensions size)
     // Trigger a size negotiation request that may be needed when unregistering a visual.
     RelayoutRequest();
   }
     // Trigger a size negotiation request that may be needed when unregistering a visual.
     RelayoutRequest();
   }
-
   // Signal that a Relayout may be needed
 }
 
   // Signal that a Relayout may be needed
 }
 
@@ -173,6 +262,7 @@ void ImageView::ClearImageVisual()
   // Clear cached properties
   mPropertyMap.Clear();
   mUrl.clear();
   // Clear cached properties
   mPropertyMap.Clear();
   mUrl.clear();
+  mVisual.Reset();
 
   // Unregister the exsiting visual
   DevelControl::UnregisterVisual(*this, Toolkit::ImageView::Property::IMAGE);
 
   // Unregister the exsiting visual
   DevelControl::UnregisterVisual(*this, Toolkit::ImageView::Property::IMAGE);
@@ -206,6 +296,48 @@ void ImageView::SetDepthIndex(int depthIndex)
   }
 }
 
   }
 }
 
+void ImageView::SetPlaceholderUrl(const std::string& url)
+{
+  mPlaceholderUrl = url;
+  if(!url.empty())
+  {
+    mPlaceholderVisual.Reset();
+    CreatePlaceholderImage();
+  }
+  else
+  {
+    // Clear current placeholder image
+    Toolkit::Visual::Base visual = DevelControl::GetVisual(*this, Toolkit::ImageView::Property::PLACEHOLDER_IMAGE);
+    if(visual)
+    {
+      DevelControl::UnregisterVisual(*this, Toolkit::ImageView::Property::PLACEHOLDER_IMAGE);
+    }
+
+    mPlaceholderVisual.Reset();
+    mPlaceholderUrl = url;
+  }
+}
+
+std::string ImageView::GetPlaceholderUrl() const
+{
+  return mPlaceholderUrl;
+}
+
+void ImageView::EnableTransitionEffect(bool effectEnable)
+{
+  mTransitionEffect = effectEnable;
+}
+
+bool ImageView::IsTransitionEffectEnabled() const
+{
+  return mTransitionEffect;
+}
+
+void ImageView::SetTransitionEffectOption(const Property::Map& map)
+{
+  mTransitionEffectOptionMap = map;
+}
+
 Vector3 ImageView::GetNaturalSize()
 {
   if(mVisual)
 Vector3 ImageView::GetNaturalSize()
 {
   if(mVisual)
@@ -260,30 +392,6 @@ void ImageView::OnRelayout(const Vector2& size, RelayoutContainer& container)
   Control::OnRelayout(size, container);
   if(mVisual)
   {
   Control::OnRelayout(size, container);
   if(mVisual)
   {
-    Property::Map transformMap = Property::Map();
-
-    Extents padding = Self().GetProperty<Extents>(Toolkit::Control::Property::PADDING);
-
-    bool zeroPadding = (padding == Extents());
-
-    Vector2 naturalSize;
-    mVisual.GetNaturalSize(naturalSize);
-
-    Dali::LayoutDirection::Type layoutDirection = static_cast<Dali::LayoutDirection::Type>(
-      Self().GetProperty(Dali::Actor::Property::LAYOUT_DIRECTION).Get<int>());
-    if(Dali::LayoutDirection::RIGHT_TO_LEFT == layoutDirection)
-    {
-      std::swap(padding.start, padding.end);
-    }
-
-    // remove padding from the size to know how much is left for the visual
-    Vector2 finalSize   = size - Vector2(padding.start + padding.end, padding.top + padding.bottom);
-    Vector2 finalOffset = Vector2(padding.start, padding.top);
-
-    ApplyFittingMode(finalSize, naturalSize, finalOffset, zeroPadding, transformMap);
-
-    mVisual.SetTransformAndSize(transformMap, size);
-
     // mVisual is not updated util the resource is ready in the case of visual replacement.
     // in this case, the Property Map must be initialized so that the previous value is not reused.
     // after mVisual is updated, the correct value will be reset.
     // mVisual is not updated util the resource is ready in the case of visual replacement.
     // in this case, the Property Map must be initialized so that the previous value is not reused.
     // after mVisual is updated, the correct value will be reset.
@@ -292,6 +400,12 @@ void ImageView::OnRelayout(const Vector2& size, RelayoutContainer& container)
     {
       visual.SetTransformAndSize(Property::Map(), size);
     }
     {
       visual.SetTransformAndSize(Property::Map(), size);
     }
+
+    if(!mTransitionEffect)
+    {
+      // we don't need placeholder anymore because visual is replaced. so hide placeholder.
+      HidePlaceholderImage();
+    }
   }
 }
 
   }
 }
 
@@ -330,134 +444,168 @@ void ImageView::OnUpdateVisualProperties(const std::vector<std::pair<Dali::Prope
 
 void ImageView::OnResourceReady(Toolkit::Control control)
 {
 
 void ImageView::OnResourceReady(Toolkit::Control control)
 {
+  // In case of placeholder, we need to skip this call.
+  // TODO: In case of placeholder, it needs to be modified not to call OnResourceReady()
+  if(control.GetVisualResourceStatus(Toolkit::ImageView::Property::IMAGE) != Toolkit::Visual::ResourceStatus::READY)
+  {
+    return;
+  }
+
+  // Do transition effect if need.
+  if(mTransitionEffect)
+  {
+    // TODO: Consider about placeholder image is loaded failed
+    Toolkit::Visual::Base placeholderVisual = DevelControl::GetVisual(*this, Toolkit::ImageView::Property::PLACEHOLDER_IMAGE);
+    if(!placeholderVisual || control.GetVisualResourceStatus(Toolkit::ImageView::Property::PLACEHOLDER_IMAGE) == Toolkit::Visual::ResourceStatus::READY)
+    {
+      // when placeholder is disabled or ready placeholder and image, we need to transition effect
+      TransitionImageWithEffect();
+    }
+  }
+
   // Visual ready so update visual attached to this ImageView, following call to RelayoutRequest will use this visual.
   mVisual = DevelControl::GetVisual(*this, Toolkit::ImageView::Property::IMAGE);
   // Visual ready so update visual attached to this ImageView, following call to RelayoutRequest will use this visual.
   mVisual = DevelControl::GetVisual(*this, Toolkit::ImageView::Property::IMAGE);
+
   // Signal that a Relayout may be needed
 }
 
   // Signal that a Relayout may be needed
 }
 
-void ImageView::SetTransformMapForFittingMode(Vector2 finalSize, Vector2 naturalSize, Vector2 finalOffset, Visual::FittingMode fittingMode, Property::Map& transformMap)
+void ImageView::CreatePlaceholderImage()
 {
 {
-  switch(fittingMode)
+  Property::Map propertyMap;
+  propertyMap.Insert(Toolkit::Visual::Property::TYPE, Toolkit::Visual::IMAGE);
+  propertyMap.Insert(Toolkit::ImageVisual::Property::URL, mPlaceholderUrl);
+  //propertyMap.Insert(Toolkit::ImageVisual::Property::LOAD_POLICY, Toolkit::ImageVisual::LoadPolicy::IMMEDIATE); // TODO: need to enable this property
+  propertyMap.Insert(Toolkit::ImageVisual::Property::RELEASE_POLICY, Toolkit::ImageVisual::ReleasePolicy::DESTROYED);
+  propertyMap.Insert(Toolkit::DevelImageVisual::Property::ENABLE_BROKEN_IMAGE, false);
+  mPlaceholderVisual = Toolkit::VisualFactory::Get().CreateVisual(propertyMap);
+  if(mPlaceholderVisual)
   {
   {
-    case Visual::FittingMode::FIT_KEEP_ASPECT_RATIO:
-    {
-      auto availableVisualSize = finalSize;
+    mPlaceholderVisual.SetName("placeholder");
+    mPlaceholderVisual.SetDepthIndex(mPlaceholderVisual.GetDepthIndex() + PLACEHOLDER_DEPTH_INDEX);
+  }
+  else
+  {
+    DevelControl::UnregisterVisual(*this, Toolkit::ImageView::Property::PLACEHOLDER_IMAGE);
+    mPlaceholderVisual.Reset();
+  }
+}
+
+void ImageView::ShowPlaceholderImage()
+{
+  if(mPlaceholderVisual)
+  {
+    DevelControl::RegisterVisual(*this, Toolkit::ImageView::Property::PLACEHOLDER_IMAGE, mPlaceholderVisual, false);
+    Actor self = Self();
+    Toolkit::GetImplementation(mPlaceholderVisual).SetOnScene(self);
+  }
+}
 
 
-      // scale to fit the padded area
-      finalSize = naturalSize * std::min((naturalSize.width ? (availableVisualSize.width / naturalSize.width) : 0),
-                                         (naturalSize.height ? (availableVisualSize.height / naturalSize.height) : 0));
+void ImageView::HidePlaceholderImage()
+{
+  if(mPlaceholderVisual)
+  {
+    DevelControl::UnregisterVisual(*this, Toolkit::ImageView::Property::PLACEHOLDER_IMAGE);
+
+    // Hide placeholder
+    Actor self = Self();
+    Toolkit::GetImplementation(mPlaceholderVisual).SetOffScene(self);
+  }
+}
 
 
-      // calculate final offset within the padded area
-      finalOffset += (availableVisualSize - finalSize) * .5f;
+void ImageView::TransitionImageWithEffect()
+{
+  Toolkit::ImageView handle = Toolkit::ImageView(GetOwner());
+
+  if(handle)
+  {
+    if(!mImageReplaced)
+    {
+      // If the image is not replaced, the transition effect is not required.
+      return;
+    }
 
 
-      // populate the transform map
-      transformMap.Add(Toolkit::Visual::Transform::Property::OFFSET, finalOffset)
-        .Add(Toolkit::Visual::Transform::Property::SIZE, finalSize);
-      break;
+    if(mTransitionAnimation)
+    {
+      ClearTransitionAnimation();
     }
     }
-    case Visual::FittingMode::OVER_FIT_KEEP_ASPECT_RATIO:
+
+    // Control visual's depth for transition effect
+    if(mPreviousVisual)
     {
     {
-      mImageViewPixelAreaSetByFittingMode = true;
-      auto availableVisualSize            = finalSize;
-      finalSize                           = naturalSize * std::max((naturalSize.width ? (availableVisualSize.width / naturalSize.width) : 0),
-                                         (naturalSize.height ? (availableVisualSize.height / naturalSize.height) : 0));
-
-      auto originalOffset = finalOffset;
-      finalOffset += (availableVisualSize - finalSize) * .5f;
-
-      float   x           = abs((availableVisualSize.width - finalSize.width) / finalSize.width) * .5f;
-      float   y           = abs((availableVisualSize.height - finalSize.height) / finalSize.height) * .5f;
-      float   widthRatio  = 1.f - abs((availableVisualSize.width - finalSize.width) / finalSize.width);
-      float   heightRatio = 1.f - abs((availableVisualSize.height - finalSize.height) / finalSize.height);
-      Vector4 pixelArea   = Vector4(x, y, widthRatio, heightRatio);
-      Self().SetProperty(Toolkit::ImageView::Property::PIXEL_AREA, pixelArea);
-
-      // populate the transform map
-      transformMap.Add(Toolkit::Visual::Transform::Property::OFFSET, originalOffset)
-        .Add(Toolkit::Visual::Transform::Property::SIZE, availableVisualSize);
-      break;
+      mPreviousVisual.SetDepthIndex(mPreviousVisual.GetDepthIndex() + PREVIOUS_VISUAL_DEPTH_INDEX);
     }
     }
-    case Visual::FittingMode::CENTER:
+
+    // Transition current image
+    Toolkit::Visual::Base imageVisual = DevelControl::GetVisual(*this, Toolkit::ImageView::Property::IMAGE);
+    if(imageVisual)
     {
     {
-      auto availableVisualSize = finalSize;
-      if(availableVisualSize.width > naturalSize.width && availableVisualSize.height > naturalSize.height)
+      imageVisual.SetDepthIndex(imageVisual.GetDepthIndex() + CURRENT_VISUAL_DEPTH_INDEX);
+      if(!mTransitionEffectOptionMap.Empty())
       {
       {
-        finalSize = naturalSize;
+        // Set user's transition effect options
+        Dali::Toolkit::TransitionData transition = Toolkit::TransitionData::New(mTransitionEffectOptionMap);
+        Internal::Control::Impl& controlDataImpl = Internal::Control::Impl::Get(*this);
+        mTransitionAnimation  = controlDataImpl.CreateTransition(transition);
+        if(mTransitionAnimation)
+        {
+          mTransitionAnimation.SetEndAction(Animation::EndAction::DISCARD);
+          mTransitionAnimation.FinishedSignal().Connect(this, &ImageView::OnTransitionAnimationFinishedCallback);
+          mTransitionAnimation.Play();
+        }
+        else
+        {
+          DALI_LOG_ERROR("Create Transition Animation failed");
+        }
       }
       else
       {
       }
       else
       {
-        finalSize = naturalSize * std::min((naturalSize.width ? (availableVisualSize.width / naturalSize.width) : 0),
-                                           (naturalSize.height ? (availableVisualSize.height / naturalSize.height) : 0));
-      }
+        mTransitionAnimation = Animation::New(TRANSITION_EFFECT_SPEED);
+        mTransitionAnimation.SetEndAction(Animation::EndAction::DISCARD);
+        float destinationAlpha = (mTransitionTargetAlpha > LOW_OPACITY) ? mTransitionTargetAlpha : LOW_OPACITY;
 
 
-      finalOffset += (availableVisualSize - finalSize) * .5f;
+        // Transition current image
+        Toolkit::Visual::Base imageVisual = DevelControl::GetVisual(*this, Toolkit::ImageView::Property::IMAGE);
+        if(imageVisual)
+        {
+          Dali::KeyFrames fadeinKeyFrames = Dali::KeyFrames::New();
+          fadeinKeyFrames.Add(0.0f, LOW_OPACITY);
+          fadeinKeyFrames.Add(1.0f, destinationAlpha);
+          mTransitionAnimation.AnimateBetween(DevelControl::GetVisualProperty(handle, Toolkit::ImageView::Property::IMAGE, Toolkit::Visual::Property::OPACITY), fadeinKeyFrames,  AlphaFunction::EASE_IN_OUT);
+          imageVisual.SetDepthIndex(imageVisual.GetDepthIndex() + CURRENT_VISUAL_DEPTH_INDEX);
+        }
 
 
-      // populate the transform map
-      transformMap.Add(Toolkit::Visual::Transform::Property::OFFSET, finalOffset)
-        .Add(Toolkit::Visual::Transform::Property::SIZE, finalSize);
-      break;
-    }
-    case Visual::FittingMode::FILL:
-    {
-      transformMap.Add(Toolkit::Visual::Transform::Property::OFFSET, finalOffset)
-        .Add(Toolkit::Visual::Transform::Property::SIZE, finalSize);
-      break;
-    }
-    case Visual::FittingMode::FIT_WIDTH:
-    case Visual::FittingMode::FIT_HEIGHT:
-    {
-      // This FittingMode already converted
-      break;
+        // Play transition animation
+        mTransitionAnimation.FinishedSignal().Connect(this, &ImageView::OnTransitionAnimationFinishedCallback);
+        mTransitionAnimation.Play();
+      }
     }
   }
 }
 
     }
   }
 }
 
-void ImageView::ApplyFittingMode(Vector2 finalSize, Vector2 naturalSize, Vector2 finalOffset, bool zeroPadding, Property::Map& transformMap)
+void ImageView::ClearTransitionAnimation()
 {
 {
-  Visual::FittingMode fittingMode = Toolkit::GetImplementation(mVisual).GetFittingMode();
-
-  // Reset PIXEL_AREA after using OVER_FIT_KEEP_ASPECT_RATIO
-  if(mImageViewPixelAreaSetByFittingMode)
+  // Clear PreviousVisual
+  if(mPreviousVisual)
   {
   {
-    Self().SetProperty(Toolkit::ImageView::Property::PIXEL_AREA, FULL_TEXTURE_RECT);
-    mImageViewPixelAreaSetByFittingMode = false;
+    Actor                    self            = Self();
+    Internal::Control::Impl& controlDataImpl = Internal::Control::Impl::Get(*this);
+    controlDataImpl.EnableReadyTransitionOverriden(mVisual, false);
+    Toolkit::GetImplementation(mPreviousVisual).SetOffScene(self);
+    mPreviousVisual.Reset();
   }
 
   }
 
-  if((!zeroPadding) || // If padding is not zero
-     (fittingMode != Visual::FittingMode::FILL))
+  if(mTransitionAnimation)
   {
   {
-    mImageVisualPaddingSetByTransform = true;
-
-    // If FittingMode use FIT_WIDTH or FIT_HEIGTH, it need to change proper fittingMode
-    if(fittingMode == Visual::FittingMode::FIT_WIDTH)
-    {
-      fittingMode = (finalSize.height / naturalSize.height) < (finalSize.width / naturalSize.width) ? Visual::FittingMode::OVER_FIT_KEEP_ASPECT_RATIO : Visual::FittingMode::FIT_KEEP_ASPECT_RATIO;
-    }
-    else if(fittingMode == Visual::FittingMode::FIT_HEIGHT)
+    if(mTransitionAnimation.GetState() == Animation::PLAYING)
     {
     {
-      fittingMode = (finalSize.height / naturalSize.height) < (finalSize.width / naturalSize.width) ? Visual::FittingMode::FIT_KEEP_ASPECT_RATIO : Visual::FittingMode::OVER_FIT_KEEP_ASPECT_RATIO;
+      mTransitionAnimation.Stop();
     }
     }
+    mTransitionAnimation.FinishedSignal().Disconnect(this, &ImageView::OnTransitionAnimationFinishedCallback);
+    mTransitionAnimation.Clear();
+    mTransitionAnimation.Reset();
 
 
-    SetTransformMapForFittingMode(finalSize, naturalSize, finalOffset, fittingMode, transformMap);
-
-    // Set extra value for applying transformMap
-    transformMap.Add(Toolkit::Visual::Transform::Property::OFFSET_POLICY,
-                     Vector2(Toolkit::Visual::Transform::Policy::ABSOLUTE, Toolkit::Visual::Transform::Policy::ABSOLUTE))
-      .Add(Toolkit::Visual::Transform::Property::ORIGIN, Toolkit::Align::TOP_BEGIN)
-      .Add(Toolkit::Visual::Transform::Property::ANCHOR_POINT, Toolkit::Align::TOP_BEGIN)
-      .Add(Toolkit::Visual::Transform::Property::SIZE_POLICY,
-           Vector2(Toolkit::Visual::Transform::Policy::ABSOLUTE, Toolkit::Visual::Transform::Policy::ABSOLUTE));
-  }
-  else if(mImageVisualPaddingSetByTransform && zeroPadding) // Reset offset to zero only if padding applied previously
-  {
-    mImageVisualPaddingSetByTransform = false;
-    // Reset the transform map
-    transformMap.Add(Toolkit::Visual::Transform::Property::OFFSET, Vector2::ZERO)
-      .Add(Toolkit::Visual::Transform::Property::OFFSET_POLICY,
-           Vector2(Toolkit::Visual::Transform::Policy::RELATIVE, Toolkit::Visual::Transform::Policy::RELATIVE))
-      .Add(Toolkit::Visual::Transform::Property::SIZE, Vector2::ONE)
-      .Add(Toolkit::Visual::Transform::Property::SIZE_POLICY,
-           Vector2(Toolkit::Visual::Transform::Policy::RELATIVE, Toolkit::Visual::Transform::Policy::RELATIVE));
+    // After transition effect is cleared, we don't need transition effect until image is replaced.
+    mImageReplaced = false;
   }
 }
 
   }
 }
 
@@ -540,6 +688,34 @@ void ImageView::SetProperty(BaseObject* object, Property::Index index, const Pro
         }
         break;
       }
         }
         break;
       }
+
+      case Toolkit::ImageView::Property::PLACEHOLDER_IMAGE:
+      {
+        std::string placeholderUrl;
+        if(value.Get(placeholderUrl))
+        {
+          impl.SetPlaceholderUrl(placeholderUrl);
+        }
+        break;
+      }
+
+      case Toolkit::ImageView::Property::ENABLE_TRANSITION_EFFECT:
+      {
+        bool transitionEffect;
+        if(value.Get(transitionEffect))
+        {
+          impl.EnableTransitionEffect(transitionEffect);
+        }
+        break;
+      }
+      case Toolkit::ImageView::Property::TRANSITION_EFFECT_OPTION:
+      {
+        Property::Map map;
+        if(value.Get(map))
+        {
+          impl.SetTransitionEffectOption(map);
+        }
+      }
     }
   }
 }
     }
   }
 }
@@ -579,12 +755,31 @@ Property::Value ImageView::GetProperty(BaseObject* object, Property::Index prope
         value = impl.IsPreMultipliedAlphaEnabled();
         break;
       }
         value = impl.IsPreMultipliedAlphaEnabled();
         break;
       }
+
+      case Toolkit::ImageView::Property::PLACEHOLDER_IMAGE:
+      {
+        value = impl.GetPlaceholderUrl();
+        break;
+      }
+
+      case Toolkit::ImageView::Property::ENABLE_TRANSITION_EFFECT:
+      {
+        value = impl.IsTransitionEffectEnabled();
+        break;
+      }
     }
   }
 
   return value;
 }
 
     }
   }
 
   return value;
 }
 
+void ImageView::OnTransitionAnimationFinishedCallback(Animation& animation)
+{
+  // Hide placeholder
+  HidePlaceholderImage();
+  ClearTransitionAnimation();
+}
+
 } // namespace Internal
 } // namespace Toolkit
 } // namespace Dali
 } // namespace Internal
 } // namespace Toolkit
 } // namespace Dali