Cupertino 图标颤动

Cupertino 图标颤动是一种在 iOS 开发中常用的交互效果，它可以增加应用程序的动态感，使用户体验更加容易记忆。在本文中，我将向大家介绍如何使用 Flutter 中的 Cupertino 图标颤动动画，让您的应用程序更具吸引力。

实现效果

在开始之前，让我们先来看一下实现效果：

如上图所示，该效果使用 Cupertino 图标颤动动画，可以让图标在鼠标悬浮或触摸时颤动，增加用户的交互体验。

使用步骤

实现这个效果的步骤如下：

1. 首先，您需要在您的 Flutter 应用程序中引入 Cupertino 图标库。在 pubspec.yaml 文件中添加以下依赖项：

   dependencies:
     cupertino_icons: ^1.0.2
   

2. 接下来，在 main.dart 文件中，创建一个带有 GestureDetector 的 Icon 小部件，以及一个状态变量：

   import 'package:flutter/cupertino.dart';
   import 'package:flutter/material.dart';
   import 'package:flutter/services.dart';
   
   void main() {
     SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
         statusBarColor: Colors.transparent,
         statusBarBrightness: Brightness.light));
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         debugShowCheckedModeBanner: false,
         title: 'Cupertino Icon Shake',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: MyHomePage(),
       );
     }
   }
   
   class MyHomePage extends StatefulWidget {
     MyHomePage({Key? key}) : super(key: key);
   
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State<MyHomePage> {
     bool _isShaking = false;
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: SafeArea(
           child: Center(
             child: GestureDetector(
               onTapDown: (details) {
                setState(() => _isShaking = true);
               },
               onTapUp: (details) {
                 setState(() => _isShaking = false);
               },
               onTapCancel: () {
                 setState(() => _isShaking = false);
               },
               child: _isShaking
                   ? const Icon(CupertinoIcons.bolt_fill,
                       size: 64, color: CupertinoColors.systemYellow)
                   : const Icon(CupertinoIcons.bolt,
                       size: 64, color: CupertinoColors.systemGrey),
             ),
           ),
         ),
       );
     }
   }
   

3. 在上面的代码中，我们添加了一个 GestureDetector，用于捕捉用户的鼠标悬浮或触摸事件，并更改 _isShaking 状态变量的值，确定 Icon 是否为颤动状态。

4. 接下来，我们需要使用 CupertinoIcons 类中的 cupertinoIconsShakeAnimation 属性来创建一个 AnimationController，以及一个 CupertinoIconsAnimate 小部件，实现 Icon 颤动的动画效果：

   class MyHomePage extends StatefulWidget {
     MyHomePage({Key? key}) : super(key: key);
   
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State<MyHomePage>
       with SingleTickerProviderStateMixin {
     late AnimationController _animationController;
     late Animation<double> _animation;
     bool _isShaking = false;
   
     @override
     void initState() {
       _animationController =
           AnimationController(vsync: this, duration: const Duration(milliseconds: 500))
             ..addListener(() => setState(() {}));
       _animation = Tween<double>(begin: -0.05, end: 0.05).animate(
           CurvedAnimation(parent: _animationController, curve: Curves.bounceInOut))
         ..addStatusListener((status) {
           if (status == AnimationStatus.completed) {
             _animationController.reverse();
           } else if (status == AnimationStatus.dismissed) {
             _animationController.forward();
           }
         });
       _animationController.forward();
   
       super.initState();
     }
   
     @override
     void dispose() {
       _animationController.dispose();
   
       super.dispose();
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: SafeArea(
           child: Center(
             child: GestureDetector(
               onTapDown: (details) {
                 setState(() => _isShaking = true);
                 _animationController.forward();
               },
               onTapUp: (details) {
                 setState(() => _isShaking = false);
                 _animationController.reverse();
               },
               onTapCancel: () {
                 setState(() => _isShaking = false);
                 _animationController.reverse();
               },
               child: _isShaking
                   ? CupertinoIconsAnimate(
                       begin: _animation.value - 0.05,
                       end: _animation.value + 0.05,
                       child: const Icon(CupertinoIcons.bolt_fill,
                           size: 64, color: CupertinoColors.systemYellow))
                   : const Icon(CupertinoIcons.bolt,
                       size: 64, color: CupertinoColors.systemGrey),
             ),
           ),
         ),
       );
     }
   }
   
   class CupertinoIconsAnimate extends StatelessWidget {
     const CupertinoIconsAnimate(
         {required this.begin, required this.end, required this.child});
   
     final double begin;
     final double end;
     final Widget child;
   
     @override
     Widget build(BuildContext context) {
       return TweenAnimationBuilder<double>(
         tween: Tween<double>(begin: begin, end: end),
         duration: const Duration(milliseconds: 500),
         builder: (BuildContext context, double value, Widget? child) {
           return Transform.rotate(
             angle: value,
             child: child,
           );
         },
         child: child,
       );
     }
   }
   

完整的代码片段已经呈现在您的眼前了。由此，我们就可以使用 CupertinoIconsShakeAnimation 实现图标颤动动画效果。

结论

通过本文的介绍，您已经了解了如何使用 Flutter 的 Cupertino 图标颤动动画，为您的应用程序增加有效的交互体验。希望本文对您有所帮助，感谢您的阅读。