enter image description here我需要实现这样的按钮动画。请帮助,如果任何插件或类可用的Flutter。需要按钮动画像这样当我点击按钮。请帮助我实现这一点。
m1m5dgzv1#
你可以使用着色器我使用的是Flutter 3.7.8
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
1条答案
按热度按时间m1m5dgzv1#
你可以使用着色器我使用的是
Flutter 3.7.8
着色器/simple.frag
pubspec.yaml