flutter custom button animation(플루터 버튼 위아래로 흔들기?)

버튼을 눌렀을 때 위아래로 흔들리는 직접적인 에니메이션이 없어서 만들었다.

 

잊어버릴까 무서워 올린다.

 

에니메이션은 statefullwidget 을 만들어서  state 옆 ticker어쩌구 를 with 해야 된다. 난 하나만 하는

SingleTickerProviderStateMixin

 를 with 하였다 멀티 에니메이션을 할려면 다른 ticker를 임포트해야한다.

 

알고싶으면 찾아 보아라

 

그리고 state클레스 밑에 

 

late final AnimationController _animationController;
late Animation<double> _animation;

함수를 작성하고 

 

initState (초기 build 되기 전 함수)

에다가 

_animationController = AnimationController(
  vsync: this,
  duration: Duration(milliseconds: 300),
);
_animation = TweenSequence([
  TweenSequenceItem(
    tween: Tween(
      begin: 0,
      end: 10,
    ),
    weight: 50,
  ),
  TweenSequenceItem(
    tween: Tween(
      begin: 10,
      end: 0,
    ),
    weight: 50,
  ),
]).animate(_animationController)
  ..addListener(() {
    setState(() {});
  });

설명 하자면 에니메이션 컨트롤러에 소요시간을 설정하고

 

에니메이션에 컨트롤러를 붙이는것인데 

 

TweenSequenceItem 에 weight 는 총 시간의 비율을 말하는것이다 총 100을 넘기지 말고 함 해보자

 

동시에 다발적으로 두개의 애니메이션도 붙이는 것 

 

검색하면 많을 테니 이것 또한 찾아보아라 유용할 것이다.

 

이러고 위젯을 컨트롤러에 붙여주어야 된다.

 

고정된 크기에 Wrapper 가 있어야하며 위치가 자유로운 위젯을 만들어야된다. 

 

한마디로 Container너 안에다 width, hight를 설정하고 그기에 Stack을 넣으란 소리다

 

AspectRatio(
  aspectRatio: 1.657 / 1,
  child: Stack(
    children: [
      Positioned(
        top: _animation.value,
        right: 50,
        child: GestureDetector(
          onTap: _heartToggle,
          child: Icon(
            _like ? Icons.favorite : Icons.favorite_border_outlined,
            color: _like ? _onHeartColor : _unHeartColor,
            size: CommonUtils.getRateSP(80),
          ),
        ),
      ),
    ],
  ),
);

이렇게 top부분에 에니메이션의 값을 넣어주고

 

탭하였을 때 함수를 보면

 

_animationController.forward().then((value) => _animationController.reverse());

이러면 위아래로 2번 행동하는 에니메이션이 완료된다.