Ionic實現動畫與SVG的動態背景
阿新 • • 發佈：2019-02-11
最近我寫了一些內容在SVG（可縮放向量圖形），主要是因為他們就是很炫酷效果吸引我。
我已經建立的內容主要是介紹和漂亮的動畫的話我一直使用簡單的CSS動畫和關鍵幀，所以我想解決一個更真實的問題和創造的東西，看起來真的很酷。
我想要建立的是一個應用程式的背景，它將有一個圖形表示的時間或天氣。它可能是中午和晴天，多雲，夜間，甚至日落（有點像iOS上的預設天氣應用）- SVG是一個完美的候選人。由於我們可以用JavaScript來操縱SVG的部分，我們可以從一個單一的SVG和修改它的飛行。如果原來的SVG是一個陽光燦爛的日子，在天空中的雲，我們可以刪除太陽和改變天空的顏色，使之成為夜間時間，或者我們可以移動到螢幕底部的太陽，使背景橙建立日落效應。
這就是我最終效果的展示：
這是一個相當基本的實現，但它很酷，對不對？在未來，我想延長這一點，以便它自動調整時間和天氣，但現在它允許您切換之間的各種預定義的設定（白天，晚上，日落，多雲）。
在本教程中，我將通過如何使用SVG在ionic建立動態背景。我不會走過實際的SVG創作，只是修改它，所以如果你不熟悉SVG是如何建立的，我建議看第一個：SVG動畫ionic。
1、建立新的ionic應用
我們將首先產生一個新的空白ionic應用程式，這樣做只執行下面的命令：
ionic start ionic-sunset blank
一旦已經完成生成，你應該使它成為你的工作目錄：
cd ionic-sunset
我們只是將SVG動畫新增到自動生成的主頁上，因此不再需要設定。
2、設定SVG
在我們做任何事情前，這是SVG看起來像插畫：
將直接嵌入到應用程式中。
修改 src/pages/home/home.html :
<ion-content>
<defs>
<style>
.cls-1
{
fill:
url(#linear-gradient);
}
.cls-2
{
fill:
#fefbdf;opacity:
0.07;
}
.cls-3
{
fill:
#ffda71;
}
.cls-4,
.cls-5 {
fill:
#fff;
}
.cls-4
{
opacity:
0.95;
}
</style>
<linearGradient
id="linear-gradient"
x1="375"
y1="1334"
x2="375"
gradientUnits="userSpaceOnUse">
<stop
offset="0"
stop-color="#fff"/>
<stop
offset="1"
stop-color="#50a7dd"/>
</linearGradient>
</defs>
<title>sunsetsvg</title>