Flutter的移動端相機快門動畫封裝

chenkowong發表於2019-08-08
Flutter動畫封裝

Camera Aperture animation for mobile by Flutter

Created by Alfonso Cejudo, Saturday, July 13th 2019. link

這是Alfonso Cejudo封裝的快門動畫，Alfonso的設計是圓盤快門動畫。我在他的基礎和原理上進行二次封裝，可以進行移動端全屏視覺的動畫效果。

這個連結可以看到更多他的動畫原理，值得觀摩。

Flutter的移動端相機快門動畫封裝

核心原理：

  • aperture.dart > 定義ApertureBladePainter類的屬性和方法
  • aperture_blades.dart > 計算動畫的邏輯和封裝
  • aperture_blade_painter.dart > 引用ApertureBladePainter類和外觀佈局

初始化設定動畫引數

  • main.dart >
void initState() {
  super.initState();

  animationController = AnimationController(
    // !初始動畫週期為13秒
      vsync: this, duration: Duration(milliseconds: 1300));

  animationController.addStatusListener((status) {
    // ! 快門(動畫區)合併時重啟動畫
    if (status == AnimationStatus.completed) {
      Future.delayed(const Duration(milliseconds: 400), () {
        animationController.reverse();
        // animationController.stop();
      });
    // ! 快門(動畫區)最大化張開時停止動畫
    } else if (status == AnimationStatus.dismissed) {
      Future.delayed(const Duration(milliseconds: 400), () {
        // animationController.forward();
        animationController.stop();
      });
    }
  });
  // !Starts running this animation in reverse (towards the beginning).
  // !將動畫至於開始狀態（未執行）
  // !如果設定成forward將自動開啟動畫效果
  animationController.reverse();
  // animationController.dispose();
}

@override
// !啟用停止動畫效果
void dispose() {
  animationController.dispose();

  super.dispose();
}
複製程式碼

拍照按鈕啟用動畫

setState((){
  // !啟用動畫效果
  animationController.forward();
});
複製程式碼

Github地址：

aperture_demo

CameraAperture_mobile

相關文章