flutter 需要这样的按钮动画

jxct1oxe  于 2023-03-31  发布在  Flutter
关注(0)|答案(1)|浏览(158)

enter image description here
我需要实现这样的按钮动画。请帮助,如果任何插件或类可用的Flutter。
需要按钮动画像这样当我点击按钮。请帮助我实现这一点。

m1m5dgzv

m1m5dgzv1#

你可以使用着色器我使用的是Flutter 3.7.8

着色器/simple.frag

#version 460 core

#include <flutter/runtime_effect.glsl>

precision mediump float;

layout(location = 0) uniform float uAnimation;
layout(location = 1) uniform float uResolutionX;
layout(location = 2) uniform float uResolutionY;

out vec4 fragColor;

void main() {
  vec2 st = FlutterFragCoord().xy / vec2(uResolutionX, uResolutionY);
  float angle = 3.14159 / 3; 
  float frequency = 5; 

  st.x += uAnimation * 10;

  float pattern = smoothstep(0, 0, sin((st.x * cos(angle) + st.y * sin(angle)) * frequency * 3.14159));

  vec3 color1 = vec3(0.798, 0.873, 0.621);
  vec3 color2 = vec3(0.844, 0.904, 0.724);
  vec3 color = mix(color1, color2, pattern);

  fragColor = vec4(color, 1.0);
}
import 'dart:ui' as ui;

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Shader Demo',
      theme: ThemeData(
        colorSchemeSeed: Colors.blue,
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      duration: const Duration(seconds: 10),
      vsync: this,
    )..addListener(() {
        setState(() {});
      });
    // _controller.repeat();
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Simple Shader Demo'),
      ),
      body: Center(
        child: ClipRRect(
          borderRadius: BorderRadius.circular(10),
          child: SizedBox(
            height: 100,
            width: 400,
            child: AnimatedBuilder(
                animation: _controller,
                builder: (context, snapshot) {
                  return ShaderBuilder(
                    assetKey: 'shaders/simple.frag',
                    (context, shader, child) {
                      return CustomPaint(
                        size: MediaQuery.of(context).size,
                        painter: ShaderPainter(
                          shader: shader,
                          value: _controller.value,
                        ),
                        child: child,
                      );
                    },
                    child: const Center(
                      child: Text(
                        'Save',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 30,
                          fontWeight: FontWeight.w800,
                        ),
                      ),
                    ),
                  );
                }),
          ),
        ),
      ),
    );
  }
}

class ShaderPainter extends CustomPainter {
  ShaderPainter({required this.shader, required this.value});
  ui.FragmentShader shader;

  final double value;

  @override
  void paint(Canvas canvas, Size size) {
    shader.setFloat(0, value);
    shader.setFloat(1, size.height);
    shader.setFloat(2, size.width);

    final paint = Paint()..shader = shader;

    canvas.drawRect(
      Rect.fromLTWH(0, 0, size.width, size.height),
      paint,
    );
  }

  @override
  bool shouldRepaint(covariant ShaderPainter oldDelegate) {
    return oldDelegate.value != value;
  }
}

pubspec.yaml

...
environment:
  sdk: '>=2.19.5 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  flutter_shaders: ^0.1.0

flutter:
  uses-material-design: true
  shaders:
    - shaders/simple.frag

相关问题