인프런 커뮤니티 질문&답변

values: {
    messageA_opacity_in: [0, 1, {start: 0.15, end: 0.2}],
    messageA_opacity_out: [1, 0, {start: 0.3, end: 0.35}],
    messageA_translateY_in: [20, 0, {start: 0.15, end: 0.2}],
    messageA_translateY_out: [0, -20, {start: 0.3, end: 0.35}],

    messageB_opacity_in: [0, 1, {start: 0.5, end: 0.55}],
    messageB_opacity_out: [1, 0, {start: 0.58, end: 0.63}],
    messageB_translateY_in: [20, 0, {start: 0.5, end: 0.55}],
    messageB_translateY_out: [0, -20, {start: 0.58, end: 0.63}],

    messageC_opacity_in: [0, 1, {start: 0.72, end: 0.77}],
    messageC_opacity_out: [1, 0, {start: 0.85, end: 0.9}],
    messageC_translateY_in: [20, 0, {start: 0.72, end: 0.77}],
    messageC_translateY_out: [0, -20, {start: 0.85, end: 0.9}],

    pinB_scaleY: [0.5, 1, {start: 0.5, end: 0.55}],
    pinC_scaleY: [0.5, 1, {start: 0.72, end: 0.77}],
}

위의 코드는 동영상을 보면서 작성한 코드이구요

                messageA_opacity_in: [0, 1, {start: 0.15, end: 0.2}],
                messageA_opacity_out: [1, 0, {start: 0.3, end: 0.35}],
                messageA_translateY_in: [20, 0, {start: 0.15, end: 0.2}],
                messageA_translateY_out: [0, -20, {start: 0.3, end: 0.35}],

                messageB_opacity_in: [0, 1, {start: 0.6, end: 0.65}],
                messageB_opacity_out: [1, 0, {start: 0.68, end: 0.73}],
                messageB_translateY_in: [20, 0, {start: 0.6, end: 0.65}],
                messageB_translateY_out: [0, -20, {start: 0.68, end: 0.73}],

                messageC_opacity_in: [0, 1, {start: 0.87, end: 0.92}],
                messageC_opacity_out: [1, 0, {start: 0.95, end: 1}],
                messageC_translateY_in: [20, 0, {start: 0.87, end: 0.92}],
                messageC_translateY_out: [0, -20, {start: 0.95, end: 0.1}],

                pinB_scaleY: [0.5, 1, {start: 0.6, end: 0.65}],
                pinC_scaleY: [0.5, 1, {start: 0.87, end: 0.92}],

위의 코드는 수치를 변경해서 작성한 코드입니다.

제일 위의 코드를 사용했을 땐 .pin이 out되지 않는 현상이 나타났는데 아래의 코드를 사용하니 .pin의 out 애니메이션이 정상적으로 동작하더군요

왜 이런 차이가 나는지 궁금합니다.