2. 程式人生 > IOS開發 >用 SwiftUI 實現酷炫的顏色切換動畫

用 SwiftUI 實現酷炫的顏色切換動畫

阿新 • • 發佈：2020-06-24

用 SwiftUI 實現酷炫的顏色切換動畫

老鐵們，是時候燥起來了！本文中我們將學習如何使用 SwiftUI 中的 Paths 和 AnimatableData 來製作顏色切換動畫。

這些快速切換的動畫是怎麼實現的呢？讓我們來看下文吧！

基礎

要實現動畫的關鍵是在 SwiftUI 中建立一個實現 Shape 協議的結構體。我們把它命名為 SplashShape

。在 Shape 協議中，有一個方法叫做 path(in rect: CGRect) -> Path，這個方法可以用來設定圖形的外觀。我們就用這個方法來實現本文中的各種動畫。

建立 SplashShape 結構體

下面我們建立一個叫做 SplashStruct 的結構體，它繼承於 Shape 協議。

import SwiftUI

struct SplashShape: Shape {
    
    func path(in rect: CGRect) -> Path {
        return Path()
    }
}
複製程式碼

我們首先建立兩種動畫型別：leftToRight

和 rightToLeft，效果如下所示：

`leftToRight` & `rightToLeft`

Splash 動畫

我們建立一個名為 SplashAnimation 的列舉來定義動畫型別，便於以後更方便地擴充套件新動畫（文章末尾可以驗證！）。

import SwiftUI

struct SplashShape: Shape {
    
    public enum SplashAnimation {
        case leftToRight
        case rightToleft
    }
    
    func path(in rect: CGRect) -> Path {
        return
 
 Path()
    }
}
複製程式碼

在 path() 方法中，我們可以選擇需要使用的動畫，並且返回動畫的 Path。但是首先，我們必須建立變數來儲存動畫型別，記錄動畫過程。

import SwiftUI

struct SplashShape: Shape {
    
    public enum SplashAnimation {
        case leftToRight
        case rightToleft
    }
    
    var progress: CGFloat
    var animationType: SplashAnimation
    
    func path(in rect: CGRect) -> Path {
        return Path()
    }
}
複製程式碼

progress 的取值範圍在 0 和 1 之間，它代表整個動畫的完成進度。當我們編寫 path() 方法時，它就會派上用場。

編寫 path() 方法

跟之前說的一樣，為了返回正確的 Path，我們需要明確正在使用哪一種動畫。在 path() 方法中編寫 switch 語句，並且用上我們之前定義的 animationType。

func path(in rect: CGRect) -> Path {
   switch animationType {
       case .leftToRight:
           return Path()
       case .rightToLeft:
           return Path()
   }
}
複製程式碼

現在這個方法只會返回空 paths。我們需要建立產生真實動畫的方法。

實現動畫方法

在 path() 方法的下面，建立兩個新的方法：leftToRight() 和 rightToLeft()，每個方法表示一種動畫型別。在每個方法體內，我們會建立一個矩形形狀的 Path，它會根據 progress 變數的值隨時間發生變換。

func leftToRight(rect: CGRect) -> Path {
    var path = Path()
    path.move(to: CGPoint(x: 0,y: 0)) // Top Left
    path.addLine(to: CGPoint(x: rect.width * progress,y: 0)) // Top Right
    path.addLine(to: CGPoint(x: rect.width * progress,y: rect.height)) // Bottom Right
    path.addLine(to: CGPoint(x: 0,y: rect.height)) // Bottom Left
    path.closeSubpath() // Close the Path
    return path
}

func rightToLeft(rect: CGRect) -> Path {
    var path = Path()
    path.move(to: CGPoint(x: rect.width,y: 0))
    path.addLine(to: CGPoint(x: rect.width - (rect.width * progress),y: rect.height))
    path.addLine(to: CGPoint(x: rect.width,y: rect.height))
    path.closeSubpath()
    return path
}
複製程式碼

然後在 path() 方法中呼叫上面兩個新方法。

func path(in rect: CGRect) -> Path {
   switch animationType {
       case .leftToRight:
           return leftToRight(rect: rect)
       case .rightToLeft:
           return rightToLeft(rect: rect)
   }
}
複製程式碼

動畫資料

為了確保 Swift 知道在更改 progress變數時如何對 Shape 進行動畫處理，我們需要指定一個響應動畫的變數。在 progress 和 animationType 變數下面，定義 animatableData。這是一個基於Animatable 協議 的變數，它可以通知 SwiftUI 在資料改變時，對檢視進行動畫處理。

var progress: CGFloat
var animationType: SplashAnimation

var animatableData: CGFloat {
    get { return progress }
    set { self.progress = newValue}
}
複製程式碼

`SplashShape` animating as `progress` changes.

顏色切換時產生動畫

到目前為止，我們已經建立了一個 Shape，它將隨著時間的變化而變化。接下來，我們需要將它新增到檢視中，並在檢視顏色改變時自動對其進行動畫處理。這時候我們引入 SplashView。我們將建立一個 SplashView 來自動更新 SplashShape 的 progress 變數。當 SplashView 接收到新的 Color 時，它將觸發動畫。

首先，我們建立 SplashView 結構體。

import SwiftUI

struct SplashView: View {

    var body: some View {
        // SplashShape Here
    }

}
複製程式碼

SplashShape 需要使用 SplashAnimation 列舉作為引數，所以我們會把它作為引數傳遞給 SplashView。另外，我們要在檢視的背景顏色變化時設定動畫，所以我們也要傳遞 Color 引數。這些細節會在我們的初始化方法中詳細說明。

ColorStore 是自定義的 ObservableObject。它用來監聽 SplashView 結構體中 Color 值的改變，以便我們可以初始化 SplashShape 動畫，並最終改變背景顏色。我們稍後展示它的工作原理。

struct SplashView: View {
    
    var animationType: SplashShape.SplashAnimation
    @State private var prevColor: Color // Stores background color
    @ObservedObject var colorStore: ColorStore // Send new color updates

    
    init(animationType: SplashShape.SplashAnimation,color: Color) {
        self.animationType = animationType
        self._prevColor = State<Color>(initialValue: color)
        self.colorStore = ColorStore(color: color)
    }

    var body: some View {
        // SplashShape Here
    }

}

class ColorStore: ObservableObject {
    @Published var color: Color
    
    init(color: Color) {
        self.color = color
    }
}
複製程式碼

構建 SplashView body

在 body 內部，我們需要返回一個 Rectangle，它和 SplashView 當前的顏色保持一致。然後使用之前定義的 ColorStore，以便於我們接收更新的顏色值來驅動動畫。

var body: some View {
    Rectangle()
        .foregroundColor(self.prevColor) // Current Color
        .onReceive(self.colorStore.$color) { color in
            // Animate Color Update Here
        }
}
複製程式碼

當顏色改變時，我們需要記錄 SplashView 中正在改變的顏色和進度。為此，我們定義 layers 變數。

@State var layers: [(Color,CGFloat)] = [] // New Color & Progress
複製程式碼

現在回到 body 變數內部，我們給 layers 變數新增新接收的 Colors 。新增的時候我們把進度設定為 0。然後，在半秒之內的動畫過程中，我們把進度設定為 1。

var body: some View {
    Rectangle()
        .foregroundColor(self.prevColor) // Current Color
        .onReceive(self.colorStore.$color) { color in
            // Animate Color Update Here
            self.layers.append((color,0))
            
            withAnimation(.easeInOut(duration: 0.5)) {
                self.layers[self.layers.count-1].1 = 1.0
            }
        }
}
複製程式碼

現在在這段程式碼中，layers 變數中添加了更新後的顏色，但是顏色並沒有展示出來。為了展示顏色，我們需要在 body 變數內部為 Rectangle 的每一個圖層新增一個覆蓋層。

var body: some View {
    Rectangle()
        .foregroundColor(self.prevColor)
        .overlay(
            ZStack {
                ForEach(layers.indices,id: \.self) { x in
                    SplashShape(progress: self.layers[x].1,animationType: self.animationType)
                        .foregroundColor(self.layers[x].0)
                }

            },alignment: .leading)
        .onReceive(self.colorStore.$color) { color in
            // Animate color update here
            self.layers.append((color,0))

            withAnimation(.easeInOut(duration: 0.5)) {
                self.layers[self.layers.count-1].1 = 1.0
            }
        }
}
複製程式碼

測試效果

你可以在模擬器中執行下面的程式碼。這段程式碼的意思是，當你點選 ContentView 中的按鈕時，它會計算 index 來選擇 SplashView 中的顏色，同時也會觸發 ColorStore 內部的更新。所以，當 SplashShape 圖層新增到 SplashView 時，就會觸發動畫。

import SwiftUI

struct ContentView: View {
    var colors: [Color] = [.blue,.red,.green,.orange]
    @State var index: Int = 0
    
    @State var progress: CGFloat = 0
    var body: some View {
        VStack {
           
            SplashView(animationType: .leftToRight,color: self.colors[self.index])
                .frame(width: 200,height: 100,alignment: .center)
                .cornerRadius(10)
                .shadow(color: Color.black.opacity(0.2),radius: 10,x: 0,y: 4)
            
            Button(action: {
                self.index = (self.index + 1) % self.colors.count
            }) {
                Text("Change Color")
            }
            .padding(.top,20)
        }
  
    }
}
複製程式碼

Color Changing Goodness!

還沒有完成！

我們還有一個功能沒實現。現在我們持續地把圖層新增到 SplashView 上，但是沒有刪除它們。因此，我們需要在動畫完成時把這些圖層清理掉。

在 SplashView 結構體 body 變數的 onReceive() 方法內部，做如下改變：

.onReceive(self.colorStore.$color) { color in
    self.layers.append((color,0))

    withAnimation(.easeInOut(duration: 0.5)) {
        self.layers[self.layers.count-1].1 = 1.0
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
            self.prevColor = self.layers[0].0 // Finalizes background color of SplashView
            self.layers.remove(at: 0) // removes itself from layers array
        }
    }
}
複製程式碼

這行程式碼能讓我們刪除 layers 陣列中使用過的值，並確保 SplashView 基於最新更新的值顯示正確的背景色。

展示成果!

您完成了本教程的案例嗎？您可以給我發一個截圖或者連結來展示你的成果。TrailingClosure.com 將會為使用者的成果製作專題。您可以通過 Twitter @TrailingClosure聯絡我們，或者給我們發郵件 [email protected]。

GitHub 原始碼

您可以在我的 Github 上檢視本教程的原始碼！除了顯示的示例外，還包括 SplashShape 和 SplashView 的完整原始碼。 ....但是等等，還有更多！

彩蛋!

如果你熟悉我之前的教程，你應該瞭解我喜歡彩蛋 ?。在本文開頭，我說過會實現更多動畫。此刻終於來了…… 擊鼓……。

Splash 動畫 ?

哈哈哈！！還記得嗎？我說過會新增更多動畫種類。

enum SplashAnimation {
    case leftToRight
    case rightToLeft
    case topToBottom
    case bottomToTop
    case angle(Angle)
    case circle
}

func path(in rect: CGRect) -> Path {

    switch self.animationType {
        case .leftToRight:
            return leftToRight(rect: rect)
        case .rightToLeft:
            return rightToLeft(rect: rect)
        case .topToBottom:
            return topToBottom(rect: rect)
        case .bottomToTop:
            return bottomToTop(rect: rect)
        case .angle(let splashAngle):
            return angle(rect: rect,angle: splashAngle)
        case .circle:
            return circle(rect: rect)
    }

}
複製程式碼

你肯定會想…… “哇,彩蛋也太多了……”。不必苦惱。我們只需要在 SplashShape 的 path() 方法中新增幾個方法，就能搞定。

下面我們逐個動畫來搞定……

topToBottom 和 bottomToTop 動畫

這些方法與 leftToRight 和 rightToLeft 非常相似，它們從 shape 的底部或頂部開始建立 path ，並使用 progress 變數隨時間對其進行變換。

func topToBottom(rect: CGRect) -> Path {
    var path = Path()
    path.move(to: CGPoint(x: 0,y: 0))
    path.addLine(to: CGPoint(x: rect.width,y: rect.height * progress))
    path.addLine(to: CGPoint(x: 0,y: rect.height * progress))
    path.closeSubpath()
    return path
}

func bottomToTop(rect: CGRect) -> Path {
    var path = Path()
    path.move(to: CGPoint(x: 0,y: rect.height - (rect.height * progress)))
    path.addLine(to: CGPoint(x: 0,y: rect.height - (rect.height * progress)))
    path.closeSubpath()
    return path
}
複製程式碼

circle 動畫

如果你還記得小學幾何知識，就應該瞭解勾股定理。a^2 + b^2 = c^2

`c` is the radius of the final circle our path needs to draw

a 和 b 可以視為矩形的 高度 和 寬度，我們能夠根據它們求得 c，即覆蓋整個矩形所需的圓的半徑。我們以此為基礎構建圓的 path，並使用 progress 變數隨時間對它進行變換。

func circle(rect: CGRect) -> Path {
    let a: CGFloat = rect.height / 2.0
    let b: CGFloat = rect.width / 2.0

    let c = pow(pow(a,2) + pow(b,2),0.5) // a^2 + b^2 = c^2  --> Solved for 'c'
    // c = radius of final circle

    let radius = c * progress
    // Build Circle Path
    var path = Path()
    path.addArc(center: CGPoint(x: rect.midX,y: rect.midY),radius: radius,startAngle: Angle(degrees: 0),endAngle: Angle(degrees: 360),clockwise: true)
    return path

}
複製程式碼

Animating Using a Circle Path

angle 動畫

這個動畫知識點有點多。你需要使用切線計算角度的斜率，然後根據這個斜率建立一條直線。在矩形上移動這條直線時，根據它來繪製一個直角三角形。參見下圖，各種彩色的線表示該線隨時間移動時，覆蓋整個矩形的狀態。

The line moves in order from the red,blue,green,then purple. to cover the rectangle

方法如下：

func angle(rect: CGRect,angle: Angle) -> Path {
        
    var cAngle = Angle(degrees: angle.degrees.truncatingRemainder(dividingBy: 90))

    // Return Path Using Other Animations (topToBottom,leftToRight,etc) if angle is 0,90,180,270
    if angle.degrees == 0 || cAngle.degrees == 0 { return leftToRight(rect: rect)}
    else if angle.degrees == 90 || cAngle.degrees == 90 { return topToBottom(rect: rect)}
    else if angle.degrees == 180 || cAngle.degrees == 180 { return rightToLeft(rect: rect)}
    else if angle.degrees == 270 || cAngle.degrees == 270 { return bottomToTop(rect: rect)}


    // Calculate Slope of Line and inverse slope
    let m = CGFloat(tan(cAngle.radians))
    let m_1 = pow(m,-1) * -1
    let h = rect.height
    let w = rect.width

    // tan (angle) = slope of line
    // y = mx + b ---> b = y - mx   ~ 'b' = y intercept
    let b = h - (m_1 * w) // b = y - (m * x)

    // X and Y coordinate calculation
    var x = b * m * progress
    var y = b * progress

    // Triangle Offset Calculation
    let xOffset = (angle.degrees > 90 && angle.degrees < 270) ? rect.width : 0
    let yOffset = (angle.degrees > 180 && angle.degrees < 360) ? rect.height : 0

    // Modify which side the triangle is drawn from depending on the angle
    if angle.degrees > 90 && angle.degrees < 180 { x *= -1 }
    else if angle.degrees > 180 && angle.degrees < 270 { x *= -1; y *= -1 }
    else if angle.degrees > 270 && angle.degrees < 360 { y *= -1 }

    // Build Triangle Path
    var path = Path()
    path.move(to: CGPoint(x: xOffset,y: yOffset))
    path.addLine(to: CGPoint(x: xOffset + x,y: yOffset))
    path.addLine(to: CGPoint(x: xOffset,y: yOffset + y))
    path.closeSubpath()
    return path

}
複製程式碼

Angles 45°,135°,225°,315°

請支援我！

您可以用此連結進行訂閱。如果您不是在 TrailingClosure.com上閱讀本文，以後可以來逛逛！

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關推薦

用 SwiftUI 實現酷炫的顏色切換動畫

原文地址：SwiftUI: Animating Color Changes 原文作者：Jean-Marc Boullianne 譯文出自：掘金翻譯計劃

誰說不能用程式碼實現酷炫的文字特效？

HTML5學堂：文字陰影是一個很神奇的屬性，在它還沒有出現之前，網頁中對於陰影的製作一般都是採用Photoshop做成圖片來實現的。而在CSS3流行的當下，我們可以直接使用CSS3的text-shadow屬性來製作陰影，以達到不使用圖

SwiftUI使用Paths和AnimatableData實現酷炫的顏色切換動畫

老鐵們，是時候燥起來了！本文中我們將學習如何使用 SwiftUI 中的 Paths 和 AnimatableData 來製作顏色切換動畫。

用SwiftUI實現3D Scroll滾動效果的實現程式碼

本文介紹了用SwiftUI實現3D Scroll效果的實現程式碼，分享給大家，具體如下： 我們預覽下今天要實現的 3D scroll 效果。學完本教程後，你就可以在你的 App 中把這種 3D 效果加入任何自定義的 SwiftUI 檢視。下面我們

Flutter 實現酷炫的3D效果示例程式碼

此文講解3個酷炫的3D動畫效果。 下面是要實現的效果： Flutter 中3D效果是通過 Transform 元件實現的，沒有變換效果的實現：

Flutter 實現酷炫的3D效果

老孟導讀：此文講解3個酷炫的3D動畫效果。 下面是要實現的效果： Flutter 中3D效果是通過Transform元件實現的，沒有變換效果的實現：

原生JS實現酷炫分頁效果

本文例項為大家分享一個如下效果的分頁特效，是不是很酷炫。 以下是程式碼實現：

JavaScript實現酷炫的滑鼠拖尾特效

看完這個保證你有手就行,製作各種好看的小尾巴! 全部程式碼如下,看註釋可以輕易看懂

WPF自定義Expander控制元件樣式實現酷炫Style

首先,看一下效果圖。 點我看視訊教程 實現思路 1.PS處理兩張選中得特效背景,一張為主選擇得效果圖,另外一張為次選擇項得效果圖。

Python+Kepler.gl輕鬆製作酷炫路徑動畫的實現示例

1. 簡介 Kepler.gl相信很多人都聽說過，作為Uber幾年前開源的互動式地理資訊視覺化工具，kepler.gl依託WebGL強大的圖形渲染能力，可以在瀏覽器端以多種形式輕鬆展示大規模資料集。

我用 CSS3 實現了一個超炫的 3D 載入動畫

今天給大家帶來一個非常炫酷的CSS3載入Loading動畫，它的特別之處在於，整個Loading動畫呈現出了3D的視覺效果。這個Loading載入動畫由12個3D圓柱體圍成一個橢圓形，同時這12個圓柱體依次波浪式地起伏，從而傳遞給使用

pygame用blit()實現動畫效果的示例程式碼

pygame的的實現動畫的方法有很多，但是都是圍繞著表面進行的，也就是說實現動畫的方式不同，但是本質其實都是對錶面的不同處理方式而已。

vue實現點選按鈕切換背景顏色的示例程式碼

用vue簡單的實現點選按鈕切換背景顏色，具體程式碼如下所示： <div class=\"btnTitle\">

六種酷炫Python執行進度條效果的實現程式碼

本文介紹了目前6種比較常用的進度條，讓大家都能直觀地看到指令碼執行最新的進展情況

利用Vue的v-for和v-bind實現列表顏色切換

需求： 在頁面上顯示四個列表，初始時字型為黑色。 滑鼠點選某一個列表時，該列表的顏色變為紅色，其餘列表仍為黑色。

三維資料用二維影象呈現，如何利用 Python 繪製酷炫的 車輛軌跡

問題由來 最近遇到了一類圖，非常好看，並且在其他論文中也多次遇到。比如，在 Trajectory data-based traffic flow studies: A revisit 一文中的圖 1 ，如下圖所示1：

基於WPF的酷炫GUI視窗的實現全過程

title: 基於WPF的酷炫GUI視窗的實現全過程 date: 2020-08-14 permalink: /build/wpfgui sidebarDepth: 2

剛學會 HTML5 不久，最近用 CSS3 實現了熱點地圖動畫

市面上大多數的熱點地圖，都是以 JavaScript 來做的，但是使用 CSS3 製作的熱點地圖倒還真的挺少見的。

Android用tabhost實現 介面切換,每個介面為一個獨立的activity操作

我就廢話不多說了，大家還是直接看程式碼吧~ // 要extends TabActivity public class Main_activity extends TabActivity {

js實現3D粒子酷炫動態旋轉特效

js實現3D粒子酷炫動態旋轉特效（效果比較酷炫，中途不僅有形態的變換，還有顏色的變化，希望大家能夠喜歡）