본문 바로가기

Animation

(4)
[Android] Compose Scrollable Column에서 처음 보여지는 타이밍 캐치하기 들어가는 글신규 기능으로 매출 분석을 차트, 막대 그래프 등 시각적으로 표현하는 기능을 개발하게 되었습니다.평소 토스의 인터랙션과 애니메이션에 관심이 많았기에 소비 분석 화면을 참고해보기로 했습니다.소비 분석엔 카테고리별 소비, 일별 소비, 월별 소비, 고정 지출 등 다양한 분석이 Column에 나열되어 있습니다.막대그래프의 높이 애니메이션, 원그래프의 애니메이션은 Column을 스크롤해 화면에 표시되는 순간 시작하게 됩니다.토스처럼 Scrollable Column에서 화면에 보여졌을 때 애니메이션이 시작되길 원했습니다.처음에는 LazyColumn을 사용해봤지만 하단을 갔다가 상단을 갔을 때 애니메이션이 다시 시작되는 문제가 있었고, debug 환경에서 프레임이 떨어지는 현상도 있어 일반 Column을 ..
[HTML/CSS] 흔들리는 종 아이콘 만들어보기 웹 사이트를 보던 중 좌우로 흔들리는 종 아이콘이 재밌어 보여서 만들어 봤습니다. transform-origin이 구현에 가장 중요한 부분이라고 생각합니다. fa fa-bell See the Pen VweQVgZ by bjj3036 (@bjj3036) on CodePen.
[Android] Circle Reveal Animation 간단히 사용해보기 Circle Reveal Animation 안드로이드 개발문서를 살펴보던 중 흥미로운 것을 발견했다. https://developer.android.com/training/animation/reveal-or-hide-view?hl=ko#Reveal 애니메이션으로 뷰 표시 또는 숨기기 | Android 개발자 | Android Developers 앱 사용 시 오래된 정보가 삭제되는 동안 새 정보가 화면에 표시되어야 합니다. 표시 내용이 빠르게 전환되면 부자연스럽게 보이거나 사용자가 화면에서 새 콘텐츠를 쉽게 놓칠 수 있습니다. 애 developer.android.com '회전 표시 애니메이션' 처음 번역된 이름을 봤을 땐 회전하면서 보여지는 애니메이션인 줄 알았다. 'Circle Reveal Animati..
[Android] Translate Animation과 클릭 이벤트 Translate Animation이 적용된 View의 Click 이벤트 발생 위치가 생각과 달라 포스팅을 합니다. anim/anim_right.xml layout/activity_main.xml ... ... MainActivity.java public class MainActivity extends AppCompatActivity { private ImageView mImg; private Animation rightAnim; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mImg = findViewB..