iT邦幫忙

2023 iThome 鐵人賽

DAY 25
0
Mobile Development

初窺Flutter系列 第 25

Flutter-動畫-類物理特性的動畫

  • 分享至 

  • xImage
  •  

Flutter中實現類物理特性動畫的重要概念和組件:

1.AnimationControllerAnimationController 用於控制動畫的進度。用於設置動畫的持續時間、開始和停止動畫等。
2.Tween:Tween 用於定義動畫的開始值和結束值。Flutter的動畫通常在一個數值範圍內進行,會使用 Tween 來指定這個範圍。
3.CurvedAnimationCurvedAnimation 用於定義動畫的時間曲線,例如彈跳效果。

下列是一個實現點擊按鈕產生彈跳動畫得實例

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BouncingButtonDemo(),
    );
  }
}

class BouncingButtonDemo extends StatefulWidget {
  @override
  _BouncingButtonDemoState createState() => _BouncingButtonDemoState();
}

class _BouncingButtonDemoState extends State<BouncingButtonDemo>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;   //聲明變數_controller
  late Animation<double> _animation;     //聲明變數_animation

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

    // 初始化動畫控制器
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),   // 設定動畫持續時間為500毫秒
    );

    _animation = Tween<double>(
      begin: 1.0,  // 動畫起始值為 1.0
      end: 1.2,    // 動畫結束值為 1.2,按鈕將稍微變大
    ).animate(
      CurvedAnimation(
        parent: _controller,   // 將這個動畫與 _controller 相關聯
        curve: Curves.elasticOut,   // 使用彈性曲線,創建彈跳效果
      ),
    );
  }
  // 按鈕按下時觸發的函數
  void _onButtonPressed() {
    if (_controller.status == AnimationStatus.completed) {
      _controller.reverse();
    } else {
      _controller.forward();
    }
  }

  @override
  void dispose() {
    // 釋放動畫控制器
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('彈跳動畫按鈕示例'),
      ),
      body: Center(
        child: GestureDetector(
          onTap: _onButtonPressed,
          child: ScaleTransition(
            scale: _animation,
            child: Container(
              width: 100.0,
              height: 40.0,
              color: Colors.blue,
              alignment: Alignment.center,
              child: Text(
                '點我彈跳',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

結果
https://imgur.com/a/QCOxQkW


上一篇
Flutter動畫-平移、旋轉和縮放動畫
下一篇
Flutter-動畫-頁面切換動畫&Hero動畫
系列文
初窺Flutter30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言