-
1 # 九思
-
2 # 自己
閃屏，實際上有兩個作用。
宣傳。透過Logo、廣告等形式，在啟動時，展示要宣傳的廣告等內容。
後臺初始化。藉助這個時間做一些後臺操作，初始化一些SDK或者程式碼。
Flutter Dojo的閃屏動畫，參考了著名大廠——P站的App閃屏，相信大家應該都不陌生。
watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
動畫其實比較簡單，只是一個從兩邊向中間靠攏的動畫。
一般來說，Flutter的動畫創作，有下面幾個步驟。
建立靜態佈局
建立Tween，標記動畫的起始值
給靜態程式碼新增AnimatedBuilder，驅動動畫
靜態佈局
這個佈局沒有什麼太大難度，這個效果其實有很多實現方案，比如Center-Row的方式，讓【Flutter】Text和【Dojo】Text在Row中居中即可。或者可以用Stack-Positioned的方式，透過left、right來定位。
相比來說，Center-Row的方式會比較直觀，所以我這裡準備使用Stack-Positioned的方式來進行演示。
不管使用哪種方案，需要注意的一點是，【Flutter】Text和【Dojo】Text是整體居中的，並不是分別居中，因為【Flutter】Text比【Dojo】Text要長，所以沿螢幕中線居中會很不協調。
佈局之外，需要稍微提下【Dojo】Text的實現，實際上就是透過BoxDecoration來實現的，程式碼如下所示。
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Color.fromARGB(255, 253, 152, 39),
),
定義動畫
這裡的動畫分為兩部分，左邊和右邊，如果使用Center-Row的方式，由於兩個Text並不在螢幕中線對齊，所以實際上是有個offset的，然後再透過Transform.translate來進行偏移。另一種方式，Stack-Positioned實際上也是如此，但是可以透過Positioned中的left和right來進行動畫。
所以首先一步，需要獲取【Flutter】Text和【Dojo】Text的寬度差，這裡又有多種方式來獲取一個Widget的Size了。
LayoutBuilder。由於需要提前建立動畫，所以這個方案不是很好。
TextPainter。對於文字，可以使用TextPainter來進行文字的測量。
Key。透過Key來獲取RenderBox，從而獲取Widget的Size。
Key的方式比較簡單，所以這裡我準備用TextPainter的方式來演示。下面這個函式就演示瞭如何獲取一個特定TextStyle下Text的計算寬度。
double getTextWidth(String text) {
final textPainter = TextPainter(
text: TextSpan(
text: text,
style: TextStyle(
fontSize: 60,
fontWeight: FontWeight.w600,
),
),
textDirection: TextDirection.ltr,
);
textPainter.layout(minWidth: 0, maxWidth: double.infinity);
return textPainter.width;
}
經過簡單的計算，【Flutter】Text和【Dojo】Text偏移的值實際上就是兩個文字的寬度差的一半。
watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=
由於前面使用的是Stack-Positioned的方式進行的佈局，所以動畫也需要根據靜態佈局來定義。
先看【Flutter】Text的動畫，它從螢幕左邊作用到中間帶偏移的地方，所以其動畫值的範圍是：
begin: screenWidth, end: screenWidth / 2 - offset
相應的，【Dojo】Text的動畫，也類似：
begin: screenWidth, end: screenWidth / 2 + offset
動畫管理
在確定的動畫值的範圍之後，實際上Tween就已經確定了，這裡介紹一個動畫管理的技巧，透過一個類來封裝Widget所需要的不同的Tween，這樣可以將動畫的邏輯和Widget進行解耦，程式碼如下所示。
import 'package:flutter/material.dart';
class SplashAnimManager {
final AnimationController controller;
final Animation<double> animLeft;
final Animation<double> animRight;
final double screenWidth;
final double offset;
SplashAnimManager(this.controller, this.screenWidth, this.offset)
: animLeft = Tween(begin: screenWidth, end: screenWidth / 2 - offset).animate(
CurvedAnimation(
parent: controller,
curve: Curves.easeIn,
),
),
animRight = Tween(begin: screenWidth, end: screenWidth / 2 + offset).animate(
CurvedAnimation(
parent: controller,
curve: Curves.easeIn,
),
);
}
這裡僅僅是為了演示這種動畫管理的思想，才將僅僅兩個動畫寫在了管理類中。
-
3 # 使用者1644891194934
指的是：
閃屏，就是SplashScreen，也可以說是啟動畫面，就是啟動的時候，閃(展示)一下，持續數秒後，自動關閉。
android的實現非常簡單，使用Handler物件的postDelayed方法就可以實現。在這個方法裡傳遞一個Runnable物件和一個延遲的時間。該方法實現了一個延遲執行的效果，延遲的時間由第2個引數指定，單位是毫秒。第一個引數是Runnable物件，裡面包含了延遲後需要執行的操作。
回覆列表
閃屏動畫就是最原始的那種動畫就是根據人們去畫一個動作一個動作可能要很多頁紙那種。