Gif_Control_Speed

Created with Sketch.

Gif_Control_Speed

こんにちはEveryDaySoft代表の永田です。

Flutterではgifファイル再生スピードをコントロールするプログラムはデフォルト機能では用意されていません。

3年前に公開された昔のバージョンのソースコードをAssetsから画像設定した場合の機能に絞り、最新ソースコードにアップデートしました。

参考package

作成したソースコード FlutterVersion 3.3.10  GitHubリンク

最新ではGoogleが提供している webpという拡張子を使用し、

FlutterプログラムではAnimatedcontainerAnimatedBuilderなどでスピード変化のコード対応も可能かと思います。

このソースコードはディレクションで稼働していた案件内で、スプラッシュ動画の再生スピードをコントロールするために作りました。作成したソースコードは昔のOSと最新のOSの挙動を合わせるためにもう少し改造しています。僕の場合はディレクションもしつつ、プログラムも出来るという能力をスキルの一部として兼ね備えています。

挙動

Gifのスピード可変するソースコード アニメーションのコントローラー

https://github.com/daisukenagata/gif_control_speed/blob/7a2ae9fd8d090e283ce32bc2297599f947fdc400/lib/gifImage.dart#L8

この箇所で再生などの機能を持つAnimationControllerを継承しています。

class GifController extends AnimationController {
  GifController({required this.vsync})
      : super.unbounded(
          value: 0,
          vsync: vsync,
        );

  final TickerProvider vsync;
  final streamSize = StreamController<int>();

  @override
  void reset() {
    value = 0.0;
  }
}

AnimationControllerを継承すると再生機能のforward関数が使用できません。

理由はAnimationControllerでforward機能を持つ関数内で

upperBoundという値が継承する場合は隠蔽実装をしていて、初期時の設定ができないのと、

値が1という数値が付与されますが、最後にinfinityという値を設定しているようで、

実行している、_animateToInternal(upperBound)がアニメーション動作しません。

upperBoundの箇所に数字の100などを付与するとアニメーション動作はしました。

なぜupperBoundがでは動かないのかという部分まではこの機能に関して追求しませんでした。

なのでforward関数の代わりにループするrepeat関数を使用しています。widget.c.repeat(min: 0, max: 100, period: Duration(milliseconds: value));

100というのは今回用意したgifのフレーム数です。プログラムで取得することも可能ですが、今回は直接値を設定しました。のちのコードでフレーム数を取得するプログラムも紹介します。

どうしても再生を実装した場合は、AnimationControllerをクラス継承せずに、AnimationControllerを初期化時にそのまま使用してください。

AnimationController class 

継承した利点はクラス内に機能を拡張できる点ですかね。Extensionを使えばAnimationControllerを使用しても機能拡張はできると思います。

gifのスピード可変するソースコード 初期化実行。 

https://github.com/daisukenagata/gif_control_speed/blob/7a2ae9fd8d090e283ce32bc2297599f947fdc400/lib/gifImage.dart#L60

  @override
  void initState() {
    super.initState();
    widget.controller.addListener(_listener);
  }

widget.controller.addListener(_listener); 先ほどの継承したコントローラが_listenerという関数を監視状態に入れます。

https://github.com/daisukenagata/gif_control_speed/blob/7a2ae9fd8d090e283ce32bc2297599f947fdc400/lib/gifImage.dart#L71

  void _listener() {
    if (_curIndex != widget.controller.value &&
        !widget.controller.value.isInfinite) {
      if (mounted) {
        setState(() {
          if ((widget.controller.value <= _curIndex)) {
            widget.controller.streamSize.sink.add(0);
          }
          _curIndex = widget.controller.value.toInt();
        });
      }
    }
  }

ifが多くて申し訳ないのですが、この関数は再生中に値を付与し続けて、widget.controller.valueの値もアニメーションが1周するまで増加し続けます。なのでifで判定する場合、アニメーションが完了前は増加しているので、sink.addを実行せず、_curIndex値が同じもしくは多くなった場合にwidget.controller.streamSize.sink.add(0);を実行します。実行すると画面遷移する機能がプログラムを呼び出します。

初期化時にdidChangeDependencies関数も実行されます。

https://github.com/daisukenagata/gif_control_speed/blob/7a2ae9fd8d090e283ce32bc2297599f947fdc400/lib/gifImage.dart#L86

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

    fetchGif(widget.image).then((imageInfors) {
      if (mounted) {
        setState(() {
          _infos = imageInfors;
        });
      }
    });
  }

thenという部分は関数実行完了時にインデント内を実行します。_infosはImageInfoというList型です。初期化時に最初の値をinfosに付与する役目です。

fetchGif関数がフレームレートを計算し、取得した画像データからフレーム数を設定し、そのフレーム数に応じてコマ送り画像のような画像データをinfos配列に付与します。

https://github.com/daisukenagata/gif_control_speed/blob/7a2ae9fd8d090e283ce32bc2297599f947fdc400/lib/gifImage.dart#L109

Future<List<ImageInfo>?> fetchGif(ImageProvider provider) async {
    List<ImageInfo>? infos = [];
    dynamic data;

    if (provider is AssetImage) {
      AssetBundleImageKey key =
          await provider.obtainKey(const ImageConfiguration());
      data = await key.bundle.load(key.name);
    }

    final codec = await instantiateImageCodec(data.buffer.asUint8List());
    infos = [];
    for (int i = 0; i < codec.frameCount; i++) {
      var frameInfo = await codec.getNextFrame();
      infos.add(ImageInfo(image: frameInfo.image));
    }
    return infos;
  }

if (provider is AssetImage)の箇所。今回はAsset設定した画像のみ指定していますが、URLなどのimageも実装可能です。

data = await key.bundle.load(key.name); プログラム内の画像URLパスを取得します。

final codec = await instantiateImageCodec(data.buffer.asUint8List()); 取得したdataはCodecというgifデータ、フレーム数を取得する型に代入してます。

ここでフレームレート数をfor文で回し、gif内のデータ画像を一コマづつinfosに設定しています。フレーム数設定後 infosの値を先ほどのthenの箇所に設定します。

https://github.com/daisukenagata/gif_control_speed/blob/7a2ae9fd8d090e283ce32bc2297599f947fdc400/lib/gifImage.dart#L55

値が変化するとgetパラメ-タ-も同時に呼び出します。その際に_infosと現在のフレーム要素のイメージを設定します。

  ImageInfo? get _imageInfo {
    return _infos == null ? null : _infos?[_curIndex];
  }

https://github.com/daisukenagata/gif_control_speed/blob/7a2ae9fd8d090e283ce32bc2297599f947fdc400/lib/gifImage.dart#L99

設定された_imageInfoはimageで表示しているデータとしてレンダリングします。

  @override
  Widget build(BuildContext context) {
    final RawImage image = RawImage(
      image: _imageInfo?.image,
      width: widget.width,
      height: widget.height,
      scale: _imageInfo?.scale ?? 1.0,
    );
    return image;
  }

https://github.com/daisukenagata/gif_control_speed/blob/bcac27185a1404517c27df05ff0fad3f8e6df0c0/lib/animation_view.dart#L50

  @override
  void dispose() {
    widget.c.dispose();
    super.dispose();
  }

画面遷移する場合などdispose();を実行します。

https://github.com/daisukenagata/gif_control_speed/blob/3cef5b226bfc089d8efde93ad87be9c4954c977c/lib/animation_view.dart#L39

このコードはgifの機能とは直接関係ないです。

_listener関数の紹介箇所でwidget.controller.streamSize.sink.add(0);をしていますが、_controller.streamSize.stream.listenのインデント内が実行します。付与した値が0なので画面遷移します。0ではない場合は再生スピードを付与してます。

  @override
  void initState() {
    super.initState();
    _controller = widget.c;
    _controller.streamSize.stream.listen((value) {
      if (value == 0) {
        widget.c
          ..reset()
          ..stop();
        Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => const SubMainPage(
                title: 'EveryDaySoft',
              ),
            ));
      } else {
        widget.c
            .repeat(min: 0, max: 100, period: Duration(milliseconds: value));
      }
    });
  }

全体の機能イメージは画像データごとに高速回転しながらデータを設定し、設定したことにより画像を設定、表示し、データのフレーム数に応じて完了を判定するようなアーキテクチャです。

さらに細かく書くのと、gif以外の部分も解説すると、題名の内容ではなくなってしまうので、gif再生表示させる箇所にフォーカスさせていただきました。

皆様も来年も良いお年をお過ごしください。

貴重なお時間お読みくださいまして、誠にありがとうございます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です