본문 바로가기

개발하자

펄럭이는 지속적인 티커

반응형

펄럭이는 지속적인 티커

프레임 새로 고침 시마다 지속 체크 표시하는 방법. 예를 들어 Flame 게임 엔진 방법은 매 초마다 호출되며 경과된 시간을 가진 값이 전달됩니다. 나는 선풍기가 회전하는 간단한 애니메이션 하나를 구현하고 싶다. 사용자 입력에 따라 회전 속도를 변경하고 싶습니다. 내 생각은 모든 틱마다 팬 이미지/용기를 고정된 값으로 회전시키겠다는 것이다. 사용자가 속도를 높이면 나는 승수를 늘릴 것이다. Flame 엔진이나 Flare를 사용하는 것과 같은 옵션은 거의 없지만, 그것들은 지나치게 사용하는 것처럼 보인다. 또한 사용할 수는 있지만 애니메이션을 완성하고 전송할 때 역방향으로 하는 등의 오버헤드가 거의 없어요...




애니메이션 위젯을 사용하지 않고 Timer with a Stream을 구현하는 것이 좋은 방법입니다. 아래 예를 참조하십시오:

import 'package:flutter/material.dart';
import "dart:async";

const frequency = Duration(milliseconds: 50);

void main() => runApp(
      MaterialApp(
        home: Material(
          child: Center(
            child: Container(
              color: Colors.white,
              child: MyWidget(),
            ),
          ),
        ),
      ),
    );

class MyWidget extends StatefulWidget {
  MyWidgetState createState() => MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
  final StreamController<double> _streamer =
      StreamController<double>.broadcast();

  Timer timer;

  double _rotation = 0.0;

  @override
  void initState() {
    super.initState();

    timer = Timer.periodic(frequency, (t) {
      _rotation++;
      _streamer.add(1);
    });
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<double>(
        initialData: 0,
        stream: _streamer.stream,
        builder: (context, snapshot) {
          return Transform(
            transform: Matrix4.rotationZ(_rotation),
            child: Text('Hello, World!'),
          );
        });
  }
}



이 코드를 복사해 주신다면 폐기 콜백도 반드시 실행하겠습니다. 실행 중인 타이머를 반드시 취소해야 이상한 동작을 방지할 수 있습니다. 그렇지 않으면 타이머가 메모리 누수의 원인이 됩니다.

이 반드시 필요한 것은 아니지만 상태 개체가 타이머 var 자체에 대한 참조를 보유하고 메모리 누출을 유발하는 상황이 발생할 수 있습니다. 예를 들어, 타이머 콜백 본체 내부에 타이머 var를 캡처하는 경우.

예:

@override
  void dispose() {
    timer?.cancel();
    timer = null;
    super.dispose();
  }



사용할 수도 있습니다.

설명서의 예:

final stream = Stream<int>.periodic(
  const Duration(seconds: 1),
  (count) => count * count,
).take(5);

stream.forEach(print); // Outputs event values 0,1,4,9,16 every second

반응형