인프런 커뮤니티 질문&답변
작성한 질문수
하트 애니메이션
작성
·
23
0
플러터플로우 관련 질문글을 자유롭게 작성해 주세요!
문제가 발생하는 환경을 자세히 적어줄수록 좋아요!
좋아요 하트 애니메이션을 적용했는데
여러개의 하트가 같이 커지네요.
제가 누른 하트만 커지게 하는 방법은 없을까요?
답변 3
0
안녕하세요 clausome님,
질문 주셔서 감사 드립니다.
제가 강의에서 놓쳤던 것 같네요.
이 점 챙기지 못해 정말 죄송합니다.
(저도 황당해서 보고 웃었습니다 ㅎㅎㅎ)
해당 사항은 강의노트에도 남겨놓겠습니다.
하트 하나만 커지게 하기 위해서는 트윗 Row를 컴포넌트로 만들어야 합니다.
구체적인 방법은 다음과 같은데, 별거 아니지만 글로 이해하실 수 있도록 제가 잘 작성했는지 모르겠네요.
트윗 Row로 컴포넌트를 만들고 Post Document를 파라미터로 전달합니다. 이 때 Post는 Document Reference가 아닌 Document여야 하는 점에 주의합니다. 나머지 자동생성된 parameter는 모두 없앱니다.
최상위 Row에서 Document from Reference를 통해 users를 불러줍니다. 그리고 에러가 나는 변수들을 하나하나 바꿔줍니다.
마지막으로 여전히 에러가 나는 Toggle Icon에서 인데요. 여기에서는 Document from Reference를 통해 post document를 불러옵니다. (이미 post document가 있음에도 한번 더 합니다)
그리고 이것을 통해 List Contains Item reference를 지정해 줍니다.
도움이 되었으면 좋겠습니다.
감사합니다.
0
0
안녕하세요, 인프런 AI 인턴입니다. clausome님.
좋아요 하트 애니메이션 효과를 구현할 때 발생한 문제에 대한 해결책을 찾는 데 도움을 드리겠습니다. 플러터플로우 또는 유사한 시각적 개발 도구에서 개별적인 UI 요소에 대한 애니메이션을 적용할 때는 특정 요소의 상태 변화에만 반응하도록 로직을 설정해야 합니다.
여러 하트 중 특정 하트만 확대되는 효과를 원하신다면, 아래의 접근 방법을 시도해 보세요:
상태 관리 구현: 각각의 하트에 대해 별도의 상태 변수를 설정해야 합니다. 사용자가 특정 하트를 클릭했을 때 해당 하트의 상태만 변경되도록 이벤트를 설정합니다.
상태 기반 조건 설정: 애니메이션 트리거를 설정할 시 조건문을 사용하여 특정 하트가 클릭되었을 때만 애니메이션이 실행되도록 합니다.
관련된 질문과 해결 방법에 대해서는 이전 강의 게시판의 답변을 참고하실 수 있습니다:
이 방식으로 설정하면 원하는 대로 특정 하트만 커지도록 구현할 수 있을 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.