Ove*_*den 2 dart flutter flutter-animation
我正在尝试为颤动中的标题文本制作动画前景,或者更准确地说,我想用 GIF 这样的文本来显示文本
我什至不确定该怎么做,但我想如果我设法用 GIF 填充堆栈,然后使最后一层 aCustomClipper<Path>填充整个空间,但文本形状则看起来像它,问题是我不知道如何制作文本形状!另外我不知道如何制作一个只填充整个尺寸的路径,除了我将提供的文本形状,请任何帮助将不胜感激,或者如果您有任何想法可以做到但以不同的方式我也很感兴趣并提前致谢。
小智 5
啊,我迟到了..好吧,就这样吧
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: const Text('Title')),
body: Stack(
children: [
FakeAnimatedBackground(),
ShaderMask(
blendMode: BlendMode.srcOut,
shaderCallback: (bounds) => LinearGradient(colors: [Colors.black], stops: [0.0]).createShader(bounds),
child: SizedBox.expand(
child: Container(
color: Colors.transparent,
alignment: Alignment.center,
child: const Text('SOME TEXT', style: TextStyle(fontSize: 60, fontWeight: FontWeight.bold)),
),
),
),
],
),
),
);
}
}
class FakeAnimatedBackground extends StatefulWidget {
@override
_FakeAnimatedBackgroundState createState() => _FakeAnimatedBackgroundState();
}
class _FakeAnimatedBackgroundState extends State<FakeAnimatedBackground> with TickerProviderStateMixin {
AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(duration: const Duration(milliseconds: 5000), vsync: this)..repeat();
}
@override
Widget build(BuildContext context) {
return RotationTransition(
alignment: Alignment.center,
turns: Tween(begin: 0.0, end: 1.0).animate(_controller),
child: Container(
decoration: BoxDecoration(
gradient: SweepGradient(colors: [Colors.red, Colors.green, Colors.blue, Colors.red]),
),
),
);
}
}
Run Code Online (Sandbox Code Playgroud)
FakeAnimationBackground 类无所谓,它只是模拟背景移动
| 归档时间: |
|
| 查看次数: |
965 次 |
| 最近记录: |