Flutter动画效果插件jelly_anim的使用

Flutter动画效果插件jelly_anim的使用

Jelly Animation

Jelly Animation 是一个用于渲染可移动的、类似果冻效果的对象的Flutter插件。它提供了高度可定制的动画效果，适用于创建独特的UI元素。

此外，该插件还实现了类似于Dribbble上的登录流程动画效果。

主要特性

• 高度可定制：支持自定义JellyAnim的渲染效果。
• 多个实例：可以在同一页面中使用多个JellyAnim实例。
• 重叠效果：可以创建多个果冻效果的重叠动画。
• 形状和颜色过渡：支持形状之间的平滑过渡和颜色变化。
• 自定义视口大小：可以通过viewPortSize参数设置果冻动画的显示区域。
• 自定义半径：可以通过radius参数调整果冻的大小。
• 自定义样式：通过paint参数为果冻添加自定义样式，如描边、描边宽度等。

开始使用

要在项目中使用jelly_anim插件，首先需要在pubspec.yaml文件中添加依赖：

dependencies:
  ...
  jelly_anim: any

然后在Dart代码中导入插件：

import 'package:jelly_anim/jelly_anim.dart';

使用示例

以下是一个完整的示例代码，展示了如何在Flutter应用中使用jelly_anim插件：

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:jelly_anim/jelly_anim.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Colors.blue,
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  State<StatefulWidget> createState() {
    return _MyHomePage();
  }
}

class _MyHomePage extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Color.fromRGBO(40, 40, 40, 1),
        body: Column(
          children: [
            SizedBox(
              height: 500,
              child: Stack(
                children: [
                  // 第一个JellyAnim实例
                  Align(
                    alignment: Alignment.center,
                    child: JellyAnim(
                      jellyCount: 1,  // 果冻数量
                      radius: 160,    // 果冻半径
                      allowOverFlow: true,  // 是否允许超出视口
                      duration: Duration(milliseconds: 10),  // 动画持续时间
                      colors: [Color.fromRGBO(255, 237, 59, 1)],  // 果冻颜色
                      jellyCoordinates: 5,  // 果冻运动坐标
                    ),
                  ),
                  // 图片叠加
                  Align(
                    alignment: Alignment.topCenter,
                    child: Image.asset(
                      "asset/lady.png",  // 图片路径
                    ),
                  ),
                  // 第二个JellyAnim实例
                  Padding(
                    padding: EdgeInsets.only(top: 80),
                    child: JellyAnim(
                      radius: 100,  // 果冻半径
                      colors: [Color.fromRGBO(255, 237, 59, 1)],  // 果冻颜色
                      allowOverFlow: true,  // 是否允许超出视口
                      viewPortSize: Size(MediaQuery.of(context).size.width, MediaQuery.of(context).size.height),  // 视口大小
                      jellyPosition: JellyPosition.bottomCenter,  // 果冻位置
                    ),
                  )
                ],
              ),
            ),
            // 文本提示
            Padding(
              padding: EdgeInsets.only(right: 62, left: 62, top: 36),
              child: Text(
                "Feel less stressed & more mindful with meditation",
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.w400,
                  color: Colors.white,
                ),
                textAlign: TextAlign.center,
              ),
            ),
            // 按钮
            GestureDetector(
              onTap: () {
                // 点击跳转到新的页面
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => DemoScreen()),
                );
              },
              child: Padding(
                padding: EdgeInsets.only(top: 100),
                child: Text(
                  "Let’s Go",
                  textAlign: TextAlign.center,
                  style: GoogleFonts.roboto(
                    fontWeight: FontWeight.w500,
                    fontSize: 18,
                    color: Color.fromRGBO(16, 16, 16, 1),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}