set scale size for Curves.elasticOut

[pishguy]

in this code how can i set scale in/out size for animation, i want to implementing this animation:

Animator(
  duration: Duration(seconds: 1),
  curve: Curves.elasticOut,
  cycles:0,
  builder: (anim) {
    return Transform.scale(
      origin: Offset(0.0, 0.0),
      scale: anim.value,
      child: CircleAvatar(
        radius: 30,
        backgroundColor: Colors.white,
        foregroundColor: Colors.black,
        backgroundImage: NetworkImage(
          "https://images.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png",
        ),
      ),
    );
  },
)

[GIfatahTH]

• It is better to put the CircleAvatar outside the Animator so it'll not rebuild and fetch the image each frame.
• Try with repeats instead of cycles
• Try with square-ish image for the CircleAvatar to display it well.

final Widget _child = CircleAvatar(
    radius: 30,
    backgroundColor: Colors.white,
    foregroundColor: Colors.black,
    backgroundImage: NetworkImage(
      "https://brandmark.io/logo-rank/random/pepsi.png",
    ),
  );
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Animator(
        duration: Duration(seconds: 1),
        curve: Curves.elasticOut,
        repeats: 0,
        builder: (anim) {
          return Transform.scale(
            scale: anim.value,
            child: _child,
          );
        },
      ),
    );
  }

[pishguy]

@GIfatahTH

tanks a lot, how can i set tweenMap for that? i want to make delay between repeat animation and make scale size for in/out of this animation.

for example:

Tween<double>(begin: 0.5, end: 1.0)
    .animate(CurvedAnimation(parent: controller, 
         curve: Interval(0.0, 0.25, curve: Curves.elasticOut)))

[GIfatahTH]

You can safely use Interval to feed the curve parameter of the Animator because it has the same type.abstract

  Widget build(BuildContext context) {
    return Center(
      child: Animator(
        duration: Duration(seconds: 1),
        curve: Interval(0.0, 0.25, curve: Curves.elasticOut),
        repeats: 0,
        builder: (anim) {
          return Transform.scale(
            scale: anim.value,
            child: _child,
          );
        },
      ),
    );
  }

Please not that with this version of Animator, the provided curve and duration are common for animations defined by tweenMaps. Do you want to define many tweens with different curves and durations?

[pishguy]

@GIfatahTH maybe, i know that curve and duration are common for animations defined by tweenMaps. could you help me how can i make this animation which i pasted screen shot of that in first issue with tweenMap and use this feature?

Tween<double>(begin: 0.5, end: 1.0)
    .animate(CurvedAnimation(parent: controller, 
         curve: Interval(0.0, 0.25, curve: Curves.elasticOut)))

thanks in advance

[GIfatahTH]

this the equivalent of the your code:

  Widget build(BuildContext context) {
    return Center(
      child: Animator(
        tween:Tween<double>(begin: 0.5, end: 1.0),
        curve: Interval(0.0, 0.25, curve: Curves.elasticOut),
        duration: Duration(seconds: 1),
        repeats: 0,
        builder: (anim) {
          return Transform.scale(
            scale: anim.value,
            child: _child,
          );
        },
      ),
    );
  }