flutter 左右晃动摆动动画例子

左右摆动带角度  摆动时带有角度倾斜

1. import 'dart:math';
   
2. 
   
3. import 'package:flutter/cupertino.dart';
   
4. import 'package:flutter/material.dart';
   
5. 
   
6. void main() {
   
7.   runApp(const MyApp());
   
8. }
   
9. 
   
10. class MyApp extends StatelessWidget {
    
11.   const MyApp({super.key});
    
12. 
    
13.   // This widget is the root of your application.
    
14.   @override
    
15.   Widget build(BuildContext context) {
    
16.     return MaterialApp(
    
17.       title: 'Flutter Demo',
    
18.       theme: ThemeData(
    
19.         // This is the theme of your application.
    
20.         //
    
21.         // TRY THIS: Try running your application with "flutter run". You'll see
    
22.         // the application has a blue toolbar. Then, without quitting the app,
    
23.         // try changing the seedColor in the colorScheme below to Colors.green
    
24.         // and then invoke "hot reload" (save your changes or press the "hot
    
25.         // reload" button in a Flutter-supported IDE, or press "r" if you used
    
26.         // the command line to start the app).
    
27.         //
    
28.         // Notice that the counter didn't reset back to zero; the application
    
29.         // state is not lost during the reload. To reset the state, use hot
    
30.         // restart instead.
    
31.         //
    
32.         // This works for code too, not just values: Most code changes can be
    
33.         // tested with just a hot reload.
    
34.         colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
    
35.         useMaterial3: true,
    
36.       ),
    
37.       home: const MyHomePage(title: 'Flutter Demo Home Page'),
    
38.     );
    
39.   }
    
40. }
    
41. 
    
42. class MyHomePage extends StatefulWidget {
    
43.   const MyHomePage({super.key, required this.title});
    
44. 
    
45.   final String title;
    
46. 
    
47.   @override
    
48.   State<MyHomePage> createState() => _MyHomePageState();
    
49. }
    
50. 
    
51. class _MyHomePageState extends State<MyHomePage>  with TickerProviderStateMixin {
    
52.   late final AnimationController _shakeController =
    
53.   AnimationController(vsync: this, duration: shakeDuration);
    
54. 
    
55.   shake() {
    
56.     _shakeController.forward();
    
57.   }
    
58. 
    
59.   @override
    
60.   void initState() {
    
61.     _shakeController.addListener(() {
    
62.       if (_shakeController.status == AnimationStatus.completed) {
    
63.         _shakeController.reset();
    
64.       }
    
65.     });
    
66.     super.initState();
    
67.   }
    
68. 
    
69.   var shakeCount = 2;
    
70.   var shakeDuration = Duration(milliseconds: 1000);
    
71.   @override
    
72.   Widget build(BuildContext context) {
    
73.     return Scaffold(
    
74.       appBar: AppBar(
    
75.         title: const Text("晃动"),
    
76.       ),
    
77.       body: Column(
    
78.         crossAxisAlignment: CrossAxisAlignment.stretch,
    
79.         mainAxisAlignment: MainAxisAlignment.center,
    
80.         children: [
    
81.           AnimatedBuilder(
    
82.             animation: _shakeController,
    
83.             builder: (context, child) {
    
84.               final sineValue = sin(shakeCount * 2 * pi * _shakeController.value);
    
85. 
    
86.               print(sineValue);
    
87.               return Transform.translate(
    
88.                 offset: Offset(sineValue * 10, 0),
    
89.                 child: Transform.rotate(angle: sineValue *10* (pi / 180),
    
90.                 child: child),
    
91.               );
    
92.             },
    
93.             child: const Text(
    
94.               "我是摆动文字",
    
95.               textAlign: TextAlign.center,
    
96.               style: TextStyle(color: Colors.orange),
    
97.             ),
    
98.           ),
    
99.           CupertinoButton(child: const Text("抖动"), onPressed: shake),
    
100.         ],
     
101.       ),
     
102.     );
     
103.   }
     
104. }
     

复制代码