【アニメーションウィジェット】Flutter SlideTransition

皆さんこんにちは、私は17歳です。

SlideTransitionは位置の変化に応じてアニメーション効果を生み出すウィジェットです。一部のウィジェットには SlideTransition に基づいたアニメーション効果があるため、SlideTransition は非常に重要なアニメーションウィジェットです。

SlideTransition の概要

SlideTransition はAnimatedWidgetを継承しており、
位置の変更はFractionalTranslationによって実現されます。パラメータ Offset(dx,dy) の dx,dy は比例値です。

FractionalTranslationと同様に、位置はレイアウト段階ですでに決定されています。表示範囲を制御するには、ClipRect を使用します。

SlideTransitionを使用する

const SlideTransition({
    
    
    super.key,
    required Animation<Offset> position,
    this.transformHitTests = true,
    this.textDirection,
    this.child,
  })

位置位置のスケール係数。たとえば、0.5 は幅の 50% を右にオフセットすることを意味します。
transformHitTests のデフォルトは true です。pointerEventの位置を変換するかどうか

final Offset transformedPosition = offset == null ? position : position - offset;

変換の結果、描画中にオフセットが減算されます。これは、オフセットによる影響を除去することと同じであるため、子の hitTest はパスします。エリア全体がクリックに反応します。transformHitTests false の場合、pointerEvent の位置が子のサイズの範囲外であるため、オーバーフロー部分は hitTest を渡すことができません。

textDirection については心配しないでください。通常は左から右に進みます。

例

class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with SingleTickerProviderStateMixin {
    
    
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  )..repeat(reverse: true);
  late final Animation<Offset> _offsetAnimation = Tween<Offset>(
    begin: const Offset(-1, -1.0),
    end: const Offset(1, 1.0),
  ).animate(CurvedAnimation(
    parent: _controller,
    curve: Curves.elasticIn,
  ));

  @override
  void dispose() {
    
    
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    
    
    return SlideTransition(
      position: _offsetAnimation,
      child: const Padding(
        padding: EdgeInsets.all(8.0),
        child: FlutterLogo(size: 150.0),
      ),
    );
  }
}

この例のアニメーショントラックは、左上から右下への対角線です。実際、SlideTransition は直線にしか移動できません。SlideTransition の子がモーション中のクリックに応答するようにするには、transformHitTests が true であることを確認するだけでなく、すべての親が子のモーション軌跡全体を含める必要もあります。

SlideTransitionのユーザーエクスペリエンスについての考え

デフォルトでは、transformHitTests は true です。アニメーションが遅い場合でも、ユーザーは子の位置を正確にクリックできます。しかし、アニメーションが速いと、ユーザーが子供の位置をクリックするのが難しく、応答が行われたときに子供が別の位置に移動してしまう可能性があります。現時点では、transformHitTests を false に設定することをお勧めします。ユーザーは子の最終位置をクリックすることのみを許可します。アニメーションが 1 回だけ実行される場合、最終位置はすでに停止しています。繰り返しアニメーションの場合は、子がどこにいても、この位置をクリックしていれば成功するので問題ありません。

最終位置は、position(0,0) を参照します。

アニメーションがposition(0,0)から始まる場合、クリック位置は初期位置に設定できます。