搜索插件、代码仓与 APP 分类

parallax_effect 封面
插件详情v0.0.3

parallax_effect

适用于所有平台的视差效果动画。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
17
喜欢数
43
Pub 分数
130

安装插件

flutter pub add parallax_effect

插件介绍

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

一个 Flutter 包,可在所有平台上实现流畅的视差效果动画,包括 Android、iOS、Web、macOS、Windows 和 Linux。它允许开发者通过以不同速度动画化图层来创建沉浸式背景视觉效果,增强用户参与度并提供动态深度感知。适用于启动屏幕、引导流程和视觉丰富的界面,该包支持自定义速度、方向和响应性。专为性能而设计,使用简单直观的 API 可无缝集成到现有的 Flutter 项目中。

适合场景

  • 引导屏幕
  • 启动画面
  • 背景动画
  • 交互式 UI 元素
  • 视觉叙事

主要特点

  • 跨平台支持
  • 可自定义的动画速度
  • 响应式图层移动
  • 简单的 API 集成
  • 流畅的性能

适合对象

  • 寻求视觉深度的设计人员
  • 开发引人入胜的用户界面的开发者
  • 沉浸式引导体验的应用程序
  • 创意数字体验
  • 需要分层背景的项目

使用建议

  • 可能会影响低端设备的性能
  • 需要仔细调整以获得最佳用户体验
  • 除了基本的视差效果外,自定义选项有限
  • 不适用于复杂的交互场景
  • 最适合与轻量级内容一起使用

原始 README

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

A Parallax effect package, Package is useful for animations for items in foreground, or background scrolling effect.

Features

  • Parallax movement with different stackable layers.
  • Supports 3 dimensional rotation.

image not available

Getting started

  1. Use Parallax widget for Configurations:
    • height: widget parent height
    • width: widget parent width
    • enableDrag: enables on click/tap movement
    • item: children of type ParallaxItem
  2. Use ParallaxItem widget for Configurations:
    • factor: ParallaxFactor(x,y)
    • alignment: initial alignment of child
    • rotationFactor: ParallaxFactor(x,y) for rotation
    • child: child

Usage

TODO: Include short and useful examples for package users. Add longer examples to /example folder.

class ParallaxExample extends StatefulWidget {
  const ParallaxExample({Key? key}) : super(key: key);

  @override
  State<ParallaxExample> createState() => _ParallaxState();
}

class _ParallaxState extends State<ParallaxExample>
    with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Parallax(
        height: 400,
        width: 400,
        enableDrag: true,
        items: List.generate(5,(index)=>
        ParallaxItem(
            factor:ParallaxFactor(0.05*index,0.05*index),
            rotationFactor: ParallaxFactor(0,0.05*index),
            child: Container(
                height:50,
                width:50,
                color: Colors.green
            )
        )),
    );

所属分类

源码仓库

使用此插件的项目

暂无相关数据。