ASNetworkImageNode 이미지 로드 시 애니메이션 효과 주기

이미지가 로드 되면 하얀색 배경에서 이미지가 바로 로드 되기때문에 일명 깜빡이 현상이 발생하곤 한다.

이게 하나의 이미지 정도라면 그닥 신경쓰이지 않겠지만 Feed 형태의 페이지라면 말이 달라진다.

많은 이미지가 로드 되기때문에 깜빡임 현상이 더 잦게 보이는데 이러한 문제를 해결하기 위해 이미지 로드 시 바로 로드 되게 하지 않고 서서히 로드되게 처리하면 좀 더 좋은 UX를 제공할 수 있게 된다.

ASNetworkImageNode 에는 이미지 로드가 성공인지 실패인지 알 수 있는 delegate가 존재한다. 이 delegate를 통해서 이미지 로드 시 Fade-in 효과를 줄 생각이다.

사용할 메소드는 다음과 같다.

• imageNode(_ imageNode: ASNetworkImageNode, didFailWithError error: Error)
• imageNode(_ imageNode: ASNetworkImageNode, didLoad image: UIImage)

그리고 각각 아래와 같이 구현했다.

func imageNode(_ imageNode: ASNetworkImageNode, didFailWithError error: Error) {
    // 이미지 로드 실패 시
    imageNode.alpha = 0
}

func imageNode(_ imageNode: ASNetworkImageNode, didLoad image: UIImage) {
    // 이미지 로드 성공 시
    imageNode.alpha = 1
    UIView.transition(
        with: imageNode.view,
        duration: 0.3,
        options: .transitionCrossDissolve,
        animations: nil,
        completion: nil
    )
}

모든 Node에 이 코드들을 추가할 수 없으니 ASDisplayNode를 상속받는 클래스를 만들어서 ASImageNode(placeholder용) 와 ASNetworkImageNode를 잘 이용해보자.