Flutter에서 원형 & amp; 스케일 애니메이션

이 도움말은 주로 조명 구현 방법에 대해 설명 할 첫 번째 섹션의 세 섹션으로 구성되어 있습니다. Flutter 앱에 어두운 테마를 추가 한 다음, 우리가 직면하고 극복 한 장애물을 공개하고 결국 모든 것을 현재 Flutter 앱과 통합합니다.

지루한 플러터 쇼와 다양한 테마 구현에 대한 에피소드를보고 아이디어가 나왔습니다.

다트 쪽과 어두운 쪽

그들은 단지 가벼운 테마와 d a rk 테마를 구현하고 서로 전환하는 프로세스를 구현했습니다. 인터넷에는 다양한 접근 방식으로이 기능을 구현하는 많은 자습서가 있습니다. 페이드 애니메이션 커스터마이징에 초점을 맞출 것입니다.

기본적으로 테마 변경시 Flutter에서 얻는 기본 애니메이션입니다.

스케일 애니메이션 청중을 위해 통합 부분에서 다룰 것이므로 원형 애니메이션은 구현하기가 훨씬 더 어려웠 기 때문에 애니메이션을 제작하는 단계에 대해서는 언급하지 않겠습니다. 원형 애니메이션이 훨씬 더 멋져요 !!

테마 설정

애플리케이션 클래스부터 밝은 테마와 어두운 테마를 설정합니다.

그런 다음 이러한 테마를 앱에 제공해야합니다.

이를 구현하면 테마 변경시 멋진 페이드 인 애니메이션을 얻을 수 있습니다.하지만 확실히 우리는 HIGHER를 목표로하고 있습니다.

실제 구현 방법

이전 애니메이션을 다음과 같이 변경하는 방법을 설명합니다.

주의 : 이 섹션에는이 기능을 생성하는 단계가 포함되어 있습니다. 관심이없고 앱에서만 사용하려는 경우이 섹션을 건너 뛰고의 통합 부분으로 이동할 수 있습니다. 기사.

항상 그렇듯이 큰 문제를 해결하는 가장 좋은 방법은 작은 문제로 쪼개는 것이므로이 애니메이션에있는 부분의 이름을 지정하겠습니다.

1- 원형 애니메이션이 끝날 때까지 이전 테마가 여전히 존재한다는 것을 즉시 알 수 있으므로이를 염두에 두어야합니다.

2- 앱의 새 테마를 실제로 보여주는 원형 표시 애니메이션을 만들어야합니다.

문제 해결

우리가 직면 한 첫 번째 문제의 경우 위젯 계층 구조에 여러 테마 인스턴스를 동시에 가질 수 없습니다 . 따라서 이전 테마를 아래에 두는 솔루션을 사용할 수 없습니다. 새로운 것입니다.

해키 접근 방식은 앱이 테마를 변경하도록 트리거 한 후 화면 이미지를 찍는 것이므로 기본적으로 하단 레이어는 실제 앱이 아닌 이미지입니다.

둘째, 이미지 위에 원형 표시 애니메이션을 표시합니다. 이미지 위에 원형 표시 애니메이션을 쌓아서 필요할 때 애니메이션을 시작하면됩니다.

기본적으로 필요한 애니메이션을 만들기 위해 이러한 단계를 모두 합치면됩니다.

애니메이션을 앱과 통합

말씀하신 것보다 쉽기 때문에 여러 프로젝트에서 재사용 할 수 있도록 패키지를 만들었습니다.

pubspec.yaml에 종속성을 추가하여 시작하겠습니다.

사용 가능한 애니메이션

물론 Flutter의 멋진 기본 애니메이션을 제거 할 수 없으므로 패키지에 가져 와서 배율 및 원형 애니메이션을 가져올 수도 있습니다. 아마도 원형 및 페이드 애니메이션을 보았을 것입니다. 여기 배율 애니메이션이 있습니다.

애니메이션은 실제로 모든 데모에서 나타나는 것보다 훨씬 부드럽습니다. 안타깝게도 GIF가 작동하는 방식입니다.

이제 이전에 작업했던 앱 클래스로 돌아가서 다음 import 문을 추가합니다.

Flutter는 사용자 정의 애니메이션을 만드는 쉬운 방법을 제공하지 않습니다. 그래서 우리는 그들의 코드를 깊이 파고 들어 애니메이션 기능 만 추가하는 앱 클래스를 만들었습니다. 그래야 정상적인 모든 기능을 얻을 수 있습니다. MaterialApp이 사용합니다.

앱 클래스의 빌드 함수에서 앞서 추가 한 MaterialApp을 변경하세요.

이제 Flutter의 기본 애니메이션 지속 시간이 600 밀리 초인 Fade in이라는 기본 애니메이션을 얻게됩니다.

다음과 같이 맞춤 설정할 수 있습니다.

애니메이션 유형을 현재 구현 된 애니메이션 중 하나로 변경할 수 있습니다.

또한 필요에 따라 애니메이션 길이를 변경하세요.

업데이트 : 이제 테마를 전환하려면 밝은 테마와 어두운 테마를 그대로두고 사용자 환경 설정에 따라 ThemeMode 값을 어둡거나 밝게 변경해야합니다.

남은 작업

런타임에 테마를 변경할 수있는 버튼이나 스위치가 없다는 것을 눈치 챘을 것입니다. 왜냐하면 우리가 그 부분에 집중하지 않는다고 말했듯이 이미 구현하지 않았다면 지루한 것을 볼 수 있습니다. Flutter 쇼 동영상

어디로 가는지

우리는 패키지를 더욱 향상시키기 위해 더 많은 애니메이션을 구현하기 위해 노력하고 있으므로, 우리가 작업하고 대중과 공유 할 수 있도록 여러분이 염두에두고있는 아이디어를 알려 주시기 바랍니다. 문제가 있으면 패키지의 저장소를 방문하여 문제를여십시오.

링크드 인에서도 기사를 찾을 수 있습니다.