<Figma> Carousel Afterdelay 적용시키기

위 사진과 같이 아무런 조건 없이 알아서 애니메이션이 되는 Carousel(회전목마와 같은 화면)을 만들어 볼 것이다.

 

원하는 사진들을 Frame 안에 넣고 정렬시킨다.

정렬된 사진들을 우측에 복붙한다.

전체 선택 후에 Frame을 씌운다.

반복되는 구간 전까지의 영역보다 작게 프레임을 줄인다.

이때 프레임 양쪽 끝에 사진이 걸쳐야 한다. 

간격이 맞지 않게 적용된 모습

사진이 프레임에 딱 맞을 경우 다시 애니메이션이 재생될 때 간격이 일정하지 않게 나오기 때문이다.

이렇게 만든 프레임을 하나 더 복사하고 뒤에 반복되는 사진을 프레임에 똑같이 걸쳐준다.
프레임에 보여지는 사진은 같아보이지만 알고 보면 다른 것이다. 

Tip: Frame 안의 내용물만 잡고 움직여야 하므로 왼쪽 레이어 패널에서 원하는 요소들을 선택후에 움직여야 한다.

ClipContent를 적용한다.

두 프레임을 베리언츠로 만들고 Prototype을 적용시킨다. 
위 사진에서 빨간선으로 표시된 것은 애니메이션이 적용되기 전에 기다리는 시간이다. 저 시간만큼 애니메이션이 작동되지 않다가 시간이 다 되면 그제서야 움직이는 것이다. 나는 연속적으로 움직이는 애니메이션을 만들것이므로 0.1초인 1ms를 적용한다.
아래 초록색으로 표시된 속도는 애니메이션의 움직이는 속도이다. 나머지 옵션은 그대로 해도 되고 여러가지 바꿔가면서 어떤 차이가 있는지 알아보길 권한다.

반대로 적용할 때는 Smartanimation을 Instant로 바꿔주기만 하면 된다.

위 사진과 같은 원리라고 생각하면 된다.

Component를 복사하여 Instence로 만들고 프레임 안에 넣어주고 Present를 확인하면 된다.

 

끝