Open3

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

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

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

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

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

  
  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とか何なのかよくわからんので調べてみる。

まず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の値を大きく(小さく)すればアニメーションの速度アップ(ダウン)

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

ちなみに公式が提供している物理シミュレーションを使ってアニメーションウィジェットをカスタムするCookbookがある。このInterective ExampleでSpringDescriptionのmassパラメータを実際にいじって動きを確認したりすると直感的にアニメーションの変化が試せてわかりやすいかもしれない。

https://flutter.dev/docs/cookbook/animation/physics-simulation#interactive-example
作成者以外のコメントは許可されていません