icon_animator 0.0.4 icon_animator: ^0.0.4 copied to clipboard
Simple and highly configurable icon resize animation with icon size, color, duration.
Icon Animator #
Simple and highly configurable icon animation package with icon size, color, duration. It can display any widgets, too.
Options #
IconAnimator
can be set with some default options.icon
is the IconData. It can Material icon or any other icons.child
is any widget that can be displayed instead oficon
.- If
finish
is set, then it will be displayed when the loop has finished. You may passSizedBox.shrink()
to hide the icon. loop
is to set how many loops theIconAnimator
repeats its children.children
is the frame of animation. Each child is anAnimationFrame
type with optional setup.- If
icon
is set on the animation, thenAnimationFrame
can have color property. duration
is the duration of each frame.- You can use in combination of icon and any widgets.
- If
Example code #
IconAnimator(
icon: Icons.favorite,
finish: SizedBox.shrink(),
loop: 3,
children: [
AnimationFrame(size: 0, duration: 100),
AnimationFrame(size: 4, color: Colors.amber[100], duration: 100),
AnimationFrame(size: 8, color: Colors.amber[200], duration: 100),
AnimationFrame(size: 16, color: Colors.amber[300], duration: 100),
AnimationFrame(size: 20, color: Colors.amber[400], duration: 150),
AnimationFrame(size: 24, color: Colors.amber[500], duration: 200),
AnimationFrame(size: 28, color: Colors.amber[600], duration: 250),
AnimationFrame(size: 32, color: Colors.amber[700], duration: 300),
],
),
SizedBox(
width: 32,
height: 32,
child: IconAnimator(
loop: 5,
finish: SizedBox.shrink(),
children: [
AnimationFrame(child: SizedBox.shrink(), duration: 1500),
AnimationFrame(
child: Container(
color: Colors.blue,
child: Center(
child: Text('X'),
),
),
duration: 300),
AnimationFrame(
icon: Icons.thumb_up,
color: Colors.blue,
duration: 500),
AnimationFrame(
child: Container(
color: Colors.red,
child: Center(
child: Text('O'),
),
),
duration: 300),
],
),
),
- A little complicated nested icon animator sample
Positioned(
child: Center(
child: IconAnimator(
loop: 1,
child: Container(
padding: EdgeInsets.all(24),
decoration: BoxDecoration(
color: Color(0xcc444444),
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
blurRadius: 8,
color: Color(0x88555555),
spreadRadius: 5,
offset: Offset(1.0, 1.0),
)
]),
child: Column(
children: [
SizedBox(
width: 84,
height: 64,
child: IconAnimator(
loop: 2,
children: [
AnimationFrame(
duration: 250,
child: Align(
child: SvgIcon(leftSwipe,
color: Colors.white, width: 64),
alignment: Alignment.centerRight,
),
),
AnimationFrame(
duration: 250,
child: Align(
child: SvgIcon(leftSwipe,
color: Colors.white, width: 64),
alignment: Alignment.centerLeft,
),
),
],
),
),
SizedBox(height: 32),
Text(
'다음 사진을 보시려면,\n왼쪽으로 밀어주세요.',
style: TextStyle(color: Colors.white),
)
],
),
),
finish: SizedBox.shrink(),
children: [
AnimationFrame(duration: 1000, child: SizedBox.shrink()),
AnimationFrame(duration: 5000),
],
),
),
top: 180,
left: 0,
right: 0,
),