快捷導(dǎo)航

Flutter?Animation實現(xiàn)縮放和滑動動畫效果

更新時間：2022年03月23日 08:02:27 作者：GalenWu

這篇文章主要為大家詳細(xì)介紹了Flutter?Animation實現(xiàn)縮放和滑動動畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Flutter Animation實現(xiàn)縮放和滑動動畫的具體代碼，供大家參考，具體內(nèi)容如下

Animation對象是Flutter動畫庫中的一個核心類，它生成指導(dǎo)動畫的值。
Animation對象知道動畫的當(dāng)前狀態(tài)（例如，它是開始、停止還是向前或向后移動），但它不知道屏幕上顯示的內(nèi)容。
AnimationController管理Animation。
CurvedAnimation 將過程抽象為一個非線性曲線.
Tween在正在執(zhí)行動畫的對象所使用的數(shù)據(jù)范圍之間生成值。例如，Tween可能會生成從紅到藍(lán)之間的色值，或者從0到255。
使用Listeners和StatusListeners監(jiān)聽動畫狀態(tài)改變。

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

void main() {
? runApp(new LogoApp());
}
class LogoApp extends StatefulWidget {
? _LogoAppState createState() => new _LogoAppState();
}

class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin {
? AnimationController controller;
? Animation<double> animation;

? initState() {
? ? super.initState();
? ? controller = new AnimationController(
? ? ? ? duration: const Duration(milliseconds: 10000), vsync: this);
? ? animation = new Tween(begin: 0.0, end: 300.0).animate(controller);
? ? controller.forward();
? }
??
? Widget build(BuildContext context) {
? ? return new AnimatedLogo(animation: animation);
? }

? dispose() {
? ? controller.dispose();
? ? super.dispose();
? }
}

class AnimatedLogo extends AnimatedWidget {
? AnimatedLogo({Key key, Animation<double> animation})
? ? ? : super(key: key, listenable: animation);

? Widget build(BuildContext context) {
? ? final Animation<double> animation = listenable;
? ? return new Center(
? ? ? child: new Container(
? ? ? ? margin: new EdgeInsets.symmetric(vertical: 10.0),
? ? ? ? height: animation.value,
? ? ? ? width: animation.value,
? ? ? ? child: new FlutterLogo(),
? ? ? ),
? ? );
? }
}

縮放功能

class ScaleAnimatedContent extends StatefulWidget {
? final Widget child;
? final bool show;

? const ScaleAnimatedContent({Key key, this.child, this.show = false})
? ? ? : super(key: key);

? @override
? ScaleAnimatedContentState createState() => ScaleAnimatedContentState();
}

class ScaleAnimatedContentState extends State<ScaleAnimatedContent>
? ? with TickerProviderStateMixin {
? AnimationController animationController;
? Animation<double> animation;

? @override
? void initState() {
? ? animationController = new AnimationController(
? ? ? vsync: this,
? ? ? duration: new Duration(milliseconds: 600),
? ? );

? ? // animationSlideUp = new Tween(begin: 0.0,end: 1.0).animate(animationController);
? ? animation = Tween(begin: 0.0, end: 1.0).animate(animationController);

? ? if (widget.show) {
? ? ? animationController.forward();
? ? }

? ? super.initState();
? }

? @override
? void didUpdateWidget(ScaleAnimatedContent oldWidget) {
? ? if (widget != oldWidget) {
? ? ? if (widget.show && !oldWidget.show) {
? ? ? ? animationController.forward(from: 0.0);
? ? ? } else if (!widget.show) {
? ? ? ? animationController.reverse();
? ? ? }
? ? }
? ? super.didUpdateWidget(oldWidget);
? }

? @override
? Widget build(BuildContext context) {
? ? return ScaleTransition(
? ? ? scale: animation,
? ? ? child: widget.child,
? ? );
? }

? @override
? void dispose() {
? ? animationController.dispose();
? ? super.dispose();
? }
}

滑動效果

class SlideAnimatedContent extends StatefulWidget {
? final Widget child;
? final bool show;

? const SlideAnimatedContent({Key key, this.child, this.show = false})
? ? ? : super(key: key);

? @override
? SlideAnimatedContentState createState() => SlideAnimatedContentState();
}

class SlideAnimatedContentState extends State<SlideAnimatedContent>
? ? with TickerProviderStateMixin {
? AnimationController animationController;
? Animation<Offset> animationSlideUp;

? @override
? void initState() {
? ? animationController = new AnimationController(
? ? ? vsync: this,
? ? ? duration: new Duration(milliseconds: 600),
? ? );

? ? animationSlideUp = new Tween(
? ? ? begin: Offset(0.0, 5.0),
? ? ? end: Offset(0.0, 0.0),
? ? ).animate(CurvedAnimation(parent: animationController, curve: Curves.ease));

? ? if (widget.show) {
? ? ? animationController.forward();
? ? }

? ? super.initState();
? }

? @override
? void didUpdateWidget(SlideAnimatedContent oldWidget) {
? ? if (widget != oldWidget) {
? ? ? if (widget.show && !oldWidget.show) {
? ? ? ? animationController.forward(from: 0.0);
? ? ? } else if (!widget.show) {
? ? ? ? animationController.reverse();
? ? ? }
? ? }
? ? super.didUpdateWidget(oldWidget);
? }

? @override
? Widget build(BuildContext context) {
? ? return SlideTransition(
? ? ? position: animationSlideUp,
? ? ? child: FadeTransition(
? ? ? ? opacity: animationController,
? ? ? ? child: widget.child,
? ? ? ),
? ? );
? }

? @override
? void dispose() {
? ? animationController.dispose();
? ? super.dispose();
? }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: