Flutter动画插值插件 interpolate_animated 的使用

在Flutter开发中，有时我们需要将一个范围内的值映射到另一个范围。这时可以使用 interpolate_animated 插件中的插值函数来实现。该插件允许你在一个输入范围内进行值的映射，并支持几种外推方式以处理超出输入范围的情况。

使用方法

基本用法

下面是一个基本的例子，展示了如何使用 interpolate 函数将 _scrollController.offset 映射到一个缩放比例（scale）：

import 'package:interpolate_animated/interpolate_animated.dart';

final double scale = interpolate(
  value: _scrollController.offset,
  inputRange: [
    itemWidth * (index - 2),
    itemWidth * (index - 1),
    itemWidth * index,
    itemWidth * (index + 1),
    itemWidth * (index + 2),
  ],
  outputRange: [0.8, 0.8, 1.0, 0.8, 0.8],
  extrapolate: Extrapolate.extend,
);

在这个例子中，我们根据滚动控制器的偏移量动态调整组件的缩放比例。

输入输出范围 (inputRange, outputRange)

• inputRange 是输入值的范围。
• outputRange 是输出值的范围。
• 输出值是通过在输入范围内插值计算得出的。
• inputRange 和 outputRange 必须具有相同的长度。

外推方式 (Extrapolate)

• extrapolate 参数决定了当输入值超出输入范围时如何处理。
  • 如果 extrapolate 是 Extrapolate.identity，则假设输入范围值递增，输出值被限制在范围内。
  • 如果 extrapolate 是 Extrapolate.extend，则假设输入范围值递增，输出值会被扩展到范围之外。
  • 如果 extrapolate 是 Extrapolate.clamp，则假设输入范围值递增，输出值被限制在范围内。

完整示例 Demo

这里提供了一个更完整的示例，演示了如何使用 interpolate 函数：

import 'package:flutter/material.dart';
import 'package:interpolate_animated/interpolate_animated.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Interpolate Animated Example')),
        body: Center(child: MyWidget()),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  [@override](/user/override)
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  final List<double> inputs = [0.0, 1.0];
  final List<double> outputs = [0.0, 100.0];

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        final valueOutput = interpolate(
          value: _controller.value,
          inputRange: inputs,
          outputRange: outputs,
          extrapolate: Extrapolate.extend,
        );

        return Transform.scale(
          scale: valueOutput / 100,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        );
      },
    );
  }
}