Add property for disable broken image
[platform/core/uifw/dali-toolkit.git] / dali-toolkit / internal / controls / image-view / image-view-impl.cpp
index 556711f..87ab126 100644 (file)
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2023 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.
 
 // 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-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>
@@ -43,6 +45,9 @@ 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;
+
 BaseHandle Create()
 {
   return Toolkit::ImageView::New();
@@ -52,7 +57,8 @@ 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_PROPERTY_REGISTRATION(Toolkit, ImageView, "placeholderImage", STRING, PLACEHOLDER_IMAGE)
+DALI_PROPERTY_REGISTRATION(Toolkit, ImageView, "enableTransitionEffect", BOOLEAN, ENABLE_TRANSITION_EFFECT)
 DALI_ANIMATABLE_PROPERTY_REGISTRATION_WITH_DEFAULT(Toolkit, ImageView, "pixelArea", Vector4(0.f, 0.f, 1.f, 1.f), PIXEL_AREA)
 DALI_TYPE_REGISTRATION_END()
 
@@ -60,11 +66,13 @@ DALI_TYPE_REGISTRATION_END()
 
 using namespace Dali;
 
-ImageView::ImageView()
-: Control(ControlBehaviour(CONTROL_BEHAVIOUR_DEFAULT)),
+ImageView::ImageView(ControlBehaviour additionalBehaviour)
+: Control(ControlBehaviour(CONTROL_BEHAVIOUR_DEFAULT | additionalBehaviour)),
   mImageSize(),
+  mTransitionTargetAlpha(FULL_OPACITY),
   mImageVisualPaddingSetByTransform(false),
-  mImageViewPixelAreaSetByFittingMode(false)
+  mImageViewPixelAreaSetByFittingMode(false),
+  mTransitionEffect(false)
 {
 }
 
@@ -72,9 +80,9 @@ ImageView::~ImageView()
 {
 }
 
-Toolkit::ImageView ImageView::New()
+Toolkit::ImageView ImageView::New(ControlBehaviour additionalBehaviour)
 {
-  ImageView* impl = new ImageView();
+  ImageView* impl = new ImageView(additionalBehaviour);
 
   Toolkit::ImageView handle = Toolkit::ImageView(*impl);
 
@@ -93,21 +101,53 @@ void ImageView::OnInitialize()
   Dali::Toolkit::Control handle(GetOwner());
   handle.ResourceReadySignal().Connect(this, &ImageView::OnResourceReady);
 
-  DevelControl::SetAccessibilityConstructor(Self(), [](Dali::Actor actor) {
-    return std::unique_ptr<Dali::Accessibility::Accessible>(
-      new DevelControl::AccessibleImpl(actor, Dali::Accessibility::Role::IMAGE));
-  });
-
-  //Enable highightability
-  Self().SetProperty(Toolkit::DevelControl::Property::ACCESSIBILITY_HIGHLIGHTABLE, true);
+  Self().SetProperty(DevelControl::Property::ACCESSIBILITY_ROLE, Dali::Accessibility::Role::IMAGE);
 }
 
 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)
+        {
+          mTransitionAnimation.Stop();
+          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();
 
+  // 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)
   {
@@ -139,11 +179,38 @@ void ImageView::SetImage(const Property::Map& map)
 
 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)
+        {
+          mTransitionAnimation.Stop();
+          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();
 
+  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)
@@ -173,6 +240,20 @@ void ImageView::SetImage(const std::string& url, ImageDimensions size)
   // Signal that a Relayout may be needed
 }
 
+void ImageView::ClearImageVisual()
+{
+  // Clear cached properties
+  mPropertyMap.Clear();
+  mUrl.clear();
+  mVisual.Reset();
+
+  // Unregister the exsiting visual
+  DevelControl::UnregisterVisual(*this, Toolkit::ImageView::Property::IMAGE);
+
+  // Trigger a size negotiation request that may be needed when unregistering a visual.
+  RelayoutRequest();
+}
+
 void ImageView::EnablePreMultipliedAlpha(bool preMultipled)
 {
   if(mVisual)
@@ -198,6 +279,43 @@ 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;
+}
+
 Vector3 ImageView::GetNaturalSize()
 {
   if(mVisual)
@@ -258,9 +376,6 @@ void ImageView::OnRelayout(const Vector2& size, RelayoutContainer& container)
 
     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)
@@ -272,7 +387,7 @@ void ImageView::OnRelayout(const Vector2& size, RelayoutContainer& container)
     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);
+    ApplyFittingMode(finalSize, finalOffset, zeroPadding, transformMap);
 
     mVisual.SetTransformAndSize(transformMap, size);
 
@@ -287,86 +402,69 @@ void ImageView::OnRelayout(const Vector2& size, RelayoutContainer& container)
   }
 }
 
-void ImageView::OnCreateTransitions(Dali::Animation& animation, Dali::Toolkit::Control source, AlphaFunction alphaFunction, TimePeriod timePeriod)
+void ImageView::OnCreateTransitions(std::vector<std::pair<Dali::Property::Index, Dali::Property::Map>>& sourceProperties,
+                                    std::vector<std::pair<Dali::Property::Index, Dali::Property::Map>>& destinationProperties,
+                                    Dali::Toolkit::Control                                              source,
+                                    Dali::Toolkit::Control                                              destination)
 {
-  Dali::Toolkit::ImageView destinationHandle = Toolkit::ImageView(GetOwner());
-  Toolkit::Visual::Base    destinationVisual = DevelControl::GetVisual(GetImplementation(destinationHandle), Toolkit::ImageView::Property::IMAGE);
-  Property::Map            destinationMap;
-
-  if(!destinationVisual)
+  // Retrieves image properties to be transitioned.
+  Dali::Property::Map imageSourcePropertyMap, imageDestinationPropertyMap;
+  MakeVisualTransition(imageSourcePropertyMap, imageDestinationPropertyMap, source, destination, Toolkit::ImageView::Property::IMAGE);
+  if(imageSourcePropertyMap.Count() > 0)
   {
-    return;
+    sourceProperties.push_back(std::pair<Dali::Property::Index, Dali::Property::Map>(Toolkit::ImageView::Property::IMAGE, imageSourcePropertyMap));
+    destinationProperties.push_back(std::pair<Dali::Property::Index, Dali::Property::Map>(Toolkit::ImageView::Property::IMAGE, imageDestinationPropertyMap));
   }
+}
 
-  destinationVisual.CreatePropertyMap(destinationMap);
+void ImageView::OnUpdateVisualProperties(const std::vector<std::pair<Dali::Property::Index, Dali::Property::Map>>& properties)
+{
+  Toolkit::Visual::Base visual = DevelControl::GetVisual(*this, Toolkit::ImageView::Property::IMAGE);
+  if(visual)
+  {
+    Dali::Toolkit::Control handle(GetOwner());
 
-  static auto findValue = [](const Property::Map& map, Property::Index index) -> Vector4 {
-    Property::Value* propertyValue = map.Find(index);
-    if(propertyValue)
+    for(auto&& data : properties)
     {
-      return propertyValue->Get<Vector4>();
+      if(data.first == Toolkit::ImageView::Property::IMAGE)
+      {
+        DevelControl::DoAction(handle, Toolkit::ImageView::Property::IMAGE, DevelVisual::Action::UPDATE_PROPERTY, data.second);
+        break;
+      }
     }
-    return Vector4{};
-  };
-
-  Vector4 sourceMixColor(0.0f, 0.0f, 0.0f, 0.0f);
-  Vector4 sourceCornerRadius(0.0f, 0.0f, 0.0f, 0.0f);
-  Vector4 destinationMixColor     = findValue(destinationMap, Dali::Toolkit::Visual::Property::MIX_COLOR);
-  Vector4 destinationCornerRadius = findValue(destinationMap, Toolkit::DevelVisual::Property::CORNER_RADIUS);
-
-  Dali::Toolkit::ImageView sourceHandle = Dali::Toolkit::ImageView::DownCast(source);
-  Toolkit::Visual::Base    sourceVisual;
-  Property::Map            sourceMap;
-
-  if(sourceHandle)
-  {
-    sourceVisual = DevelControl::GetVisual(GetImplementation(sourceHandle), Toolkit::ImageView::Property::IMAGE);
   }
+}
 
-  if(sourceVisual)
-  {
-    sourceVisual.CreatePropertyMap(sourceMap);
-    sourceMixColor     = findValue(sourceMap, Dali::Toolkit::Visual::Property::MIX_COLOR);
-    sourceCornerRadius = findValue(sourceMap, Toolkit::DevelVisual::Property::CORNER_RADIUS);
-  }
-
-  std::vector<Dali::Property>                              properties;
-  std::vector<std::pair<Property::Value, Property::Value>> values;
-
-  if(Vector3(sourceMixColor) != Vector3(destinationMixColor))
-  {
-    properties.push_back(DevelControl::GetVisualProperty(destinationHandle, Toolkit::ImageView::Property::IMAGE, Toolkit::Visual::Property::MIX_COLOR));
-    values.push_back(std::make_pair(Vector3(sourceMixColor), Vector3(destinationMixColor)));
-  }
-  if(std::abs(sourceMixColor.a - destinationMixColor.a) > Math::MACHINE_EPSILON_1)
-  {
-    properties.push_back(DevelControl::GetVisualProperty(destinationHandle, Toolkit::ImageView::Property::IMAGE, Toolkit::Visual::Property::OPACITY));
-    values.push_back(std::make_pair(sourceMixColor.a, destinationMixColor.a));
-  }
-  if(sourceCornerRadius != destinationCornerRadius)
+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)
   {
-    properties.push_back(DevelControl::GetVisualProperty(destinationHandle, Toolkit::ImageView::Property::IMAGE, Toolkit::DevelVisual::Property::CORNER_RADIUS));
-    values.push_back(std::make_pair(sourceCornerRadius, destinationCornerRadius));
+    return;
   }
 
-  for(uint32_t i = 0; i < properties.size(); ++i)
+  // Do transition effect if need.
+  if(mTransitionEffect)
   {
-    if(timePeriod.delaySeconds > 0.0f)
+    // 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();
+    }
+    else
     {
-      Dali::KeyFrames initialKeyframes = Dali::KeyFrames::New();
-      initialKeyframes.Add(0.0f, values[i].first);
-      initialKeyframes.Add(1.0f, values[i].first);
-      animation.AnimateBetween(properties[i], initialKeyframes, TimePeriod(timePeriod.delaySeconds));
+      ClearTransitionAnimation();
     }
-    Dali::KeyFrames keyframes = Dali::KeyFrames::New();
-    keyframes.Add(0.0f, values[i].first);
-    keyframes.Add(1.0f, values[i].second);
-    animation.AnimateBetween(properties[i], keyframes, alphaFunction, timePeriod);
   }
-}
+  else
+  {
+    // we don't need placeholder anymore because visual is replaced. so hide placeholder.
+    HidePlaceholderImage();
+  }
 
-void ImageView::OnResourceReady(Toolkit::Control control)
-{
   // 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
@@ -381,8 +479,8 @@ void ImageView::SetTransformMapForFittingMode(Vector2 finalSize, Vector2 natural
       auto availableVisualSize = finalSize;
 
       // scale to fit the padded area
-      finalSize = naturalSize * std::min((naturalSize.width ? (availableVisualSize.width / naturalSize.width) : 0),
-                                         (naturalSize.height ? (availableVisualSize.height / naturalSize.height) : 0));
+      finalSize = naturalSize * std::min((!Dali::EqualsZero(naturalSize.width) ? (availableVisualSize.width / naturalSize.width) : 0),
+                                         (!Dali::EqualsZero(naturalSize.height) ? (availableVisualSize.height / naturalSize.height) : 0));
 
       // calculate final offset within the padded area
       finalOffset += (availableVisualSize - finalSize) * .5f;
@@ -396,8 +494,8 @@ void ImageView::SetTransformMapForFittingMode(Vector2 finalSize, Vector2 natural
     {
       mImageViewPixelAreaSetByFittingMode = true;
       auto availableVisualSize            = finalSize;
-      finalSize                           = naturalSize * std::max((naturalSize.width ? (availableVisualSize.width / naturalSize.width) : 0),
-                                         (naturalSize.height ? (availableVisualSize.height / naturalSize.height) : 0));
+      finalSize                           = naturalSize * std::max((!Dali::EqualsZero(naturalSize.width) ? (availableVisualSize.width / naturalSize.width) : 0.0f),
+                                         (!Dali::EqualsZero(naturalSize.height) ? (availableVisualSize.height / naturalSize.height) : 0.0f));
 
       auto originalOffset = finalOffset;
       finalOffset += (availableVisualSize - finalSize) * .5f;
@@ -423,8 +521,8 @@ void ImageView::SetTransformMapForFittingMode(Vector2 finalSize, Vector2 natural
       }
       else
       {
-        finalSize = naturalSize * std::min((naturalSize.width ? (availableVisualSize.width / naturalSize.width) : 0),
-                                           (naturalSize.height ? (availableVisualSize.height / naturalSize.height) : 0));
+        finalSize = naturalSize * std::min((!Dali::EqualsZero(naturalSize.width) ? (availableVisualSize.width / naturalSize.width) : 0.0f),
+                                           (!Dali::EqualsZero(naturalSize.height) ? (availableVisualSize.height / naturalSize.height) : 0.0f));
       }
 
       finalOffset += (availableVisualSize - finalSize) * .5f;
@@ -449,7 +547,7 @@ void ImageView::SetTransformMapForFittingMode(Vector2 finalSize, Vector2 natural
   }
 }
 
-void ImageView::ApplyFittingMode(Vector2 finalSize, Vector2 naturalSize, Vector2 finalOffset, bool zeroPadding, Property::Map& transformMap)
+void ImageView::ApplyFittingMode(Vector2 finalSize, Vector2 finalOffset, bool zeroPadding, Property::Map& transformMap)
 {
   Visual::FittingMode fittingMode = Toolkit::GetImplementation(mVisual).GetFittingMode();
 
@@ -465,6 +563,14 @@ void ImageView::ApplyFittingMode(Vector2 finalSize, Vector2 naturalSize, Vector2
   {
     mImageVisualPaddingSetByTransform = true;
 
+    Vector2 naturalSize;
+    // NaturalSize will not be used for FILL fitting mode, which is default.
+    // Skip GetNaturalSize
+    if(fittingMode != Visual::FittingMode::FILL)
+    {
+      mVisual.GetNaturalSize(naturalSize);
+    }
+
     // If FittingMode use FIT_WIDTH or FIT_HEIGTH, it need to change proper fittingMode
     if(fittingMode == Visual::FittingMode::FIT_WIDTH)
     {
@@ -498,6 +604,113 @@ void ImageView::ApplyFittingMode(Vector2 finalSize, Vector2 naturalSize, Vector2
   }
 }
 
+void ImageView::CreatePlaceholderImage()
+{
+  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)
+  {
+    mPlaceholderVisual.SetName("placeholder");
+  }
+  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);
+  }
+}
+
+void ImageView::HidePlaceholderImage()
+{
+  if(mPlaceholderVisual)
+  {
+    DevelControl::UnregisterVisual(*this, Toolkit::ImageView::Property::PLACEHOLDER_IMAGE);
+
+    // Hide placeholder
+    Actor self = Self();
+    Toolkit::GetImplementation(mPlaceholderVisual).SetOffScene(self);
+  }
+}
+
+void ImageView::TransitionImageWithEffect()
+{
+  Toolkit::ImageView handle = Toolkit::ImageView(GetOwner());
+
+  if(handle)
+  {
+    mTransitionAnimation = Animation::New(1.5f);
+    mTransitionAnimation.SetEndAction(Animation::EndAction::DISCARD);
+    float destinationAlpha = (mTransitionTargetAlpha > LOW_OPACITY) ? mTransitionTargetAlpha : LOW_OPACITY;
+
+    if(mPreviousVisual) // Transition previous image
+    {
+      Dali::KeyFrames fadeoutKeyFrames = Dali::KeyFrames::New();
+      fadeoutKeyFrames.Add(0.0f, destinationAlpha);
+      fadeoutKeyFrames.Add(1.0f, LOW_OPACITY);
+      Internal::Visual::Base& visualImpl = Toolkit::GetImplementation(mPreviousVisual);
+      mTransitionAnimation.AnimateBetween(visualImpl.GetPropertyObject(Toolkit::Visual::Property::OPACITY), fadeoutKeyFrames);
+    }
+    else if(mPlaceholderVisual) // Transition placeholder
+    {
+      Dali::KeyFrames fadeoutKeyFrames = Dali::KeyFrames::New();
+      fadeoutKeyFrames.Add(0.0f, destinationAlpha);
+      fadeoutKeyFrames.Add(1.0f, LOW_OPACITY);
+      Internal::Visual::Base& visualImpl = Toolkit::GetImplementation(mPlaceholderVisual);
+      mTransitionAnimation.AnimateBetween(visualImpl.GetPropertyObject(Toolkit::Visual::Property::OPACITY), fadeoutKeyFrames);
+    }
+
+    // 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);
+    }
+
+    // Play transition animation
+    mTransitionAnimation.FinishedSignal().Connect(this, &ImageView::OnTransitionAnimationFinishedCallback);
+    mTransitionAnimation.Play();
+  }
+}
+
+void ImageView::ClearTransitionAnimation()
+{
+  // Hide placeholder
+  HidePlaceholderImage();
+
+  // Clear PreviousVisual
+  if(mPreviousVisual)
+  {
+    Actor                    self            = Self();
+    Internal::Control::Impl& controlDataImpl = Internal::Control::Impl::Get(*this);
+    controlDataImpl.EnableReadyTransitionOverriden(mVisual, false);
+    Toolkit::GetImplementation(mPreviousVisual).SetOffScene(self);
+    mPreviousVisual.Reset();
+  }
+
+  if(mTransitionAnimation)
+  {
+    mTransitionAnimation.FinishedSignal().Disconnect(this, &ImageView::OnTransitionAnimationFinishedCallback);
+    mTransitionAnimation.Clear();
+  }
+}
+
 ///////////////////////////////////////////////////////////
 //
 // Properties
@@ -524,33 +737,46 @@ void ImageView::SetProperty(BaseObject* object, Property::Index index, const Pro
         else
         {
           map = value.GetMap();
-          if(map)
+          if(DALI_LIKELY(map))
           {
-            Property::Value* shaderValue = map->Find(Toolkit::Visual::Property::SHADER, CUSTOM_SHADER);
-            // set image only if property map contains image information other than custom shader
-            if(map->Count() > 1u || !shaderValue)
+            // the property map is emtpy map. Unregister visual.
+            if(DALI_UNLIKELY(map->Count() == 0u))
             {
-              impl.SetImage(*map);
+              impl.ClearImageVisual();
             }
-            // the property map contains only the custom shader
-            else if((map->Count() == 1u) && (shaderValue))
+            else
             {
-              Property::Map* shaderMap = shaderValue->GetMap();
-              if(shaderMap)
+              Property::Value* shaderValue = map->Find(Toolkit::Visual::Property::SHADER, CUSTOM_SHADER);
+              // set image only if property map contains image information other than custom shader
+              if(map->Count() > 1u || !shaderValue)
               {
-                impl.mShaderMap = *shaderMap;
-
-                if(!impl.mUrl.empty())
-                {
-                  impl.SetImage(impl.mUrl, impl.mImageSize);
-                }
-                else if(!impl.mPropertyMap.Empty())
+                impl.SetImage(*map);
+              }
+              // the property map contains only the custom shader
+              else if((map->Count() == 1u) && (shaderValue))
+              {
+                Property::Map* shaderMap = shaderValue->GetMap();
+                if(shaderMap)
                 {
-                  impl.SetImage(impl.mPropertyMap);
+                  impl.mShaderMap = *shaderMap;
+
+                  if(!impl.mUrl.empty())
+                  {
+                    impl.SetImage(impl.mUrl, impl.mImageSize);
+                  }
+                  else if(!impl.mPropertyMap.Empty())
+                  {
+                    impl.SetImage(impl.mPropertyMap);
+                  }
                 }
               }
             }
           }
+          else
+          {
+            // invalid property value comes. Unregister visual.
+            impl.ClearImageVisual();
+          }
         }
         break;
       }
@@ -564,6 +790,26 @@ void ImageView::SetProperty(BaseObject* object, Property::Index index, const Pro
         }
         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;
+      }
     }
   }
 }
@@ -603,12 +849,29 @@ Property::Value ImageView::GetProperty(BaseObject* object, Property::Index prope
         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;
 }
 
+void ImageView::OnTransitionAnimationFinishedCallback(Animation& animation)
+{
+  ClearTransitionAnimation();
+}
+
 } // namespace Internal
 } // namespace Toolkit
 } // namespace Dali