Let’s imagine you need to keep your users engaged during transporting a large file to another file or device. The simplest answer for this is adding animation in an app based on Flutter. The animation will not only make the launch screen of the Flutter app attractive but also make your app look classy.
If displaying an animated application is what you are searching for then this article is for you. In this article, we have covered in detail how you can build a Flutter app animation using Rive.
Why animation in mobile apps is necessary?
A clean and nice user interface is not enough to attract more users to your app. You need to be unique and think out of the box. Now apps are developing different ways to make user-interface look attractive and engaging.
What else benefits does a user have with an animated user interface? An animated app will also help user to grab their attention to a specific place or information. It also holds the unique significance of making a smooth transition from one screen to another. This increases the chances of making the user experience more unique.
What is the role of Flutter in building animation?
Flutter is the best framework for developing an effective and efficient animation which also has a visually good appearance. The only thing that might hold you back is your imagination of creating some great.
Types of Flutter animation
Flutter animation is divided into two types which are implicit animation and explicit animation. What makes them different from each other?
Implicit Animation
Variable-based animation in a widget section is when you choose implicit animation. Color, size, and shape are the types of widgets that you need to choose for animation in an application. This simply means that you need to choose the in-build Flutter widgets such as AnimatedOpacity, AnimatedCrossFade, AnimatedContainer, and many others.
Explicit Animation
In explicit animation, you need to code all by yourself according to your need. These animations require AnimationController. The only key difference between explicit and implicit animation is that explicit animation is that it provides more functionality and possibility.
Staggered Animation
What do when you need to create a complicated animation? For instance, you need to define elements like overlap or define something in a sequence. The only answer to this is staggered animation.
Let’s code
Creating animation in the Flutter app using Rive is the best method to build an awesome animation for your application. Now that you have understood the basics of the Flutter app and rive let’s quickly get to the coding part. We have explained Rive animation in Flutter with examples that will help you understand easily.
Add dependency to pubspec.yaml
dependencies:
rive: ^0.9.0
Get the Rive Flutter package and read some platform-specific considerations which will help you import the Rive Flutter package.
Get animation from the Rive file and play over HTTP:
import 'package:flutter/material.dart';
import 'package:rive/rive.dart';
void main() {
runApp(MaterialApp(home: SimpleAnimation()));
}
class SimpleAnimation extends StatelessWidget {
const SimpleAnimation({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: RiveAnimation.network(
'https://cdn.rive.app/animations/vehicles.riv',
),
),
);
}
}
In order to play an animation from an asset bundle, follow the below code:
RiveAnimation.asset('assets/truck.riv');
Put play and pause element on loop animation:
import 'package:flutter/material.dart';
import 'package:rive/rive.dart';
void main() {
runApp(MaterialApp(home: PlayPauseAnimation()));
}
class PlayPauseAnimation extends StatefulWidget {
const PlayPauseAnimation({Key? key}) : super(key: key);
@override
_PlayPauseAnimationState createState() => _PlayPauseAnimationState();
}
class _PlayPauseAnimationState extends State<PlayPauseAnimation> {
// Controller for playback
late RiveAnimationController _controller;
// Toggles between play and pause animation states
void _togglePlay() =>
setState(() => _controller.isActive = !_controller.isActive);
/// Tracks if the animation is playing by whether controller is running
bool get isPlaying => _controller.isActive;
@override
void initState() {
super.initState();
_controller = SimpleAnimation('idle');
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RiveAnimation.network(
'https://cdn.rive.app/animations/vehicles.riv',
controllers: [_controller],
// Update the play state when the widget's initialized
onInit: (_) => setState(() {}),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _togglePlay,
tooltip: isPlaying ? 'Pause' : 'Play',
child: Icon(
isPlaying ? Icons.pause : Icons.play_arrow,
),
),
);
}
}
Use a one-shot animation on demand on loop:
/// Demonstrates playing a one-shot animation on demand
import 'package:flutter/material.dart';
import 'package:rive/rive.dart';
void main() {
runApp(MaterialApp(home: PlayOneShotAnimation()));
}
class PlayOneShotAnimation extends StatefulWidget {
const PlayOneShotAnimation({Key? key}) : super(key: key);
@override
_PlayOneShotAnimationState createState() => _PlayOneShotAnimationState();
}
class _PlayOneShotAnimationState extends State<PlayOneShotAnimation> {
/// Controller for playback
late RiveAnimationController _controller;
/// Is the animation currently playing?
bool _isPlaying = false;
@override
void initState() {
super.initState();
_controller = OneShotAnimation(
'bounce',
autoplay: false,
onStop: () => setState(() => _isPlaying = false),
onStart: () => setState(() => _isPlaying = true),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('One-Shot Example'),
),
body: Center(
child: RiveAnimation.network(
'https://cdn.rive.app/animations/vehicles.riv',
animations: const ['idle', 'curves'],
controllers: [_controller],
),
),
floatingActionButton: FloatingActionButton(
// disable the button while playing the animation
onPressed: () => _isPlaying ? null : _controller.isActive = true,
tooltip: 'Play',
child: const Icon(Icons.arrow_upward),
),
);
}
}
Image:
Methods of animation
Let us tell you that Rive supports three methods when it comes to animation:
One-shot- One-time animation display on the screen
Ping-pong- This method will allow you to display an animation infinite times in a sequence of start to end.
Loop- It will allow you to display an animation infinite times from the beginning.
The best part about Rive animation in Flutter is that it allows you to code an animation the way you want and create something magical. The state machine helps Rive to create an animation and make an impact on the way animation is played. The above Rive animation tutorial will help you understand it process better.
One fine example of Flutter Rive animation is a button that changes a day and night animation with just one click. During the day, you can change into night animation on the display screen. At the same time, the animation works differently in the state machine of the animation.
No comments:
Post a Comment