A tween that allow defining keyframes for various properties

keyframes_tween

a tween that allow defining keyframes for various properties.

quickstart

import 'package:keyframes_tween/keyframes_tween.dart';

class example extends statefulwidget {
  @override
  _examplestate createstate() => _examplestate();
}

class _examplestate extends state<example> with tickerproviderstatemixin {
  late final controller = animationcontroller(
    duration: const duration(seconds: 10),
    vsync: this,
  );

  final tween = keyframestween([
    keyframeproperty<size>(
      [
        size(10, 10).keyframe(0),
        size(100, 100).keyframe(0.5, curves.easeinout),
        size(200, 200).keyframe(1.0),
      ],
    ),
    keyframeproperty<color>(
      [
        colors.black.keyframe(0.0),
        colors.red.keyframe(0.8, curves.easeinout),
        colors.blue.keyframe(1.0),
      ],
      name: 'background',
    ),
  ]);

  @override
  void initstate() {
    controller.repeat(reverse: true);
    super.initstate();
  }

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

  @override
  widget build(buildcontext context) {
    return valuelistenablebuilder<keyframevalue>(
      valuelistenable: tween.animate(controller),
      builder: (context, values, _) => container(
        width: values<size>().width,
        height: values<size>().height,
        color: values<color>('background'),
      ),
    );
  }
}

usage

using durations

final tween = keyframestween.fromtime(
  properties: [
    timekeyframeproperty<size>(
      [
        size(10, 10).timeframe(milliseconds: 0),
        size(100, 100).timeframe(milliseconds: 500, curves.easeinout),
        size(200, 200).timeframe(seconds: 1),
      ],
    ),
    timekeyframeproperty<color>(
      [
        colors.black.timeframe(milliseconds: 0),
        colors.red.timeframe(milliseconds: 800, curves.easeinout),
        colors.blue.timeframe(seconds: 1),
      ],
      name: 'background',
    ),
  ],
);

custom lerp

final tween = keyframestween(
  properties: [
      keyframeproperty<mytype>(
        [
          // ...
        ],
        lerp: (begin,end,t) =>  mytype.lerp(begin, end, t),
      )
  ],
);

builder

return valuelistenablebuilder<keyframevalue>(
  valuelistenable: tween.animate(controller),
  builder: (context, values, _) => container(
    width: values<size>().width,
    height: values<size>().height,
    color: values<color>('background'),
  ),
);