[플러터] Rive animation 실행은 해보자 #1

flare에서 rive로 변경되고, 코드도 좀 많이 변경된 듯하다. 음.. 짜.....

그래도 해보자. controller부터 만들고

 

late RiveAnimationController _rivcontroller;

bool get isPlaying => _rivcontroller.isActive;

 

 

isactive 값을 반전시키는 메소드를 넣어준다.

 

void _toggleAnimation() {

  setState(() {

    _rivcontroller.isActive = !_rivcontroller.isActive;

  });

}

 

 

initState에서 controller를 oneshotanimation으로 등록해준다.

 

@override

void initState() {

  super.initState();

  // _controller = SimpleAnimation('touchMotion');

  _rivcontroller = OneShotAnimation(

    'touchMotion',

    onStop: (() => print('stop')),

    onStart: () {

      print('start');

    },

  );

}

 

 

controller의 dispose도 넣어주고,

 

@override

void dispose() {

  _rivcontroller.dispose();

  super.dispose();

}

 

 

UI내에 RiveAnimation을 넣어준다.

 

child: RiveAnimation.asset(

  'touch.riv',

  controllers: [_rivcontroller],

),

 

 

FloatingActionButton으로 PLAY/PAUSE를 제어할 수 있도록 한다.

 

floatingActionButton: FloatingActionButton(

  onPressed: _toggleAnimation,

  tooltip: fbicontooltipdata,

  child: fbicondata,

),

 

 

생각보다 간단한데? 다음엔 새로 생긴 State Machine을 알아봐야한다.

끝.