Zenn
Open3

FlutterのPageView Widgetのトランジションのアニメーションを変更する。ついでにSpringSimulationについても調べる。

YuheiNakasakaYuheiNakasaka

このアンサーのScrollPhysicsを継承したCustomPageViewScrollPhysicsを使うとPageViewのトランジションの速度を変えたりできる。

import 'package:flutter/cupertino.dart';
import 'package:flutter/physics.dart';

class CustomPageViewScrollPhysics extends ScrollPhysics {
  const CustomPageViewScrollPhysics({ScrollPhysics parent})
      : super(parent: parent);

  @override
  CustomPageViewScrollPhysics applyTo(ScrollPhysics ancestor) {
    return CustomPageViewScrollPhysics(parent: buildParent(ancestor));
  }

  @override
  SpringDescription get spring => const SpringDescription(
        mass: 80,
        stiffness: 100,
        damping: 1,
      );
}

https://stackoverflow.com/questions/65325496/flutter-pageview-how-to-make-faster-animations-on-swipe

それはそれとして、SpringDescriptionとか何なのかよくわからんので調べてみる。

YuheiNakasakaYuheiNakasaka

まずPhysicsの公式ドキュメントをみる。摩擦や重力などの基本的な物理モデルのウィジェットがまとめて提供されているようだ。その中にSpringSimulationというのがある。Spring=バネ、つまりSpringSimulationというのは物理でやった記憶が微かにある、あのフックの法則に従うばねで運動する物体のモデルだ。なのでSpringDescriptionはその計算パラメーターということになる。
https://api.flutter.dev/flutter/physics/physics-library.html

`SpringDescriptionのドキュメントはこれ。パラメータはそれぞれ下記。

  • mass: フックの法則に従うばねの先についた物体の質量
  • stiffness: ばね定数(=ばねの伸びにくさ)
  • damping: 減衰係数

https://api.flutter.dev/flutter/physics/SpringDescription-class.html

減衰係数というのがよくわからなかったけど、これはばねがどのくらいの割合で減少していくのかを決めるパラメータらしい。減衰振動とかこの辺りで出てくる。現実ではフックの法則のように正比例ではなく徐々に緩やかになっていくのでそれを表現するための値っぽい。

色々書いたけど大抵はばね定数も減衰係数もほぼ固定でよくて、Flutterのアニメーションを組むときには基本下記だけ覚えておけば良さそう。

  • massの値を大きく(小さく)すればアニメーションの速度アップ(ダウン)

力学をちゃんと修めておかないと苦労するな...