插件详情v0.3.0

flutter_animate_on_scroll

基于滚动事件动画化控件的 Flutter 包。轻松创建引人入胜的、交互式的滚动动画，以增强您的用户界面。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文档源代码

近 30 天下载: 106
喜欢数: 48
Pub 分数: 160

安装插件

flutter pub add flutter_animate_on_scroll

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包，可为小部件实现流畅的滚动驱动动画。它允许开发者通过响应滚动事件来创建动态且交互式的用户界面。非常适合增强列表、卡片和滚动布局中的视觉吸引力。该包可无缝集成到现有的 Flutter 项目中，并支持多个平台，使其适用于跨平台应用。

适合场景

滚动触发的进入动画
交互式列表项效果
视差滚动视觉效果
动态标题过渡
增强长滚动页面的用户参与度

主要特点

实时滚动事件检测
简单的动画配置
跨平台兼容性
支持多种动画类型
轻量且易于集成

适合对象

寻求交互元素的UI设计师
开发滚动密集型界面的开发者
包含长内容列表或信息流的应用
需要细微动态反馈的项目
跨平台移动和Web应用

使用建议

可能会影响大型列表的性能
需要仔细调整以确保平滑
仅限基于滚动的触发
不适合复杂的手势交互
最好与优化的 widget 树一起使用

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Flutter_animate_on_scroll

Enables you to create flutter animations on scroll, faster, efficient and with less code.

Features

Stunning default animation
Customizable animation

Getting started

Put the dependency inside your pubspec.yml and run packages get.

Usage

Provide required child [Widget], you can play with animation delay, curves, duration...

import './src/components/custom_info.dart';
import 'package:flutter/material.dart';
import 'package:flutter_animate_on_scroll/flutter_animate_on_scroll.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20).copyWith(top: 80),
          child: Column(
            children: [
              FadeIn(
                config: BaseAnimationConfig(
                  child: const CustomInfo(name: 'Fade In')
                ),
              ),
              const SizedBox(height: 20),
              FadeInDown(
                config: BaseAnimationConfig(
                  delay: 200.ms,
                  child: const CustomInfo(name: 'Fade In Down'),
                ),
              ),
              const SizedBox(height: 20),
              FadeInUp(
                config: BaseAnimationConfig(
                  delay: 400.ms,
                  child: const CustomInfo(name: 'Fade In Up'),
                ),
              ),
              const SizedBox(height: 20),
              FadeInLeft(
                config: BaseAnimationConfig(
                  delay: 600.ms,
                  child: const CustomInfo(name: 'Fade In Left'),
                ),
              ),
              const SizedBox(height: 20),
              FadeInRight(
                config: BaseAnimationConfig(
                  delay: 200.ms,
                  child: const CustomInfo(name: 'Fade In Right'),
                ),
              ),
              const SizedBox(height: 20),
              const Divider(),
              FadeOut(
                config: BaseAnimationConfig(
                  delay: 400.ms,
                  child: const CustomInfo(name: 'Fade Out'),
                ),
              ),
              const SizedBox(height: 20),
              FadeOutUp(
                config: BaseAnimationConfig(
                  delay: 600.ms,
                  child: const CustomInfo(name: 'Fade Out Up'),
                ),
              ),
              const SizedBox(height: 20),
              FadeOutDown(
                config: BaseAnimationConfig(
                  delay: 800.ms,
                  child: const CustomInfo(name: 'Fade Out Down'),
                ),
              ),
              const SizedBox(height: 20),
              FadeOutLeft(
                config: BaseAnimationConfig(
                  delay: 400.ms,
                  child: const CustomInfo(name: 'Fade Out Left'),
                ),
              ),
              const SizedBox(height: 20),
              FadeOutRight(
                config: BaseAnimationConfig(
                  delay: 600.ms,
                  child: const CustomInfo(name: 'Fade Out Right'),
                ),
              ),
              const SizedBox(height: 220),
            ],
          ),
        ),
      ),
    );
  }
}

Custom animation

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

import '../components/custom_info.dart';

class CustomAnimationExample extends StatefulWidget {
  const CustomAnimationExample({super.key});

  @override
  State<CustomAnimationExample> createState() => _CustomAnimationExampleState();
}

class _CustomAnimationExampleState extends State<CustomAnimationExample>
    with SingleTickerProviderStateMixin, AutomaticKeepAliveClientMixin{
  late AnimationController _animationController;
  late Animation<double> _animation;

  @override
  void initState() {
    _animationController = AnimationController(vsync: this, duration: 600.ms);
    _animation = Tween<double>(begin: 0.3, end: 1.0).animate(
      CurvedAnimation(parent: _animationController, curve: Curves.bounceInOut),
    );
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20).copyWith(top: 80),
          child: Column(
            children: [
              CustomAnimated(
                animationController: _animationController,
                animation: _animation,
                child: ScaleTransition(
                  scale: _animation,
                  child: const CustomInfo(name: 'Custom Animation'),
                ),
              ),
              const SizedBox(height: 20),
              const Divider(),
              const SizedBox(height: 220),
            ],
          ),
        ),
      ),
    );
  }
}