动画切换组件

4 阅读1分钟

两个图标的渐隐渐显切换效果:

AnimatedCrossFade(
                  duration: Duration(milliseconds: 400),
                  firstChild: GestureDetector(
                    onTap: () {
                      controller.changeLoginPage(1);
                    },
                    child: Icon(Icons.label, size: 40, color: Colors.grey),
                  ),
                  secondChild: GestureDetector(
                    onTap: () {
                      controller.changeLoginPage(0);
                    },
                    child: Icon(Icons.favorite, size: 40, color: Colors.red),
                  ),
                  crossFadeState: controller.isPhoneLogin.value
                      ? CrossFadeState.showFirst
                      : CrossFadeState.showSecond,
                ),

两个图标的弹动切换效果(需要key):

AnimatedSwitcher(
                  duration: Duration(milliseconds: 300),
                  switchInCurve: Curves.easeIn,
                  switchOutCurve: Curves.easeOut,
                  transitionBuilder:
                      (Widget child, Animation<double> animation) {
                        return ScaleTransition(scale: animation, child: child);
                      },
                  child: controller.isPhoneLogin.value
                      ? Icon(
                          Icons.bookmark,
                          key: ValueKey('bookmarked'),
                          size: 40,
                          color: Colors.blue,
                        )
                      : Icon(
                          Icons.bookmark_border,
                          key: ValueKey('not_bookmarked'),
                          size: 40,
                          color: Colors.grey,
                        ),
                ),