CLOSE SEARCH
POSTS TAGGED WITH: OpacityMask

RenderTransform과 OpacityMask를 이용한 이미지 반사효과

이미지 반사 효과를 구현하기 위해 그리드 상에 두개의 Image 엘리먼트를 추가한다. 그리고 반사될 이미지의 RenderTransformOrigin 값을 변경한다.

그 후 속성-엘리먼트 구문을 통해 RenderTransform 을 ScaleTransform 으로 지정한다. ScaleTransform 의 Y 스케일에 -0.7 값을 설정해서 이미지가 상하 반전되고 높이가 30% 작아지도록 한다. 그리고 아래쪽으로 갈수록 투명해지도록 OpacityMask 에 선형그레디언트를 추가한다.

OpacityMask

Image의 OpacityMask를 이용해서 이미지의 외곽선에 투명효과를 줄 수 있다. 아래의 코드는 이미즈를 원형그레디언트로 마스킹하고 마스킹된 영역의 외곽 부분을 투명하게 하는 예제이다.

Image 엘리먼트에 표시할 이미지는 Source 속성을 통해 지정한다. 그리고 속성-엘리먼트 구문을 통해 OpacityMask를 설정한다.
이미지의 중앙에서 외곽선까지의 반경 90%까지는 불투명한 이미지를 유지하고 90%부터는 서서히 투명해진다. 이를 위해 마지막 GradientStop의 색상은 투명으로 지정한다.